From 2d9890a70cf9d5b39f4f6d5828e7d4ccc3975db8 Mon Sep 17 00:00:00 2001
From: Aditya Arora <arora.aditya520@gmail.com>
Date: Tue, 30 Sep 2025 11:37:42 +0530
Subject: [PATCH 1/2] chore(dev-hub)-core-landing page

---
 .../src/app/price-feeds/core/page.tsx         |   7 +
 .../src/components/Core/architecture-tabs.tsx | 124 ++++++++++++++++++
 .../Pages/CoreLandingPage/index.tsx           | 114 ++++++++++++++++
 3 files changed, 245 insertions(+)
 create mode 100644 apps/developer-hub/src/app/price-feeds/core/page.tsx
 create mode 100644 apps/developer-hub/src/components/Core/architecture-tabs.tsx
 create mode 100644 apps/developer-hub/src/components/Pages/CoreLandingPage/index.tsx

diff --git a/apps/developer-hub/src/app/price-feeds/core/page.tsx b/apps/developer-hub/src/app/price-feeds/core/page.tsx
new file mode 100644
index 0000000000..88b28fda10
--- /dev/null
+++ b/apps/developer-hub/src/app/price-feeds/core/page.tsx
@@ -0,0 +1,7 @@
+import { CoreLandingPage } from "../../../components/Pages/CoreLandingPage"
+
+export default function Page() {
+  return <CoreLandingPage />
+}
+
+
diff --git a/apps/developer-hub/src/components/Core/architecture-tabs.tsx b/apps/developer-hub/src/components/Core/architecture-tabs.tsx
new file mode 100644
index 0000000000..cc302b1d2c
--- /dev/null
+++ b/apps/developer-hub/src/components/Core/architecture-tabs.tsx
@@ -0,0 +1,124 @@
+"use client"
+
+import { TabList } from "@pythnetwork/component-library/TabList"
+import { Tabs as UnstyledTabs } from "@pythnetwork/component-library/unstyled/Tabs"
+import { Button } from "@pythnetwork/component-library/Button"
+import { ArrowRight as ArrowRightIcon } from "@phosphor-icons/react/dist/ssr"
+import { useState } from "react"
+
+type TabId = "pull" | "pusher" | "historical"
+
+export function ArchitectureTabs() {
+  const [activeTab, setActiveTab] = useState<TabId>("pull")
+
+  function renderDiagram() {
+    if (activeTab === "historical") {
+      return (
+        <div className="flex items-center justify-center gap-6 p-6">
+          <div className="text-center">
+            <div className="text-4xl mb-2">📊</div>
+            <div className="text-gray-700 dark:text-gray-300">Historical Data</div>
+          </div>
+        </div>
+      )
+    }
+
+    const nodes = activeTab === "pull"
+      ? ["Publishers", "Pythnet", "User", "Your Contract"]
+      : ["Publishers", "Pythnet", "Price Pusher", "Your Contract"]
+
+    return (
+      <div className="w-full overflow-x-auto">
+        <svg role="img" aria-label="Data flow diagram" className="w-full max-w-2xl mx-auto" height="160" viewBox="0 0 800 160">
+          {nodes.map((label, i) => {
+            const x = 80 + i * 240
+            return (
+              <g key={label}>
+                <rect x={x - 70} y={40} width={140} height={56} rx={12} className="fill-white dark:fill-[#0B0F1A] stroke-gray-200 dark:stroke-gray-700" strokeWidth={1} />
+                <text x={x} y={72} textAnchor="middle" className="fill-gray-900 dark:fill-white" fontSize="14">{label}</text>
+              </g>
+            )
+          })}
+          {[0,1,2].map(i => {
+            const x1 = 80 + i * 240 + 70
+            const x2 = 80 + (i+1) * 240 - 70
+            const points = `${String(x2 - 10)},63 ${String(x2 - 10)},73 ${String(x2)},68`
+            return (
+              <g key={i}>
+                <line x1={x1} y1={68} x2={x2} y2={68} className="stroke-blue-500" strokeWidth={2} />
+                <polygon points={points} className="fill-blue-500" />
+              </g>
+            )
+          })}
+        </svg>
+      </div>
+    )
+  }
+
+  function renderContent() {
+    if (activeTab === "pull") return (
+      <div className="space-y-4">
+        <p className="text-gray-700 dark:text-gray-300">
+          Publishers stream signed updates to Pythnet roughly every 400 ms. Your app pulls and verifies
+          prices on demand, then your contract updates via <code className="font-mono">updatePriceFeeds</code>.
+        </p>
+        <Button isDisabled className="inline-flex items-center gap-2 px-4 py-2">
+          Read Pull Integration Guide
+          <ArrowRightIcon size={18} />
+        </Button>
+      </div>
+    )
+
+    if (activeTab === "pusher") return (
+      <div className="space-y-4">
+        <p className="text-gray-700 dark:text-gray-300">
+          Automate on-chain updates using a Price Pusher. It listens to Pythnet and pushes fresh prices to
+          your contracts on your chosen schedule and conditions.
+        </p>
+        <Button isDisabled className="inline-flex items-center gap-2 px-4 py-2">
+          Deploy a Price Pusher
+          <ArrowRightIcon size={18} />
+        </Button>
+      </div>
+    )
+
+    if (activeTab === "historical") return (
+      <div className="space-y-4">
+        <p className="text-gray-700 dark:text-gray-300">
+          Explore cryptographically verifiable historical prices for auditing, analytics, and backtesting.
+        </p>
+        <Button isDisabled className="inline-flex items-center gap-2 px-4 py-2">
+          Explore Historical Prices
+          <ArrowRightIcon size={18} />
+        </Button>
+      </div>
+    )
+
+    return null
+  }
+
+  const items = [
+    { id: "pull", href: "#pull", children: "Pull", onPress: () => { setActiveTab("pull") } },
+    { id: "pusher", href: "#pusher", children: "Price Pusher", onPress: () => { setActiveTab("pusher") } },
+    { id: "historical", href: "#historical", children: "Historical", onPress: () => { setActiveTab("historical") } },
+  ]
+
+  return (
+    <div>
+      <UnstyledTabs selectedKey={activeTab}>
+        <TabList label="Architecture" currentTab={activeTab} items={items} className="flex gap-2 border-b border-gray-200 dark:border-gray-800" />
+      </UnstyledTabs>
+
+      <div className="pt-8 space-y-6">
+        <div className="rounded-lg border border-gray-200 dark:border-gray-800 p-4 bg-white dark:bg-[#0B0F1A]">
+          {renderDiagram()}
+        </div>
+        <div>
+          {renderContent()}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+
diff --git a/apps/developer-hub/src/components/Pages/CoreLandingPage/index.tsx b/apps/developer-hub/src/components/Pages/CoreLandingPage/index.tsx
new file mode 100644
index 0000000000..b1b13ec733
--- /dev/null
+++ b/apps/developer-hub/src/components/Pages/CoreLandingPage/index.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import { ArrowRight as ArrowRightIcon } from "@phosphor-icons/react/dist/ssr"
+import { Button } from "@pythnetwork/component-library/Button"
+
+import { ArchitectureTabs } from "../../Core/architecture-tabs"
+
+export function CoreLandingPage() {
+  return (
+    <div className="min-h-screen">
+      <section>
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+          <div className="text-center">
+            <h1 className="text-4xl sm:text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">
+              Real-Time Market Data, On-Chain
+            </h1>
+            <p className="mt-6 text-lg sm:text-xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
+              Pyth Core delivers sub-second, signed prices across 100+ blockchains. Fetch live data,
+              automate updates using Price Pusher, and parse historical prices—all from one oracle network.
+            </p>
+
+            <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
+              <Button isDisabled className="inline-flex items-center gap-2 px-5 py-3">
+                Get started by pulling prices
+                <ArrowRightIcon size={18} />
+              </Button>
+              <Button isDisabled className="inline-flex items-center gap-2 px-5 py-3 border border-gray-300 dark:border-gray-700 bg-transparent text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-white/5">
+                Set up a Price Pusher
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="bg-white dark:bg-darkGray">
+        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+          <h2 className="sr-only">What is Pyth Core?</h2>
+          <p className="text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
+            Pyth Core provides high-frequency, cryptographically signed price feeds that you can verify
+            on-chain. Publishers stream updates to Pythnet roughly every 400 ms. Your dApp pulls and
+            verifies prices whenever you need them.
+          </p>
+        </div>
+      </section>
+
+      <section className="bg-gray-50 dark:bg-[#0B0F1A]">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-8 text-center">Integration Styles</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <div className="p-6 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0B0F1A]">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Pull Oracle</h3>
+              <p className="text-gray-700 dark:text-gray-300 mb-4">
+                The default approach: your dApp fetches and verifies prices on-demand whenever needed.
+              </p>
+              <button
+                type="button"
+                onClick={() => document.querySelector('#architecture-section')?.scrollIntoView({ behavior: 'smooth' })}
+                className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium"
+              >
+                Learn More →
+              </button>
+            </div>
+            <div className="p-6 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0B0F1A]">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Sponsored Updates</h3>
+              <p className="text-gray-700 dark:text-gray-300 mb-4">
+                Automate price updates using a Price Pusher for push-like functionality with your own gas sponsorship.
+              </p>
+              <button
+                type="button"
+                onClick={() => document.querySelector('#architecture-section')?.scrollIntoView({ behavior: 'smooth' })}
+                className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium"
+              >
+                Learn More →
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section id="architecture-section" className="bg-gray-50 dark:bg-[#0B0F1A]">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">How it works</h2>
+          <ArchitectureTabs />
+        </div>
+      </section>
+
+      <section className="bg-white dark:bg-darkGray">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-8">Why Pyth Core</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            <div className="p-6 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0B0F1A]">
+              <h3 className="font-semibold text-gray-900 dark:text-white mb-2">Sub-second Data</h3>
+              <p className="text-sm text-gray-700 dark:text-gray-300">Get signed prices refreshed every ~400 ms.</p>
+            </div>
+            <div className="p-6 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0B0F1A]">
+              <h3 className="font-semibold text-gray-900 dark:text-white mb-2">Verifiable</h3>
+              <p className="text-sm text-gray-700 dark:text-gray-300">On-chain signature verification for trustless data.</p>
+            </div>
+            <div className="p-6 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0B0F1A]">
+              <h3 className="font-semibold text-gray-900 dark:text-white mb-2">Flexible Integration</h3>
+              <p className="text-sm text-gray-700 dark:text-gray-300">Pull on demand or automate with a Price Pusher.</p>
+            </div>
+            <div className="p-6 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0B0F1A]">
+              <h3 className="font-semibold text-gray-900 dark:text-white mb-2">Historical Archive</h3>
+              <p className="text-sm text-gray-700 dark:text-gray-300">Audit and backtest with cryptographically secure history.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+

From 672a4fe2d227f30c3c3f3577d3b9cc07e0dd2bcd Mon Sep 17 00:00:00 2001
From: Aditya Arora <arora.aditya520@gmail.com>
Date: Tue, 30 Sep 2025 20:33:53 +0530
Subject: [PATCH 2/2] chore(dev-hub) Fxies

---
 .../src/app/price-feeds/core/page.tsx         |   6 +-
 .../src/components/Core/architecture-tabs.tsx | 213 ++++++++++++------
 .../Pages/CoreLandingPage/index.tsx           | 109 ++++++---
 3 files changed, 220 insertions(+), 108 deletions(-)

diff --git a/apps/developer-hub/src/app/price-feeds/core/page.tsx b/apps/developer-hub/src/app/price-feeds/core/page.tsx
index 88b28fda10..b21ac887d4 100644
--- a/apps/developer-hub/src/app/price-feeds/core/page.tsx
+++ b/apps/developer-hub/src/app/price-feeds/core/page.tsx
@@ -1,7 +1,5 @@
-import { CoreLandingPage } from "../../../components/Pages/CoreLandingPage"
+import { CoreLandingPage } from "../../../components/Pages/CoreLandingPage";
 
 export default function Page() {
-  return <CoreLandingPage />
+  return <CoreLandingPage />;
 }
-
-
diff --git a/apps/developer-hub/src/components/Core/architecture-tabs.tsx b/apps/developer-hub/src/components/Core/architecture-tabs.tsx
index cc302b1d2c..fdd6fa45ee 100644
--- a/apps/developer-hub/src/components/Core/architecture-tabs.tsx
+++ b/apps/developer-hub/src/components/Core/architecture-tabs.tsx
@@ -1,15 +1,15 @@
-"use client"
+"use client";
 
-import { TabList } from "@pythnetwork/component-library/TabList"
-import { Tabs as UnstyledTabs } from "@pythnetwork/component-library/unstyled/Tabs"
-import { Button } from "@pythnetwork/component-library/Button"
-import { ArrowRight as ArrowRightIcon } from "@phosphor-icons/react/dist/ssr"
-import { useState } from "react"
+import { ArrowRight as ArrowRightIcon } from "@phosphor-icons/react/dist/ssr";
+import { Button } from "@pythnetwork/component-library/Button";
+import { TabList } from "@pythnetwork/component-library/TabList";
+import { Tabs as UnstyledTabs } from "@pythnetwork/component-library/unstyled/Tabs";
+import { useState } from "react";
 
-type TabId = "pull" | "pusher" | "historical"
+type TabId = "pull" | "pusher" | "historical";
 
 export function ArchitectureTabs() {
-  const [activeTab, setActiveTab] = useState<TabId>("pull")
+  const [activeTab, setActiveTab] = useState<TabId>("pull");
 
   function renderDiagram() {
     if (activeTab === "historical") {
@@ -17,108 +17,177 @@ export function ArchitectureTabs() {
         <div className="flex items-center justify-center gap-6 p-6">
           <div className="text-center">
             <div className="text-4xl mb-2">📊</div>
-            <div className="text-gray-700 dark:text-gray-300">Historical Data</div>
+            <div className="text-gray-700 dark:text-gray-300">
+              Historical Data
+            </div>
           </div>
         </div>
-      )
+      );
     }
 
-    const nodes = activeTab === "pull"
-      ? ["Publishers", "Pythnet", "User", "Your Contract"]
-      : ["Publishers", "Pythnet", "Price Pusher", "Your Contract"]
+    const nodes =
+      activeTab === "pull"
+        ? ["Publishers", "Pythnet", "User", "Your Contract"]
+        : ["Publishers", "Pythnet", "Price Pusher", "Your Contract"];
 
     return (
       <div className="w-full overflow-x-auto">
-        <svg role="img" aria-label="Data flow diagram" className="w-full max-w-2xl mx-auto" height="160" viewBox="0 0 800 160">
+        <svg
+          role="img"
+          aria-label="Data flow diagram"
+          className="w-full max-w-2xl mx-auto"
+          height="160"
+          viewBox="0 0 800 160"
+        >
           {nodes.map((label, i) => {
-            const x = 80 + i * 240
+            const x = 80 + i * 240;
             return (
               <g key={label}>
-                <rect x={x - 70} y={40} width={140} height={56} rx={12} className="fill-white dark:fill-[#0B0F1A] stroke-gray-200 dark:stroke-gray-700" strokeWidth={1} />
-                <text x={x} y={72} textAnchor="middle" className="fill-gray-900 dark:fill-white" fontSize="14">{label}</text>
+                <rect
+                  x={x - 70}
+                  y={40}
+                  width={140}
+                  height={56}
+                  rx={12}
+                  className="fill-white dark:fill-[#0B0F1A] stroke-gray-200 dark:stroke-gray-700"
+                  strokeWidth={1}
+                />
+                <text
+                  x={x}
+                  y={72}
+                  textAnchor="middle"
+                  className="fill-gray-900 dark:fill-white"
+                  fontSize="14"
+                >
+                  {label}
+                </text>
               </g>
-            )
+            );
           })}
-          {[0,1,2].map(i => {
-            const x1 = 80 + i * 240 + 70
-            const x2 = 80 + (i+1) * 240 - 70
-            const points = `${String(x2 - 10)},63 ${String(x2 - 10)},73 ${String(x2)},68`
+          {[0, 1, 2].map((i) => {
+            const x1 = 80 + i * 240 + 70;
+            const x2 = 80 + (i + 1) * 240 - 70;
+            const points = `${String(x2 - 10)},63 ${String(x2 - 10)},73 ${String(x2)},68`;
             return (
               <g key={i}>
-                <line x1={x1} y1={68} x2={x2} y2={68} className="stroke-blue-500" strokeWidth={2} />
+                <line
+                  x1={x1}
+                  y1={68}
+                  x2={x2}
+                  y2={68}
+                  className="stroke-blue-500"
+                  strokeWidth={2}
+                />
                 <polygon points={points} className="fill-blue-500" />
               </g>
-            )
+            );
           })}
         </svg>
       </div>
-    )
+    );
   }
 
   function renderContent() {
-    if (activeTab === "pull") return (
-      <div className="space-y-4">
-        <p className="text-gray-700 dark:text-gray-300">
-          Publishers stream signed updates to Pythnet roughly every 400 ms. Your app pulls and verifies
-          prices on demand, then your contract updates via <code className="font-mono">updatePriceFeeds</code>.
-        </p>
-        <Button isDisabled className="inline-flex items-center gap-2 px-4 py-2">
-          Read Pull Integration Guide
-          <ArrowRightIcon size={18} />
-        </Button>
-      </div>
-    )
+    if (activeTab === "pull")
+      return (
+        <div className="space-y-4">
+          <p className="text-gray-700 dark:text-gray-300">
+            Publishers stream signed updates to Pythnet roughly every 400 ms.
+            Your app pulls and verifies prices on demand, then your contract
+            updates via <code className="font-mono">updatePriceFeeds</code>.
+          </p>
+          <Button
+            isDisabled
+            className="inline-flex items-center gap-2 px-4 py-2"
+          >
+            Read Pull Integration Guide
+            <ArrowRightIcon size={18} />
+          </Button>
+        </div>
+      );
 
-    if (activeTab === "pusher") return (
-      <div className="space-y-4">
-        <p className="text-gray-700 dark:text-gray-300">
-          Automate on-chain updates using a Price Pusher. It listens to Pythnet and pushes fresh prices to
-          your contracts on your chosen schedule and conditions.
-        </p>
-        <Button isDisabled className="inline-flex items-center gap-2 px-4 py-2">
-          Deploy a Price Pusher
-          <ArrowRightIcon size={18} />
-        </Button>
-      </div>
-    )
+    if (activeTab === "pusher")
+      return (
+        <div className="space-y-4">
+          <p className="text-gray-700 dark:text-gray-300">
+            Automate on-chain updates using a Price Pusher. It listens to
+            Pythnet and pushes fresh prices to your contracts on your chosen
+            schedule and conditions.
+          </p>
+          <Button
+            isDisabled
+            className="inline-flex items-center gap-2 px-4 py-2"
+          >
+            Deploy a Price Pusher
+            <ArrowRightIcon size={18} />
+          </Button>
+        </div>
+      );
 
-    if (activeTab === "historical") return (
-      <div className="space-y-4">
-        <p className="text-gray-700 dark:text-gray-300">
-          Explore cryptographically verifiable historical prices for auditing, analytics, and backtesting.
-        </p>
-        <Button isDisabled className="inline-flex items-center gap-2 px-4 py-2">
-          Explore Historical Prices
-          <ArrowRightIcon size={18} />
-        </Button>
-      </div>
-    )
+    if (activeTab === "historical")
+      return (
+        <div className="space-y-4">
+          <p className="text-gray-700 dark:text-gray-300">
+            Explore cryptographically verifiable historical prices for auditing,
+            analytics, and backtesting.
+          </p>
+          <Button
+            isDisabled
+            className="inline-flex items-center gap-2 px-4 py-2"
+          >
+            Explore Historical Prices
+            <ArrowRightIcon size={18} />
+          </Button>
+        </div>
+      );
 
-    return null
+    return null;
   }
 
   const items = [
-    { id: "pull", href: "#pull", children: "Pull", onPress: () => { setActiveTab("pull") } },
-    { id: "pusher", href: "#pusher", children: "Price Pusher", onPress: () => { setActiveTab("pusher") } },
-    { id: "historical", href: "#historical", children: "Historical", onPress: () => { setActiveTab("historical") } },
-  ]
+    {
+      id: "pull",
+      href: "#pull",
+      children: "Pull",
+      onPress: () => {
+        setActiveTab("pull");
+      },
+    },
+    {
+      id: "pusher",
+      href: "#pusher",
+      children: "Price Pusher",
+      onPress: () => {
+        setActiveTab("pusher");
+      },
+    },
+    {
+      id: "historical",
+      href: "#historical",
+      children: "Historical",
+      onPress: () => {
+        setActiveTab("historical");
+      },
+    },
+  ];
 
   return (
     <div>
       <UnstyledTabs selectedKey={activeTab}>
-        <TabList label="Architecture" currentTab={activeTab} items={items} className="flex gap-2 border-b border-gray-200 dark:border-gray-800" />
+        <TabList
+          label="Architecture"
+          currentTab={activeTab}
+          items={items}
+          className="flex gap-2 border-b border-gray-200 dark:border-gray-800"
+        />
       </UnstyledTabs>
 
       <div className="pt-8 space-y-6">
         <div className="rounded-lg border border-gray-200 dark:border-gray-800 p-4 bg-white dark:bg-[#0B0F1A]">
           {renderDiagram()}
         </div>
-        <div>
-          {renderContent()}
-        </div>
+        <div>{renderContent()}</div>
       </div>
     </div>
-  )
+  );
 }
