From 5ab909bd12b0a1f8326df4fd79f66c38fdc7d1c6 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Sat, 8 Nov 2025 00:40:33 +0100
Subject: [PATCH] feat: add breadcrumb navigation and redesign GPU page
 sections

- Implemented breadcrumb-style navigation in header dropdown showing "Cloud > [Section]" for compute, storage, and GPU pages
- Redesigned GPU page components with dark theme, horizontal card sliders, and improved visual hierarchy
- Updated CallToAction components across multiple pages with consistent background colors and border styling
---
 src/components/Header.tsx          |  12 ++-
 src/pages/agents/CallToAction.tsx  |   2 +-
 src/pages/cloud/CalltoAction.tsx   |   4 +-
 src/pages/compute/CallToAction.tsx |   4 +-
 src/pages/gpu/CallToAction.tsx     | 101 +++++++++++++---------
 src/pages/gpu/GpuArchitecture.tsx  | 107 ++++++++++++++---------
 src/pages/gpu/GpuCapabilities.tsx  | 133 +++++++++++++++++++++--------
 src/pages/gpu/GpuDesign.tsx        |  60 +++++++------
 src/pages/gpu/GpuOverview.tsx      |  93 +++++++++++++-------
 src/pages/gpu/GpuUseCases.tsx      |  42 ++++++---
 src/pages/network/CallToAction.tsx |   2 +-
 src/pages/storage/CallToAction.tsx |   2 +-
 12 files changed, 366 insertions(+), 196 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index c0f32df..f25b7fe 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -24,8 +24,7 @@ export function Header() {
     if (currentPath.startsWith('/compute')) return 'Compute';
     if (currentPath.startsWith('/storage')) return 'Storage';
     if (currentPath.startsWith('/gpu')) return 'GPU';
-    if (currentPath.startsWith('/cloud')) return 'Cloud';
-    return 'Cloud'; 
+    return 'Cloud';
   };
 
   return (
@@ -40,7 +39,14 @@ export function Header() {
               <Dropdown
                 buttonContent={
                   <>
-                    {getCurrentPageName()}
+                    {['Compute', 'Storage', 'GPU'].includes(getCurrentPageName()) ? (
+                      <>
+                        <span className="text-gray-500">Cloud {' >'} </span>
+                        <span>{getCurrentPageName()}</span>
+                      </>
+                    ) : (
+                      'Cloud'
+                    )}
                     <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
                   </>
                 }
diff --git a/src/pages/agents/CallToAction.tsx b/src/pages/agents/CallToAction.tsx
index b472596..5c9d894 100644
--- a/src/pages/agents/CallToAction.tsx
+++ b/src/pages/agents/CallToAction.tsx
@@ -13,7 +13,7 @@ export function CallToAction() {
       {/* ✅ Main boxed area */}
       <div
         id="get-started"
-        className="relative py-18 max-w-7xl mx-auto bg-[#090909] border border-t-0 border-b-0 border-gray-800"
+        className="relative py-18 max-w-7xl mx-auto bg-[#111111] border border-t-0 border-b-0 border-gray-800"
       >
         <Container className="relative">
           <div className="mx-auto max-w-3xl text-center">
diff --git a/src/pages/cloud/CalltoAction.tsx b/src/pages/cloud/CalltoAction.tsx
index 6f9e322..4cc96b6 100644
--- a/src/pages/cloud/CalltoAction.tsx
+++ b/src/pages/cloud/CalltoAction.tsx
@@ -7,13 +7,13 @@ export function CallToAction() {
   return (
     <section className="relative overflow-hidden bg-gray-900">
       {/* ✅ Top horizontal line with spacing */}
-      <div className="max-w-7xl bg-[#090909] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
+      <div className="max-w-7xl bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
       <div className="w-full border-t border-l border-r border-gray-800" />
 
       {/* ✅ Main boxed area */}
       <div
         id="get-started"
-        className="relative py-18 max-w-7xl mx-auto bg-[#090909] border border-t-0 border-b-0 border-gray-800"
+        className="relative py-18 max-w-7xl mx-auto bg-[#111111] border border-t-0 border-b-0 border-gray-800"
       >
     
 
diff --git a/src/pages/compute/CallToAction.tsx b/src/pages/compute/CallToAction.tsx
index 6f9e322..4cc96b6 100644
--- a/src/pages/compute/CallToAction.tsx
+++ b/src/pages/compute/CallToAction.tsx
@@ -7,13 +7,13 @@ export function CallToAction() {
   return (
     <section className="relative overflow-hidden bg-gray-900">
       {/* ✅ Top horizontal line with spacing */}
-      <div className="max-w-7xl bg-[#090909] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
+      <div className="max-w-7xl bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
       <div className="w-full border-t border-l border-r border-gray-800" />
 
       {/* ✅ Main boxed area */}
       <div
         id="get-started"
-        className="relative py-18 max-w-7xl mx-auto bg-[#090909] border border-t-0 border-b-0 border-gray-800"
+        className="relative py-18 max-w-7xl mx-auto bg-[#111111] border border-t-0 border-b-0 border-gray-800"
       >
     
 
diff --git a/src/pages/gpu/CallToAction.tsx b/src/pages/gpu/CallToAction.tsx
index 8641da5..b4f01b7 100644
--- a/src/pages/gpu/CallToAction.tsx
+++ b/src/pages/gpu/CallToAction.tsx
@@ -1,48 +1,67 @@
-import { CircleBackground } from '../../components/CircleBackground'
-import { Container } from '@/components/Container'
-import { Button } from '@/components/Button'
+"use client";
+
+import { Container } from "@/components/Container";
+import { Button } from "@/components/Button";
 
 export function CallToAction() {
   return (
-    <section
-      id="get-started"
-      className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
-    >
-      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-        <CircleBackground color="#06b6d4" className="animate-spin-slower" />
-      </div>
-      <Container className="relative">
-        <div className="mx-auto max-w-2xl text-center">
-          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
-            Choose How You Want to Start
-          </h2>
-          <p className="mt-6 text-lg text-gray-300">
-            Use GPUs through Mycelium Cloud,
-or contribute GPU nodes to the mesh and run your own workloads.
+    <section className="relative overflow-hidden bg-[#121212]">
+      {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
+      <div className="w-full border-t border-l border-r border-gray-800" />
 
-          </p>
-          <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
-            <Button
-              to="https://myceliumcloud.tf"
-              as="a"
-              variant="solid"
-              color="white"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Deploy GPU Workloads
-            </Button>
-            <Button
-              to="#gpu-architecture"
-              as="a"
-              variant="outline"
-              color="white"
-            >
-              Host A GPU Node
-            </Button>
+      {/* ✅ Main boxed area */}
+      <div
+        id="get-started"
+        className="relative py-18 max-w-7xl mx-auto bg-[#111111] border border-t-0 border-b-0 border-gray-800"
+      >
+    
+
+        <Container className="relative">
+          <div className="mx-auto max-w-3xl text-center">
+            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
+              Choose How You Want to Start
+            </h2>
+
+            <p className="mt-6 text-lg text-gray-300">
+              Use GPUs through Mycelium Cloud, or contribute GPU nodes to the mesh and run your own workloads.
+            </p>
+
+            {/* ✅ Two cards, stacked center with spacing */}
+            <div className="mt-10 flex flex-wrap justify-center gap-x-10 gap-y-8">
+              <div className="flex flex-col items-center text-center max-w-xs">
+                <Button
+                  to="https://myceliumcloud.tf"
+                  as="a"
+                  variant="solid"
+                  color="cyan"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="mt-4"
+                >
+                  Deploy GPU Workloads
+                </Button>
+              </div>
+
+              <div className="flex flex-col items-center text-center max-w-xs">
+                <Button
+                  to="#gpu-architecture"
+                  as="a"
+                  variant="outline"
+                  color="white"
+                  className="mt-4"
+                >
+                  Host a GPU Node
+                </Button>
+              </div>
+            </div>
           </div>
-        </div>
-      </Container>
+        </Container>
+      </div>
+
+      {/* ✅ Bottom horizontal line with spacing */}
+      <div className="w-full border-b border-gray-800" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800 bg-transparent" />
     </section>
-  )
+  );
 }
diff --git a/src/pages/gpu/GpuArchitecture.tsx b/src/pages/gpu/GpuArchitecture.tsx
index 921f9eb..28de689 100644
--- a/src/pages/gpu/GpuArchitecture.tsx
+++ b/src/pages/gpu/GpuArchitecture.tsx
@@ -1,48 +1,79 @@
-import { Container } from '@/components/Container'
-import { Eyebrow, SectionHeader } from '@/components/Texts'
-
-const architecture = [
-  {
-    title: 'Sovereign Compute Nodes',
-    description: 'GPUs hosted on hardware you trust.',
-  },
-  {
-    title: 'Encrypted Mesh Networking',
-    description: 'Secure, private connectivity to workloads.',
-  },
-  {
-    title: 'Reservation & Verification Layer',
-    description: 'Guarantees GPU access and consistency.',
-  },
-]
+import { Eyebrow, H3, P } from '@/components/Texts'
+import {
+  CpuChipIcon,
+  LockClosedIcon,
+  ShieldCheckIcon,
+} from '@heroicons/react/24/solid'
 
 export function GpuArchitecture() {
   return (
-    <section id="gpu-architecture" className="bg-white py-24 sm:py-32">
-      <Container>
-        <div className="mx-auto max-w-3xl text-center">
+    <section id="gpu-architecture" className="w-full max-w-8xl mx-auto bg-transparent">
+      
+      {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+      <div className="w-full border-t border-l border-r border-gray-100" />
+
+      <div className="mx-auto max-w-7xl px-6 bg-white lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-20 py-12 border border-t-0 border-b-0 border-gray-100">
+
+        {/* ✅ LEFT — Title + Intro text */}
+        <div className="max-w-xl">
           <Eyebrow>ARCHITECTURE</Eyebrow>
-          <SectionHeader as="h2" className="mt-6 text-gray-900">
-            HOW IT WORKS
-          </SectionHeader>
+
+          <H3 className="mt-6">
+            How It Works
+          </H3>
+
+          <P className="mt-6 text-lg text-gray-600">
+            Mycelium GPU architecture ensures secure, sovereign computation using
+            hardware you trust. Nodes communicate through encrypted mesh networking,
+            and access is guaranteed through verifiable reservations.
+          </P>
         </div>
 
-        <div className="mx-auto mt-16 max-w-4xl space-y-6 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-8">
-          {architecture.map((item) => (
-            <div
-              key={item.title}
-              className="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
-            >
-              <h3 className="text-xl font-semibold text-gray-900">
-                {item.title}
-              </h3>
-              <p className="mt-3 text-sm leading-relaxed text-gray-600">
-                {item.description}
-              </p>
-            </div>
-          ))}
+        {/* ✅ RIGHT — items stacked with cyan dividers */}
+        <div className="space-y-8">
+
+          {/* 1 — Sovereign Compute Nodes */}
+          <div>
+            <h3 className="text-lg font-semibold text-gray-950 flex items-center">
+              <CpuChipIcon className="h-6 w-6 text-cyan-500 mr-3" />
+              Sovereign Compute Nodes
+            </h3>
+            <p className="mt-2 text-gray-600 max-w-2xl">
+              GPUs run only on hardware you control — eliminating reliance on centralized clouds.
+            </p>
+            <div className="mt-8 h-px w-full bg-cyan-500/50" />
+          </div>
+
+          {/* 2 — Encrypted Mesh Networking */}
+          <div>
+            <h3 className="text-lg font-semibold text-gray-950 flex items-center">
+              <LockClosedIcon className="h-6 w-6 text-cyan-500 mr-3" />
+              Encrypted Mesh Networking
+            </h3>
+            <p className="mt-2 text-gray-600 max-w-2xl">
+              Nodes form private, encrypted tunnels to workloads — no public exposure required.
+            </p>
+            <div className="mt-8 h-px w-full bg-cyan-500/50" />
+          </div>
+
+          {/* 3 — Reservation & Verification Layer */}
+          <div>
+            <h3 className="text-lg font-semibold text-gray-950 flex items-center">
+              <ShieldCheckIcon className="h-6 w-6 text-cyan-500 mr-3" />
+              Reservation & Verification Layer
+            </h3>
+            <p className="mt-2 text-gray-600 max-w-2xl">
+              Cryptographically enforced reservations guarantee GPU availability
+              with deterministic behavior across workloads.
+            </p>
+          </div>
         </div>
-      </Container>
+      </div>
+
+      {/* ✅ Bottom horizontal line with spacing */}
+      <div className="w-full border-b border-gray-100" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
     </section>
   )
 }
diff --git a/src/pages/gpu/GpuCapabilities.tsx b/src/pages/gpu/GpuCapabilities.tsx
index c639a13..4797266 100644
--- a/src/pages/gpu/GpuCapabilities.tsx
+++ b/src/pages/gpu/GpuCapabilities.tsx
@@ -1,58 +1,123 @@
+"use client";
+
+import { useRef } from "react";
+import { Eyebrow, CP, CT, H5 } from "@/components/Texts";
+import { IoArrowBackOutline, IoArrowForwardOutline } from "react-icons/io5";
+
 import {
   SparklesIcon,
   Cog6ToothIcon,
   CubeTransparentIcon,
   CpuChipIcon,
-} from '@heroicons/react/24/solid'
-import { Eyebrow, H3, CT, CP } from '@/components/Texts'
-import { Container } from '@/components/Container'
+} from "@heroicons/react/24/solid";
 
-const capabilities = [
+const gpuCapabilities = [
   {
-    name: 'AI / ML Inference & Training',
-    description: 'LLMs, embeddings, transformers, fine-tuning',
+    isIntro: true,
+    eyebrow: "CAPABILITIES",
+    title: "What You Can Run on Mycelium Cloud",
+    description:
+      "GPU acceleration for inference, training, rendering, and agent workloads — on sovereign hardware.",
+  },
+  {
+    name: "AI / ML Inference & Training",
+    description: "LLMs, embeddings, transformers, fine-tuning",
     icon: SparklesIcon,
   },
   {
-    name: 'Acceleration in Kubernetes Workloads',
-    description: 'GPU-backed deployments on Mycelium Cloud',
+    name: "Acceleration in Kubernetes Workloads",
+    description: "GPU-backed deployments on Mycelium Cloud",
     icon: Cog6ToothIcon,
   },
   {
-    name: 'Rendering & Simulation',
-    description: 'Scientific visualization, VFX, real-time 3D',
+    name: "Rendering & Simulation",
+    description: "Scientific visualization, VFX, real-time 3D",
     icon: CubeTransparentIcon,
   },
   {
-    name: 'Agent Compute & RAG Pipelines',
-    description: 'Vector memory + model execution on sovereign hardware',
+    name: "Agent Compute & RAG Pipelines",
+    description:
+      "Vector memory + model execution on sovereign hardware",
     icon: CpuChipIcon,
   },
-]
+];
 
 export function GpuCapabilities() {
-  return (
-    <section className="bg-white py-24 sm:py-32">
-      <Container>
-        <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow>CAPABILITIES</Eyebrow>
-          <H3 className="mt-4 text-gray-900">What You Can Run on Mycelium Cloud</H3>
-        </div>
+  const sliderRef = useRef<HTMLUListElement>(null);
 
-        <div className="mx-auto mt-16 max-w-5xl">
-          <dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-4">
-            {capabilities.map((feature) => (
-              <div key={feature.name} className="flex flex-col text-center">
-                <div className="mx-auto flex size-12 items-center justify-center rounded-xl bg-cyan-50">
-                  <feature.icon className="size-6 text-cyan-600" aria-hidden="true" />
+  const scrollLeft = () => sliderRef.current?.scrollBy({ left: -400, behavior: "smooth" });
+  const scrollRight = () => sliderRef.current?.scrollBy({ left: 400, behavior: "smooth" });
+
+  return (
+    <section className="bg-[#121212] w-full max-w-8xl mx-auto">
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
+      <div className="w-full border-t border-l border-r border-gray-800" />
+
+      <div className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-800 bg-[#111111] overflow-hidden">
+
+        {/* ✅ Horizontal Slider */}
+        <ul
+          ref={sliderRef}
+          className="flex overflow-x-auto snap-x snap-mandatory scroll-smooth no-scrollbar"
+        >
+          {gpuCapabilities.map((item, idx) => (
+            <li
+              key={idx}
+              className={`snap-start shrink-0 w-[85%] sm:w-[50%] lg:w-[33%] border border-gray-800 p-10 relative ${
+                item.isIntro ? "bg-[#1b1b1b]" : "bg-[#111]/60"
+              }`}
+            >
+              {/* ✅ First intro card with arrows */}
+              {item.isIntro ? (
+                <div className="flex flex-col justify-between h-full">
+                  <div>
+                    <Eyebrow>{item.eyebrow}</Eyebrow>
+                    <H5 className="text-white mt-4 lg:text-2xl text-xl">{item.title}</H5>
+                    <p className="mt-4 text-gray-400 lg:text-lg text-sm leading-relaxed">
+                      {item.description}
+                    </p>
+                  </div>
+
+                  <div className="flex items-center gap-x-4 mt-3">
+                    <a
+                      href="#"
+                      className="inline-flex items-center gap-1 text-cyan-400 hover:text-cyan-300 text-sm font-medium mr-auto"
+                    >
+                      Learn more →
+                    </a>
+
+                    <button
+                      onClick={scrollLeft}
+                      className="h-8 w-8 flex items-center justify-center border border-gray-800 rounded-md hover:border-cyan-500 transition-colors"
+                    >
+                      <IoArrowBackOutline className="text-gray-300" size={16} />
+                    </button>
+
+                    <button
+                      onClick={scrollRight}
+                      className="h-8 w-8 flex items-center justify-center border border-gray-800 rounded-md hover:border-cyan-500 transition-colors"
+                    >
+                      <IoArrowForwardOutline className="text-gray-300" size={16} />
+                    </button>
+                  </div>
                 </div>
-                <CT className="mt-6 text-gray-900">{feature.name}</CT>
-                <CP className="mt-2 text-gray-600">{feature.description}</CP>
-              </div>
-            ))}
-          </dl>
-        </div>
-      </Container>
+              ) : (
+                <div className="flex flex-col items-center text-center">
+                  <div className="flex items-center justify-center h-12 w-12 rounded-xl bg-[#1d1d1d] border border-gray-800">
+                    <item.icon className="h-6 w-6 text-cyan-400" />
+                  </div>
+
+                  <CT className="text-lg font-semibold text-white mt-4">{item.name}</CT>
+                  <CP className="mt-2 text-gray-400 leading-snug">{item.description}</CP>
+                </div>
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <div className="w-full border-b border-gray-800" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
     </section>
-  )
+  );
 }
diff --git a/src/pages/gpu/GpuDesign.tsx b/src/pages/gpu/GpuDesign.tsx
index a7cba58..3dcffc9 100644
--- a/src/pages/gpu/GpuDesign.tsx
+++ b/src/pages/gpu/GpuDesign.tsx
@@ -9,51 +9,55 @@ import {
 
 const benefits = [
   {
-    name: 'Consistent, reserved GPU performance (no noisy neighbor effects)',
+    id: 1,
+    title: 'Consistent, reserved GPU performance (no noisy neighbor effects)',
     icon: BoltIcon,
   },
   {
-    name: 'Transparent cost (no markup, no surprise billing)',
+    id: 2,
+    title: 'Transparent cost (no markup, no surprise billing)',
     icon: BanknotesIcon,
   },
   {
-    name: 'Run anywhere – cloud, on-prem, edge, home lab',
+    id: 3,
+    title: 'Run anywhere – cloud, on-prem, edge, home lab',
     icon: GlobeAltIcon,
   },
   {
-    name: 'Your data never leaves your control',
+    id: 4,
+    title: 'Your data never leaves your control',
     icon: ShieldCheckIcon,
   },
 ]
 
 export function GpuDesign() {
   return (
-    <section className="bg-white py-24 sm:py-32">
-      <Container>
-        {/* Header */}
-        <div className="mx-auto max-w-3xl sm:text-center">
-          <Eyebrow>CORE VALUE</Eyebrow>
-          <H3 className="mt-4 text-gray-900">GPU Power You Actually Control</H3>
+    <section className="w-full max-w-8xl mx-auto bg-transparent">
 
-        </div>
+      {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+      <div className="w-full border border-l border-r border-gray-100" />
+      
+      {/* ✅ Main content */}
+      <div className="mx-auto max-w-7xl border-gray-100 ">
+        <dl className="grid grid-cols-1 gap-4 lg:gap-6 lg:grid-cols-4 text-center ">
+          {benefits.map((item) => (
+            <div
+              key={item.id}
+              className="flex flex-col items-center bg-white/40 dark:bg-black/40 py-10 px-4 border border-gray-100 dark:border-gray-800 lg:border-t-0 lg:border-b-0"
+            >
+              <item.icon className="h-10 w-10 text-cyan-500 mb-4" />
+              <h3 className="text-base font-medium text-black dark:text-white max-w-xs">
+                {item.title}
+              </h3>
+            </div>
+          ))}
+        </dl>
+      </div>
 
-        {/* Key Benefits */}
-        <div className="mx-auto mt-16 max-w-5xl">
-          <dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-2">
-            {benefits.map((benefit) => (
-              <div key={benefit.name} className="relative pl-12">
-                <benefit.icon
-                  className="absolute left-0 top-1 size-6 text-cyan-600"
-                  aria-hidden="true"
-                />
-                <CT className="font-semibold text-gray-900">
-                  {benefit.name}
-                </CT>
-              </div>
-            ))}
-          </dl>
-        </div>
-      </Container>
+      {/* ✅ Bottom horizontal line with spacing */}
+      <div className="w-full border border-gray-100" />
+      <div className="max-w-7xl bg-transparent mx-auto py-0 border border-t-0 border-b-0 border-gray-100"></div>     
     </section>
   )
 }
diff --git a/src/pages/gpu/GpuOverview.tsx b/src/pages/gpu/GpuOverview.tsx
index 189771a..9a2d6dc 100644
--- a/src/pages/gpu/GpuOverview.tsx
+++ b/src/pages/gpu/GpuOverview.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import {
   AdjustmentsHorizontalIcon,
   GlobeAltIcon,
@@ -6,6 +8,7 @@ import {
 
 import { Container } from '@/components/Container'
 import { Eyebrow, SectionHeader, P } from '@/components/Texts'
+import { Button } from '@/components/Button'
 
 const coreFeatures = [
   {
@@ -30,40 +33,66 @@ const coreFeatures = [
 
 export function GpuOverview() {
   return (
-    <section className="bg-gray-950 py-24 sm:py-32">
-      <Container>
-        <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
-            PLATFORM OVERVIEW
-          </Eyebrow>
-          <SectionHeader as="h2" color="light" className="mt-6 font-medium">
-            Core Features
-          </SectionHeader>
-          <P color="lightSecondary" className="mt-6">
-            The Mycelium GPU layer provides predictable, sovereign acceleration
-            — without arbitrary limits or hidden economics.
-          </P>
-        </div>
+    <section className="bg-[#121212] w-full max-w-8xl mx-auto">
 
-        <div className="mx-auto mt-16 max-w-5xl grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
-          {coreFeatures.map((feature) => (
-            <div
-              key={feature.name}
-              className="rounded-3xl border border-white/10 bg-white/[0.04] p-8 text-left backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
+      {/* ✅ Top spacer */}
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800 bg-transparent" />
+      <div className="w-full border-t border-l border-r border-gray-800" />
+
+      {/* ✅ Boxed container */}
+      <div className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-800 bg-[#111111] py-12">
+        <Container>
+          <div className="mx-auto max-w-3xl text-center">
+            <Eyebrow className="text-cyan-400 tracking-[0.32em] uppercase">
+              PLATFORM OVERVIEW
+            </Eyebrow>
+
+            <SectionHeader
+              as="h2"
+              className="mt-6 text-3xl lg:text-4xl font-medium tracking-tight text-white"
             >
-              <div className="mb-6 flex size-12 items-center justify-center rounded-full bg-cyan-500/15">
-                <feature.icon className="size-6 text-cyan-300" aria-hidden="true" />
-              </div>
-              <h3 className="text-lg font-semibold text-white">
-                {feature.name}
-              </h3>
-              <p className="mt-3 text-sm leading-relaxed text-gray-300">
-                {feature.description}
-              </p>
-            </div>
-          ))}
-        </div>
-      </Container>
+              Core GPU Features
+            </SectionHeader>
+
+            <P className="mt-6 text-lg text-gray-300">
+              The Mycelium GPU fabric provides predictable, sovereign acceleration —
+              without arbitrary limits or hidden economics.
+            </P>
+          </div>
+
+          {/* ✅ Grid matching CloudArchitecture card layout */}
+          <ul
+            role="list"
+            className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-6 text-sm
+                       sm:grid-cols-2 lg:max-w-none lg:grid-cols-3 md:gap-y-10 "
+          >
+            {coreFeatures.map((feature) => (
+              <li
+                key={feature.name}
+                className="rounded-xl border border-gray-800 bg-[#111]/60 p-6 hover:transform-[scale(1.05)] transition"
+              >
+                <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-cyan-500/15">
+                  <feature.icon className="h-6 w-6 text-cyan-300" />
+                </div>
+
+                <h3 className="text-lg font-semibold text-white">
+                  {feature.name}
+                </h3>
+
+                <p className="mt-2 text-gray-400 leading-snug">
+                  {feature.description}
+                </p>
+              </li>
+            ))}
+          </ul>
+
+          
+        </Container>
+      </div>
+
+      {/* ✅ Bottom border + spacer */}
+      <div className="w-full border-b border-gray-800" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800 bg-transparent" />
     </section>
   )
 }
diff --git a/src/pages/gpu/GpuUseCases.tsx b/src/pages/gpu/GpuUseCases.tsx
index af1dfd3..b5764bc 100644
--- a/src/pages/gpu/GpuUseCases.tsx
+++ b/src/pages/gpu/GpuUseCases.tsx
@@ -1,4 +1,3 @@
-import { Container } from '@/components/Container'
 import { Eyebrow, SectionHeader, P } from '@/components/Texts'
 
 const gpuUseCases = [
@@ -18,35 +17,52 @@ const gpuUseCases = [
 
 export function GpuUseCases() {
   return (
-    <section className="bg-white py-24 sm:py-32">
-      <Container>
-        <div className="mx-auto max-w-3xl text-center">
+    <section className="w-full max-w-8xl mx-auto bg-white">
+
+      {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-slate-200"></div>
+      <div className="w-full border-t border-l border-r border-slate-200" />
+
+      {/* ✅ Main boxed content */}
+      <div className="mx-auto max-w-7xl px-6 bg-white lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-20 py-12 border border-t-0 border-b-0 border-slate-200">
+
+        {/* ✅ LEFT SIDE — Title + Intro */}
+        <div className="max-w-xl">
           <Eyebrow>USE CASES</Eyebrow>
+
           <SectionHeader as="h2" className="mt-6 text-gray-900">
             Built for Intelligent Workloads
           </SectionHeader>
+
           <P className="mt-6 text-gray-600">
             From sovereign AI execution to real-time rendering and edge inference,
-            Mycelium GPU ensures predictable acceleration with full ownership and no centralized control.
+            Mycelium GPU ensures predictable acceleration with full ownership —
+            no centralized control.
           </P>
         </div>
 
-        <div className="mx-auto mt-16 max-w-4xl space-y-6 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-8">
+        {/* ✅ RIGHT SIDE — 3 stacked features */}
+        <div className="space-y-8">
           {gpuUseCases.map((useCase) => (
-            <div
-              key={useCase.title}
-              className="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
-            >
-              <h3 className="text-xl font-semibold text-gray-900">
+            <div key={useCase.title}>
+              <h3 className="text-lg font-semibold text-gray-900">
                 {useCase.title}
               </h3>
-              <p className="mt-3 text-sm leading-relaxed text-gray-600">
+              <p className="mt-2 text-gray-600 max-w-2xl">
                 {useCase.description}
               </p>
+              {/* ✅ divider except last item */}
+              {useCase.title !== 'Distributed & Edge Compute' && (
+                <div className="mt-8 h-px w-full bg-cyan-300/40" />
+              )}
             </div>
           ))}
         </div>
-      </Container>
+      </div>
+
+      {/* ✅ Bottom horizontal line with spacing */}
+      <div className="w-full border-b border-slate-200" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-slate-200"></div>
     </section>
   )
 }
diff --git a/src/pages/network/CallToAction.tsx b/src/pages/network/CallToAction.tsx
index eab2e58..478400d 100644
--- a/src/pages/network/CallToAction.tsx
+++ b/src/pages/network/CallToAction.tsx
@@ -13,7 +13,7 @@ export function CallToAction() {
       {/* ✅ Main boxed area */}
       <div
         id="get-started"
-        className="relative py-18 max-w-7xl mx-auto bg-[#090909] border border-t-0 border-b-0 border-gray-800"
+        className="relative py-18 max-w-7xl mx-auto bg-[#111111] border border-t-0 border-b-0 border-gray-800"
       >
     
 
diff --git a/src/pages/storage/CallToAction.tsx b/src/pages/storage/CallToAction.tsx
index 26a5846..c219d21 100644
--- a/src/pages/storage/CallToAction.tsx
+++ b/src/pages/storage/CallToAction.tsx
@@ -13,7 +13,7 @@ export function CallToAction() {
       {/* ✅ Main boxed area */}
       <div
         id="get-started"
-        className="relative py-18 max-w-7xl mx-auto bg-[#090909] border border-t-0 border-b-0 border-gray-800"
+        className="relative py-18 max-w-7xl mx-auto bg-[#111111] border border-t-0 border-b-0 border-gray-800"
       >
         <Container className="relative">
           <div className="mx-auto max-w-3xl text-center">