chore(pricefeeds) Improve Landing page #812
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| import React from "react"; | ||
| import Link from "next/link"; | ||
|
|
||
| interface ProductCardProps { | ||
| badge: string; | ||
| badgeColor?: string; | ||
| icon: React.ReactNode; | ||
| title: string; | ||
| description: string; | ||
| features: Array<{ | ||
| icon: React.ReactNode; | ||
| text: string; | ||
| }>; | ||
| ctaText: string; | ||
| href: string; | ||
| className?: string; | ||
| } | ||
|
|
||
| export function ProductCard({ | ||
| badge, | ||
| badgeColor = "bg-blue-600", | ||
| icon, | ||
| title, | ||
| description, | ||
| features, | ||
| ctaText, | ||
| href, | ||
| className = "", | ||
| }: ProductCardProps) { | ||
| return ( | ||
| <div | ||
| className={`bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 shadow-sm hover:shadow-md transition-shadow flex flex-col h-full ${className}`} | ||
| > | ||
| {/* Header with badge and icon */} | ||
| <div className="flex items-center gap-3 mb-4"> | ||
| <div | ||
| className={`${badgeColor} text-white text-xs font-semibold px-3 py-1.5 rounded-full`} | ||
| > | ||
| {badge} | ||
| </div> | ||
| <div className="text-gray-600 dark:text-gray-400">{icon}</div> | ||
| </div> | ||
|
|
||
| {/* Title */} | ||
| <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-3 leading-tight"> | ||
| {title} | ||
| </h3> | ||
|
|
||
| {/* Description */} | ||
| <p className="text-gray-700 dark:text-gray-300 text-sm mb-6 leading-relaxed flex-grow"> | ||
| {description} | ||
| </p> | ||
|
|
||
| {/* Features list */} | ||
| <div className="space-y-3 mb-6"> | ||
| {features.map((feature, index) => ( | ||
| <div key={index} className="flex items-center gap-3"> | ||
| <div className="text-blue-600 dark:text-blue-400 text-sm flex-shrink-0"> | ||
| {feature.icon} | ||
| </div> | ||
| <span className="text-gray-600 dark:text-gray-400 text-sm font-medium"> | ||
| {feature.text} | ||
| </span> | ||
| </div> | ||
| ))} | ||
| </div> | ||
|
|
||
| {/* Call to action button - pushed to bottom */} | ||
| <div className="mt-auto"> | ||
| <Link | ||
| href={href} | ||
| className="inline-flex items-center gap-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 px-4 py-2.5 rounded-md hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-sm font-semibold" | ||
| > | ||
| {ctaText} | ||
| <svg | ||
| className="w-4 h-4" | ||
| fill="none" | ||
| stroke="currentColor" | ||
| viewBox="0 0 24 24" | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| strokeWidth={2} | ||
| d="M9 5l7 7-7 7" | ||
| /> | ||
| </svg> | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| import React from "react"; | ||
|
|
||
| export function BarChartIcon() { | ||
| return ( | ||
| <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> | ||
| <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" /> | ||
| </svg> | ||
| ); | ||
| } | ||
|
|
||
|
There was a problem hiding this comment. I would strongly recommend using an icon package like https://github.com/phosphor-icons/homepage so we don't have to paste SVG code here. |
||
| export function ShieldIcon() { | ||
| return ( | ||
| <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> | ||
| <path | ||
| fillRule="evenodd" | ||
| d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" | ||
| clipRule="evenodd" | ||
| /> | ||
| </svg> | ||
| ); | ||
| } | ||
|
|
||
| export function CodeIcon() { | ||
| return ( | ||
| <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> | ||
| <path | ||
| fillRule="evenodd" | ||
| d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" | ||
| clipRule="evenodd" | ||
| /> | ||
| </svg> | ||
| ); | ||
| } | ||
|
|
||
| export function LightningIcon() { | ||
| return ( | ||
| <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> | ||
| <path | ||
| fillRule="evenodd" | ||
| d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" | ||
| clipRule="evenodd" | ||
| /> | ||
| </svg> | ||
| ); | ||
| } | ||
|
|
||
| export function GlobeIcon() { | ||
| return ( | ||
| <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> | ||
| <path | ||
| fillRule="evenodd" | ||
| d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 .34-.028.675-.083 1H15a2 2 0 00-2 2v2.5A1.5 1.5 0 019.5 17h-1A1.5 1.5 0 017 15.5V15a2 2 0 00-2-2H4.332z" | ||
| clipRule="evenodd" | ||
| /> | ||
| </svg> | ||
| ); | ||
| } | ||
|
|
||
| export function DocumentIcon() { | ||
| return ( | ||
| <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> | ||
| <path | ||
| fillRule="evenodd" | ||
| d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" | ||
| clipRule="evenodd" | ||
| /> | ||
| </svg> | ||
| ); | ||
| } | ||
|
|
||
| export function ClockIcon() { | ||
| return ( | ||
| <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> | ||
| <path | ||
| fillRule="evenodd" | ||
| d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" | ||
| clipRule="evenodd" | ||
| /> | ||
| </svg> | ||
| ); | ||
| } | ||
|
|
||
| export function MultiChainIcon() { | ||
| return ( | ||
| <svg | ||
| className="w-5 h-5" | ||
| fill="none" | ||
| stroke="currentColor" | ||
| viewBox="0 0 24 24" | ||
| > | ||
| {/* Three interconnected block-like shapes */} | ||
| <rect | ||
| x="4" | ||
| y="8" | ||
| width="4" | ||
| height="4" | ||
| strokeWidth="2" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| /> | ||
| <rect | ||
| x="16" | ||
| y="8" | ||
| width="4" | ||
| height="4" | ||
| strokeWidth="2" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| /> | ||
| <rect | ||
| x="10" | ||
| y="16" | ||
| width="4" | ||
| height="4" | ||
| strokeWidth="2" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| /> | ||
|
|
||
| {/* Chain-link connections between blocks */} | ||
| <path d="M8 10 L16 10" strokeWidth="2" strokeLinecap="round" /> | ||
| <path d="M12 12 L12 16" strokeWidth="2" strokeLinecap="round" /> | ||
| <path d="M8 10 L12 12" strokeWidth="2" strokeLinecap="round" /> | ||
| <path d="M16 10 L12 12" strokeWidth="2" strokeLinecap="round" /> | ||
| </svg> | ||
| ); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,74 @@ | ||
| import { ProductCard } from "../../components/ProductCard"; | ||
| import { | ||
| BarChartIcon, | ||
| ClockIcon, | ||
| LightningIcon, | ||
| MultiChainIcon, | ||
| ShieldIcon, | ||
| } from "../../components/icons/ProductIcons"; | ||
|
|
||
| # Introduction to Pyth Price Feeds | ||
|
|
||
| Pyth Network provides real-time financial market data to smart contract applications on 100+ blockchains. | ||
| Data is sourced from 120+ first-party providers including major exchanges and market makers. | ||
|
|
||
| ## Key Features | ||
|
|
||
| - **1600+ price feeds** across all major asset classes | ||
| - **Sub-second latency** with high-frequency updates | ||
| - **Cryptographically signed** and verifiable on-chain | ||
| - **Multi-chain support** including EVM, Cosmos, Solana, Aptos, and more | ||
|
|
||
| ## Our Products | ||
|
|
||
| <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8 mb-12"> | ||
| <ProductCard | ||
| badge="Core" | ||
| icon={<BarChartIcon />} | ||
| title="Real-Time Price Feeds" | ||
| description="Real-time, high-fidelity market data for smart contracts." | ||
| features={[ | ||
| { icon: <ClockIcon />, text: "Real-time price feeds" }, | ||
| { icon: <BarChartIcon />, text: "High-frequency data" }, | ||
| { icon: <MultiChainIcon />, text: "Multi-chain support" } | ||
| ]} | ||
| ctaText="Explore Price Feeds" | ||
| href="./price-feeds/use-real-time-data" | ||
| /> | ||
|
|
||
| {" "} | ||
|
|
||
| <ProductCard | ||
| badge="Benchmarks" | ||
| icon={<ClockIcon />} | ||
| title="Historical Data" | ||
| description="Access to historical price data for settlement and backtesting." | ||
| features={[ | ||
| { icon: <BarChartIcon />, text: "Signed data" }, | ||
| { icon: <ShieldIcon />, text: "Verifiable prices" }, | ||
| { icon: <ClockIcon />, text: "Time-stamped prices" }, | ||
| ]} | ||
| ctaText="Access Historical Data" | ||
| href="./price-feeds/use-historic-price-data" | ||
| /> | ||
|
|
||
| <ProductCard | ||
| badge="Lazer" | ||
| icon={<LightningIcon />} | ||
| title="Lazer" | ||
| description="High-performance, low-latency price feeds for institutional applications." | ||
| features={[ | ||
| { icon: <LightningIcon />, text: "Ultra-low latency" }, | ||
| { icon: <ShieldIcon />, text: "Institutional grade" }, | ||
| { icon: <BarChartIcon />, text: "High-frequency data" } | ||
| ]} | ||
| ctaText="Learn About Lazer" | ||
| href="../lazer" | ||
| /> | ||
| </div> | ||
|
|
||
| ## Quick Start | ||
|
|
||
| Follow the [Getting Started](price-feeds/getting-started.mdx) guide to integrate Pyth Price Feeds into your application. | ||
|
|
||
| For contract addresses and deployment details, see [Contract Addresses](./price-feeds/contract-addresses). |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Generally using a package like https://www.npmjs.com/package/clsx is a better solution than appending class names as strings
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I agree. This is just a temp fix to improve navigation.