(fix): dev hub refactor for home page and improved dark mode styles

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

apps/developer-hub/src/components/Pages/Homepage/home-content-cards.tsx

@@ -0,0 +1,153 @@
+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;
+};
+
+type QuickLink = {
+  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",
+    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", icon: <Lightning /> },
+      { label: "Crypto, Equities & Indexes", icon: <CurrencyBtc /> },
+      { label: "Customizable channels and latency", icon: <SlidersHorizontal /> },
+      { label: "Dedicated support", icon: <Wrench /> },
+    ],
+    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",
+    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", icon: <Lightning /> },
+      { label: "100+ blockchains", icon: <Network /> },
+      { label: "Supports Pull and Push updates", icon: <ArrowsDownUp /> },
+      { label: "Decentralized Oracle", icon: <GlobeSimple /> },
+    ],
+    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", icon: <DiceFive /> },
+      { label: "Verifiable results", icon: <CheckCircle /> },
+      { label: "Pay in native token", icon: <Coin /> },
+      { label: "Supports 20+ EVM chains", icon: <Network /> },
+    ],
+    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 />
+  }
+]

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 {