chore(pricefeeds) Improve Landing page

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 (
+    <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>
+  );
+}

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 <ChartBar className="w-5 h-5" weight="regular" />;
+}
+
+export function ShieldIcon() {
+  return <Shield className="w-5 h-5" weight="regular" />;
+}
+
+export function CodeIcon() {
+  return <Code className="w-5 h-5" weight="regular" />;
+}
+
+export function LightningIcon() {
+  return <Lightning className="w-5 h-5" weight="regular" />;
+}
+
+export function GlobeIcon() {
+  return <Globe className="w-5 h-5" weight="regular" />;
+}
+
+export function DocumentIcon() {
+  return <FileText className="w-5 h-5" weight="regular" />;
+}
+
+export function ClockIcon() {
+  return <Clock className="w-5 h-5" weight="regular" />;
+}
+
+export function MultiChainIcon() {
+  return <ArrowsOutCardinal className="w-5 h-5" weight="regular" />;
+}

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",

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
+
+<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).