Skip to content

Commit 0ffdc93

Browse files
aditya520aditya520
authored
chore(pricefeeds) Improve Landing page (#812)
* chore(pricefeeds) Improve Landing page * pre-commit * requested changes
1 parent a2c2ace commit 0ffdc93

File tree

5 files changed

+226
-12
lines changed

5 files changed

+226
-12
lines changed

‎components/ProductCard.tsx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import React from "react";
2+
import Link from "next/link";
3+
4+
interface ProductCardProps {
5+
badge: string;
6+
badgeColor?: string;
7+
icon: React.ReactNode;
8+
title: string;
9+
description: string;
10+
features: Array<{
11+
icon: React.ReactNode;
12+
text: string;
13+
}>;
14+
ctaText: string;
15+
href: string;
16+
className?: string;
17+
}
18+
19+
export function ProductCard({
20+
badge,
21+
badgeColor = "bg-blue-600",
22+
icon,
23+
title,
24+
description,
25+
features,
26+
ctaText,
27+
href,
28+
className = "",
29+
}: ProductCardProps) {
30+
return (
31+
<div
32+
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}`}
33+
>
34+
{/* Header with badge and icon */}
35+
<div className="flex items-center gap-3 mb-4">
36+
<div
37+
className={`${badgeColor} text-white text-xs font-semibold px-3 py-1.5 rounded-full`}
38+
>
39+
{badge}
40+
</div>
41+
<div className="text-gray-600 dark:text-gray-400">{icon}</div>
42+
</div>
43+
44+
{/* Title */}
45+
<h3 className="text-lg font-bold text-gray-900 dark:text-white mb-3 leading-tight">
46+
{title}
47+
</h3>
48+
49+
{/* Description */}
50+
<p className="text-gray-700 dark:text-gray-300 text-sm mb-6 leading-relaxed flex-grow">
51+
{description}
52+
</p>
53+
54+
{/* Features list */}
55+
<div className="space-y-3 mb-6">
56+
{features.map((feature, index) => (
57+
<div key={index} className="flex items-center gap-3">
58+
<div className="text-blue-600 dark:text-blue-400 text-sm flex-shrink-0">
59+
{feature.icon}
60+
</div>
61+
<span className="text-gray-600 dark:text-gray-400 text-sm font-medium">
62+
{feature.text}
63+
</span>
64+
</div>
65+
))}
66+
</div>
67+
68+
{/* Call to action button - pushed to bottom */}
69+
<div className="mt-auto">
70+
<Link
71+
href={href}
72+
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"
73+
>
74+
{ctaText}
75+
<svg
76+
className="w-4 h-4"
77+
fill="none"
78+
stroke="currentColor"
79+
viewBox="0 0 24 24"
80+
>
81+
<path
82+
strokeLinecap="round"
83+
strokeLinejoin="round"
84+
strokeWidth={2}
85+
d="M9 5l7 7-7 7"
86+
/>
87+
</svg>
88+
</Link>
89+
</div>
90+
</div>
91+
);
92+
}

‎components/icons/ProductIcons.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from "react";
2+
import {
3+
ChartBar,
4+
Shield,
5+
Code,
6+
Lightning,
7+
Globe,
8+
FileText,
9+
Clock,
10+
ArrowsOutCardinal,
11+
} from "@phosphor-icons/react";
12+
13+
export function BarChartIcon() {
14+
return <ChartBar className="w-5 h-5" weight="regular" />;
15+
}
16+
17+
export function ShieldIcon() {
18+
return <Shield className="w-5 h-5" weight="regular" />;
19+
}
20+
21+
export function CodeIcon() {
22+
return <Code className="w-5 h-5" weight="regular" />;
23+
}
24+
25+
export function LightningIcon() {
26+
return <Lightning className="w-5 h-5" weight="regular" />;
27+
}
28+
29+
export function GlobeIcon() {
30+
return <Globe className="w-5 h-5" weight="regular" />;
31+
}
32+
33+
export function DocumentIcon() {
34+
return <FileText className="w-5 h-5" weight="regular" />;
35+
}
36+
37+
export function ClockIcon() {
38+
return <Clock className="w-5 h-5" weight="regular" />;
39+
}
40+
41+
export function MultiChainIcon() {
42+
return <ArrowsOutCardinal className="w-5 h-5" weight="regular" />;
43+
}

‎package-lock.json‎

Lines changed: 20 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"@cookbookdev/docsbot": "^4.21.5",
1616
"@headlessui/react": "^1.7.14",
1717
"@metamask/detect-provider": "^2.0.0",
18+
"@phosphor-icons/react": "^2.1.10",
1819
"@pythnetwork/entropy-sdk-solidity": "^2.0.0",
1920
"@pythnetwork/pyth-solana-receiver": "^0.10.2",
2021
"clsx": "^2.1.1",

‎pages/price-feeds/index.mdx‎

Lines changed: 70 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,74 @@
1-
# Introduction
1+
import { ProductCard } from "../../components/ProductCard";
2+
import {
3+
BarChartIcon,
4+
ClockIcon,
5+
LightningIcon,
6+
MultiChainIcon,
7+
ShieldIcon,
8+
} from "../../components/icons/ProductIcons";
29

3-
Pyth Network price feeds provide real-time financial market data to smart contract applications on 100+ blockchains.
4-
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.
5-
Each price feed publishes a [robust aggregate](price-feeds/how-pyth-works/price-aggregation) of these prices multiple times per second.
6-
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.
10+
# Introduction to Pyth Price Feeds
711

8-
Pythnet Price Feeds are available on [100+ blockchain ecosystems](./price-feeds/contract-addresses), and can also be used in off-chain applications.
9-
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),
10-
[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).
11-
More ecosystems are coming soon!
12+
Pyth Network provides real-time financial market data to smart contract applications on 100+ blockchains.
13+
Data is sourced from 120+ first-party providers including major exchanges and market makers.
1214

13-
Follow the [Getting Started](price-feeds/getting-started.mdx) guide to learn more about Pyth and integrate Pyth Price Feeds into your application.
15+
## Key Features
1416

15-
Developers may also consider using [Benchmarks](../benchmarks) to access historical Pyth prices for both on- and off-chain use.
16-
These historical prices can be used for settlement or other similar applications.
17+
- **1600+ price feeds** across all major asset classes
18+
- **Sub-second latency** with high-frequency updates
19+
- **Cryptographically signed** and verifiable on-chain
20+
- **Multi-chain support** including EVM, Cosmos, Solana, Aptos, and more
21+
22+
## Our Products
23+
24+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8 mb-12">
25+
<ProductCard
26+
badge="Core"
27+
icon={<BarChartIcon />}
28+
title="Real-Time Price Feeds"
29+
description="Real-time, high-fidelity market data for smart contracts."
30+
features={[
31+
{ icon: <ClockIcon />, text: "Real-time price feeds" },
32+
{ icon: <BarChartIcon />, text: "High-frequency data" },
33+
{ icon: <MultiChainIcon />, text: "Multi-chain support" }
34+
]}
35+
ctaText="Explore Price Feeds"
36+
href="./price-feeds/use-real-time-data"
37+
/>
38+
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+
55+
<ProductCard
56+
badge="Lazer"
57+
icon={<LightningIcon />}
58+
title="Lazer"
59+
description="High-performance, low-latency price feeds for institutional applications."
60+
features={[
61+
{ icon: <LightningIcon />, text: "Ultra-low latency" },
62+
{ icon: <ShieldIcon />, text: "Institutional grade" },
63+
{ icon: <BarChartIcon />, text: "High-frequency data" }
64+
]}
65+
ctaText="Learn About Lazer"
66+
href="../lazer"
67+
/>
68+
</div>
69+
70+
## Quick Start
71+
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).

0 commit comments

Comments
 (0)