diff --git a/components/ProductCard.tsx b/components/ProductCard.tsx new file mode 100644 index 00000000..a2a8f252 --- /dev/null +++ b/components/ProductCard.tsx @@ -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 ( +
+ {/* Header with badge and icon */} +
+
+ {badge} +
+
{icon}
+
+ + {/* Title */} +

+ {title} +

+ + {/* Description */} +

+ {description} +

+ + {/* Features list */} +
+ {features.map((feature, index) => ( +
+
+ {feature.icon} +
+ + {feature.text} + +
+ ))} +
+ + {/* Call to action button - pushed to bottom */} +
+ + {ctaText} + + + + +
+
+ ); +} diff --git a/components/icons/ProductIcons.tsx b/components/icons/ProductIcons.tsx new file mode 100644 index 00000000..f21a7221 --- /dev/null +++ b/components/icons/ProductIcons.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import { + ChartBar, + Shield, + Code, + Lightning, + Globe, + FileText, + Clock, + ArrowsOutCardinal, +} from "@phosphor-icons/react"; + +export function BarChartIcon() { + return ; +} + +export function ShieldIcon() { + return ; +} + +export function CodeIcon() { + return ; +} + +export function LightningIcon() { + return ; +} + +export function GlobeIcon() { + return ; +} + +export function DocumentIcon() { + return ; +} + +export function ClockIcon() { + return ; +} + +export function MultiChainIcon() { + return ; +} diff --git a/package-lock.json b/package-lock.json index 42da8276..5ebc0d7e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@cookbookdev/docsbot": "^4.21.5", "@headlessui/react": "^1.7.14", "@metamask/detect-provider": "^2.0.0", + "@phosphor-icons/react": "^2.1.10", "@pythnetwork/entropy-sdk-solidity": "^2.0.0", "@pythnetwork/pyth-solana-receiver": "^0.10.2", "clsx": "^2.1.1", @@ -4658,6 +4659,19 @@ "resolved": "https://registry.npmjs.org/@open-draft/deferred-promise/-/deferred-promise-2.1.0.tgz", "integrity": "sha512-Rzd5JrXZX8zErHzgcGyngh4fmEbSHqTETdGj9rXtejlqMIgXFlyKBA7Jn1Xp0Ls0M0Y22+xHcWiEzbmdWl0BOA==" }, + "node_modules/@phosphor-icons/react": { + "version": "2.1.10", + "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.10.tgz", + "integrity": "sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA==", + "license": "MIT", + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">= 16.8", + "react-dom": ">= 16.8" + } + }, "node_modules/@pkgr/utils": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.4.1.tgz", @@ -26284,6 +26298,12 @@ "resolved": "https://registry.npmjs.org/@open-draft/deferred-promise/-/deferred-promise-2.1.0.tgz", "integrity": "sha512-Rzd5JrXZX8zErHzgcGyngh4fmEbSHqTETdGj9rXtejlqMIgXFlyKBA7Jn1Xp0Ls0M0Y22+xHcWiEzbmdWl0BOA==" }, + "@phosphor-icons/react": { + "version": "2.1.10", + "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.10.tgz", + "integrity": "sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA==", + "requires": {} + }, "@pkgr/utils": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.4.1.tgz", diff --git a/package.json b/package.json index c527e5d0..76b0208d 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@cookbookdev/docsbot": "^4.21.5", "@headlessui/react": "^1.7.14", "@metamask/detect-provider": "^2.0.0", + "@phosphor-icons/react": "^2.1.10", "@pythnetwork/entropy-sdk-solidity": "^2.0.0", "@pythnetwork/pyth-solana-receiver": "^0.10.2", "clsx": "^2.1.1", diff --git a/pages/price-feeds/index.mdx b/pages/price-feeds/index.mdx index 26730d63..354dd122 100644 --- a/pages/price-feeds/index.mdx +++ b/pages/price-feeds/index.mdx @@ -1,16 +1,74 @@ -# Introduction +import { ProductCard } from "../../components/ProductCard"; +import { + BarChartIcon, + ClockIcon, + LightningIcon, + MultiChainIcon, + ShieldIcon, +} from "../../components/icons/ProductIcons"; -Pyth Network price feeds provide real-time financial market data to smart contract applications on 100+ blockchains. -Pyth's market data is contributed by over [120+ reputable first-party data providers](https://insights.pyth.network/publishers?utm_source=docs), including some of the biggest exchanges and market making firms in the world. -Each price feed publishes a [robust aggregate](price-feeds/how-pyth-works/price-aggregation) of these prices multiple times per second. -The protocol offers over [1300+ price feeds](https://pyth.network/price-feeds/) covering a number of different asset classes, including US equities, commodities, and cryptocurrencies. +# Introduction to Pyth Price Feeds -Pythnet Price Feeds are available on [100+ blockchain ecosystems](./price-feeds/contract-addresses), and can also be used in off-chain applications. -They are available on mainnet for most [EVM chains](price-feeds/use-real-time-data/evm.md) -- including Ethereum, BNB, Avalanche, and more --several [Cosmos chains](price-feeds/use-real-time-data/cosmwasm.md), [Solana](https://docs.pyth.network/price-feeds/use-real-time-data/solana), -[Aptos](price-feeds/use-real-time-data/aptos.md), [Sui](price-feeds/use-real-time-data/sui.md), [Ton](price-feeds/use-real-time-data/ton.md), and [NEAR](price-feeds/use-real-time-data/near.md). -More ecosystems are coming soon! +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. -Follow the [Getting Started](price-feeds/getting-started.mdx) guide to learn more about Pyth and integrate Pyth Price Feeds into your application. +## Key Features -Developers may also consider using [Benchmarks](../benchmarks) to access historical Pyth prices for both on- and off-chain use. -These historical prices can be used for settlement or other similar applications. +- **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 + +
+ } + title="Real-Time Price Feeds" + description="Real-time, high-fidelity market data for smart contracts." + features={[ + { icon: , text: "Real-time price feeds" }, + { icon: , text: "High-frequency data" }, + { icon: , text: "Multi-chain support" } + ]} + ctaText="Explore Price Feeds" + href="./price-feeds/use-real-time-data" + /> + +{" "} + +} + title="Historical Data" + description="Access to historical price data for settlement and backtesting." + features={[ + { icon: , text: "Signed data" }, + { icon: , text: "Verifiable prices" }, + { icon: , text: "Time-stamped prices" }, + ]} + ctaText="Access Historical Data" + href="./price-feeds/use-historic-price-data" +/> + + } + title="Lazer" + description="High-performance, low-latency price feeds for institutional applications." + features={[ + { icon: , text: "Ultra-low latency" }, + { icon: , text: "Institutional grade" }, + { icon: , text: "High-frequency data" } + ]} + ctaText="Learn About Lazer" + href="../lazer" + /> +
+ +## 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).