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