From bf48a0cb60d2c8ff5efd821b4c4133489e33e1d5 Mon Sep 17 00:00:00 2001
From: PartyParrotGreg <2233348+partyparrotgreg@users.noreply.github.com>
Date: Wed, 10 Dec 2025 17:56:32 +0000
Subject: [PATCH 1/4] feat: Revamp Developer Hub homepage with new content
 sections, cards, and shared components; fix Fuel SDK package type
 definitions.

---
 .../src/app/(homepage)/layout.tsx             |   6 +-
 .../Pages/Homepage/home-content-cards.tsx     | 133 ++++++++++
 .../Pages/Homepage/index.module.scss          |  31 +--
 .../src/components/Pages/Homepage/index.tsx   | 227 +++++-------------
 .../Pages/Homepage/section-card.module.scss   |  20 +-
 .../Pages/Homepage/section-card.tsx           |   4 +-
 .../Pages/Homepage/section.module.scss        |   5 +-
 .../src/components/Pages/Homepage/section.tsx |   6 +-
 .../src/components/ProductCard/index.tsx      |  37 +--
 .../src/components/Root/global.css            |  28 ++-
 .../Shared/content-section.module.scss        |  15 ++
 .../src/components/Shared/content-section.tsx |  13 +
 .../src/components/Shared/footer.tsx          |   8 +
 .../Shared/section-container.module.scss      |  14 ++
 .../components/Shared/section-container.tsx   |  10 +
 .../Shared/section-title.module.scss          |  24 ++
 .../src/components/Shared/section-title.tsx   |  17 ++
 target_chains/fuel/sdk/js/package.json        |  12 +-
 18 files changed, 368 insertions(+), 242 deletions(-)
 create mode 100644 apps/developer-hub/src/components/Pages/Homepage/home-content-cards.tsx
 create mode 100644 apps/developer-hub/src/components/Shared/content-section.module.scss
 create mode 100644 apps/developer-hub/src/components/Shared/content-section.tsx
 create mode 100644 apps/developer-hub/src/components/Shared/footer.tsx
 create mode 100644 apps/developer-hub/src/components/Shared/section-container.module.scss
 create mode 100644 apps/developer-hub/src/components/Shared/section-container.tsx
 create mode 100644 apps/developer-hub/src/components/Shared/section-title.module.scss
 create mode 100644 apps/developer-hub/src/components/Shared/section-title.tsx

diff --git a/apps/developer-hub/src/app/(homepage)/layout.tsx b/apps/developer-hub/src/app/(homepage)/layout.tsx
index 85274122b3..0d2e43c68a 100644
--- a/apps/developer-hub/src/app/(homepage)/layout.tsx
+++ b/apps/developer-hub/src/app/(homepage)/layout.tsx
@@ -2,7 +2,11 @@ import { HomeLayout } from "fumadocs-ui/layouts/home";
 import type { ReactNode } from "react";
 
 import { baseOptions } from "../../config/layout.config";
+import { PageFooter } from "../../components/Shared/footer";
 
 export default function Layout({ children }: { children: ReactNode }) {
-  return <HomeLayout {...baseOptions}>{children}</HomeLayout>;
+  return (<HomeLayout {...baseOptions}>
+    <main>{children}</main>
+    <PageFooter />
+  </HomeLayout>);
 }
diff --git a/apps/developer-hub/src/components/Pages/Homepage/home-content-cards.tsx b/apps/developer-hub/src/components/Pages/Homepage/home-content-cards.tsx
new file mode 100644
index 0000000000..9e75290b70
--- /dev/null
+++ b/apps/developer-hub/src/components/Pages/Homepage/home-content-cards.tsx
@@ -0,0 +1,133 @@
+import { Book, ChartScatter, CodeBlock, CurrencyDollarSimple, Key, ListChecks, Wrench } from "@phosphor-icons/react/dist/ssr";
+
+
+export type ProductCardConfigType = {
+  title: string;
+  description: string;
+  href: string;
+  features: { label: string }[];
+  quickLinks: { label: string; href: string }[];
+};
+
+
+export const products: ProductCardConfigType[] = [
+  {
+    title: "Pyth Pro",
+    description:
+      "Subscription-based price data for institutions and advanced use cases. Previously known as Lazer.",
+    href: "/price-feeds/pro",
+    features: [
+      { label: "Ultra-low latency" },
+      { label: "Crypto, Equities & Indexes" },
+      { label: "Customizable channels and latency" },
+      { label: "Dedicated support" },
+    ],
+    quickLinks: [
+      {
+        label: "Get Pyth Pro Access Token",
+        href: "/price-feeds/pro/acquire-access-token",
+      },
+      {
+        label: "Browse Supported Feeds",
+        href: "/price-feeds/pro/price-feed-ids",
+      },
+      { label: "Pricing", href: "https://www.pyth.network/pricing" },
+    ],
+  },
+  {
+    title: "Pyth Core",
+    description:
+      "Decentralized price feeds for DeFi and TradFi builders with deterministic on-chain delivery.",
+    href: "/price-feeds/core",
+    features: [
+      { label: "400ms update frequency" },
+      { label: "100+ blockchains" },
+      { label: "Supports Pull and Push updates" },
+      { label: "Decentralized Oracle" },
+    ],
+    quickLinks: [
+      {
+        label: "Supported Blockchains",
+        href: "/price-feeds/core/contract-addresses",
+      },
+      {
+        label: "Browse Supported Feeds",
+        href: "/price-feeds/core/price-feeds",
+      },
+      { label: "API Reference", href: "/price-feeds/core/api-reference" },
+    ],
+  },
+  {
+    title: "Entropy",
+    description:
+      "Secure, Verifiable Random Number Generator for EVM-based smart contracts.",
+    href: "/entropy",
+    features: [
+      { label: "On-chain randomness" },
+      { label: "Verifiable results" },
+      { label: "Pay in native token" },
+      { label: "Supports 20+ EVM chains" },
+    ],
+    quickLinks: [
+      {
+        label: "Chainlist",
+        href: "/entropy/chainlist",
+      },
+      { label: "Protocol Design", href: "/entropy/protocol-design" },
+      {
+        label: "Entropy Explorer",
+        href: "https://entropy-explorer.pyth.network/",
+      },
+    ],
+  },
+];
+
+
+
+export const additionalResources = [
+  {
+    title: "Pyth Token",
+    description: "The native token powering governance and staking across the Pyth Network.",
+    href: "/pyth-token",
+    icon: <CurrencyDollarSimple />,
+  },
+  {
+    title: "Oracle Integrity Staking",
+    description: "Stake PYTH to support data publishers and secure the integrity of Pyth price feeds.",
+    href: "/oracle-integrity-staking",
+    icon: <Wrench />,
+  },
+  {
+    title: "Pyth Metrics",
+    description: "Track network performance, feed activity, and ecosystem growth in real time.",
+    href: "/metrics",
+    icon: <ChartScatter />,
+  },
+];
+
+export const developerResources = [
+  {
+    title: "Get Your Access Token",
+    description: "Request access for the Pyth Ultra Low Latency price feeds.",
+    href: "/access-token",
+    icon: <Key />
+  },
+  {
+    title: "Supported Feeds",
+    description: "Explore the complete list of supported price feeds for Pyth Pro.",
+    href: "/price-feeds/pro/price-feed-ids",
+    icon: <ListChecks />
+  },
+  {
+    title: "Pyth API Documentation",
+    description: "Learn how to use the Pyth API to access real-time price data.",
+    href: "/api-documentation",
+    icon: <Book />
+  },
+  {
+    title: "API Reference",
+    description: "Explore the complete API reference for Pyth Pro.",
+    href: "https://pyth-lazer.dourolabs.app/docs",
+    icon: <CodeBlock />
+  }
+]
\ No newline at end of file
diff --git a/apps/developer-hub/src/components/Pages/Homepage/index.module.scss b/apps/developer-hub/src/components/Pages/Homepage/index.module.scss
index 4a691f00d8..7abf4190af 100644
--- a/apps/developer-hub/src/components/Pages/Homepage/index.module.scss
+++ b/apps/developer-hub/src/components/Pages/Homepage/index.module.scss
@@ -8,24 +8,20 @@
 }
 
 .sectionHero {
-  position: relative;
-  border-bottom: 1px solid theme.color("border");
-  background: linear-gradient(
-    180deg,
-    theme.color("background", "primary") 0%,
-    color-mix(in srgb, theme.color("background", "secondary") 70%, transparent)
-      100%
-  );
+  border-bottom: 1px solid var(--color-fd-border);
+  background: var(--color-fd-card);
 }
 
