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