feat: add GPU overview section with key features

- Created new GpuOverview component showcasing 4 core features of GPU service
- Added responsive grid layout with feature cards displaying icons and descriptions
- Integrated overview section into GpuPage between hero and call-to-action
- Implemented dark theme styling with cyan accents for feature icons
- Added descriptive text explaining unified GPU acceleration across ThreeFold Grid

src/components/Button.tsx

@@ -17,6 +17,7 @@ const variantStyles = {
     green: 'bg-green-500 text-white hover:bg-green-600',
   },
   outline: {
+    cyan: 'border-cyan-500 text-cyan-500 hover:bg-cyan-50',
     gray: 'border-gray-300 text-gray-700 hover:border-cyan-500 active:border-cyan-500',
     white: 'border-gray-300 text-white hover:border-cyan-500 active:border-cyan-500',
   },
@@ -29,7 +30,7 @@ type ButtonProps = (
     }
   | {
       variant: 'outline'
-      color?: keyof typeof variantStyles.outline
+      color?: (keyof typeof variantStyles.outline) | 'cyan'
     }
 ) &
   (

src/pages/cloud/CloudHeroAlt.tsx

@@ -21,12 +21,8 @@ export function CloudHeroAlt() {
              Mycelium Cloud blends deterministic compute with quantum-safe storage, delivering a sovereign platform built for zero-ops automation.
           </p>
           <div className="mt-8">
-            <Button
+            <Button href="#" variant="solid" color="cyan">
-              href="#"
+              Experience Deterministic Compute
-              className="inline-flex rounded-xl bg-cyan-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-cyan-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600"
-            >
-              {' '}
-              Experience Deterministic Compute{' '}
             </Button>
           </div>
         </div>

src/pages/compute/ComputeHero.tsx

@@ -24,12 +24,8 @@ export function ComputeHero() {
             Compute that verifies itself. Expands itself. Heals itself.
           </p>
           <div className="mt-8">
-            <Button
+            <Button href="#" variant="solid" color="cyan">
-              href="#"
+              Experience Deterministic Compute
-              className="inline-flex rounded-xl bg-cyan-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-cyan-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600"
-            >
-              {' '}
-              Experience Deterministic Compute{' '}
             </Button>
           </div>
         </div>

src/pages/gpu/GpuHero.tsx

@@ -16,19 +16,16 @@ export function GpuHero() {
       <div className="relative mx-auto max-w-7xl py-24 sm:py-32 lg:px-8 lg:py-40">
         <div className="pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24 xl:pr-32">
           <h2 className="text-base/7 font-semibold text-cyan-500">GPU</h2>
-          <p className="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">The energy behind intelligence.</p>
+          <h1 className="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Unify Distributed GPU Power. Run Intelligence Anywhere.</h1>
           <p className="mt-6 text-base/7 text-gray-600">
-            Mycelium GPU unifies distributed acceleration into a single sovereign fabric — turning fragmented hardware into one adaptive intelligence layer.
+            Mycelium GPU transforms fragmented GPU resources into a single sovereign fabric for running AI, ML, and rendering workloads — from edge to core, with deterministic performance and transparent cost.
-            Run AI, ML, and rendering workloads anywhere, from edge to core, with deterministic performance and transparent cost.
-            No silos. No intermediaries. Just raw, verifiable power — orchestrated through code, not control.
           </p>
-          <div className="mt-8">
+          <div className="mt-8 flex items-center gap-x-4">
-            <Button
+            <Button to="/docs" variant="solid" color="cyan">
-              href="#"
+              Get Started →
-              className="inline-flex rounded-xl bg-cyan-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-cyan-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600"
+            </Button>
-            >
+            <Button to="#architecture" variant="outline" color="cyan">
-              {' '}
+              Explore Architecture →
-              Unify Your GPU Power{' '}
             </Button>
           </div>
         </div>

src/pages/gpu/GpuOverview.tsx

@@ -0,0 +1,56 @@
+import { CodeBracketSquareIcon, CubeTransparentIcon, LockClosedIcon, Squares2X2Icon } from '@heroicons/react/24/outline'
+
+const features = [
+  {
+    name: 'No Silos',
+    description: 'All GPU resources accessible through a single interface.',
+    icon: Squares2X2Icon,
+  },
+  {
+    name: 'No Intermediaries',
+    description: 'Direct access to GPU resources without centralized control.',
+    icon: CubeTransparentIcon,
+  },
+  {
+    name: 'Verifiable Power',
+    description: 'Every GPU cycle cryptographically verified.',
+    icon: LockClosedIcon,
+  },
+  {
+    name: 'Code-Orchestrated',
+    description: 'Managed entirely through APIs and smart contracts.',
+    icon: CodeBracketSquareIcon,
+  },
+]
+
+export function GpuOverview() {
+  return (
+    <div className="bg-[#171717] py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-5">
+          <div className="lg:col-span-2">
+            <h2 className="text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl">
+              Unified GPU Acceleration Across the Grid
+            </h2>
+            <p className="mt-4 text-base/7 text-gray-300">
+              Mycelium GPU provides unified access to distributed GPU acceleration across the ThreeFold Grid. It transforms fragmented GPU resources into a single adaptive intelligence layer — enabling you to run AI, ML, and rendering workloads anywhere, anytime, with verifiable performance and transparent costs.
+            </p>
+          </div>
+          <dl className="col-span-3 grid grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2">
+            {features.map((feature) => (
+              <div key={feature.name}>
+                <dt className="text-base/7 font-semibold text-white">
+                  <div className="mb-6 flex size-10 items-center justify-center rounded-lg">
+                    <feature.icon aria-hidden="true" className="size-8 text-cyan-500" />
+                  </div>
+                  {feature.name}
+                </dt>
+                <dd className="mt-1 text-base/7 text-gray-400">{feature.description}</dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/gpu/GpuPage.tsx

@@ -1,6 +1,7 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { GpuHero } from './GpuHero'
 import { CallToAction } from './CallToAction'
+import { GpuOverview } from './GpuOverview'
 
 export default function GpuPage() {
   return (
@@ -8,6 +9,9 @@ export default function GpuPage() {
       <AnimatedSection>
         <GpuHero />
       </AnimatedSection>
+      <AnimatedSection>
+        <GpuOverview />
+      </AnimatedSection>
       <AnimatedSection>
         <CallToAction />
       </AnimatedSection>

src/pages/storage/StorageHero.tsx

@@ -22,12 +22,8 @@ export function StorageHero() {
 Rooted in open standards, it ensures speed, resilience, and true data sovereignty.
           </p>
           <div className="mt-8">
-            <Button
+            <Button href="#" variant="solid" color="cyan">
-              href="#"
+              Talk to an expert
-              className="inline-flex rounded-xl bg-cyan-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-cyan-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600"
-            >
-              {' '}
-              Talk to an expert{' '}
             </Button>
           </div>
         </div>