-
-
diff --git a/apps/developer-hub/src/components/Pages/CoreLandingPage/index.tsx b/apps/developer-hub/src/components/Pages/CoreLandingPage/index.tsx
index b1b13ec733..f185300317 100644
--- a/apps/developer-hub/src/components/Pages/CoreLandingPage/index.tsx
+++ b/apps/developer-hub/src/components/Pages/CoreLandingPage/index.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import { ArrowRight as ArrowRightIcon } from "@phosphor-icons/react/dist/ssr"
-import { Button } from "@pythnetwork/component-library/Button"
+import { ArrowRight as ArrowRightIcon } from "@phosphor-icons/react/dist/ssr";
+import { Button } from "@pythnetwork/component-library/Button";
 
-import { ArchitectureTabs } from "../../Core/architecture-tabs"
+import { ArchitectureTabs } from "../../Core/architecture-tabs";
 
 export function CoreLandingPage() {
   return (
@@ -15,16 +15,23 @@ export function CoreLandingPage() {
               Real-Time Market Data, On-Chain
             </h1>
             <p className="mt-6 text-lg sm:text-xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
-              Pyth Core delivers sub-second, signed prices across 100+ blockchains. Fetch live data,
-              automate updates using Price Pusher, and parse historical prices—all from one oracle network.
+              Pyth Core delivers sub-second, signed prices across 100+
+              blockchains. Fetch live data, automate updates using Price Pusher,
+              and parse historical prices—all from one oracle network.
             </p>
 
             <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
-              <Button isDisabled className="inline-flex items-center gap-2 px-5 py-3">
+              <Button
+                isDisabled
+                className="inline-flex items-center gap-2 px-5 py-3"
+              >
                 Get started by pulling prices
                 <ArrowRightIcon size={18} />
               </Button>
-              <Button isDisabled className="inline-flex items-center gap-2 px-5 py-3 border border-gray-300 dark:border-gray-700 bg-transparent text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-white/5">
+              <Button
+                isDisabled
+                className="inline-flex items-center gap-2 px-5 py-3 border border-gray-300 dark:border-gray-700 bg-transparent text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-white/5"
+              >
                 Set up a Price Pusher
               </Button>
             </div>
@@ -36,38 +43,55 @@ export function CoreLandingPage() {
         <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
           <h2 className="sr-only">What is Pyth Core?</h2>
           <p className="text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
-            Pyth Core provides high-frequency, cryptographically signed price feeds that you can verify
-            on-chain. Publishers stream updates to Pythnet roughly every 400 ms. Your dApp pulls and
-            verifies prices whenever you need them.
+            Pyth Core provides high-frequency, cryptographically signed price
+            feeds that you can verify on-chain. Publishers stream updates to
+            Pythnet roughly every 400 ms. Your dApp pulls and verifies prices
+            whenever you need them.
           </p>
         </div>
       </section>
 
       <section className="bg-gray-50 dark:bg-[#0B0F1A]">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-8 text-center">Integration Styles</h2>
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-8 text-center">
+            Integration Styles
+          </h2>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
             <div className="p-6 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0B0F1A]">
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Pull Oracle</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
+                Pull Oracle
+              </h3>
               <p className="text-gray-700 dark:text-gray-300 mb-4">
-                The default approach: your dApp fetches and verifies prices on-demand whenever needed.
+                The default approach: your dApp fetches and verifies prices
+                on-demand whenever needed.
               </p>
               <button
                 type="button"
-                onClick={() => document.querySelector('#architecture-section')?.scrollIntoView({ behavior: 'smooth' })}
+                onClick={() =>
+                  document
+                    .querySelector("#architecture-section")
+                    ?.scrollIntoView({ behavior: "smooth" })
+                }
                 className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium"
               >
                 Learn More →
               </button>
             </div>
             <div className="p-6 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0B0F1A]">
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Sponsored Updates</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
+                Sponsored Updates
+              </h3>
               <p className="text-gray-700 dark:text-gray-300 mb-4">
-                Automate price updates using a Price Pusher for push-like functionality with your own gas sponsorship.
+                Automate price updates using a Price Pusher for push-like
+                functionality with your own gas sponsorship.
               </p>
               <button
                 type="button"
-                onClick={() => document.querySelector('#architecture-section')?.scrollIntoView({ behavior: 'smooth' })}
+                onClick={() =>
+                  document
+                    .querySelector("#architecture-section")
+                    ?.scrollIntoView({ behavior: "smooth" })
+                }
                 className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium"
               >
                 Learn More →
@@ -77,38 +101,59 @@ export function CoreLandingPage() {
         </div>
       </section>
 
-      <section id="architecture-section" className="bg-gray-50 dark:bg-[#0B0F1A]">
+      <section
+        id="architecture-section"
+        className="bg-gray-50 dark:bg-[#0B0F1A]"
+      >
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">How it works</h2>
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
+            How it works
+          </h2>
           <ArchitectureTabs />
         </div>
       </section>
 
       <section className="bg-white dark:bg-darkGray">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-8">Why Pyth Core</h2>
+          <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-8">
+            Why Pyth Core
+          </h2>
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
             <div className="p-6 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0B0F1A]">
-              <h3 className="font-semibold text-gray-900 dark:text-white mb-2">Sub-second Data</h3>
-              <p className="text-sm text-gray-700 dark:text-gray-300">Get signed prices refreshed every ~400 ms.</p>
+              <h3 className="font-semibold text-gray-900 dark:text-white mb-2">
+                Sub-second Data
+              </h3>
+              <p className="text-sm text-gray-700 dark:text-gray-300">
+                Get signed prices refreshed every ~400 ms.
+              </p>
             </div>
             <div className="p-6 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0B0F1A]">
-              <h3 className="font-semibold text-gray-900 dark:text-white mb-2">Verifiable</h3>
-              <p className="text-sm text-gray-700 dark:text-gray-300">On-chain signature verification for trustless data.</p>
+              <h3 className="font-semibold text-gray-900 dark:text-white mb-2">
+                Verifiable
+              </h3>
+              <p className="text-sm text-gray-700 dark:text-gray-300">
+                On-chain signature verification for trustless data.
+              </p>
             </div>
             <div className="p-6 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0B0F1A]">
-              <h3 className="font-semibold text-gray-900 dark:text-white mb-2">Flexible Integration</h3>
-              <p className="text-sm text-gray-700 dark:text-gray-300">Pull on demand or automate with a Price Pusher.</p>
+              <h3 className="font-semibold text-gray-900 dark:text-white mb-2">
+                Flexible Integration
+              </h3>
+              <p className="text-sm text-gray-700 dark:text-gray-300">
+                Pull on demand or automate with a Price Pusher.
+              </p>
             </div>
             <div className="p-6 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#0B0F1A]">
-              <h3 className="font-semibold text-gray-900 dark:text-white mb-2">Historical Archive</h3>
-              <p className="text-sm text-gray-700 dark:text-gray-300">Audit and backtest with cryptographically secure history.</p>
+              <h3 className="font-semibold text-gray-900 dark:text-white mb-2">
+                Historical Archive
+              </h3>
+              <p className="text-sm text-gray-700 dark:text-gray-300">
+                Audit and backtest with cryptographically secure history.
+              </p>
             </div>
           </div>
         </div>
       </section>
     </div>
-  )
+  );
 }
-
-