@@ -5,7 +5,11 @@ import {
55 LightningIcon ,
66 MultiChainIcon ,
77 ShieldIcon ,
8+ CodeIcon ,
89} from " ../../components/icons/ProductIcons" ;
10+ import ContractIcon from " ../../components/icons/ContractIcon" ;
11+ import SearchIcon from " ../../components/icons/SearchIcon" ;
12+ import { Cards , Card } from " nextra/components" ;
913
1014# Introduction to Pyth Price Feeds
1115
@@ -14,44 +18,145 @@ Data is sourced from 120+ first-party providers including major exchanges and ma
1418
1519## Key Features
1620
17- - ** 1600 + price feeds** across all major asset classes
21+ - ** 2000 + price feeds** across all major asset classes
1822- ** Sub-second latency** with high-frequency updates
1923- ** Cryptographically signed** and verifiable on-chain
2024- ** Multi-chain support** including EVM, Cosmos, Solana, Aptos, and more
2125
2226## Our Products
2327
24- <div className = " grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8 mb-12" >
28+ { /* Real-Time Price Feeds - Two Column Layout */ }
29+
30+ <div className = " mb-12 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-shadow overflow-hidden" >
31+ <div className = " grid grid-cols-1 lg:grid-cols-2 gap-0" >
32+ { /* Left Column - Product Information */ }
33+ <div className = " p-6 border-r border-gray-200 dark:border-gray-700" >
34+ <div className = " flex items-center gap-3 mb-4" >
35+ <div className = " bg-blue-600 text-white text-xs font-semibold px-3 py-1.5 rounded-full" >
36+ Core
37+ </div >
38+ <div className = " text-gray-600 dark:text-gray-400" ><BarChartIcon /></div >
39+ </div >
40+
41+ <h3 className = " text-lg font-bold text-gray-900 dark:text-white mb-3 leading-tight" >
42+ Real-Time Price Feeds
43+ </h3 >
44+
45+ <p className = " text-gray-700 dark:text-gray-300 text-sm mb-6 leading-relaxed" >
46+ Real-time, high-fidelity market data for smart contracts.
47+ </p >
48+
49+ { /* Features */ }
50+ <div className = " space-y-3 mb-6" >
51+ <div className = " flex items-center gap-3" >
52+ <div className = " text-blue-600 dark:text-blue-400 text-sm flex-shrink-0" >
53+ <ClockIcon />
54+ </div >
55+ <span className = " text-gray-600 dark:text-gray-400 text-sm font-medium" >
56+ Real-time price feeds
57+ </span >
58+ </div >
59+ <div className = " flex items-center gap-3" >
60+ <div className = " text-blue-600 dark:text-blue-400 text-sm flex-shrink-0" >
61+ <BarChartIcon />
62+ </div >
63+ <span className = " text-gray-600 dark:text-gray-400 text-sm font-medium" >
64+ High-frequency data
65+ </span >
66+ </div >
67+ <div className = " flex items-center gap-3" >
68+ <div className = " text-blue-600 dark:text-blue-400 text-sm flex-shrink-0" >
69+ <MultiChainIcon />
70+ </div >
71+ <span className = " text-gray-600 dark:text-gray-400 text-sm font-medium" >
72+ Multi-chain support
73+ </span >
74+ </div >
75+ </div >
76+
77+ <div className = " flex" >
78+ <a
79+ href = " ./price-feeds/use-real-time-data"
80+ 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"
81+ >
82+ Explore Price Feeds
83+ <svg className = " w-4 h-4" fill = " none" stroke = " currentColor" viewBox = " 0 0 24 24" >
84+ <path strokeLinecap = " round" strokeLinejoin = " round" strokeWidth = { 2 } d = " M9 5l7 7-7 7" />
85+ </svg >
86+ </a >
87+ </div >
88+ </div >
89+
90+ { /* Right Column - Integration Methods */ }
91+ <div className = " p-6 bg-gray-50 dark:bg-gray-900" >
92+ <h4 className = " text-lg font-semibold text-gray-900 dark:text-white mb-4" >Integration Methods</h4 >
93+ <div className = " space-y-6" >
94+ { /* Pull Architecture */ }
95+ <div className = " space-y-3" >
96+ <div className = " flex items-center gap-3" >
97+ <div className = " w-2 h-2 bg-green-500 rounded-full" ></div >
98+ <h5 className = " font-medium text-gray-900 dark:text-white" >Pull Architecture</h5 >
99+ </div >
100+ <p className = " text-sm text-gray-600 dark:text-gray-400 ml-5" >
101+ Update prices on-demand, permissionlessly every 400ms.
102+ </p >
103+ <div className = " ml-5" >
104+ <a
105+ href = " ./price-feeds/use-real-time-data"
106+ className = " inline-flex items-center gap-2 bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md transition-colors text-sm font-medium"
107+ >
108+ Integrate Pull Method
109+ <svg className = " w-4 h-4" fill = " none" stroke = " currentColor" viewBox = " 0 0 24 24" >
110+ <path strokeLinecap = " round" strokeLinejoin = " round" strokeWidth = { 2 } d = " M9 5l7 7-7 7" />
111+ </svg >
112+ </a >
113+ </div >
114+ </div >
115+
116+ { /* Push Architecture */ }
117+ <div className = " space-y-3" >
118+ <div className = " flex items-center gap-3" >
119+ <div className = " w-2 h-2 bg-blue-500 rounded-full" ></div >
120+ <h5 className = " font-medium text-gray-900 dark:text-white" >Push Architecture</h5 >
121+ </div >
122+ <p className = " text-sm text-gray-600 dark:text-gray-400 ml-5" >
123+ Pyth Data Association sponsored updates to make prices available directly from smart contracts.
124+ </p >
125+ <div className = " ml-5" >
126+ <a
127+ href = " ./price-feeds/pushed-feeds"
128+ className = " inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition-colors text-sm font-medium"
129+ >
130+ Explore Push Feeds
131+ <svg className = " w-4 h-4" fill = " none" stroke = " currentColor" viewBox = " 0 0 24 24" >
132+ <path strokeLinecap = " round" strokeLinejoin = " round" strokeWidth = { 2 } d = " M9 5l7 7-7 7" />
133+ </svg >
134+ </a >
135+ </div >
136+ </div >
137+ </div >
138+ </div >
139+
140+ </div >
141+ </div >
142+
143+ { /* Other Products Grid */ }
144+
145+ <div className = " grid grid-cols-1 md:grid-cols-2 gap-8 mb-12" >
25146 <ProductCard
26- badge = " Core "
27- icon = { <BarChartIcon />}
28- title = " Real-Time Price Feeds "
29- description = " Real-time, high-fidelity market data for smart contracts ."
147+ badge = " Benchmarks "
148+ icon = { <ClockIcon />}
149+ title = " Historical Data "
150+ description = " Access to historical price data for settlement and backtesting ."
30151 features = { [
31- { icon: <ClockIcon />, text: " Real-time price feeds " },
32- { icon: <BarChartIcon />, text: " High-frequency data " },
33- { icon: <MultiChainIcon />, text: " Multi-chain support " }
152+ { icon: <BarChartIcon />, text: " Signed data " },
153+ { icon: <ShieldIcon />, text: " Verifiable prices " },
154+ { icon: <ClockIcon />, text: " Time-stamped prices " },
34155 ]}
35- ctaText = " Explore Price Feeds "
36- href = " ./price-feeds/use-real-time -data"
156+ ctaText = " Access Historical Data "
157+ href = " ./price-feeds/use-historic-price -data"
37158 />
38159
39- { " " }
40-
41- <ProductCard
42- badge = " Benchmarks"
43- icon = { <ClockIcon />}
44- title = " Historical Data"
45- description = " Access to historical price data for settlement and backtesting."
46- features = { [
47- { icon: <BarChartIcon />, text: " Signed data" },
48- { icon: <ShieldIcon />, text: " Verifiable prices" },
49- { icon: <ClockIcon />, text: " Time-stamped prices" },
50- ]}
51- ctaText = " Access Historical Data"
52- href = " ./price-feeds/use-historic-price-data"
53- />
54-
55160 <ProductCard
56161 badge = " Lazer"
57162 icon = { <LightningIcon />}
@@ -69,6 +174,30 @@ Data is sourced from 120+ first-party providers including major exchanges and ma
69174
70175## Quick Start
71176
72- Follow the [ Getting Started] ( price-feeds/getting-started.mdx ) guide to integrate Pyth Price Feeds into your application.
73-
74- For contract addresses and deployment details, see [ Contract Addresses] ( ./price-feeds/contract-addresses ) .
177+ <Cards >
178+ <Card
179+ icon = { <ClockIcon />}
180+ title = " Getting Started"
181+ href = " ./price-feeds/getting-started"
182+ />
183+ <Card
184+ icon = { <ContractIcon />}
185+ title = " Contract Addresses"
186+ href = " ./price-feeds/contract-addresses"
187+ />
188+ <Card
189+ icon = { <LightningIcon />}
190+ title = " Push Feeds"
191+ href = " ./price-feeds/pushed-feeds"
192+ />
193+ <Card
194+ icon = { <CodeIcon />}
195+ title = " API Reference"
196+ href = " ./price-feeds/api-reference"
197+ />
198+ <Card
199+ icon = { <SearchIcon />}
200+ title = " Price Feed IDs"
201+ href = " ./price-feeds/price-feed-ids"
202+ />
203+ </Cards >
0 commit comments