chore(pricefeeds) fix card component

Author: aditya520

components/ProductCard.tsx

@@ -14,6 +14,11 @@ interface ProductCardProps {
   ctaText: string;
   href: string;
   className?: string;
+  quickActions?: Array<{
+    title: string;
+    href: string;
+    icon: React.ReactNode;
+  }>;
 }
 
 export function ProductCard({
@@ -26,6 +31,7 @@ export function ProductCard({
   ctaText,
   href,
   className = "",
+  quickActions = [],
 }: ProductCardProps) {
   return (
     <div
@@ -65,6 +71,39 @@ export function ProductCard({
         ))}
       </div>
 
+      {/* Quick Actions */}
+      {quickActions.length > 0 && (
+        <div className="grid grid-cols-1 gap-2 mb-6">
+          {quickActions.map((action, index) => (
+            <Link
+              key={index}
+              href={action.href}
+              className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors text-sm"
+            >
+              <div className="text-blue-600 dark:text-blue-400 text-sm flex-shrink-0">
+                {action.icon}
+              </div>
+              <span className="text-gray-700 dark:text-gray-300 font-medium">
+                {action.title}
+              </span>
+              <svg
+                className="w-3 h-3 ml-auto text-gray-400"
+                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>
+      )}
+
       {/* Call to action button - pushed to bottom */}
       <div className="mt-auto">
         <Link

components/icons/ProductIcons.tsx

@@ -9,6 +9,10 @@ import {
   Clock,
   ArrowsOutCardinal,
   DiceSixIcon,
+  ListBullets,
+  Key,
+  Play,
+  BookOpen,
 } from "@phosphor-icons/react";
 
 export function BarChartIcon() {
@@ -46,3 +50,19 @@ export function MultiChainIcon() {
 export function DiceIcon() {
   return <DiceSixIcon className="w-5 h-5" weight="regular" />;
 }
+
+export function ListIcon() {
+  return <ListBullets className="w-5 h-5" weight="regular" />;
+}
+
+export function KeyIcon() {
+  return <Key className="w-5 h-5" weight="regular" />;
+}
+
+export function PlayIcon() {
+  return <Play className="w-5 h-5" weight="regular" />;
+}
+
+export function BookIcon() {
+  return <BookOpen className="w-5 h-5" weight="regular" />;
+}

pages/price-feeds/_meta.json

@@ -6,12 +6,12 @@
   "index": {
     "title": "Introduction"
   },
-  "v3": {
-    "title": "Pro Documentation →",
+  "pro": {
+    "title": "Price Feeds Pro →",
     "href": "/price-feeds/pro"
   },
-  "v2": {
-    "title": "Core Documentation →",
+  "core": {
+    "title": "Price Feeds Core →",
     "href": "/price-feeds/core"
   }
 }

pages/price-feeds/core/use-real-time-data/ton.mdx

@@ -14,16 +14,12 @@ Install the Pyth TON SDK and other necessary dependencies using npm:
 
 <Tabs items={["npm", "yarn"]}>
   <Tabs.Tab>
-    ``` sh copy 
-    npm install @pythnetwork/pyth-ton-js @pythnetwork/hermes-client
-    @ton/core @ton/ton @ton/crypto 
-    ```
+    ``` sh copy npm install @pythnetwork/pyth-ton-js @pythnetwork/hermes-client
+    @ton/core @ton/ton @ton/crypto ```
   </Tabs.Tab>
   <Tabs.Tab>
-    ```sh copy 
-    yarn add @pythnetwork/pyth-ton-js @pythnetwork/hermes-client
-    @ton/core @ton/ton @ton/crypto 
-    ```
+    ```sh copy yarn add @pythnetwork/pyth-ton-js @pythnetwork/hermes-client
+    @ton/core @ton/ton @ton/crypto ```
   </Tabs.Tab>
 </Tabs>
 

pages/price-feeds/index.mdx

@@ -6,13 +6,16 @@ import {
   MultiChainIcon,
   ShieldIcon,
   CodeIcon,
+  ListIcon,
+  KeyIcon,
+  PlayIcon,
 } from "../../components/icons/ProductIcons";
 
-# Pyth Price Feeds
+# 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.
+Pyth Price Feeds 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.
 
-## Choose Your Version
+## Product Options
 
 Pyth offers two main versions of price feeds, each optimized for different use cases:
 
@@ -21,34 +24,54 @@ Pyth offers two main versions of price feeds, each optimized for different use c
     badge="Pro"
     badgeColor="bg-blue-600"
     icon={<LightningIcon />}
-    title="Pyth Price Feeds Pro"
-    description="Next-generation price feeds with ultra-low latency, equities and more."
+    title="Price Feeds Pro"
+    description={<>Next-generation price feeds with ultra-low latency, equities and more. <br /><strong>Previously known as Lazer.</strong></>}
     features={[
       { icon: <LightningIcon />, text: "Ultra-low latency" },
       { icon: <BarChartIcon />, text: "Equities & Indexes" },
       { icon: <MultiChainIcon />, text: "100+ blockchains" },
       { icon: <ShieldIcon />, text: "Real-time" }
     ]}
+    quickActions={[
+      { icon: <ListIcon />, title: "Available Feeds", href: "./price-feeds/pro/price-feed-ids" },
+      { icon: <KeyIcon />, title: "Get API Token", href: "./price-feeds/pro/getting-started" },
+      { icon: <PlayIcon />, title: "Quick Start", href: "./price-feeds/pro/getting-started" }
+    ]}
     ctaText="Explore Pro Documentation"
     href="./price-feeds/pro"
   />
 
 {" "}
 
-{" "}
-
 <ProductCard
   badge="Core"
   badgeColor="bg-green-600"
   icon={<BarChartIcon />}
-  title="Pyth Price Feeds Core"
+  title="Price Feeds Core"
   description="The original Pyth price feeds - stable, secure, and decentralized price data for broad DeFi applications."
   features={[
     { icon: <ClockIcon />, text: "400ms update frequency" },
     { icon: <BarChartIcon />, text: "2000+ price feeds" },
     { icon: <MultiChainIcon />, text: "100+ blockchains" },
     { icon: <ShieldIcon />, text: "Decentralized & secure" },
   ]}
+  quickActions={[
+    {
+      icon: <ListIcon />,
+      title: "Available Feeds",
+      href: "./price-feeds/core/price-feeds",
+    },
+    {
+      icon: <PlayIcon />,
+      title: "Quick Start",
+      href: "./price-feeds/core/getting-started",
+    },
+    {
+      icon: <CodeIcon />,
+      title: "Integration Guide",
+      href: "./price-feeds/core/getting-started",
+    },
+  ]}
   ctaText="Explore Core Documentation"
   href="./price-feeds/core"
 />