+
+
+
 .sectionHeroContent {
   display: flex;
   flex-direction: column;
-  gap: theme.spacing(10);
+  gap: theme.spacing(4);
   padding-top: theme.spacing(18);
   padding-bottom: theme.spacing(18);
 
-  @include theme.max-width;
 
   @include theme.breakpoint("lg") {
     flex-direction: row;
@@ -37,10 +33,9 @@
 .heroCopy {
   display: flex;
   flex-direction: column;
-  gap: theme.spacing(6);
   flex: 1;
   max-width: 34rem;
-  color: theme.color("foreground");
+  color: var(--color-fd-foreground);
 
   @include theme.breakpoint("lg") {
     max-width: 28rem;
@@ -52,15 +47,13 @@
 
   line-height: 115%;
   letter-spacing: theme.letter-spacing("tight");
-  color: theme.color("heading");
   margin: 0;
 }
 
 .heroSubtitle {
   @include theme.text("2xl", "normal");
-
   line-height: 140%;
-  color: theme.color("paragraph");
+  opacity: 0.7;
   margin: 0;
 }
 
@@ -77,13 +70,7 @@
 
 .sectionHeaderSubtitle {
   @include theme.text("xl", "normal");
-
-  color: light-dark(
-    theme.pallette-color("stone", 500),
-    theme.pallette-color("steel", 400)
-  );
-  margin-top: theme.spacing(4);
-  margin-bottom: theme.spacing(12);
+  opacity: 0.7;
 }
 
 .productsGrid {
diff --git a/apps/developer-hub/src/components/Pages/Homepage/index.tsx b/apps/developer-hub/src/components/Pages/Homepage/index.tsx
index 88abd19307..1c101dd8d6 100644
--- a/apps/developer-hub/src/components/Pages/Homepage/index.tsx
+++ b/apps/developer-hub/src/components/Pages/Homepage/index.tsx
@@ -1,14 +1,14 @@
 import styles from "./index.module.scss";
-import ResourcesForBuildersImage from "./resources-for-builders.svg";
-import { Section } from "./section";
-import { SectionCards, SectionCard } from "./section-card";
-import SignalImage from "./signal.svg";
 import { ProductCard } from "../../ProductCard";
+import { SectionTitle } from "../../Shared/section-title";
+import { Card, Cards } from "fumadocs-ui/components/card";
+import { additionalResources, developerResources, products } from "./home-content-cards";
+import { SectionContainer } from "../../Shared/section-container";
 
-export const Homepage = () => {
-  return (
-    <div className={styles.preview}>
-      <section className={styles.sectionHero}>
+export const Homepage = () => (
+  <div className={styles.preview}>
+    <section className={styles.sectionHero}>
+      <SectionContainer>
         <div className={styles.sectionHeroContent}>
           <div className={styles.heroCopy}>
             <h1 className={styles.heroTitle}>Developer Hub</h1>
@@ -17,15 +17,14 @@ export const Homepage = () => {
             </p>
           </div>
         </div>
-      </section>
+      </SectionContainer>
+    </section>
 
-      <section className={styles.sectionProducts}>
-        <p className={styles.sectionHeaderTitle}>Products</p>
-        <p className={styles.sectionHeaderSubtitle}>
-          Connect to the global market data and randomness layer.
-        </p>
+    <section>
+      <SectionContainer>
+        <SectionTitle title="Products" subtitle="Connect to the global market data and randomness layer." />
         <div className={styles.productsGrid}>
-          {products.map((product: ProductCardConfig) => (
+          {products.map((product) => (
             <div key={product.title} className={styles.productsCardWrapper}>
               <ProductCard
                 title={product.title}
@@ -33,165 +32,53 @@ export const Homepage = () => {
                 features={product.features}
                 quickLinks={product.quickLinks}
                 buttonLabel="Get started"
-                buttonHref={product.href}
-              />
+                buttonHref={product.href} />
             </div>
           ))}
         </div>
-      </section>
+      </SectionContainer>
+    </section>
 
-      <Section
-        title="Additional Resources"
-        subtitle="Explore the Pyth Network"
-        isHighlight
-        image={<ResourcesForBuildersImage />}
-      >
-        <SectionCards>
-          <SectionCard
-            title="Pyth Token"
-            description="The native token powering governance and staking across the Pyth Network."
-            url="/pyth-token"
-            urlLabel="Read more"
-            image={<SignalImage />}
-          />
-          <SectionCard
-            title="Oracle Integrity Staking"
-            description="Stake PYTH to support data publishers and secure the integrity of Pyth price feeds."
-            url="/oracle-integrity-staking"
-            urlLabel="Read more"
-            image={<SignalImage />}
-          />
-          <SectionCard
-            title="Pyth Metrics"
-            description="Track network performance, feed activity, and ecosystem growth in real time."
-            url="/metrics"
-            urlLabel="Read more"
-            image={<SignalImage />}
-          />
-        </SectionCards>
-      </Section>
-      <Section
-        title="Resources for Developers"
-        subtitle="Explore the Pyth Network for developers"
-      >
-        <SectionCards>
-          <SectionCard
-            title="Get Your Access Token"
-            description="Request access for the Pyth Ultra Low Latency price feeds."
-            url="/price-feeds/pro/acquire-access-token"
-            urlLabel="Link"
-            image={<SignalImage />}
-          />
-          <SectionCard
-            title="Supported Feeds -- Pyth Pro"
-            description="Explore the complete list of supported price feeds for Pyth Pro."
-            url="/price-feeds/pro/price-feed-ids"
-            urlLabel="Link"
-            image={<SignalImage />}
-          />
-          <SectionCard
-            title="Supported Blockchains -- Pyth Core"
-            description="Explore the complete list of supported chains for Pyth Core."
-            url="/price-feeds/core/contract-addresses"
-            urlLabel="Link"
-            image={<SignalImage />}
-          />
-          <SectionCard
-            title="API Reference -- Pyth Pro"
-            description="Explore the complete API reference for Pyth Pro."
-            url="https://pyth-lazer.dourolabs.app/docs"
-            urlLabel="Link"
-            image={<SignalImage />}
-            target="_blank"
-          />
-        </SectionCards>
-      </Section>
-
-      <GradientDivider />
-    </div>
-  );
-};
+    <section>
+      <SectionContainer>
+        <SectionTitle title="Products" subtitle="Connect to the global market data and randomness layer." />
+        <div className={styles.productsGrid}>
+          <Cards>
+            {additionalResources.map(({ title, description, href, icon }, index) => (
+              <Card
+                key={`resource-${index}`}
+                icon={icon}
+                href={href}
+                title={title}
+              >
+                {description}
+              </Card>
+            ))}
+          </Cards>
+        </div>
+      </SectionContainer>
+    </section>
 
-function GradientDivider() {
-  return <div className={styles.gradientDivider} role="presentation" />;
-}
+    <section>
+      <SectionContainer>
+        <SectionTitle title="Products" subtitle="Connect to the global market data and randomness layer." />
+        <div className={styles.productsGrid}>
+          <Cards>
+            {developerResources.map(({ title, description, href, icon }, index) => (
+              <Card
+                key={`resource-${index}`}
+                icon={icon}
+                href={href}
+                title={title}
+              >
+                {description}
+              </Card>
+            ))}
+          </Cards>
+        </div>
+      </SectionContainer>
+    </section>
+  </div>
+);
 
-const products: ProductCardConfig[] = [
-  {
-    title: "Pyth Pro",
-    description:
-      "Subscription-based price data for institutions and advanced use cases. Previously known as Lazer.",
-    href: "/price-feeds/pro",
-    features: [
-      { label: "Ultra-low latency" },
-      { label: "Crypto, Equities & Indexes" },
-      { label: "Customizable channels and latency" },
-      { label: "Dedicated support" },
-    ],
-    quickLinks: [
-      {
-        label: "Get Pyth Pro Access Token",
-        href: "/price-feeds/pro/acquire-access-token",
-      },
-      {
-        label: "Browse Supported Feeds",
-        href: "/price-feeds/pro/price-feed-ids",
-      },
-      { label: "Pricing", href: "https://www.pyth.network/pricing" },
-    ],
-  },
-  {
-    title: "Pyth Core",
-    description:
-      "Decentralized price feeds for DeFi and TradFi builders with deterministic on-chain delivery.",
-    href: "/price-feeds/core",
-    features: [
-      { label: "400ms update frequency" },
-      { label: "100+ blockchains" },
-      { label: "Supports Pull and Push updates" },
-      { label: "Decentralized Oracle" },
-    ],
-    quickLinks: [
-      {
-        label: "Supported Blockchains",
-        href: "/price-feeds/core/contract-addresses",
-      },
-      {
-        label: "Browse Supported Feeds",
-        href: "/price-feeds/core/price-feeds",
-      },
-      { label: "API Reference", href: "/price-feeds/core/api-reference" },
-    ],
-  },
-  {
-    title: "Entropy",
-    description:
-      "Secure, Verifiable Random Number Generator for EVM-based smart contracts.",
-    href: "/entropy",
-    features: [
-      { label: "On-chain randomness" },
-      { label: "Verifiable results" },
-      { label: "Pay in native token" },
-      { label: "Supports 20+ EVM chains" },
-    ],
-    quickLinks: [
-      {
-        label: "Chainlist",
-        href: "/entropy/chainlist",
-      },
-      { label: "Protocol Design", href: "/entropy/protocol-design" },
-      {
-        label: "Entropy Explorer",
-        href: "https://entropy-explorer.pyth.network/",
-      },
-    ],
-  },
-];
 
-type ProductCardConfig = {
-  title: string;
-  description: string;
-  href: string;
-  features: { label: string }[];
-  quickLinks: { label: string; href: string }[];
-};
diff --git a/apps/developer-hub/src/components/Pages/Homepage/section-card.module.scss b/apps/developer-hub/src/components/Pages/Homepage/section-card.module.scss
index db51efc840..8d29ed4db8 100644
--- a/apps/developer-hub/src/components/Pages/Homepage/section-card.module.scss
+++ b/apps/developer-hub/src/components/Pages/Homepage/section-card.module.scss
@@ -5,11 +5,15 @@
   flex-direction: column;
   gap: theme.spacing(2);
   padding: theme.spacing(6);
-  border: 1px solid theme.color("border");
+  border: 1px solid var(--color-fd-border);
   border-radius: theme.border-radius("2xl");
-  background-color: theme.color("background", "secondary");
-  flex: 1;
+  
 
+  .sectionCardImage {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+  }
   .sectionCardHeader {
     display: flex;
     flex-direction: row;
@@ -24,15 +28,7 @@
 
   .sectionCardDescription {
     line-height: 140%;
-    color: light-dark(
-      theme.pallette-color("stone", 500),
-      theme.pallette-color("steel", 400)
-    );
-  }
-
-  .sectionCardUrl {
-    font-weight: theme.font-weight("medium");
-    text-decoration: underline;
+    opacity: 0.7;
   }
 }
 
diff --git a/apps/developer-hub/src/components/Pages/Homepage/section-card.tsx b/apps/developer-hub/src/components/Pages/Homepage/section-card.tsx
index 363029ad67..f99a601e43 100644
--- a/apps/developer-hub/src/components/Pages/Homepage/section-card.tsx
+++ b/apps/developer-hub/src/components/Pages/Homepage/section-card.tsx
@@ -21,7 +21,9 @@ export const SectionCard = ({
   <div className={styles.sectionCard}>
     <div className={styles.sectionCardHeader}>
       <h3 className={styles.sectionCardTitle}>{title}</h3>
-      {image}
+      <div className={styles.sectionCardImage}>
+        {image}
+      </div>
     </div>
     <p className={styles.sectionCardDescription}>{description}</p>
     {url && urlLabel && (
diff --git a/apps/developer-hub/src/components/Pages/Homepage/section.module.scss b/apps/developer-hub/src/components/Pages/Homepage/section.module.scss
index 727fabff5f..bc5a50b120 100644
--- a/apps/developer-hub/src/components/Pages/Homepage/section.module.scss
+++ b/apps/developer-hub/src/components/Pages/Homepage/section.module.scss
@@ -4,6 +4,7 @@
   padding: theme.spacing(34) 0;
   padding-left: theme.spacing(20);
   padding-right: theme.spacing(20);
+  background: var(--color-fd-card);
 
   .sectionContent {
     margin: 0 auto;
@@ -36,7 +37,5 @@
     );
   }
 
-  &[data-highlight] {
-    background-color: theme.color("background", "secondary");
-  }
+
 }
diff --git a/apps/developer-hub/src/components/Pages/Homepage/section.tsx b/apps/developer-hub/src/components/Pages/Homepage/section.tsx
index 5ec93f2e25..f04d86c123 100644
--- a/apps/developer-hub/src/components/Pages/Homepage/section.tsx
+++ b/apps/developer-hub/src/components/Pages/Homepage/section.tsx
@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 
 import styles from "./section.module.scss";
+import { SectionTitle } from "../../Shared/section-title";
 
 export const Section = ({
   title,
@@ -18,10 +19,7 @@ export const Section = ({
   <section data-highlight={isHighlight} className={styles.section}>
     <div className={styles.sectionContent}>
       <div className={styles.sectionHeader}>
-        <div>
-          <h2 className={styles.sectionHeaderTitle}>{title}</h2>
-          <p className={styles.sectionHeaderSubtitle}>{subtitle}</p>
-        </div>
+        <SectionTitle title={title} subtitle={subtitle} />
         {image}
       </div>
       {children}
diff --git a/apps/developer-hub/src/components/ProductCard/index.tsx b/apps/developer-hub/src/components/ProductCard/index.tsx
index b8c2043d70..ea0a0f2fb2 100644
--- a/apps/developer-hub/src/components/ProductCard/index.tsx
+++ b/apps/developer-hub/src/components/ProductCard/index.tsx
@@ -2,8 +2,9 @@
 
 import { Lightning } from "@phosphor-icons/react/dist/ssr";
 import { Button } from "@pythnetwork/component-library/Button";
+import { Link } from "@pythnetwork/component-library/Link";
 import { clsx } from "clsx";
-import Link from "next/link";
+
 import { useRouter } from "next/navigation";
 import type { ReactNode } from "react";
 
@@ -62,8 +63,25 @@ export function ProductCard({
             <h3 className={styles.title}>{title}</h3>
             {description && <p className={styles.description}>{description}</p>}
             {icon && <div className={styles.icon}>{icon}</div>}
+            {buttonLabel && (
+              <div className={styles.buttonWrapper}>
+                <Button
+                  onClick={(e) => {
+                    e.preventDefault();
+                    handleButtonClick();
+                  }}
+                  size="sm"
+                  variant="primary"
+                  className={clsx(styles.button, className)}
+                >
+                  {buttonLabel}
+                </Button>
+              </div>
+            )}
           </div>
 
+
+
           {features && features.length > 0 && (
             <div className={styles.featuresSection}>
               <p className={styles.sectionLabel}>FEATURES</p>
@@ -89,7 +107,6 @@ export function ProductCard({
                   <Link
                     key={link.href}
                     href={link.href}
-                    className={styles.quickLink}
                   >
                     {link.label}
                   </Link>
@@ -99,21 +116,7 @@ export function ProductCard({
           )}
         </div>
 
-        {buttonLabel && (
-          <div className={styles.buttonWrapper}>
-            <Button
-              onClick={(e) => {
-                e.preventDefault();
-                handleButtonClick();
-              }}
-              size="md"
-              variant="primary"
-              className={clsx(styles.button, className)}
-            >
-              {buttonLabel}
-            </Button>
-          </div>
-        )}
+
       </div>
     </div>
   );
diff --git a/apps/developer-hub/src/components/Root/global.css b/apps/developer-hub/src/components/Root/global.css
index 7af62f670a..7c54017950 100644
--- a/apps/developer-hub/src/components/Root/global.css
+++ b/apps/developer-hub/src/components/Root/global.css
@@ -25,6 +25,13 @@
 /* @import "./theme.css"; this overrides the default colors to match the pyth branding */
 /* @import "./fumadocs-global-style-overrides.css"; */
 
+
+
+table {
+  border-color: var(--color-gray-200, #e5e7eb);
+}
+
+
 .light {
   --color-fd-background: hsla(0, 16%, 96%, 1);
   --color-fd-foreground: hsla(0, 16%, 5%, 1);
@@ -45,6 +52,8 @@
 }
 
 .dark {
+  /* 
+    OLD COLORS
   --color-fd-background: hsl(240, 4%, 11%);
   --color-fd-foreground: hsl(250, 18%, 87%);
   --color-fd-muted: hsl(0, 3%, 6%);
@@ -60,5 +69,22 @@
   --color-fd-secondary-foreground: hsl(250, 18%, 87%);
   --color-fd-accent: hsla(0, 0%, 100%, 0.079);
   --color-fd-accent-foreground: hsl(250, 18%, 87%);
-  --color-fd-ring: hsla(262, 83%, 58%, 1);
+  --color-fd-ring: hsla(262, 83%, 58%, 1); */
+  --color-fd-background: hsl(0, 0%, 7.04%);
+  --color-fd-foreground: hsl(0, 0%, 92%);
+  --color-fd-muted: hsl(0, 0%, 12.9%);
+  --color-fd-muted-foreground: hsla(0, 0%, 70%, 0.8);
+  --color-fd-popover: hsl(0, 0%, 11.6%);
+  --color-fd-popover-foreground: hsl(0, 0%, 86.9%);
+  --color-fd-card: hsl(0, 0%, 9.8%);
+  --color-fd-card-foreground: hsl(0, 0%, 98%);
+  --color-fd-border: hsla(0, 0%, 40%, 20%);
+  --color-fd-primary: hsla(263, 81%, 67%, 1);
+  --color-fd-primary-foreground: hsl(204, 90%, 51%);
+  --color-fd-secondary: hsl(0, 0%, 12.9%);
+  --color-fd-secondary-foreground: hsl(0, 0%, 92%);
+  --color-fd-accent: hsla(0, 0%, 40.9%, 30%);
+  --color-fd-accent-foreground: hsl(0, 0%, 90%);
+  --color-fd-ring: hsl(0, 0%, 54.9%);
+
 }
diff --git a/apps/developer-hub/src/components/Shared/content-section.module.scss b/apps/developer-hub/src/components/Shared/content-section.module.scss
new file mode 100644
index 0000000000..1eba1c88b7
--- /dev/null
+++ b/apps/developer-hub/src/components/Shared/content-section.module.scss
@@ -0,0 +1,15 @@
+@use "@pythnetwork/component-library/theme";
+
+.section {
+    display: flex;
+    flex-direction: column;
+    gap: theme.spacing(8);
+}
+
+.container {
+  max-width: var(--spacing-fd-container);
+  margin: 0 auto;
+  > *:not(:last-child) {
+    margin-bottom: theme.spacing(20);
+  }
+}
diff --git a/apps/developer-hub/src/components/Shared/content-section.tsx b/apps/developer-hub/src/components/Shared/content-section.tsx
new file mode 100644
index 0000000000..7bf2fbb02e
--- /dev/null
+++ b/apps/developer-hub/src/components/Shared/content-section.tsx
@@ -0,0 +1,13 @@
+import { SectionTitle } from "./section-title"
+import styles from "./content-section.module.scss"
+
+export const Section = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <section className={styles.section}>
+            <div className={styles.container}>
+                <SectionTitle title="Products" subtitle="Connect to the global market data and randomness layer." />
+                {children}
+            </div>
+        </section>
+    )
+}
\ No newline at end of file
diff --git a/apps/developer-hub/src/components/Shared/footer.tsx b/apps/developer-hub/src/components/Shared/footer.tsx
new file mode 100644
index 0000000000..ce0e9fa808
--- /dev/null
+++ b/apps/developer-hub/src/components/Shared/footer.tsx
@@ -0,0 +1,8 @@
+export const PageFooter = () => {
+    return (
+        <footer style={{ padding: "1.5rem", display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: '0.5rem' }}>
+            <p style={{ opacity: 0.7, fontSize: '0.875rem' }}>&copy; {new Date().getFullYear()} Pyth Network. All rights reserved.</p>
+            <p style={{ opacity: 0.7, fontSize: '0.875rem' }}>Privacy Policy | Terms of Use</p>
+        </footer>
+    )
+}
\ No newline at end of file
diff --git a/apps/developer-hub/src/components/Shared/section-container.module.scss b/apps/developer-hub/src/components/Shared/section-container.module.scss
new file mode 100644
index 0000000000..8b2fcea815
--- /dev/null
+++ b/apps/developer-hub/src/components/Shared/section-container.module.scss
@@ -0,0 +1,14 @@
+@use "@pythnetwork/component-library/theme";
+
+.container {
+  max-width: var(--spacing-fd-container);
+  margin: 0 auto;
+  padding: 0 theme.spacing(4);
+  > *:not(:last-child) {
+    margin-bottom: theme.spacing(20);
+  }
+
+  @include theme.breakpoint("sm") {
+    padding: 0 theme.spacing(6);
+  }
+}
\ No newline at end of file
diff --git a/apps/developer-hub/src/components/Shared/section-container.tsx b/apps/developer-hub/src/components/Shared/section-container.tsx
new file mode 100644
index 0000000000..7fac34dfbe
--- /dev/null
+++ b/apps/developer-hub/src/components/Shared/section-container.tsx
@@ -0,0 +1,10 @@
+
+import styles from './section-container.module.scss';
+
+export const SectionContainer = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <div className={styles.container}>
+            {children}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/apps/developer-hub/src/components/Shared/section-title.module.scss b/apps/developer-hub/src/components/Shared/section-title.module.scss
new file mode 100644
index 0000000000..32f428171e
--- /dev/null
+++ b/apps/developer-hub/src/components/Shared/section-title.module.scss
@@ -0,0 +1,24 @@
+@use "@pythnetwork/component-library/theme";
+
+.sectionTitle {
+    display: flex;
+    flex-direction: row;
+    gap: theme.spacing(8);
+    justify-content: space-between;
+}
+
+.title {
+  @include theme.text("3xl", "medium");
+
+  color: theme.color("heading");
+  margin-bottom: theme.spacing(2);
+}
+
+.subtitle {
+  @include theme.text("xl", "normal");
+  opacity: 0.7;
+}
+
+.slot {
+    // placeholder for children
+}
\ No newline at end of file
diff --git a/apps/developer-hub/src/components/Shared/section-title.tsx b/apps/developer-hub/src/components/Shared/section-title.tsx
new file mode 100644
index 0000000000..b53d1aea4d
--- /dev/null
+++ b/apps/developer-hub/src/components/Shared/section-title.tsx
@@ -0,0 +1,17 @@
+import styles from "./section-title.module.scss";
+
+export const SectionTitle = ({ title, subtitle, children }: {
+    title: string;
+    subtitle: string;
+    children?: React.ReactNode;
+}) => {
+    return (
+        <div className={styles.sectionTitle}>
+            <div>
+                <p className={styles.title}>{title}</p>
+                <p className={styles.subtitle}>{subtitle}</p>
+            </div>
+            {children && <div className={styles.slot}>{children}</div>}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/target_chains/fuel/sdk/js/package.json b/target_chains/fuel/sdk/js/package.json
index 1f318a2b4f..a282d16890 100644
--- a/target_chains/fuel/sdk/js/package.json
+++ b/target_chains/fuel/sdk/js/package.json
@@ -7,7 +7,7 @@
     "name": "Pyth Data Association"
   },
   "main": "./dist/cjs/index.cjs",
-  "types": "./dist/cjs/index.d.ts",
+  "types": "./dist/cjs/src/index.d.ts",
   "files": [
     "dist/**/*"
   ],
@@ -59,51 +59,41 @@
   "exports": {
     ".": {
       "require": {
-        "types": "./dist/cjs/index.d.ts",
         "default": "./dist/cjs/index.cjs"
       },
       "import": {
-        "types": "./dist/esm/index.d.ts",
         "default": "./dist/esm/index.mjs"
       }
     },
     "./types/PythContract": {
       "require": {
-        "types": "./dist/cjs/types/PythContract.d.ts",
         "default": "./dist/cjs/types/PythContract.cjs"
       },
       "import": {
-        "types": "./dist/esm/types/PythContract.d.ts",
         "default": "./dist/esm/types/PythContract.mjs"
       }
     },
     "./types/PythContractFactory": {
       "require": {
-        "types": "./dist/cjs/types/PythContractFactory.d.ts",
         "default": "./dist/cjs/types/PythContractFactory.cjs"
       },
       "import": {
-        "types": "./dist/esm/types/PythContractFactory.d.ts",
         "default": "./dist/esm/types/PythContractFactory.mjs"
       }
     },
     "./types/common": {
       "require": {
-        "types": "./dist/cjs/types/common.d.ts",
         "default": "./dist/cjs/types/common.cjs"
       },
       "import": {
-        "types": "./dist/esm/types/common.d.ts",
         "default": "./dist/esm/types/common.mjs"
       }
     },
     "./types": {
       "require": {
-        "types": "./dist/cjs/types/index.d.ts",
         "default": "./dist/cjs/types/index.cjs"
       },
       "import": {
-        "types": "./dist/esm/types/index.d.ts",
         "default": "./dist/esm/types/index.mjs"
       }
     },

From cebc3192e4a8c55f9f0632ecc38b028acc922278 Mon Sep 17 00:00:00 2001
From: PartyParrotGreg <2233348+partyparrotgreg@users.noreply.github.com>
Date: Wed, 10 Dec 2025 19:16:59 +0000
Subject: [PATCH 2/4] feat: Add new BoxSVG component and integrate it into
 homepage content and styling.

---
 .../src/components/Pages/Homepage/BoxSVG.tsx  | 441 ++++++++++++++++++
 .../Pages/Homepage/home-content-cards.tsx     |  60 ++-
 .../src/components/Pages/Homepage/index.tsx   | 103 ++--
 .../src/components/ProductCard/index.tsx      | 140 ++----
 .../src/components/Shared/footer.tsx          |  12 +-
 .../Shared/section-container.module.scss      |   1 +
 .../Shared/section-title.module.scss          |  12 +-
 7 files changed, 585 insertions(+), 184 deletions(-)
 create mode 100644 apps/developer-hub/src/components/Pages/Homepage/BoxSVG.tsx

diff --git a/apps/developer-hub/src/components/Pages/Homepage/BoxSVG.tsx b/apps/developer-hub/src/components/Pages/Homepage/BoxSVG.tsx
new file mode 100644
index 0000000000..c6c398737f
--- /dev/null
+++ b/apps/developer-hub/src/components/Pages/Homepage/BoxSVG.tsx
@@ -0,0 +1,441 @@
+import * as React from "react";
+
+export const BoxSVG = (props: React.SVGProps<SVGSVGElement>) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="417"
+        height="417"
+        fill="none"
+        viewBox="0 0 417 417"
+        {...props}
+    >
+        <g clipPath="url(#clip0_131_950)">
+            <path
+                stroke="#0F0B0B"
+                strokeLinejoin="round"
+                strokeMiterlimit="10"
+                strokeWidth="1.5"
+                d="m257.706 155.892-46.128 73.48 48.459 83.054 45.128-77.851z"
+            ></path>
+            <g filter="url(#filter0_n_131_950)">
+                <path
+                    fill="url(#paint0_linear_131_950)"
+                    d="m210.577 228.997 48.459 83.429-97.334-.083-26.144-49.167-20.025-35.886 95.044 2.082"
+                ></path>
+            </g>
+            <path
+                fill="#0F0B0B"
+                stroke="#0F0B0B"
+                strokeLinejoin="round"
+                strokeMiterlimit="10"
+                strokeWidth="1.5"
+                d="M267.862 234.659c.042-.167.084-.292.167-.458.125-.333.208-.708.291-1.041.292-1.332.333-2.748.209-4.122-.125-1.207-.375-2.373-.833-3.455a3.7 3.7 0 0 0-.333-.708 4 4 0 0 0-.292-.583c-.083-.124-.166-.291-.249-.416a6 6 0 0 0-.375-.541c-2.123-2.873-5.246-2.998-7.286-.167-.666.916-1.124 2.04-1.415 3.248-.083.374-.167.749-.208 1.165a10 10 0 0 0-.125 1.582c-.042.958.042 1.957.208 2.873.208 1.041.5 2.04.916 2.956.125.249.208.458.375.707a.9.9 0 0 0 .166.25c1.083 1.832 2.54 2.831 3.997 2.914.791.042 1.54-.166 2.29-.666l1.082 3.789 3.455 12.156 7.452-10.324z"
+            ></path>
+            <path
+                fill="#753DF6"
+                d="m114.66 227.249-45.795-.999 56.161-73.812 39.841 2.164z"
+            ></path>
+            <g filter="url(#filter1_n_131_950)">
+                <path
+                    fill="#753DF6"
+                    d="m114.659 227.249-23.771 34.887h98.458l21.232-33.139z"
+                ></path>
+            </g>
+            <g filter="url(#filter2_n_131_950)">
+                <path
+                    fill="#753DF6"
+                    d="m210.578 228.997 46.128-73.105 40.881-20.566-44.878 73.604z"
+                ></path>
+            </g>
+            <path
+                fill="#753DF6"
+                d="m165.324 154.186 24.105-35.637 90.256 1.915-22.98 35.429z"
+            ></path>
+            <path
+                fill="#0F0B0B"
+                d="M245.923 324.624c0 7.494-5.662 13.655-12.948 14.488-.541.083-1.082.083-1.623.083-8.035 0-14.571-6.536-14.571-14.571h-12.323c0 14.862 12.031 26.935 26.935 26.935.542 0 1.124-.041 1.624-.083 14.113-.832 25.27-12.572 25.27-26.852z"
+            ></path>
+            <path
+                stroke="#F2E1F9"
+                strokeMiterlimit="10"
+                strokeWidth="1.5"
+                d="M210.286 327.246s1.166 18.485 20.316 18.485c19.151 0 21.44-18.485 21.44-18.485"
+            ></path>
+            <path
+                fill="#0F0B0B"
+                d="M70.553 277.456h-2.12v19.483h2.12zM76.083 277.456h-2.12v19.483h2.12zM81.612 277.456h-2.119v19.483h2.119zM87.142 277.456h-2.119v19.483h2.12zM92.672 277.456h-2.12v19.483h2.12zM98.15 277.456h-2.119v19.483h2.119zM103.679 277.456h-2.119v19.483h2.119zM109.209 277.456h-2.119v19.483h2.119zM114.739 277.456h-2.119v19.483h2.119zM120.268 277.456h-2.119v19.483h2.119zM125.798 277.456h-2.119v19.483h2.119zM131.276 277.456h-2.119v19.483h2.119zM136.806 277.456h-2.119v19.483h2.119zM142.336 277.456h-2.119v19.483h2.119zM147.866 277.456h-2.119v19.483h2.119zM153.395 277.456h-2.119v19.483h2.119zM158.925 277.456h-2.118v19.483h2.118zM164.455 277.456h-2.119v19.483h2.119z"
+            ></path>
+            <path
+                fill="#753DF6"
+                d="M169.933 277.456h-2.119v19.483h2.119zM175.462 277.456h-2.118v19.483h2.118zM180.992 277.456h-2.119v19.483h2.119zM186.522 277.456h-2.119v19.483h2.119zM192.051 277.456h-2.119v19.483h2.119z"
+            ></path>
+            <path
+                fill="#0F0B0B"
+                stroke="#0F0B0B"
+                strokeLinejoin="round"
+                strokeMiterlimit="10"
+                strokeWidth="1.5"
+                d="m114.659 227.249 50.666-73.063 91.38 1.707-46.127 73.479z"
+            ></path>
+            <path
+                fill="#753DF6"
+                d="M310.17 226.417a14.4 14.4 0 0 0-.416-2.456c-1-3.913-3.373-7.41-6.703-9.7a17 17 0 0 0-9.867-2.997c-.499 0-1.707.125-2.248.166-.166.042-.374.042-.541.083-.624.125-1.207.25-1.832.458-1.873.583-3.663 1.457-5.204 2.623-3.289 2.54-5.453 6.037-6.203 10.075l-.041.125-9.367.791-5.163.416-4.787.375a9 9 0 0 0-.208 1.165 9.7 9.7 0 0 0-.125 1.582c-.042.958.041 1.957.208 2.873.208 1.041.499 2.04.916 2.956l2.831-.25 4.08-.333c.957-.083 1.831-.167 2.622-.208 9.284-.791 9.825-.791 9.825-.791.167.458.292.749.417.957a16.66 16.66 0 0 0 7.826 8.118c2.207 1.083 4.58 1.707 7.078 1.749h.499c.541 0 1.957-.125 2.456-.208a16.6 16.6 0 0 0 7.119-2.914 19.4 19.4 0 0 0 2.207-1.874 16.37 16.37 0 0 0 4.538-9.741c.208-.958.208-1.874.083-3.04m-13.156 8.327c-.707.333-1.373.583-2.248.707-.166.042-1.332.125-1.498.084-.292-.042-.583-.042-.875-.084-.957-.124-1.748-.416-2.539-.832-1.874-.999-3.247-2.665-3.83-4.705-.167-.499-.208-.749-.25-1.457-.083-.749-.083-.957 0-1.54.333-3.039 2.415-5.579 5.329-6.453.125-.041.291-.083.458-.125a6 6 0 0 1 1.249-.208 4.7 4.7 0 0 1 1.082 0h.208a8 8 0 0 1 1.665.333c2.373.708 4.33 2.54 5.121 4.913a8.4 8.4 0 0 1 .416 1.831c.042.708.042 1.208-.041 1.874a6.7 6.7 0 0 1-.5 1.79c-.791 1.665-2.081 3.039-3.747 3.872"
+            ></path>
+            <path
+                fill="url(#paint1_linear_131_950)"
+                d="M152.128 222.627c18.109 0 32.805-14.696 32.805-32.805s-14.696-32.806-32.805-32.806-32.806 14.696-32.806 32.806 14.696 32.805 32.806 32.805"
+            ></path>
+            <path
+                fill="url(#paint2_linear_131_950)"
+                d="M152.128 222.627c18.109 0 32.805-14.696 32.805-32.805s-14.696-32.806-32.805-32.806-32.806 14.696-32.806 32.806 14.696 32.805 32.806 32.805"
+            ></path>
+            <path
+                stroke="#0F0B0B"
+                strokeMiterlimit="10"
+                strokeWidth="1.5"
+                d="M152.127 216.05c14.488 0 26.228-11.74 26.228-26.228s-11.74-26.228-26.228-26.228-26.228 11.74-26.228 26.228 11.74 26.228 26.228 26.228Z"
+            ></path>
+            <g filter="url(#filter3_n_131_950)">
+                <path
+                    fill="url(#paint3_linear_131_950)"
+                    d="M150.504 114.969c18.109 0 32.805-14.696 32.805-32.806s-14.696-32.805-32.805-32.805-32.806 14.696-32.806 32.805 14.696 32.806 32.806 32.806"
+                ></path>
+                <path
+                    fill="url(#paint4_linear_131_950)"
+                    d="M150.504 114.969c18.109 0 32.805-14.696 32.805-32.806s-14.696-32.805-32.805-32.805-32.806 14.696-32.806 32.805 14.696 32.806 32.806 32.806"
+                ></path>
+            </g>
+            <path
+                stroke="#0F0B0B"
+                strokeMiterlimit="10"
+                strokeWidth="1.5"
+                d="M150.504 108.391c14.488 0 26.228-11.74 26.228-26.228 0-14.487-11.74-26.227-26.228-26.227s-26.228 11.74-26.228 26.227 11.74 26.228 26.228 26.228Z"
+            ></path>
+            <path
+                fill="#0F0B0B"
+                d="M240.761 167.466c6.661-16.861.291-35.178-14.238-40.924-14.53-5.745-31.723 3.248-38.384 20.108-6.661 16.861-.292 35.179 14.237 40.924s31.724-3.247 38.385-20.108"
+            ></path>
+            <path
+                fill="#0F0B0B"
+                d="M235.473 165.385c5.329-13.489.209-28.101-11.407-32.722s-25.395 2.581-30.723 16.069c-5.329 13.489-.209 28.101 11.407 32.723 11.656 4.579 25.395-2.582 30.723-16.07"
+            ></path>
+            <path
+                fill="url(#paint5_linear_131_950)"
+                d="M182.601 144.194c6.661-16.861 23.855-25.853 38.385-20.066s20.898 24.063 14.237 40.923-23.854 25.853-38.384 20.067c-14.529-5.787-20.899-24.105-14.238-40.924"
+            ></path>
+            <path
+                fill="url(#paint6_linear_131_950)"
+                d="M182.601 144.194c6.661-16.861 23.855-25.853 38.385-20.066s20.898 24.063 14.237 40.923-23.854 25.853-38.384 20.067c-14.529-5.787-20.899-24.105-14.238-40.924"
+            ></path>
+            <path
+                stroke="#0F0B0B"
+                strokeMiterlimit="10"
+                strokeWidth="1.5"
+                d="M229.978 162.928c5.329-13.488.208-28.101-11.407-32.722s-25.395 2.581-30.724 16.07c-5.329 13.488-.208 28.101 11.407 32.722 11.657 4.621 25.395-2.581 30.724-16.07Z"
+            ></path>
+        </g>
+        <defs>
+            <linearGradient
+                id="paint0_linear_131_950"
+                x1="171.97"
+                x2="198.158"
+                y1="290.871"
+                y2="227.29"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#BB7DFF"></stop>
+                <stop offset="1" stopColor="#FFC49C"></stop>
+            </linearGradient>
+            <linearGradient
+                id="paint1_linear_131_950"
+                x1="124.739"
+                x2="185.864"
+                y1="171.959"
+                y2="233.566"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#9E86FF"></stop>
+                <stop offset="1" stopColor="#FFAA9A"></stop>
+            </linearGradient>
+            <linearGradient
+                id="paint2_linear_131_950"
+                x1="145.126"
+                x2="171.975"
+                y1="206.016"
+                y2="167.344"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#BB7DFF"></stop>
+                <stop offset="1" stopColor="#FFC49C"></stop>
+            </linearGradient>
+            <linearGradient
+                id="paint3_linear_131_950"
+                x1="123.115"
+                x2="184.241"
+                y1="64.3"
+                y2="125.908"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#9E86FF"></stop>
+                <stop offset="1" stopColor="#FFAA9A"></stop>
+            </linearGradient>
+            <linearGradient
+                id="paint4_linear_131_950"
+                x1="143.502"
+                x2="170.351"
+                y1="98.357"
+                y2="59.685"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#BB7DFF"></stop>
+                <stop offset="1" stopColor="#FFC49C"></stop>
+            </linearGradient>
+            <linearGradient
+                id="paint5_linear_131_950"
+                x1="184.741"
+                x2="244.534"
+                y1="137.062"
+                y2="191.165"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#9E86FF"></stop>
+                <stop offset="1" stopColor="#FFAA9A"></stop>
+            </linearGradient>
+            <linearGradient
+                id="paint6_linear_131_950"
+                x1="202.733"
+                x2="229.998"
+                y1="170.542"
+                y2="135.286"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stopColor="#BB7DFF"></stop>
+                <stop offset="1" stopColor="#FFC49C"></stop>
+            </linearGradient>
+            <filter
+                id="filter0_n_131_950"
+                width="143.503"
+                height="85.136"
+                x="115.533"
+                y="227.29"
+                colorInterpolationFilters="sRGB"
+                filterUnits="userSpaceOnUse"
+            >
+                <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
+                <feBlend
+                    in="SourceGraphic"
+                    in2="BackgroundImageFix"
+                    result="shape"
+                ></feBlend>
+                <feTurbulence
+                    baseFrequency="2 2"
+                    numOctaves="3"
+                    result="noise"
+                    seed="821"
+                    stitchTiles="stitch"
+                    type="fractalNoise"
+                ></feTurbulence>
+                <feColorMatrix
+                    in="noise"
+                    result="alphaNoise"
+                    type="luminanceToAlpha"
+                ></feColorMatrix>
+                <feComponentTransfer in="alphaNoise" result="coloredNoise1">
+                    <feFuncA
+                        tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
+                        type="discrete"
+                    ></feFuncA>
+                </feComponentTransfer>
+                <feComposite
+                    in="coloredNoise1"
+                    in2="shape"
+                    operator="in"
+                    result="noise1Clipped"
+                ></feComposite>
+                <feFlood
+                    floodColor="rgba(0, 0, 0, 0.25)"
+                    result="color1Flood"
+                ></feFlood>
+                <feComposite
+                    in="color1Flood"
+                    in2="noise1Clipped"
+                    operator="in"
+                    result="color1"
+                ></feComposite>
+                <feMerge result="effect1_noise_131_950">
+                    <feMergeNode in="shape"></feMergeNode>
+                    <feMergeNode in="color1"></feMergeNode>
+                </feMerge>
+            </filter>
+            <filter
+                id="filter1_n_131_950"
+                width="119.69"
+                height="34.887"
+                x="90.888"
+                y="227.249"
+                colorInterpolationFilters="sRGB"
+                filterUnits="userSpaceOnUse"
+            >
+                <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
+                <feBlend
+                    in="SourceGraphic"
+                    in2="BackgroundImageFix"
+                    result="shape"
+                ></feBlend>
+                <feTurbulence
+                    baseFrequency="2 2"
+                    numOctaves="3"
+                    result="noise"
+                    seed="821"
+                    stitchTiles="stitch"
+                    type="fractalNoise"
+                ></feTurbulence>
+                <feColorMatrix
+                    in="noise"
+                    result="alphaNoise"
+                    type="luminanceToAlpha"
+                ></feColorMatrix>
+                <feComponentTransfer in="alphaNoise" result="coloredNoise1">
+                    <feFuncA
+                        tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
+                        type="discrete"
+                    ></feFuncA>
+                </feComponentTransfer>
+                <feComposite
+                    in="coloredNoise1"
+                    in2="shape"
+                    operator="in"
+                    result="noise1Clipped"
+                ></feComposite>
+                <feFlood
+                    floodColor="rgba(0, 0, 0, 0.25)"
+                    result="color1Flood"
+                ></feFlood>
+                <feComposite
+                    in="color1Flood"
+                    in2="noise1Clipped"
+                    operator="in"
+                    result="color1"
+                ></feComposite>
+                <feMerge result="effect1_noise_131_950">
+                    <feMergeNode in="shape"></feMergeNode>
+                    <feMergeNode in="color1"></feMergeNode>
+                </feMerge>
+            </filter>
+            <filter
+                id="filter2_n_131_950"
+                width="87.009"
+                height="93.67"
+                x="210.578"
+                y="135.326"
+                colorInterpolationFilters="sRGB"
+                filterUnits="userSpaceOnUse"
+            >
+                <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
+                <feBlend
+                    in="SourceGraphic"
+                    in2="BackgroundImageFix"
+                    result="shape"
+                ></feBlend>
+                <feTurbulence
+                    baseFrequency="2 2"
+                    numOctaves="3"
+                    result="noise"
+                    seed="821"
+                    stitchTiles="stitch"
+                    type="fractalNoise"
+                ></feTurbulence>
+                <feColorMatrix
+                    in="noise"
+                    result="alphaNoise"
+                    type="luminanceToAlpha"
+                ></feColorMatrix>
+                <feComponentTransfer in="alphaNoise" result="coloredNoise1">
+                    <feFuncA
+                        tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
+                        type="discrete"
+                    ></feFuncA>
+                </feComponentTransfer>
+                <feComposite
+                    in="coloredNoise1"
+                    in2="shape"
+                    operator="in"
+                    result="noise1Clipped"
+                ></feComposite>
+                <feFlood
+                    floodColor="rgba(0, 0, 0, 0.25)"
+                    result="color1Flood"
+                ></feFlood>
+                <feComposite
+                    in="color1Flood"
+                    in2="noise1Clipped"
+                    operator="in"
+                    result="color1"
+                ></feComposite>
+                <feMerge result="effect1_noise_131_950">
+                    <feMergeNode in="shape"></feMergeNode>
+                    <feMergeNode in="color1"></feMergeNode>
+                </feMerge>
+            </filter>
+            <filter
+                id="filter3_n_131_950"
+                width="65.611"
+                height="65.611"
+                x="117.698"
+                y="49.358"
+                colorInterpolationFilters="sRGB"
+                filterUnits="userSpaceOnUse"
+            >
+                <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
+                <feBlend
+                    in="SourceGraphic"
+                    in2="BackgroundImageFix"
+                    result="shape"
+                ></feBlend>
+                <feTurbulence
+                    baseFrequency="2 2"
+                    numOctaves="3"
+                    result="noise"
+                    seed="821"
+                    stitchTiles="stitch"
+                    type="fractalNoise"
+                ></feTurbulence>
+                <feColorMatrix
+                    in="noise"
+                    result="alphaNoise"
+                    type="luminanceToAlpha"
+                ></feColorMatrix>
+                <feComponentTransfer in="alphaNoise" result="coloredNoise1">
+                    <feFuncA
+                        tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
+                        type="discrete"
+                    ></feFuncA>
+                </feComponentTransfer>
+                <feComposite
+                    in="coloredNoise1"
+                    in2="shape"
+                    operator="in"
+                    result="noise1Clipped"
+                ></feComposite>
+                <feFlood
+                    floodColor="rgba(0, 0, 0, 0.25)"
+                    result="color1Flood"
+                ></feFlood>
+                <feComposite
+                    in="color1Flood"
+                    in2="noise1Clipped"
+                    operator="in"
+                    result="color1"
+                ></feComposite>
+                <feMerge result="effect1_noise_131_950">
+                    <feMergeNode in="shape"></feMergeNode>
+                    <feMergeNode in="color1"></feMergeNode>
+                </feMerge>
+            </filter>
+            <clipPath id="clip0_131_950">
+                <path fill="#fff" d="M68.45 24.754H367.86v326.805H68.45z"></path>
+            </clipPath>
+        </defs>
+    </svg>
+);
+
diff --git a/apps/developer-hub/src/components/Pages/Homepage/home-content-cards.tsx b/apps/developer-hub/src/components/Pages/Homepage/home-content-cards.tsx
index 9e75290b70..3e9ba72538 100644
--- a/apps/developer-hub/src/components/Pages/Homepage/home-content-cards.tsx
+++ b/apps/developer-hub/src/components/Pages/Homepage/home-content-cards.tsx
@@ -1,26 +1,45 @@
-import { Book, ChartScatter, CodeBlock, CurrencyDollarSimple, Key, ListChecks, Wrench } from "@phosphor-icons/react/dist/ssr";
+import { ArrowsDownUp, Book, ChartScatter, CheckCircle, CodeBlock, Coin, CurrencyBtc, CurrencyDollarSimple, DiceFive, GlobeSimple, Key, Lightning, ListChecks, Network, SlidersHorizontal, Wrench } from "@phosphor-icons/react/dist/ssr";
+import type { ReactNode } from "react";
 
 
-export type ProductCardConfigType = {
-  title: string;
-  description: string;
+
+
+
+type Feature = {
+  label: string;
+  icon?: ReactNode | undefined;
+};
+
+type QuickLink = {
+  label: string;
   href: string;
-  features: { label: string }[];
-  quickLinks: { label: string; href: string }[];
 };
 
+export type ProductCardConfigType = {
+  title: string;
+  badge?: string | undefined;
+  description?: string | undefined;
+  icon?: ReactNode | undefined;
+  features?: Feature[] | undefined;
+  quickLinks?: QuickLink[] | undefined;
+  buttonLabel?: string | undefined;
+  href?: string | undefined;
+  external?: boolean | undefined;
+  className?: string | undefined;
+};
 
 export const products: ProductCardConfigType[] = [
   {
-    title: "Pyth Pro",
+    title: "Pyth",
+    badge: "PRO",
     description:
       "Subscription-based price data for institutions and advanced use cases. Previously known as Lazer.",
     href: "/price-feeds/pro",
     features: [
-      { label: "Ultra-low latency" },
-      { label: "Crypto, Equities & Indexes" },
-      { label: "Customizable channels and latency" },
-      { label: "Dedicated support" },
+      { label: "Ultra-low latency", icon: <Lightning /> },
+      { label: "Crypto, Equities & Indexes", icon: <CurrencyBtc /> },
+      { label: "Customizable channels and latency", icon: <SlidersHorizontal /> },
+      { label: "Dedicated support", icon: <Wrench /> },
     ],
     quickLinks: [
       {
@@ -35,15 +54,16 @@ export const products: ProductCardConfigType[] = [
     ],
   },
   {
-    title: "Pyth Core",
+    title: "Pyth",
+    badge: "CORE",
     description:
       "Decentralized price feeds for DeFi and TradFi builders with deterministic on-chain delivery.",
     href: "/price-feeds/core",
     features: [
-      { label: "400ms update frequency" },
-      { label: "100+ blockchains" },
-      { label: "Supports Pull and Push updates" },
-      { label: "Decentralized Oracle" },
+      { label: "400ms update frequency", icon: <Lightning /> },
+      { label: "100+ blockchains", icon: <Network /> },
+      { label: "Supports Pull and Push updates", icon: <ArrowsDownUp /> },
+      { label: "Decentralized Oracle", icon: <GlobeSimple /> },
     ],
     quickLinks: [
       {
@@ -63,10 +83,10 @@ export const products: ProductCardConfigType[] = [
       "Secure, Verifiable Random Number Generator for EVM-based smart contracts.",
     href: "/entropy",
     features: [
-      { label: "On-chain randomness" },
-      { label: "Verifiable results" },
-      { label: "Pay in native token" },
-      { label: "Supports 20+ EVM chains" },
+      { label: "On-chain randomness", icon: <DiceFive /> },
+      { label: "Verifiable results", icon: <CheckCircle /> },
+      { label: "Pay in native token", icon: <Coin /> },
+      { label: "Supports 20+ EVM chains", icon: <Network /> },
     ],
     quickLinks: [
       {
diff --git a/apps/developer-hub/src/components/Pages/Homepage/index.tsx b/apps/developer-hub/src/components/Pages/Homepage/index.tsx
index 1c101dd8d6..bf74fe677b 100644
--- a/apps/developer-hub/src/components/Pages/Homepage/index.tsx
+++ b/apps/developer-hub/src/components/Pages/Homepage/index.tsx
@@ -4,81 +4,78 @@ import { SectionTitle } from "../../Shared/section-title";
 import { Card, Cards } from "fumadocs-ui/components/card";
 import { additionalResources, developerResources, products } from "./home-content-cards";
 import { SectionContainer } from "../../Shared/section-container";
+import { BoxSVG } from "./BoxSVG";
 
 export const Homepage = () => (
-  <div className={styles.preview}>
-    <section className={styles.sectionHero}>
+  <>
+    <section className="border-b pt-24 pb-24">
       <SectionContainer>
-        <div className={styles.sectionHeroContent}>
-          <div className={styles.heroCopy}>
-            <h1 className={styles.heroTitle}>Developer Hub</h1>
-            <p className={styles.heroSubtitle}>
-              Integrate with the global price layer.
-            </p>
-          </div>
+        <div className={styles.heroCopy}>
+          <h1 className={styles.heroTitle}>Developer Hub</h1>
+          <p className={styles.heroSubtitle}>
+            Integrate with the global price layer.
+          </p>
         </div>
       </SectionContainer>
     </section>
 
-    <section>
+    <section className="pt-24 pb-24">
       <SectionContainer>
         <SectionTitle title="Products" subtitle="Connect to the global market data and randomness layer." />
-        <div className={styles.productsGrid}>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {products.map((product) => (
-            <div key={product.title} className={styles.productsCardWrapper}>
-              <ProductCard
-                title={product.title}
-                description={product.description}
-                features={product.features}
-                quickLinks={product.quickLinks}
-                buttonLabel="Get started"
-                buttonHref={product.href} />
-            </div>
+            <ProductCard
+              key={product.title}
+              title={product.title}
+              description={product.description}
+              features={product.features}
+              quickLinks={product.quickLinks}
+              badge={product.badge}
+              buttonLabel="Get started"
+              href={product.href} />
           ))}
         </div>
       </SectionContainer>
     </section>
 
-    <section>
+    <section className="pt-24 pb-24 bg-fd-card flex flex-col justify-end bg-gradient-to-bl  from-fd-background to-fd-card border-t border-b overflow-hidden">
       <SectionContainer>
-        <SectionTitle title="Products" subtitle="Connect to the global market data and randomness layer." />
-        <div className={styles.productsGrid}>
-          <Cards>
-            {additionalResources.map(({ title, description, href, icon }, index) => (
-              <Card
-                key={`resource-${index}`}
-                icon={icon}
-                href={href}
-                title={title}
-              >
-                {description}
-              </Card>
-            ))}
-          </Cards>
-        </div>
+        <SectionTitle title="Additional Resources" subtitle="Explore the Pyth Network">
+          <BoxSVG className="w-64 aspect-square absolute md:relative -right-24 -bottom-48 md:top-0 md:right-0 pointer-events-none" />
+        </SectionTitle>
+        <Cards className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 z-10">
+          {additionalResources.map(({ title, description, href, icon }, index) => (
+            <Card
+              key={`resource-${index}`}
+              icon={icon}
+              href={href}
+              title={title}
+            >
+              {description}
+            </Card>
+          ))}
+        </Cards>
       </SectionContainer>
     </section>
 
-    <section>
+    <section className="pt-24 pb-24">
       <SectionContainer>
-        <SectionTitle title="Products" subtitle="Connect to the global market data and randomness layer." />
-        <div className={styles.productsGrid}>
-          <Cards>
-            {developerResources.map(({ title, description, href, icon }, index) => (
-              <Card
-                key={`resource-${index}`}
-                icon={icon}
-                href={href}
-                title={title}
-              >
-                {description}
-              </Card>
-            ))}
-          </Cards>
-        </div>
+        <SectionTitle title="Developer Resources" subtitle="Resources for developers." />
+        <Cards className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {developerResources.map(({ title, description, href, icon }, index) => (
+            <Card
+              key={`resource-${index}`}
+              icon={icon}
+              href={href}
+              title={title}
+            >
+              {description}
+            </Card>
+          ))}
+        </Cards>
       </SectionContainer>
     </section>
-  </div>
+  </>
 );
 
 
diff --git a/apps/developer-hub/src/components/ProductCard/index.tsx b/apps/developer-hub/src/components/ProductCard/index.tsx
index ea0a0f2fb2..4f1346256e 100644
--- a/apps/developer-hub/src/components/ProductCard/index.tsx
+++ b/apps/developer-hub/src/components/ProductCard/index.tsx
@@ -1,123 +1,61 @@
 "use client";
-
-import { Lightning } from "@phosphor-icons/react/dist/ssr";
+import type { ProductCardConfigType } from "../Pages/Homepage/home-content-cards";
 import { Button } from "@pythnetwork/component-library/Button";
 import { Link } from "@pythnetwork/component-library/Link";
-import { clsx } from "clsx";
-
-import { useRouter } from "next/navigation";
-import type { ReactNode } from "react";
-
-import styles from "./index.module.scss";
 
-type Feature = {
-  label: string;
-  icon?: ReactNode;
-};
 
-type QuickLink = {
-  label: string;
-  href: string;
-};
 
-type ProductCardProps = {
-  title: string;
-  description?: string;
-  icon?: ReactNode;
-  features?: Feature[];
-  quickLinks?: QuickLink[];
-  buttonLabel?: string;
-  buttonHref?: string;
-  external?: boolean;
-  className?: string;
-};
 
 export function ProductCard({
   title,
   description,
-  icon,
   features,
   quickLinks,
   buttonLabel,
-  buttonHref,
-  external,
-  className,
-}: ProductCardProps) {
-  const router = useRouter();
-
-  const handleButtonClick = () => {
-    if (!buttonHref) return;
-
-    if (external) {
-      window.open(buttonHref, "_blank", "noopener,noreferrer");
-    } else {
-      router.push(buttonHref);
-    }
-  };
+  href,
+  badge,
+}: ProductCardConfigType) {
 
   return (
-    <div className={clsx(styles.card, className)}>
-      <div className={styles.content}>
-        <div className={styles.mainContent}>
-          <div className={styles.header}>
-            <h3 className={styles.title}>{title}</h3>
-            {description && <p className={styles.description}>{description}</p>}
-            {icon && <div className={styles.icon}>{icon}</div>}
-            {buttonLabel && (
-              <div className={styles.buttonWrapper}>
-                <Button
-                  onClick={(e) => {
-                    e.preventDefault();
-                    handleButtonClick();
-                  }}
-                  size="sm"
-                  variant="primary"
-                  className={clsx(styles.button, className)}
-                >
-                  {buttonLabel}
-                </Button>
-              </div>
-            )}
+    <div className="bg-fd-card rounded-xl border border-fd-border overflow-hidden">
+      <div className="p-6 border-b border-fd-border h-[250px] flex flex-col justify-between items-start">
+        <div className="flex flex-col gap-4 items-start">
+          <div className="flex items-center gap-2">
+            <h3 className="text-2xl font-medium">{title}</h3>
+            {badge && <ProductBadge badge={badge} />}
           </div>
+          {description && <p className="opacity-75 text-lg leading-normal">{description}</p>}
 
-
-
-          {features && features.length > 0 && (
-            <div className={styles.featuresSection}>
-              <p className={styles.sectionLabel}>FEATURES</p>
-              <div className={styles.features}>
-                {features.map((feature) => (
-                  <div key={feature.label} className={styles.featureItem}>
-                    <div className={styles.featureIcon}>
-                      {feature.icon ?? <Lightning size={12.5} />}
-                    </div>
-                    <span className={styles.featureLabel}>{feature.label}</span>
-                    <div className={styles.featureShadow} />
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {quickLinks && quickLinks.length > 0 && (
-            <div className={styles.quickLinksSection}>
-              <p className={styles.sectionLabel}>QUICK LINKS</p>
-              <div className={styles.quickLinks}>
-                {quickLinks.map((link) => (
-                  <Link
-                    key={link.href}
-                    href={link.href}
-                  >
-                    {link.label}
-                  </Link>
-                ))}
-              </div>
-            </div>
-          )}
         </div>
-
-
+        <Button href={href} size="sm" variant="solid">{buttonLabel}</Button>
+      </div>
+      <div className="p-6 bg-fd-background flex flex-col gap-10">
+        <div className="flex flex-col gap-4">
+          <small className="text-sm font-medium uppercase opacity-50">Features</small>
+          <ul className="flex flex-col gap-2">
+            {features?.map((feature, index) => (
+              <li key={index} className="inline-flex gap-2">{feature.icon && <span className="opacity-50">{feature.icon}</span>} {feature.label}</li>
+            ))}
+          </ul>
+        </div>
+        <div className="flex flex-col gap-4">
+          <small className="text-sm font-medium uppercase opacity-50">Quick Links</small>
+          <ul className="flex flex-col gap-2">
+            {quickLinks?.map((link, index) => (
+              <li key={index}>
+                <Link href={link.href}>{link.label}</Link>
+              </li>
+            ))}
+          </ul>
+        </div>
       </div>
     </div>
   );
 }
+
+const ProductBadge = ({ badge }: { badge: string }) => {
+  return (
+    <div className={`rounded-lg  px-2 py-1 text-base border font-medium bg-fd-accent/10 shadow`}>{badge}</div>
+  )
+}
+
diff --git a/apps/developer-hub/src/components/Shared/footer.tsx b/apps/developer-hub/src/components/Shared/footer.tsx
index ce0e9fa808..d39e18dc30 100644
--- a/apps/developer-hub/src/components/Shared/footer.tsx
+++ b/apps/developer-hub/src/components/Shared/footer.tsx
@@ -1,8 +1,10 @@
 export const PageFooter = () => {
     return (
-        <footer style={{ padding: "1.5rem", display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: '0.5rem' }}>
-            <p style={{ opacity: 0.7, fontSize: '0.875rem' }}>&copy; {new Date().getFullYear()} Pyth Network. All rights reserved.</p>
-            <p style={{ opacity: 0.7, fontSize: '0.875rem' }}>Privacy Policy | Terms of Use</p>
-        </footer>
-    )
+        <>
+            <div className="w-full h-2 bg-gradient-to-r  from-violet-500 to-rose-400" />
+            <footer className="flex items-center justify-between gap-2 p-6 border-t border-fd-border">
+                <p className="opacity-75 text-sm">&copy; {new Date().getFullYear()} Pyth Network. All rights reserved.</p>
+                <p className="opacity-75 text-sm">Privacy Policy | Terms of Use</p>
+            </footer>
+        </>)
 }
\ No newline at end of file
diff --git a/apps/developer-hub/src/components/Shared/section-container.module.scss b/apps/developer-hub/src/components/Shared/section-container.module.scss
index 8b2fcea815..148cf06cbb 100644
--- a/apps/developer-hub/src/components/Shared/section-container.module.scss
+++ b/apps/developer-hub/src/components/Shared/section-container.module.scss
@@ -3,6 +3,7 @@
 .container {
   max-width: var(--spacing-fd-container);
   margin: 0 auto;
+  width: 100%;
   padding: 0 theme.spacing(4);
   > *:not(:last-child) {
     margin-bottom: theme.spacing(20);
diff --git a/apps/developer-hub/src/components/Shared/section-title.module.scss b/apps/developer-hub/src/components/Shared/section-title.module.scss
index 32f428171e..e0ac6de0d8 100644
--- a/apps/developer-hub/src/components/Shared/section-title.module.scss
+++ b/apps/developer-hub/src/components/Shared/section-title.module.scss
@@ -5,20 +5,22 @@
     flex-direction: row;
     gap: theme.spacing(8);
     justify-content: space-between;
+    max-height: theme.spacing(16);
+    align-items: center;
 }
 
 .title {
-  @include theme.text("3xl", "medium");
-
+  @include theme.text("2xl", "medium");
   color: theme.color("heading");
   margin-bottom: theme.spacing(2);
 }
 
 .subtitle {
-  @include theme.text("xl", "normal");
-  opacity: 0.7;
+  @include theme.text("2xl", "normal");
+  opacity: 0.65;
 }
 
 .slot {
-    // placeholder for children
+    position: relative;
+    z-index: 1;
 }
\ No newline at end of file

From 3c6c41d4f5362b64be6c0600353b333943a6d63f Mon Sep 17 00:00:00 2001
From: PartyParrotGreg <2233348+partyparrotgreg@users.noreply.github.com>
Date: Thu, 11 Dec 2025 09:27:25 +0000
Subject: [PATCH 3/4] refactor: Improve code formatting across components and
 remove redundant image container from homepage section cards.

---
 .../src/app/(homepage)/layout.tsx             |  10 +-
 .../src/components/Pages/Homepage/BoxSVG.tsx  | 441 ------------------
 .../src/components/Pages/Homepage/box-svg.tsx | 440 +++++++++++++++++
 .../Pages/Homepage/home-content-cards.tsx     |  57 ++-
 .../Pages/Homepage/index.module.scss          |   6 +-
 .../src/components/Pages/Homepage/index.tsx   |  76 +--
 .../Pages/Homepage/section-card.module.scss   |   2 +-
 .../Pages/Homepage/section-card.tsx           |   4 +-
 .../Pages/Homepage/section.module.scss        |   2 -
 .../src/components/ProductCard/index.tsx      |  40 +-
 .../src/components/Root/global.css            |   4 -
 .../Shared/content-section.module.scss        |   7 +-
 .../src/components/Shared/content-section.tsx |  26 +-
 .../src/components/Shared/footer.tsx          |  21 +-
 .../Shared/section-container.module.scss      |   3 +-
 .../components/Shared/section-container.tsx   |  17 +-
 .../Shared/section-title.module.scss          |  20 +-
 .../src/components/Shared/section-title.tsx   |  32 +-
 18 files changed, 630 insertions(+), 578 deletions(-)
 delete mode 100644 apps/developer-hub/src/components/Pages/Homepage/BoxSVG.tsx
 create mode 100644 apps/developer-hub/src/components/Pages/Homepage/box-svg.tsx

diff --git a/apps/developer-hub/src/app/(homepage)/layout.tsx b/apps/developer-hub/src/app/(homepage)/layout.tsx
index 0d2e43c68a..0b407c3572 100644
--- a/apps/developer-hub/src/app/(homepage)/layout.tsx
+++ b/apps/developer-hub/src/app/(homepage)/layout.tsx
@@ -5,8 +5,10 @@ import { baseOptions } from "../../config/layout.config";
 import { PageFooter } from "../../components/Shared/footer";
 
 export default function Layout({ children }: { children: ReactNode }) {
-  return (<HomeLayout {...baseOptions}>
-    <main>{children}</main>
-    <PageFooter />
-  </HomeLayout>);
+  return (
+    <HomeLayout {...baseOptions}>
+      <main>{children}</main>
+      <PageFooter />
+    </HomeLayout>
+  );
 }
diff --git a/apps/developer-hub/src/components/Pages/Homepage/BoxSVG.tsx b/apps/developer-hub/src/components/Pages/Homepage/BoxSVG.tsx
deleted file mode 100644
index c6c398737f..0000000000
--- a/apps/developer-hub/src/components/Pages/Homepage/BoxSVG.tsx
+++ /dev/null
@@ -1,441 +0,0 @@
-import * as React from "react";
-
-export const BoxSVG = (props: React.SVGProps<SVGSVGElement>) => (
-    <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="417"
-        height="417"
-        fill="none"
-        viewBox="0 0 417 417"
-        {...props}
-    >
-        <g clipPath="url(#clip0_131_950)">
-            <path
-                stroke="#0F0B0B"
-                strokeLinejoin="round"
-                strokeMiterlimit="10"
-                strokeWidth="1.5"
-                d="m257.706 155.892-46.128 73.48 48.459 83.054 45.128-77.851z"
-            ></path>
-            <g filter="url(#filter0_n_131_950)">
-                <path
-                    fill="url(#paint0_linear_131_950)"
-                    d="m210.577 228.997 48.459 83.429-97.334-.083-26.144-49.167-20.025-35.886 95.044 2.082"
-                ></path>
-            </g>
-            <path
-                fill="#0F0B0B"
-                stroke="#0F0B0B"
-                strokeLinejoin="round"
-                strokeMiterlimit="10"
-                strokeWidth="1.5"
-                d="M267.862 234.659c.042-.167.084-.292.167-.458.125-.333.208-.708.291-1.041.292-1.332.333-2.748.209-4.122-.125-1.207-.375-2.373-.833-3.455a3.7 3.7 0 0 0-.333-.708 4 4 0 0 0-.292-.583c-.083-.124-.166-.291-.249-.416a6 6 0 0 0-.375-.541c-2.123-2.873-5.246-2.998-7.286-.167-.666.916-1.124 2.04-1.415 3.248-.083.374-.167.749-.208 1.165a10 10 0 0 0-.125 1.582c-.042.958.042 1.957.208 2.873.208 1.041.5 2.04.916 2.956.125.249.208.458.375.707a.9.9 0 0 0 .166.25c1.083 1.832 2.54 2.831 3.997 2.914.791.042 1.54-.166 2.29-.666l1.082 3.789 3.455 12.156 7.452-10.324z"
-            ></path>
-            <path
-                fill="#753DF6"
-                d="m114.66 227.249-45.795-.999 56.161-73.812 39.841 2.164z"
-            ></path>
-            <g filter="url(#filter1_n_131_950)">
-                <path
-                    fill="#753DF6"
-                    d="m114.659 227.249-23.771 34.887h98.458l21.232-33.139z"
-                ></path>
-            </g>
-            <g filter="url(#filter2_n_131_950)">
-                <path
-                    fill="#753DF6"
-                    d="m210.578 228.997 46.128-73.105 40.881-20.566-44.878 73.604z"
-                ></path>
-            </g>
-            <path
-                fill="#753DF6"
-                d="m165.324 154.186 24.105-35.637 90.256 1.915-22.98 35.429z"
-            ></path>
-            <path
-                fill="#0F0B0B"
-                d="M245.923 324.624c0 7.494-5.662 13.655-12.948 14.488-.541.083-1.082.083-1.623.083-8.035 0-14.571-6.536-14.571-14.571h-12.323c0 14.862 12.031 26.935 26.935 26.935.542 0 1.124-.041 1.624-.083 14.113-.832 25.27-12.572 25.27-26.852z"
-            ></path>
-            <path
-                stroke="#F2E1F9"
-                strokeMiterlimit="10"
-                strokeWidth="1.5"
-                d="M210.286 327.246s1.166 18.485 20.316 18.485c19.151 0 21.44-18.485 21.44-18.485"
-            ></path>
-            <path
-                fill="#0F0B0B"
-                d="M70.553 277.456h-2.12v19.483h2.12zM76.083 277.456h-2.12v19.483h2.12zM81.612 277.456h-2.119v19.483h2.119zM87.142 277.456h-2.119v19.483h2.12zM92.672 277.456h-2.12v19.483h2.12zM98.15 277.456h-2.119v19.483h2.119zM103.679 277.456h-2.119v19.483h2.119zM109.209 277.456h-2.119v19.483h2.119zM114.739 277.456h-2.119v19.483h2.119zM120.268 277.456h-2.119v19.483h2.119zM125.798 277.456h-2.119v19.483h2.119zM131.276 277.456h-2.119v19.483h2.119zM136.806 277.456h-2.119v19.483h2.119zM142.336 277.456h-2.119v19.483h2.119zM147.866 277.456h-2.119v19.483h2.119zM153.395 277.456h-2.119v19.483h2.119zM158.925 277.456h-2.118v19.483h2.118zM164.455 277.456h-2.119v19.483h2.119z"
-            ></path>
-            <path
-                fill="#753DF6"
-                d="M169.933 277.456h-2.119v19.483h2.119zM175.462 277.456h-2.118v19.483h2.118zM180.992 277.456h-2.119v19.483h2.119zM186.522 277.456h-2.119v19.483h2.119zM192.051 277.456h-2.119v19.483h2.119z"
-            ></path>
-            <path
-                fill="#0F0B0B"
-                stroke="#0F0B0B"
-                strokeLinejoin="round"
-                strokeMiterlimit="10"
-                strokeWidth="1.5"
-                d="m114.659 227.249 50.666-73.063 91.38 1.707-46.127 73.479z"
-            ></path>
-            <path
-                fill="#753DF6"
-                d="M310.17 226.417a14.4 14.4 0 0 0-.416-2.456c-1-3.913-3.373-7.41-6.703-9.7a17 17 0 0 0-9.867-2.997c-.499 0-1.707.125-2.248.166-.166.042-.374.042-.541.083-.624.125-1.207.25-1.832.458-1.873.583-3.663 1.457-5.204 2.623-3.289 2.54-5.453 6.037-6.203 10.075l-.041.125-9.367.791-5.163.416-4.787.375a9 9 0 0 0-.208 1.165 9.7 9.7 0 0 0-.125 1.582c-.042.958.041 1.957.208 2.873.208 1.041.499 2.04.916 2.956l2.831-.25 4.08-.333c.957-.083 1.831-.167 2.622-.208 9.284-.791 9.825-.791 9.825-.791.167.458.292.749.417.957a16.66 16.66 0 0 0 7.826 8.118c2.207 1.083 4.58 1.707 7.078 1.749h.499c.541 0 1.957-.125 2.456-.208a16.6 16.6 0 0 0 7.119-2.914 19.4 19.4 0 0 0 2.207-1.874 16.37 16.37 0 0 0 4.538-9.741c.208-.958.208-1.874.083-3.04m-13.156 8.327c-.707.333-1.373.583-2.248.707-.166.042-1.332.125-1.498.084-.292-.042-.583-.042-.875-.084-.957-.124-1.748-.416-2.539-.832-1.874-.999-3.247-2.665-3.83-4.705-.167-.499-.208-.749-.25-1.457-.083-.749-.083-.957 0-1.54.333-3.039 2.415-5.579 5.329-6.453.125-.041.291-.083.458-.125a6 6 0 0 1 1.249-.208 4.7 4.7 0 0 1 1.082 0h.208a8 8 0 0 1 1.665.333c2.373.708 4.33 2.54 5.121 4.913a8.4 8.4 0 0 1 .416 1.831c.042.708.042 1.208-.041 1.874a6.7 6.7 0 0 1-.5 1.79c-.791 1.665-2.081 3.039-3.747 3.872"
-            ></path>
-            <path
-                fill="url(#paint1_linear_131_950)"
-                d="M152.128 222.627c18.109 0 32.805-14.696 32.805-32.805s-14.696-32.806-32.805-32.806-32.806 14.696-32.806 32.806 14.696 32.805 32.806 32.805"
-            ></path>
-            <path
-                fill="url(#paint2_linear_131_950)"
-                d="M152.128 222.627c18.109 0 32.805-14.696 32.805-32.805s-14.696-32.806-32.805-32.806-32.806 14.696-32.806 32.806 14.696 32.805 32.806 32.805"
-            ></path>
-            <path
-                stroke="#0F0B0B"
-                strokeMiterlimit="10"
-                strokeWidth="1.5"
-                d="M152.127 216.05c14.488 0 26.228-11.74 26.228-26.228s-11.74-26.228-26.228-26.228-26.228 11.74-26.228 26.228 11.74 26.228 26.228 26.228Z"
-            ></path>
-            <g filter="url(#filter3_n_131_950)">
-                <path
-                    fill="url(#paint3_linear_131_950)"
-                    d="M150.504 114.969c18.109 0 32.805-14.696 32.805-32.806s-14.696-32.805-32.805-32.805-32.806 14.696-32.806 32.805 14.696 32.806 32.806 32.806"
-                ></path>
-                <path
-                    fill="url(#paint4_linear_131_950)"
-                    d="M150.504 114.969c18.109 0 32.805-14.696 32.805-32.806s-14.696-32.805-32.805-32.805-32.806 14.696-32.806 32.805 14.696 32.806 32.806 32.806"
-                ></path>
-            </g>
-            <path
-                stroke="#0F0B0B"
-                strokeMiterlimit="10"
-                strokeWidth="1.5"
-                d="M150.504 108.391c14.488 0 26.228-11.74 26.228-26.228 0-14.487-11.74-26.227-26.228-26.227s-26.228 11.74-26.228 26.227 11.74 26.228 26.228 26.228Z"
-            ></path>
-            <path
-                fill="#0F0B0B"
-                d="M240.761 167.466c6.661-16.861.291-35.178-14.238-40.924-14.53-5.745-31.723 3.248-38.384 20.108-6.661 16.861-.292 35.179 14.237 40.924s31.724-3.247 38.385-20.108"
-            ></path>
-            <path
-                fill="#0F0B0B"
-                d="M235.473 165.385c5.329-13.489.209-28.101-11.407-32.722s-25.395 2.581-30.723 16.069c-5.329 13.489-.209 28.101 11.407 32.723 11.656 4.579 25.395-2.582 30.723-16.07"
-            ></path>
-            <path
-                fill="url(#paint5_linear_131_950)"
-                d="M182.601 144.194c6.661-16.861 23.855-25.853 38.385-20.066s20.898 24.063 14.237 40.923-23.854 25.853-38.384 20.067c-14.529-5.787-20.899-24.105-14.238-40.924"
-            ></path>
-            <path
-                fill="url(#paint6_linear_131_950)"
-                d="M182.601 144.194c6.661-16.861 23.855-25.853 38.385-20.066s20.898 24.063 14.237 40.923-23.854 25.853-38.384 20.067c-14.529-5.787-20.899-24.105-14.238-40.924"
-            ></path>
-            <path
-                stroke="#0F0B0B"
-                strokeMiterlimit="10"
-                strokeWidth="1.5"
-                d="M229.978 162.928c5.329-13.488.208-28.101-11.407-32.722s-25.395 2.581-30.724 16.07c-5.329 13.488-.208 28.101 11.407 32.722 11.657 4.621 25.395-2.581 30.724-16.07Z"
-            ></path>
-        </g>
-        <defs>
-            <linearGradient
-                id="paint0_linear_131_950"
-                x1="171.97"
-                x2="198.158"
-                y1="290.871"
-                y2="227.29"
-                gradientUnits="userSpaceOnUse"
-            >
-                <stop stopColor="#BB7DFF"></stop>
-                <stop offset="1" stopColor="#FFC49C"></stop>
-            </linearGradient>
-            <linearGradient
-                id="paint1_linear_131_950"
-                x1="124.739"
-                x2="185.864"
-                y1="171.959"
-                y2="233.566"
-                gradientUnits="userSpaceOnUse"
-            >
-                <stop stopColor="#9E86FF"></stop>
-                <stop offset="1" stopColor="#FFAA9A"></stop>
-            </linearGradient>
-            <linearGradient
-                id="paint2_linear_131_950"
-                x1="145.126"
-                x2="171.975"
-                y1="206.016"
-                y2="167.344"
-                gradientUnits="userSpaceOnUse"
-            >
-                <stop stopColor="#BB7DFF"></stop>
-                <stop offset="1" stopColor="#FFC49C"></stop>
-            </linearGradient>
-            <linearGradient
-                id="paint3_linear_131_950"
-                x1="123.115"
-                x2="184.241"
-                y1="64.3"
-                y2="125.908"
-                gradientUnits="userSpaceOnUse"
-            >
-                <stop stopColor="#9E86FF"></stop>
-                <stop offset="1" stopColor="#FFAA9A"></stop>
-            </linearGradient>
-            <linearGradient
-                id="paint4_linear_131_950"
-                x1="143.502"
-                x2="170.351"
-                y1="98.357"
-                y2="59.685"
-                gradientUnits="userSpaceOnUse"
-            >
-                <stop stopColor="#BB7DFF"></stop>
-                <stop offset="1" stopColor="#FFC49C"></stop>
-            </linearGradient>
-            <linearGradient
-                id="paint5_linear_131_950"
-                x1="184.741"
-                x2="244.534"
-                y1="137.062"
-                y2="191.165"
-                gradientUnits="userSpaceOnUse"
-            >
-                <stop stopColor="#9E86FF"></stop>
-                <stop offset="1" stopColor="#FFAA9A"></stop>
-            </linearGradient>
-            <linearGradient
-                id="paint6_linear_131_950"
-                x1="202.733"
-                x2="229.998"
-                y1="170.542"
-                y2="135.286"
-                gradientUnits="userSpaceOnUse"
-            >
-                <stop stopColor="#BB7DFF"></stop>
-                <stop offset="1" stopColor="#FFC49C"></stop>
-            </linearGradient>
-            <filter
-                id="filter0_n_131_950"
-                width="143.503"
-                height="85.136"
-                x="115.533"
-                y="227.29"
-                colorInterpolationFilters="sRGB"
-                filterUnits="userSpaceOnUse"
-            >
-                <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
-                <feBlend
-                    in="SourceGraphic"
-                    in2="BackgroundImageFix"
-                    result="shape"
-                ></feBlend>
-                <feTurbulence
-                    baseFrequency="2 2"
-                    numOctaves="3"
-                    result="noise"
-                    seed="821"
-                    stitchTiles="stitch"
-                    type="fractalNoise"
-                ></feTurbulence>
-                <feColorMatrix
-                    in="noise"
-                    result="alphaNoise"
-                    type="luminanceToAlpha"
-                ></feColorMatrix>
-                <feComponentTransfer in="alphaNoise" result="coloredNoise1">
-                    <feFuncA
-                        tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
-                        type="discrete"
-                    ></feFuncA>
-                </feComponentTransfer>
-                <feComposite
-                    in="coloredNoise1"
-                    in2="shape"
-                    operator="in"
-                    result="noise1Clipped"
-                ></feComposite>
-                <feFlood
-                    floodColor="rgba(0, 0, 0, 0.25)"
-                    result="color1Flood"
-                ></feFlood>
-                <feComposite
-                    in="color1Flood"
-                    in2="noise1Clipped"
-                    operator="in"
-                    result="color1"
-                ></feComposite>
-                <feMerge result="effect1_noise_131_950">
-                    <feMergeNode in="shape"></feMergeNode>
-                    <feMergeNode in="color1"></feMergeNode>
-                </feMerge>
-            </filter>
-            <filter
-                id="filter1_n_131_950"
-                width="119.69"
-                height="34.887"
-                x="90.888"
-                y="227.249"
-                colorInterpolationFilters="sRGB"
-                filterUnits="userSpaceOnUse"
-            >
-                <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
-                <feBlend
-                    in="SourceGraphic"
-                    in2="BackgroundImageFix"
-                    result="shape"
-                ></feBlend>
-                <feTurbulence
-                    baseFrequency="2 2"
-                    numOctaves="3"
-                    result="noise"
-                    seed="821"
-                    stitchTiles="stitch"
-                    type="fractalNoise"
-                ></feTurbulence>
-                <feColorMatrix
-                    in="noise"
-                    result="alphaNoise"
-                    type="luminanceToAlpha"
-                ></feColorMatrix>
-                <feComponentTransfer in="alphaNoise" result="coloredNoise1">
-                    <feFuncA
-                        tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
-                        type="discrete"
-                    ></feFuncA>
-                </feComponentTransfer>
-                <feComposite
-                    in="coloredNoise1"
-                    in2="shape"
-                    operator="in"
-                    result="noise1Clipped"
-                ></feComposite>
-                <feFlood
-                    floodColor="rgba(0, 0, 0, 0.25)"
-                    result="color1Flood"
-                ></feFlood>
-                <feComposite
-                    in="color1Flood"
-                    in2="noise1Clipped"
-                    operator="in"
-                    result="color1"
-                ></feComposite>
-                <feMerge result="effect1_noise_131_950">
-                    <feMergeNode in="shape"></feMergeNode>
-                    <feMergeNode in="color1"></feMergeNode>
-                </feMerge>
-            </filter>
-            <filter
-                id="filter2_n_131_950"
-                width="87.009"
-                height="93.67"
-                x="210.578"
-                y="135.326"
-                colorInterpolationFilters="sRGB"
-                filterUnits="userSpaceOnUse"
-            >
-                <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
-                <feBlend
-                    in="SourceGraphic"
-                    in2="BackgroundImageFix"
-                    result="shape"
-                ></feBlend>
-                <feTurbulence
-                    baseFrequency="2 2"
-                    numOctaves="3"
-                    result="noise"
-                    seed="821"
-                    stitchTiles="stitch"
-                    type="fractalNoise"
-                ></feTurbulence>
-                <feColorMatrix
-                    in="noise"
-                    result="alphaNoise"
-                    type="luminanceToAlpha"
-                ></feColorMatrix>
-                <feComponentTransfer in="alphaNoise" result="coloredNoise1">
-                    <feFuncA
-                        tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
-                        type="discrete"
-                    ></feFuncA>
-                </feComponentTransfer>
-                <feComposite
-                    in="coloredNoise1"
-                    in2="shape"
-                    operator="in"
-                    result="noise1Clipped"
-                ></feComposite>
-                <feFlood
-                    floodColor="rgba(0, 0, 0, 0.25)"
-                    result="color1Flood"
-                ></feFlood>
-                <feComposite
-                    in="color1Flood"
-                    in2="noise1Clipped"
-                    operator="in"
-                    result="color1"
-                ></feComposite>
-                <feMerge result="effect1_noise_131_950">
-                    <feMergeNode in="shape"></feMergeNode>
-                    <feMergeNode in="color1"></feMergeNode>
-                </feMerge>
-            </filter>
-            <filter
-                id="filter3_n_131_950"
-                width="65.611"
-                height="65.611"
-                x="117.698"
-                y="49.358"
-                colorInterpolationFilters="sRGB"
-                filterUnits="userSpaceOnUse"
-            >
-                <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
-                <feBlend
-                    in="SourceGraphic"
-                    in2="BackgroundImageFix"
-                    result="shape"
-                ></feBlend>
-                <feTurbulence
-                    baseFrequency="2 2"
-                    numOctaves="3"
-                    result="noise"
-                    seed="821"
-                    stitchTiles="stitch"
-                    type="fractalNoise"
-                ></feTurbulence>
-                <feColorMatrix
-                    in="noise"
-                    result="alphaNoise"
-                    type="luminanceToAlpha"
-                ></feColorMatrix>
-                <feComponentTransfer in="alphaNoise" result="coloredNoise1">
-                    <feFuncA
-                        tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
-                        type="discrete"
-                    ></feFuncA>
-                </feComponentTransfer>
-                <feComposite
-                    in="coloredNoise1"
-                    in2="shape"
-                    operator="in"
-                    result="noise1Clipped"
-                ></feComposite>
-                <feFlood
-                    floodColor="rgba(0, 0, 0, 0.25)"
-                    result="color1Flood"
-                ></feFlood>
-                <feComposite
-                    in="color1Flood"
-                    in2="noise1Clipped"
-                    operator="in"
-                    result="color1"
-                ></feComposite>
-                <feMerge result="effect1_noise_131_950">
-                    <feMergeNode in="shape"></feMergeNode>
-                    <feMergeNode in="color1"></feMergeNode>
-                </feMerge>
-            </filter>
-            <clipPath id="clip0_131_950">
-                <path fill="#fff" d="M68.45 24.754H367.86v326.805H68.45z"></path>
-            </clipPath>
-        </defs>
-    </svg>
-);
-
diff --git a/apps/developer-hub/src/components/Pages/Homepage/box-svg.tsx b/apps/developer-hub/src/components/Pages/Homepage/box-svg.tsx
new file mode 100644
index 0000000000..91eaff6069
--- /dev/null
+++ b/apps/developer-hub/src/components/Pages/Homepage/box-svg.tsx
@@ -0,0 +1,440 @@
+import * as React from "react";
+
+export const BoxSVG = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="417"
+    height="417"
+    fill="none"
+    viewBox="0 0 417 417"
+    {...props}
+  >
+    <g clipPath="url(#clip0_131_950)">
+      <path
+        stroke="#0F0B0B"
+        strokeLinejoin="round"
+        strokeMiterlimit="10"
+        strokeWidth="1.5"
+        d="m257.706 155.892-46.128 73.48 48.459 83.054 45.128-77.851z"
+      ></path>
+      <g filter="url(#filter0_n_131_950)">
+        <path
+          fill="url(#paint0_linear_131_950)"
+          d="m210.577 228.997 48.459 83.429-97.334-.083-26.144-49.167-20.025-35.886 95.044 2.082"
+        ></path>
+      </g>
+      <path
+        fill="#0F0B0B"
+        stroke="#0F0B0B"
+        strokeLinejoin="round"
+        strokeMiterlimit="10"
+        strokeWidth="1.5"
+        d="M267.862 234.659c.042-.167.084-.292.167-.458.125-.333.208-.708.291-1.041.292-1.332.333-2.748.209-4.122-.125-1.207-.375-2.373-.833-3.455a3.7 3.7 0 0 0-.333-.708 4 4 0 0 0-.292-.583c-.083-.124-.166-.291-.249-.416a6 6 0 0 0-.375-.541c-2.123-2.873-5.246-2.998-7.286-.167-.666.916-1.124 2.04-1.415 3.248-.083.374-.167.749-.208 1.165a10 10 0 0 0-.125 1.582c-.042.958.042 1.957.208 2.873.208 1.041.5 2.04.916 2.956.125.249.208.458.375.707a.9.9 0 0 0 .166.25c1.083 1.832 2.54 2.831 3.997 2.914.791.042 1.54-.166 2.29-.666l1.082 3.789 3.455 12.156 7.452-10.324z"
+      ></path>
+      <path
+        fill="#753DF6"
+        d="m114.66 227.249-45.795-.999 56.161-73.812 39.841 2.164z"
+      ></path>
+      <g filter="url(#filter1_n_131_950)">
+        <path
+          fill="#753DF6"
+          d="m114.659 227.249-23.771 34.887h98.458l21.232-33.139z"
+        ></path>
+      </g>
+      <g filter="url(#filter2_n_131_950)">
+        <path
+          fill="#753DF6"
+          d="m210.578 228.997 46.128-73.105 40.881-20.566-44.878 73.604z"
+        ></path>
+      </g>
+      <path
+        fill="#753DF6"
+        d="m165.324 154.186 24.105-35.637 90.256 1.915-22.98 35.429z"
+      ></path>
+      <path
+        fill="#0F0B0B"
+        d="M245.923 324.624c0 7.494-5.662 13.655-12.948 14.488-.541.083-1.082.083-1.623.083-8.035 0-14.571-6.536-14.571-14.571h-12.323c0 14.862 12.031 26.935 26.935 26.935.542 0 1.124-.041 1.624-.083 14.113-.832 25.27-12.572 25.27-26.852z"
+      ></path>
+      <path
+        stroke="#F2E1F9"
+        strokeMiterlimit="10"
+        strokeWidth="1.5"
+        d="M210.286 327.246s1.166 18.485 20.316 18.485c19.151 0 21.44-18.485 21.44-18.485"
+      ></path>
+      <path
+        fill="#0F0B0B"
+        d="M70.553 277.456h-2.12v19.483h2.12zM76.083 277.456h-2.12v19.483h2.12zM81.612 277.456h-2.119v19.483h2.119zM87.142 277.456h-2.119v19.483h2.12zM92.672 277.456h-2.12v19.483h2.12zM98.15 277.456h-2.119v19.483h2.119zM103.679 277.456h-2.119v19.483h2.119zM109.209 277.456h-2.119v19.483h2.119zM114.739 277.456h-2.119v19.483h2.119zM120.268 277.456h-2.119v19.483h2.119zM125.798 277.456h-2.119v19.483h2.119zM131.276 277.456h-2.119v19.483h2.119zM136.806 277.456h-2.119v19.483h2.119zM142.336 277.456h-2.119v19.483h2.119zM147.866 277.456h-2.119v19.483h2.119zM153.395 277.456h-2.119v19.483h2.119zM158.925 277.456h-2.118v19.483h2.118zM164.455 277.456h-2.119v19.483h2.119z"
+      ></path>
+      <path
+        fill="#753DF6"
+        d="M169.933 277.456h-2.119v19.483h2.119zM175.462 277.456h-2.118v19.483h2.118zM180.992 277.456h-2.119v19.483h2.119zM186.522 277.456h-2.119v19.483h2.119zM192.051 277.456h-2.119v19.483h2.119z"
+      ></path>
+      <path
+        fill="#0F0B0B"
+        stroke="#0F0B0B"
+        strokeLinejoin="round"
+        strokeMiterlimit="10"
+        strokeWidth="1.5"
+        d="m114.659 227.249 50.666-73.063 91.38 1.707-46.127 73.479z"
+      ></path>
+      <path
+        fill="#753DF6"
+        d="M310.17 226.417a14.4 14.4 0 0 0-.416-2.456c-1-3.913-3.373-7.41-6.703-9.7a17 17 0 0 0-9.867-2.997c-.499 0-1.707.125-2.248.166-.166.042-.374.042-.541.083-.624.125-1.207.25-1.832.458-1.873.583-3.663 1.457-5.204 2.623-3.289 2.54-5.453 6.037-6.203 10.075l-.041.125-9.367.791-5.163.416-4.787.375a9 9 0 0 0-.208 1.165 9.7 9.7 0 0 0-.125 1.582c-.042.958.041 1.957.208 2.873.208 1.041.499 2.04.916 2.956l2.831-.25 4.08-.333c.957-.083 1.831-.167 2.622-.208 9.284-.791 9.825-.791 9.825-.791.167.458.292.749.417.957a16.66 16.66 0 0 0 7.826 8.118c2.207 1.083 4.58 1.707 7.078 1.749h.499c.541 0 1.957-.125 2.456-.208a16.6 16.6 0 0 0 7.119-2.914 19.4 19.4 0 0 0 2.207-1.874 16.37 16.37 0 0 0 4.538-9.741c.208-.958.208-1.874.083-3.04m-13.156 8.327c-.707.333-1.373.583-2.248.707-.166.042-1.332.125-1.498.084-.292-.042-.583-.042-.875-.084-.957-.124-1.748-.416-2.539-.832-1.874-.999-3.247-2.665-3.83-4.705-.167-.499-.208-.749-.25-1.457-.083-.749-.083-.957 0-1.54.333-3.039 2.415-5.579 5.329-6.453.125-.041.291-.083.458-.125a6 6 0 0 1 1.249-.208 4.7 4.7 0 0 1 1.082 0h.208a8 8 0 0 1 1.665.333c2.373.708 4.33 2.54 5.121 4.913a8.4 8.4 0 0 1 .416 1.831c.042.708.042 1.208-.041 1.874a6.7 6.7 0 0 1-.5 1.79c-.791 1.665-2.081 3.039-3.747 3.872"
+      ></path>
+      <path
+        fill="url(#paint1_linear_131_950)"
+        d="M152.128 222.627c18.109 0 32.805-14.696 32.805-32.805s-14.696-32.806-32.805-32.806-32.806 14.696-32.806 32.806 14.696 32.805 32.806 32.805"
+      ></path>
+      <path
+        fill="url(#paint2_linear_131_950)"
+        d="M152.128 222.627c18.109 0 32.805-14.696 32.805-32.805s-14.696-32.806-32.805-32.806-32.806 14.696-32.806 32.806 14.696 32.805 32.806 32.805"
+      ></path>
+      <path
+        stroke="#0F0B0B"
+        strokeMiterlimit="10"
+        strokeWidth="1.5"
+        d="M152.127 216.05c14.488 0 26.228-11.74 26.228-26.228s-11.74-26.228-26.228-26.228-26.228 11.74-26.228 26.228 11.74 26.228 26.228 26.228Z"
+      ></path>
+      <g filter="url(#filter3_n_131_950)">
+        <path
+          fill="url(#paint3_linear_131_950)"
+          d="M150.504 114.969c18.109 0 32.805-14.696 32.805-32.806s-14.696-32.805-32.805-32.805-32.806 14.696-32.806 32.805 14.696 32.806 32.806 32.806"
+        ></path>
+        <path
+          fill="url(#paint4_linear_131_950)"
+          d="M150.504 114.969c18.109 0 32.805-14.696 32.805-32.806s-14.696-32.805-32.805-32.805-32.806 14.696-32.806 32.805 14.696 32.806 32.806 32.806"
+        ></path>
+      </g>
+      <path
+        stroke="#0F0B0B"
+        strokeMiterlimit="10"
+        strokeWidth="1.5"
+        d="M150.504 108.391c14.488 0 26.228-11.74 26.228-26.228 0-14.487-11.74-26.227-26.228-26.227s-26.228 11.74-26.228 26.227 11.74 26.228 26.228 26.228Z"
+      ></path>
+      <path
+        fill="#0F0B0B"
+        d="M240.761 167.466c6.661-16.861.291-35.178-14.238-40.924-14.53-5.745-31.723 3.248-38.384 20.108-6.661 16.861-.292 35.179 14.237 40.924s31.724-3.247 38.385-20.108"
+      ></path>
+      <path
+        fill="#0F0B0B"
+        d="M235.473 165.385c5.329-13.489.209-28.101-11.407-32.722s-25.395 2.581-30.723 16.069c-5.329 13.489-.209 28.101 11.407 32.723 11.656 4.579 25.395-2.582 30.723-16.07"
+      ></path>
+      <path
+        fill="url(#paint5_linear_131_950)"
+        d="M182.601 144.194c6.661-16.861 23.855-25.853 38.385-20.066s20.898 24.063 14.237 40.923-23.854 25.853-38.384 20.067c-14.529-5.787-20.899-24.105-14.238-40.924"
+      ></path>
+      <path
+        fill="url(#paint6_linear_131_950)"
+        d="M182.601 144.194c6.661-16.861 23.855-25.853 38.385-20.066s20.898 24.063 14.237 40.923-23.854 25.853-38.384 20.067c-14.529-5.787-20.899-24.105-14.238-40.924"
+      ></path>
+      <path
+        stroke="#0F0B0B"
+        strokeMiterlimit="10"
+        strokeWidth="1.5"
+        d="M229.978 162.928c5.329-13.488.208-28.101-11.407-32.722s-25.395 2.581-30.724 16.07c-5.329 13.488-.208 28.101 11.407 32.722 11.657 4.621 25.395-2.581 30.724-16.07Z"
+      ></path>
+    </g>
+    <defs>
+      <linearGradient
+        id="paint0_linear_131_950"
+        x1="171.97"
+        x2="198.158"
+        y1="290.871"
+        y2="227.29"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#BB7DFF"></stop>
+        <stop offset="1" stopColor="#FFC49C"></stop>
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_131_950"
+        x1="124.739"
+        x2="185.864"
+        y1="171.959"
+        y2="233.566"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#9E86FF"></stop>
+        <stop offset="1" stopColor="#FFAA9A"></stop>
+      </linearGradient>
+      <linearGradient
+        id="paint2_linear_131_950"
+        x1="145.126"
+        x2="171.975"
+        y1="206.016"
+        y2="167.344"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#BB7DFF"></stop>
+        <stop offset="1" stopColor="#FFC49C"></stop>
+      </linearGradient>
+      <linearGradient
+        id="paint3_linear_131_950"
+        x1="123.115"
+        x2="184.241"
+        y1="64.3"
+        y2="125.908"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#9E86FF"></stop>
+        <stop offset="1" stopColor="#FFAA9A"></stop>
+      </linearGradient>
+      <linearGradient
+        id="paint4_linear_131_950"
+        x1="143.502"
+        x2="170.351"
+        y1="98.357"
+        y2="59.685"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#BB7DFF"></stop>
+        <stop offset="1" stopColor="#FFC49C"></stop>
+      </linearGradient>
+      <linearGradient
+        id="paint5_linear_131_950"
+        x1="184.741"
+        x2="244.534"
+        y1="137.062"
+        y2="191.165"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#9E86FF"></stop>
+        <stop offset="1" stopColor="#FFAA9A"></stop>
+      </linearGradient>
+      <linearGradient
+        id="paint6_linear_131_950"
+        x1="202.733"
+        x2="229.998"
+        y1="170.542"
+        y2="135.286"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#BB7DFF"></stop>
+        <stop offset="1" stopColor="#FFC49C"></stop>
+      </linearGradient>
+      <filter
+        id="filter0_n_131_950"
+        width="143.503"
+        height="85.136"
+        x="115.533"
+        y="227.29"
+        colorInterpolationFilters="sRGB"
+        filterUnits="userSpaceOnUse"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
+        <feBlend
+          in="SourceGraphic"
+          in2="BackgroundImageFix"
+          result="shape"
+        ></feBlend>
+        <feTurbulence
+          baseFrequency="2 2"
+          numOctaves="3"
+          result="noise"
+          seed="821"
+          stitchTiles="stitch"
+          type="fractalNoise"
+        ></feTurbulence>
+        <feColorMatrix
+          in="noise"
+          result="alphaNoise"
+          type="luminanceToAlpha"
+        ></feColorMatrix>
+        <feComponentTransfer in="alphaNoise" result="coloredNoise1">
+          <feFuncA
+            tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
+            type="discrete"
+          ></feFuncA>
+        </feComponentTransfer>
+        <feComposite
+          in="coloredNoise1"
+          in2="shape"
+          operator="in"
+          result="noise1Clipped"
+        ></feComposite>
+        <feFlood
+          floodColor="rgba(0, 0, 0, 0.25)"
+          result="color1Flood"
+        ></feFlood>
+        <feComposite
+          in="color1Flood"
+          in2="noise1Clipped"
+          operator="in"
+          result="color1"
+        ></feComposite>
+        <feMerge result="effect1_noise_131_950">
+          <feMergeNode in="shape"></feMergeNode>
+          <feMergeNode in="color1"></feMergeNode>
+        </feMerge>
+      </filter>
+      <filter
+        id="filter1_n_131_950"
+        width="119.69"
+        height="34.887"
+        x="90.888"
+        y="227.249"
+        colorInterpolationFilters="sRGB"
+        filterUnits="userSpaceOnUse"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
+        <feBlend
+          in="SourceGraphic"
+          in2="BackgroundImageFix"
+          result="shape"
+        ></feBlend>
+        <feTurbulence
+          baseFrequency="2 2"
+          numOctaves="3"
+          result="noise"
+          seed="821"
+          stitchTiles="stitch"
+          type="fractalNoise"
+        ></feTurbulence>
+        <feColorMatrix
+          in="noise"
+          result="alphaNoise"
+          type="luminanceToAlpha"
+        ></feColorMatrix>
+        <feComponentTransfer in="alphaNoise" result="coloredNoise1">
+          <feFuncA
+            tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
+            type="discrete"
+          ></feFuncA>
+        </feComponentTransfer>
+        <feComposite
+          in="coloredNoise1"
+          in2="shape"
+          operator="in"
+          result="noise1Clipped"
+        ></feComposite>
+        <feFlood
+          floodColor="rgba(0, 0, 0, 0.25)"
+          result="color1Flood"
+        ></feFlood>
+        <feComposite
+          in="color1Flood"
+          in2="noise1Clipped"
+          operator="in"
+          result="color1"
+        ></feComposite>
+        <feMerge result="effect1_noise_131_950">
+          <feMergeNode in="shape"></feMergeNode>
+          <feMergeNode in="color1"></feMergeNode>
+        </feMerge>
+      </filter>
+      <filter
+        id="filter2_n_131_950"
+        width="87.009"
+        height="93.67"
+        x="210.578"
+        y="135.326"
+        colorInterpolationFilters="sRGB"
+        filterUnits="userSpaceOnUse"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
+        <feBlend
+          in="SourceGraphic"
+          in2="BackgroundImageFix"
+          result="shape"
+        ></feBlend>
+        <feTurbulence
+          baseFrequency="2 2"
+          numOctaves="3"
+          result="noise"
+          seed="821"
+          stitchTiles="stitch"
+          type="fractalNoise"
+        ></feTurbulence>
+        <feColorMatrix
+          in="noise"
+          result="alphaNoise"
+          type="luminanceToAlpha"
+        ></feColorMatrix>
+        <feComponentTransfer in="alphaNoise" result="coloredNoise1">
+          <feFuncA
+            tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
+            type="discrete"
+          ></feFuncA>
+        </feComponentTransfer>
+        <feComposite
+          in="coloredNoise1"
+          in2="shape"
+          operator="in"
+          result="noise1Clipped"
+        ></feComposite>
+        <feFlood
+          floodColor="rgba(0, 0, 0, 0.25)"
+          result="color1Flood"
+        ></feFlood>
+        <feComposite
+          in="color1Flood"
+          in2="noise1Clipped"
+          operator="in"
+          result="color1"
+        ></feComposite>
+        <feMerge result="effect1_noise_131_950">
+          <feMergeNode in="shape"></feMergeNode>
+          <feMergeNode in="color1"></feMergeNode>
+        </feMerge>
+      </filter>
+      <filter
+        id="filter3_n_131_950"
+        width="65.611"
+        height="65.611"
+        x="117.698"
+        y="49.358"
+        colorInterpolationFilters="sRGB"
+        filterUnits="userSpaceOnUse"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
+        <feBlend
+          in="SourceGraphic"
+          in2="BackgroundImageFix"
+          result="shape"
+        ></feBlend>
+        <feTurbulence
+          baseFrequency="2 2"
+          numOctaves="3"
+          result="noise"
+          seed="821"
+          stitchTiles="stitch"
+          type="fractalNoise"
+        ></feTurbulence>
+        <feColorMatrix
+          in="noise"
+          result="alphaNoise"
+          type="luminanceToAlpha"
+        ></feColorMatrix>
+        <feComponentTransfer in="alphaNoise" result="coloredNoise1">
+          <feFuncA
+            tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"
+            type="discrete"
+          ></feFuncA>
+        </feComponentTransfer>
+        <feComposite
+          in="coloredNoise1"
+          in2="shape"
+          operator="in"
+          result="noise1Clipped"
+        ></feComposite>
+        <feFlood
+          floodColor="rgba(0, 0, 0, 0.25)"
+          result="color1Flood"
+        ></feFlood>
+        <feComposite
+          in="color1Flood"
+          in2="noise1Clipped"
+          operator="in"
+          result="color1"
+        ></feComposite>
+        <feMerge result="effect1_noise_131_950">
+          <feMergeNode in="shape"></feMergeNode>
+          <feMergeNode in="color1"></feMergeNode>
+        </feMerge>
+      </filter>
+      <clipPath id="clip0_131_950">
+        <path fill="#fff" d="M68.45 24.754H367.86v326.805H68.45z"></path>
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/apps/developer-hub/src/components/Pages/Homepage/home-content-cards.tsx b/apps/developer-hub/src/components/Pages/Homepage/home-content-cards.tsx
index 3e9ba72538..b9d6c920c4 100644
--- a/apps/developer-hub/src/components/Pages/Homepage/home-content-cards.tsx
+++ b/apps/developer-hub/src/components/Pages/Homepage/home-content-cards.tsx
@@ -1,10 +1,23 @@
-import { ArrowsDownUp, Book, ChartScatter, CheckCircle, CodeBlock, Coin, CurrencyBtc, CurrencyDollarSimple, DiceFive, GlobeSimple, Key, Lightning, ListChecks, Network, SlidersHorizontal, Wrench } from "@phosphor-icons/react/dist/ssr";
+import {
+  ArrowsDownUp,
+  Book,
+  ChartScatter,
+  CheckCircle,
+  CodeBlock,
+  Coin,
+  CurrencyBtc,
+  CurrencyDollarSimple,
+  DiceFive,
+  GlobeSimple,
+  Key,
+  Lightning,
+  ListChecks,
+  Network,
+  SlidersHorizontal,
+  Wrench,
+} from "@phosphor-icons/react/dist/ssr";
 import type { ReactNode } from "react";
 
-
-
-
-
 type Feature = {
   label: string;
   icon?: ReactNode | undefined;
@@ -38,7 +51,10 @@ export const products: ProductCardConfigType[] = [
     features: [
       { label: "Ultra-low latency", icon: <Lightning /> },
       { label: "Crypto, Equities & Indexes", icon: <CurrencyBtc /> },
-      { label: "Customizable channels and latency", icon: <SlidersHorizontal /> },
+      {
+        label: "Customizable channels and latency",
+        icon: <SlidersHorizontal />,
+      },
       { label: "Dedicated support", icon: <Wrench /> },
     ],
     quickLinks: [
@@ -102,24 +118,25 @@ export const products: ProductCardConfigType[] = [
   },
 ];
 
-
-
 export const additionalResources = [
   {
     title: "Pyth Token",
-    description: "The native token powering governance and staking across the Pyth Network.",
+    description:
+      "The native token powering governance and staking across the Pyth Network.",
     href: "/pyth-token",
     icon: <CurrencyDollarSimple />,
   },
   {
     title: "Oracle Integrity Staking",
-    description: "Stake PYTH to support data publishers and secure the integrity of Pyth price feeds.",
+    description:
+      "Stake PYTH to support data publishers and secure the integrity of Pyth price feeds.",
     href: "/oracle-integrity-staking",
     icon: <Wrench />,
   },
   {
     title: "Pyth Metrics",
-    description: "Track network performance, feed activity, and ecosystem growth in real time.",
+    description:
+      "Track network performance, feed activity, and ecosystem growth in real time.",
     href: "/metrics",
     icon: <ChartScatter />,
   },
@@ -130,24 +147,26 @@ export const developerResources = [
     title: "Get Your Access Token",
     description: "Request access for the Pyth Ultra Low Latency price feeds.",
     href: "/access-token",
-    icon: <Key />
+    icon: <Key />,
   },
   {
     title: "Supported Feeds",
-    description: "Explore the complete list of supported price feeds for Pyth Pro.",
+    description:
+      "Explore the complete list of supported price feeds for Pyth Pro.",
     href: "/price-feeds/pro/price-feed-ids",
-    icon: <ListChecks />
+    icon: <ListChecks />,
   },
   {
     title: "Pyth API Documentation",
-    description: "Learn how to use the Pyth API to access real-time price data.",
+    description:
+      "Learn how to use the Pyth API to access real-time price data.",
     href: "/api-documentation",
-    icon: <Book />
+    icon: <Book />,
   },
   {
     title: "API Reference",
     description: "Explore the complete API reference for Pyth Pro.",
     href: "https://pyth-lazer.dourolabs.app/docs",
-    icon: <CodeBlock />
-  }
-]
\ No newline at end of file
+    icon: <CodeBlock />,
+  },
+];
diff --git a/apps/developer-hub/src/components/Pages/Homepage/index.module.scss b/apps/developer-hub/src/components/Pages/Homepage/index.module.scss
index 7abf4190af..b0b58241cf 100644
--- a/apps/developer-hub/src/components/Pages/Homepage/index.module.scss
+++ b/apps/developer-hub/src/components/Pages/Homepage/index.module.scss
@@ -12,9 +12,6 @@
   background: var(--color-fd-card);
 }
 
-
-
-
 .sectionHeroContent {
   display: flex;
   flex-direction: column;
@@ -22,7 +19,6 @@
   padding-top: theme.spacing(18);
   padding-bottom: theme.spacing(18);
 
-
   @include theme.breakpoint("lg") {
     flex-direction: row;
     align-items: flex-start;
@@ -52,6 +48,7 @@
 
 .heroSubtitle {
   @include theme.text("2xl", "normal");
+
   line-height: 140%;
   opacity: 0.7;
   margin: 0;
@@ -70,6 +67,7 @@
 
 .sectionHeaderSubtitle {
   @include theme.text("xl", "normal");
+
   opacity: 0.7;
 }
 
diff --git a/apps/developer-hub/src/components/Pages/Homepage/index.tsx b/apps/developer-hub/src/components/Pages/Homepage/index.tsx
index bf74fe677b..fbbfa8786c 100644
--- a/apps/developer-hub/src/components/Pages/Homepage/index.tsx
+++ b/apps/developer-hub/src/components/Pages/Homepage/index.tsx
@@ -1,10 +1,14 @@
-import styles from "./index.module.scss";
+import { Card, Cards } from "fumadocs-ui/components/card";
 import { ProductCard } from "../../ProductCard";
 import { SectionTitle } from "../../Shared/section-title";
-import { Card, Cards } from "fumadocs-ui/components/card";
-import { additionalResources, developerResources, products } from "./home-content-cards";
+import styles from "./index.module.scss";
+import {
+  additionalResources,
+  developerResources,
+  products,
+} from "./home-content-cards";
 import { SectionContainer } from "../../Shared/section-container";
-import { BoxSVG } from "./BoxSVG";
+import { BoxSVG } from "./box-svg";
 
 export const Homepage = () => (
   <>
@@ -21,7 +25,10 @@ export const Homepage = () => (
 
     <section className="pt-24 pb-24">
       <SectionContainer>
-        <SectionTitle title="Products" subtitle="Connect to the global market data and randomness layer." />
+        <SectionTitle
+          title="Products"
+          subtitle="Connect to the global market data and randomness layer."
+        />
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {products.map((product) => (
             <ProductCard
@@ -32,7 +39,8 @@ export const Homepage = () => (
               quickLinks={product.quickLinks}
               badge={product.badge}
               buttonLabel="Get started"
-              href={product.href} />
+              href={product.href}
+            />
           ))}
         </div>
       </SectionContainer>
@@ -40,42 +48,50 @@ export const Homepage = () => (
 
     <section className="pt-24 pb-24 bg-fd-card flex flex-col justify-end bg-gradient-to-bl  from-fd-background to-fd-card border-t border-b overflow-hidden">
       <SectionContainer>
-        <SectionTitle title="Additional Resources" subtitle="Explore the Pyth Network">
+        <SectionTitle
+          title="Additional Resources"
+          subtitle="Explore the Pyth Network"
+        >
           <BoxSVG className="w-64 aspect-square absolute md:relative -right-24 -bottom-48 md:top-0 md:right-0 pointer-events-none" />
         </SectionTitle>
         <Cards className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 z-10">
-          {additionalResources.map(({ title, description, href, icon }, index) => (
-            <Card
-              key={`resource-${index}`}
-              icon={icon}
-              href={href}
-              title={title}
-            >
-              {description}
-            </Card>
-          ))}
+          {additionalResources.map(
+            ({ title, description, href, icon }, index) => (
+              <Card
+                key={`resource-${index}`}
+                icon={icon}
+                href={href}
+                title={title}
+              >
+                {description}
+              </Card>
+            ),
+          )}
         </Cards>
       </SectionContainer>
     </section>
 
     <section className="pt-24 pb-24">
       <SectionContainer>
-        <SectionTitle title="Developer Resources" subtitle="Resources for developers." />
+        <SectionTitle
+          title="Developer Resources"
+          subtitle="Resources for developers."
+        />
         <Cards className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {developerResources.map(({ title, description, href, icon }, index) => (
-            <Card
-              key={`resource-${index}`}
-              icon={icon}
-              href={href}
-              title={title}
-            >
-              {description}
-            </Card>
-          ))}
+          {developerResources.map(
+            ({ title, description, href, icon }, index) => (
+              <Card
+                key={`resource-${index}`}
+                icon={icon}
+                href={href}
+                title={title}
+              >
+                {description}
+              </Card>
+            ),
+          )}
         </Cards>
       </SectionContainer>
     </section>
   </>
 );
-
-
diff --git a/apps/developer-hub/src/components/Pages/Homepage/section-card.module.scss b/apps/developer-hub/src/components/Pages/Homepage/section-card.module.scss
index 8d29ed4db8..2d168bd1d4 100644
--- a/apps/developer-hub/src/components/Pages/Homepage/section-card.module.scss
+++ b/apps/developer-hub/src/components/Pages/Homepage/section-card.module.scss
@@ -7,13 +7,13 @@
   padding: theme.spacing(6);
   border: 1px solid var(--color-fd-border);
   border-radius: theme.border-radius("2xl");
-  
 
   .sectionCardImage {
     position: absolute;
     top: 8px;
     right: 8px;
   }
+
   .sectionCardHeader {
     display: flex;
     flex-direction: row;
diff --git a/apps/developer-hub/src/components/Pages/Homepage/section-card.tsx b/apps/developer-hub/src/components/Pages/Homepage/section-card.tsx
index f99a601e43..e50aac6a58 100644
--- a/apps/developer-hub/src/components/Pages/Homepage/section-card.tsx
+++ b/apps/developer-hub/src/components/Pages/Homepage/section-card.tsx
@@ -21,9 +21,7 @@ export const SectionCard = ({
   <div className={styles.sectionCard}>
     <div className={styles.sectionCardHeader}>
       <h3 className={styles.sectionCardTitle}>{title}</h3>
-      <div className={styles.sectionCardImage}>
-        {image}
-      </div>
+      <div className={styles.sectionCardImage}>{image}</div>
     </div>
     <p className={styles.sectionCardDescription}>{description}</p>
     {url && urlLabel && (
diff --git a/apps/developer-hub/src/components/Pages/Homepage/section.module.scss b/apps/developer-hub/src/components/Pages/Homepage/section.module.scss
index bc5a50b120..1c757c7130 100644
--- a/apps/developer-hub/src/components/Pages/Homepage/section.module.scss
+++ b/apps/developer-hub/src/components/Pages/Homepage/section.module.scss
@@ -36,6 +36,4 @@
       theme.pallette-color("steel", 400)
     );
   }
-
-
 }
diff --git a/apps/developer-hub/src/components/ProductCard/index.tsx b/apps/developer-hub/src/components/ProductCard/index.tsx
index 4f1346256e..37e70c6ffa 100644
--- a/apps/developer-hub/src/components/ProductCard/index.tsx
+++ b/apps/developer-hub/src/components/ProductCard/index.tsx
@@ -1,10 +1,8 @@
 "use client";
-import type { ProductCardConfigType } from "../Pages/Homepage/home-content-cards";
 import { Button } from "@pythnetwork/component-library/Button";
 import { Link } from "@pythnetwork/component-library/Link";
 
-
-
+import type { ProductCardConfigType } from "../Pages/Homepage/home-content-cards";
 
 export function ProductCard({
   title,
@@ -15,7 +13,6 @@ export function ProductCard({
   href,
   badge,
 }: ProductCardConfigType) {
-
   return (
     <div className="bg-fd-card rounded-xl border border-fd-border overflow-hidden">
       <div className="p-6 border-b border-fd-border h-[250px] flex flex-col justify-between items-start">
@@ -24,22 +21,34 @@ export function ProductCard({
             <h3 className="text-2xl font-medium">{title}</h3>
             {badge && <ProductBadge badge={badge} />}
           </div>
-          {description && <p className="opacity-75 text-lg leading-normal">{description}</p>}
-
+          {description && (
+            <p className="opacity-75 text-lg leading-normal">{description}</p>
+          )}
         </div>
-        <Button href={href} size="sm" variant="solid">{buttonLabel}</Button>
+        <Button href={href} size="sm" variant="solid">
+          {buttonLabel}
+        </Button>
       </div>
       <div className="p-6 bg-fd-background flex flex-col gap-10">
         <div className="flex flex-col gap-4">
-          <small className="text-sm font-medium uppercase opacity-50">Features</small>
+          <small className="text-sm font-medium uppercase opacity-50">
+            Features
+          </small>
           <ul className="flex flex-col gap-2">
             {features?.map((feature, index) => (
-              <li key={index} className="inline-flex gap-2">{feature.icon && <span className="opacity-50">{feature.icon}</span>} {feature.label}</li>
+              <li key={index} className="inline-flex gap-2">
+                {feature.icon && (
+                  <span className="opacity-50">{feature.icon}</span>
+                )}{" "}
+                {feature.label}
+              </li>
             ))}
           </ul>
         </div>
         <div className="flex flex-col gap-4">
-          <small className="text-sm font-medium uppercase opacity-50">Quick Links</small>
+          <small className="text-sm font-medium uppercase opacity-50">
+            Quick Links
+          </small>
           <ul className="flex flex-col gap-2">
             {quickLinks?.map((link, index) => (
               <li key={index}>
@@ -55,7 +64,10 @@ export function ProductCard({
 
 const ProductBadge = ({ badge }: { badge: string }) => {
   return (
-    <div className={`rounded-lg  px-2 py-1 text-base border font-medium bg-fd-accent/10 shadow`}>{badge}</div>
-  )
-}
-
+    <div
+      className={`rounded-lg  px-2 py-1 text-base border font-medium bg-fd-accent/10 shadow`}
+    >
+      {badge}
+    </div>
+  );
+};
diff --git a/apps/developer-hub/src/components/Root/global.css b/apps/developer-hub/src/components/Root/global.css
index 7c54017950..a42cb6aefe 100644
--- a/apps/developer-hub/src/components/Root/global.css
+++ b/apps/developer-hub/src/components/Root/global.css
@@ -25,13 +25,10 @@
 /* @import "./theme.css"; this overrides the default colors to match the pyth branding */
 /* @import "./fumadocs-global-style-overrides.css"; */
 
-
-
 table {
   border-color: var(--color-gray-200, #e5e7eb);
 }
 
-
 .light {
   --color-fd-background: hsla(0, 16%, 96%, 1);
   --color-fd-foreground: hsla(0, 16%, 5%, 1);
@@ -86,5 +83,4 @@ table {
   --color-fd-accent: hsla(0, 0%, 40.9%, 30%);
   --color-fd-accent-foreground: hsl(0, 0%, 90%);
   --color-fd-ring: hsl(0, 0%, 54.9%);
-
 }
diff --git a/apps/developer-hub/src/components/Shared/content-section.module.scss b/apps/developer-hub/src/components/Shared/content-section.module.scss
index 1eba1c88b7..0bd9a5d0c9 100644
--- a/apps/developer-hub/src/components/Shared/content-section.module.scss
+++ b/apps/developer-hub/src/components/Shared/content-section.module.scss
@@ -1,14 +1,15 @@
 @use "@pythnetwork/component-library/theme";
 
 .section {
-    display: flex;
-    flex-direction: column;
-    gap: theme.spacing(8);
+  display: flex;
+  flex-direction: column;
+  gap: theme.spacing(8);
 }
 
 .container {
   max-width: var(--spacing-fd-container);
   margin: 0 auto;
+
   > *:not(:last-child) {
     margin-bottom: theme.spacing(20);
   }
diff --git a/apps/developer-hub/src/components/Shared/content-section.tsx b/apps/developer-hub/src/components/Shared/content-section.tsx
index 7bf2fbb02e..e84ffe5b5d 100644
--- a/apps/developer-hub/src/components/Shared/content-section.tsx
+++ b/apps/developer-hub/src/components/Shared/content-section.tsx
@@ -1,13 +1,17 @@
-import { SectionTitle } from "./section-title"
-import styles from "./content-section.module.scss"
+import styles from "./content-section.module.scss";
+
+import { SectionTitle } from "./section-title";
 
 export const Section = ({ children }: { children: React.ReactNode }) => {
-    return (
-        <section className={styles.section}>
-            <div className={styles.container}>
-                <SectionTitle title="Products" subtitle="Connect to the global market data and randomness layer." />
-                {children}
-            </div>
-        </section>
-    )
-}
\ No newline at end of file
+  return (
+    <section className={styles.section}>
+      <div className={styles.container}>
+        <SectionTitle
+          title="Products"
+          subtitle="Connect to the global market data and randomness layer."
+        />
+        {children}
+      </div>
+    </section>
+  );
+};
diff --git a/apps/developer-hub/src/components/Shared/footer.tsx b/apps/developer-hub/src/components/Shared/footer.tsx
index d39e18dc30..9413d78293 100644
--- a/apps/developer-hub/src/components/Shared/footer.tsx
+++ b/apps/developer-hub/src/components/Shared/footer.tsx
@@ -1,10 +1,13 @@
 export const PageFooter = () => {
-    return (
-        <>
-            <div className="w-full h-2 bg-gradient-to-r  from-violet-500 to-rose-400" />
-            <footer className="flex items-center justify-between gap-2 p-6 border-t border-fd-border">
-                <p className="opacity-75 text-sm">&copy; {new Date().getFullYear()} Pyth Network. All rights reserved.</p>
-                <p className="opacity-75 text-sm">Privacy Policy | Terms of Use</p>
-            </footer>
-        </>)
-}
\ No newline at end of file
+  return (
+    <>
+      <div className="w-full h-2 bg-gradient-to-r  from-violet-500 to-rose-400" />
+      <footer className="flex items-center justify-between gap-2 p-6 border-t border-fd-border">
+        <p className="opacity-75 text-sm">
+          &copy; {new Date().getFullYear()} Pyth Network. All rights reserved.
+        </p>
+        <p className="opacity-75 text-sm">Privacy Policy | Terms of Use</p>
+      </footer>
+    </>
+  );
+};
diff --git a/apps/developer-hub/src/components/Shared/section-container.module.scss b/apps/developer-hub/src/components/Shared/section-container.module.scss
index 148cf06cbb..0a41c27618 100644
--- a/apps/developer-hub/src/components/Shared/section-container.module.scss
+++ b/apps/developer-hub/src/components/Shared/section-container.module.scss
@@ -5,6 +5,7 @@
   margin: 0 auto;
   width: 100%;
   padding: 0 theme.spacing(4);
+
   > *:not(:last-child) {
     margin-bottom: theme.spacing(20);
   }
@@ -12,4 +13,4 @@
   @include theme.breakpoint("sm") {
     padding: 0 theme.spacing(6);
   }
-}
\ No newline at end of file
+}
diff --git a/apps/developer-hub/src/components/Shared/section-container.tsx b/apps/developer-hub/src/components/Shared/section-container.tsx
index 7fac34dfbe..368a2dcd04 100644
--- a/apps/developer-hub/src/components/Shared/section-container.tsx
+++ b/apps/developer-hub/src/components/Shared/section-container.tsx
@@ -1,10 +1,9 @@
+import styles from "./section-container.module.scss";
 
-import styles from './section-container.module.scss';
-
-export const SectionContainer = ({ children }: { children: React.ReactNode }) => {
-    return (
-        <div className={styles.container}>
-            {children}
-        </div>
-    )
-}
\ No newline at end of file
+export const SectionContainer = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return <div className={styles.container}>{children}</div>;
+};
diff --git a/apps/developer-hub/src/components/Shared/section-title.module.scss b/apps/developer-hub/src/components/Shared/section-title.module.scss
index e0ac6de0d8..842be9ad2e 100644
--- a/apps/developer-hub/src/components/Shared/section-title.module.scss
+++ b/apps/developer-hub/src/components/Shared/section-title.module.scss
@@ -1,26 +1,28 @@
 @use "@pythnetwork/component-library/theme";
 
 .sectionTitle {
-    display: flex;
-    flex-direction: row;
-    gap: theme.spacing(8);
-    justify-content: space-between;
-    max-height: theme.spacing(16);
-    align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: theme.spacing(8);
+  justify-content: space-between;
+  max-height: theme.spacing(16);
+  align-items: center;
 }
 
 .title {
   @include theme.text("2xl", "medium");
+
   color: theme.color("heading");
   margin-bottom: theme.spacing(2);
 }
 
 .subtitle {
   @include theme.text("2xl", "normal");
+
   opacity: 0.65;
 }
 
 .slot {
-    position: relative;
-    z-index: 1;
-}
\ No newline at end of file
+  position: relative;
+  z-index: 1;
+}
diff --git a/apps/developer-hub/src/components/Shared/section-title.tsx b/apps/developer-hub/src/components/Shared/section-title.tsx
index b53d1aea4d..b3d6eae4cb 100644
--- a/apps/developer-hub/src/components/Shared/section-title.tsx
+++ b/apps/developer-hub/src/components/Shared/section-title.tsx
@@ -1,17 +1,21 @@
 import styles from "./section-title.module.scss";
 
-export const SectionTitle = ({ title, subtitle, children }: {
-    title: string;
-    subtitle: string;
-    children?: React.ReactNode;
+export const SectionTitle = ({
+  title,
+  subtitle,
+  children,
+}: {
+  title: string;
+  subtitle: string;
+  children?: React.ReactNode;
 }) => {
-    return (
-        <div className={styles.sectionTitle}>
-            <div>
-                <p className={styles.title}>{title}</p>
-                <p className={styles.subtitle}>{subtitle}</p>
-            </div>
-            {children && <div className={styles.slot}>{children}</div>}
-        </div>
-    );
-}
\ No newline at end of file
+  return (
+    <div className={styles.sectionTitle}>
+      <div>
+        <p className={styles.title}>{title}</p>
+        <p className={styles.subtitle}>{subtitle}</p>
+      </div>
+      {children && <div className={styles.slot}>{children}</div>}
+    </div>
+  );
+};

From e9a5f9defe8d9461f0bd620e2b280db1fb7e9435 Mon Sep 17 00:00:00 2001
From: PartyParrotGreg <2233348+partyparrotgreg@users.noreply.github.com>
Date: Thu, 11 Dec 2025 09:33:09 +0000
Subject: [PATCH 4/4] fixed eslint errors

---
 .../developer-hub/src/app/(homepage)/layout.tsx |  2 +-
 .../src/components/Pages/Homepage/index.tsx     | 17 +++++++++--------
 .../src/components/ProductCard/index.tsx        |  1 +
 .../src/components/Shared/content-section.tsx   |  1 -
 4 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/apps/developer-hub/src/app/(homepage)/layout.tsx b/apps/developer-hub/src/app/(homepage)/layout.tsx
index 0b407c3572..0757b7bf9a 100644
--- a/apps/developer-hub/src/app/(homepage)/layout.tsx
+++ b/apps/developer-hub/src/app/(homepage)/layout.tsx
@@ -1,8 +1,8 @@
 import { HomeLayout } from "fumadocs-ui/layouts/home";
 import type { ReactNode } from "react";
 
-import { baseOptions } from "../../config/layout.config";
 import { PageFooter } from "../../components/Shared/footer";
+import { baseOptions } from "../../config/layout.config";
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
diff --git a/apps/developer-hub/src/components/Pages/Homepage/index.tsx b/apps/developer-hub/src/components/Pages/Homepage/index.tsx
index fbbfa8786c..7354fdb264 100644
--- a/apps/developer-hub/src/components/Pages/Homepage/index.tsx
+++ b/apps/developer-hub/src/components/Pages/Homepage/index.tsx
@@ -1,14 +1,15 @@
 import { Card, Cards } from "fumadocs-ui/components/card";
-import { ProductCard } from "../../ProductCard";
-import { SectionTitle } from "../../Shared/section-title";
-import styles from "./index.module.scss";
+
+import { BoxSVG } from "./box-svg";
 import {
   additionalResources,
   developerResources,
   products,
 } from "./home-content-cards";
+import styles from "./index.module.scss";
+import { ProductCard } from "../../ProductCard";
 import { SectionContainer } from "../../Shared/section-container";
-import { BoxSVG } from "./box-svg";
+import { SectionTitle } from "../../Shared/section-title";
 
 export const Homepage = () => (
   <>
@@ -56,9 +57,9 @@ export const Homepage = () => (
         </SectionTitle>
         <Cards className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 z-10">
           {additionalResources.map(
-            ({ title, description, href, icon }, index) => (
+            ({ title, description, href, icon }) => (
               <Card
-                key={`resource-${index}`}
+                key={title}
                 icon={icon}
                 href={href}
                 title={title}
@@ -79,9 +80,9 @@ export const Homepage = () => (
         />
         <Cards className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {developerResources.map(
-            ({ title, description, href, icon }, index) => (
+            ({ title, description, href, icon }) => (
               <Card
-                key={`resource-${index}`}
+                key={title}
                 icon={icon}
                 href={href}
                 title={title}
diff --git a/apps/developer-hub/src/components/ProductCard/index.tsx b/apps/developer-hub/src/components/ProductCard/index.tsx
index 37e70c6ffa..95a1c39ad5 100644
--- a/apps/developer-hub/src/components/ProductCard/index.tsx
+++ b/apps/developer-hub/src/components/ProductCard/index.tsx
@@ -1,4 +1,5 @@
 "use client";
+
 import { Button } from "@pythnetwork/component-library/Button";
 import { Link } from "@pythnetwork/component-library/Link";
 
diff --git a/apps/developer-hub/src/components/Shared/content-section.tsx b/apps/developer-hub/src/components/Shared/content-section.tsx
index e84ffe5b5d..8659fe45ae 100644
--- a/apps/developer-hub/src/components/Shared/content-section.tsx
+++ b/apps/developer-hub/src/components/Shared/content-section.tsx
@@ -1,5 +1,4 @@
 import styles from "./content-section.module.scss";
-
 import { SectionTitle } from "./section-title";
 
 export const Section = ({ children }: { children: React.ReactNode }) => {