new dropdown content from Mik

src/pages/gpu/CallToAction.tsx

@@ -14,23 +14,30 @@ export function CallToAction() {
       <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">
-            Get Started Today
+            Bring sovereign GPU acceleration to production.
           </h2>
           <p className="mt-6 text-lg text-gray-300">
-            Download the Mycelium app and step into the future of secure, peer-to-peer networking; fast, private, and decentralized.
+            Work with the Mycelium team to deploy GPU workloads that remain
+            verifiable, performant, and cost-transparent from edge to core.
           </p>
           <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
-            <Button to="/download" variant="solid" color="white">
-              Get Mycelium Connector
+            <Button
+              to="https://myceliumcloud.tf"
+              as="a"
+              variant="solid"
+              color="white"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Talk to our team
             </Button>
             <Button
-              to="https://threefold.info/mycelium_network/docs/"
+              to="#gpu-architecture"
               as="a"
-              target="_blank"
               variant="outline"
               color="white"
             >
-              Read Docs
+              Review architecture
             </Button>
           </div>
         </div>

src/pages/gpu/GpuArchitecture.tsx

@@ -0,0 +1,75 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const architectureSections = [
+  {
+    title: 'Distributed GPU Mesh',
+    description:
+      'A peer-to-peer fabric connects GPU nodes across the ThreeFold Grid, exposing them through the Mycelium network.',
+    bullets: [
+      'GPU nodes distributed globally for on-demand acceleration.',
+      'Mycelium network provides encrypted peer-to-peer connectivity.',
+      'Smart contract orchestration allocates and governs resources.',
+      'Real-time monitoring tracks utilization and health.',
+    ],
+  },
+  {
+    title: 'Performance Characteristics',
+    description:
+      'Consistency and transparency are built into the fabric so workloads behave predictably anywhere on the planet.',
+    bullets: [
+      'Edge-to-core deployment flexibility for every workload profile.',
+      'Adaptive intelligence optimizes allocation automatically.',
+      'Deterministic performance guarantees availability when booked.',
+      'Transparent cost tracking for every GPU cycle consumed.',
+    ],
+  },
+]
+
+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">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
+            Technical Architecture
+          </Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            A peer-to-peer mesh purpose-built for acceleration.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            Mycelium GPU treats every node as part of a sovereign mesh. Encrypted
+            networking, smart contract orchestration, and transparent monitoring
+            ensure your workloads receive precisely the power they request.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+          {architectureSections.map((section) => (
+            <div
+              key={section.title}
+              className="flex h-full flex-col 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">
+                {section.title}
+              </h3>
+              <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                {section.description}
+              </p>
+              <ul className="mt-6 space-y-3 text-sm text-gray-600">
+                {section.bullets.map((bullet) => (
+                  <li
+                    key={bullet}
+                    className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
+                  >
+                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
+                    <span>{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/gpu/GpuDifferentiators.tsx

@@ -0,0 +1,85 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const differentiators = [
+  {
+    title: 'Unified Fabric',
+    description:
+      'Transforms fragmented GPU resources into a single, standard interface accessible anywhere.',
+  },
+  {
+    title: 'Sovereign Control',
+    description:
+      'Operate without vendor lock-in or geographic restrictions—govern policies entirely through code.',
+  },
+  {
+    title: 'Code-Driven Orchestration',
+    description:
+      'APIs and smart contracts automate allocation, attestation, and lifecycle management.',
+  },
+  {
+    title: 'Deterministic Performance',
+    description:
+      'Guaranteed GPU allocation delivers the compute you reserve with consistent performance characteristics.',
+  },
+]
+
+const costEfficiency = [
+  'Transparent pricing with no hidden fees.',
+  'Pay only for the GPU cycles you consume.',
+  'Global optimization locates the most cost-effective nodes.',
+  'Avoid premium lock-in from centralized providers.',
+]
+
+export function GpuDifferentiators() {
+  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">
+            Key Differentiators
+          </Eyebrow>
+          <SectionHeader as="h2" color="light" className="mt-6">
+            GPU acceleration with sovereignty and clarity.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            Mycelium GPU delivers verifiable access to power when you need it.
+            Control stays in your hands, from allocation policies to cost
+            structure.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 md:grid-cols-2">
+          {differentiators.map((item) => (
+            <div
+              key={item.title}
+              className="rounded-3xl border border-white/10 bg-white/[0.04] p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
+            >
+              <h3 className="text-lg font-semibold text-white">{item.title}</h3>
+              <p className="mt-4 text-sm leading-relaxed text-gray-300">
+                {item.description}
+              </p>
+            </div>
+          ))}
+        </div>
+        <div className="mt-16 rounded-3xl border border-white/10 bg-white/[0.03] p-8 text-left backdrop-blur-sm">
+          <h3 className="text-xl font-semibold text-white">Cost Efficiency</h3>
+          <p className="mt-4 text-sm leading-relaxed text-gray-300">
+            Transparent economics makes capacity planning simple while keeping
+            budgets predictable.
+          </p>
+          <ul className="mt-6 space-y-3 text-sm text-gray-300">
+            {costEfficiency.map((item) => (
+              <li
+                key={item}
+                className="flex items-start gap-3 rounded-2xl border border-cyan-500/10 bg-cyan-500/5 p-3 leading-relaxed"
+              >
+                <span className="mt-1 inline-block size-2 rounded-full bg-cyan-300" />
+                <span>{item}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/gpu/GpuGettingStarted.tsx

@@ -0,0 +1,103 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+
+const steps = [
+  {
+    number: '01',
+    title: 'Account Setup',
+    description:
+      'Create your Mycelium account and ensure GPU access is enabled.',
+    bullets: [
+      'Sign up and verify your account credentials.',
+      'Enable GPU access or request it from the Mycelium team.',
+      'Configure billing to align usage with your budget.',
+    ],
+  },
+  {
+    number: '02',
+    title: 'Request GPU Resources',
+    description: 'Use the Mycelium GPU API to allocate the acceleration you need.',
+    bullets: [
+      'Describe the GPU profile (memory, cores, region) your workload requires.',
+      'Let smart contracts reserve and attest the selected hardware.',
+      'Receive deterministic allocation details for orchestration.',
+    ],
+  },
+  {
+    number: '03',
+    title: 'Deploy & Monitor',
+    description:
+      'Launch your workload, integrate storage, and monitor performance from the dashboard.',
+    bullets: [
+      'Deploy via Kubernetes, containers, or custom runtimes.',
+      'Bind to Quantum-Safe Storage for datasets and checkpoints.',
+      'Track GPU utilization, cost, and health in real time.',
+    ],
+  },
+]
+
+const workflow = 'Application → Mycelium GPU API → GPU Resource Allocation → Workload Execution'
+
+export function GpuGettingStarted() {
+  return (
+    <section
+      id="gpu-getting-started"
+      className="relative overflow-hidden bg-gray-900 py-24 sm:py-32"
+    >
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(34,211,238,0.12),_transparent_60%)]" />
+      <Container className="relative">
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
+            Getting Started
+          </Eyebrow>
+          <SectionHeader as="h2" color="light" className="mt-6">
+            Allocate, run, and observe in three moves.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            Mycelium GPU keeps onboarding simple—declare what you need, deploy
+            your workload, and let the mesh guarantee performance with full
+            transparency.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-10 lg:grid-cols-3">
+          {steps.map((step) => (
+            <div
+              key={step.title}
+              className="flex h-full flex-col rounded-3xl border border-white/10 bg-white/[0.03] p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.06]"
+            >
+              <div className="flex items-center justify-between">
+                <Small className="text-xs uppercase tracking-[0.4em] text-cyan-300">
+                  {step.number}
+                </Small>
+                <span className="inline-flex size-10 items-center justify-center rounded-full border border-cyan-300/40 text-sm font-semibold uppercase tracking-[0.25em] text-cyan-200">
+                  Go
+                </span>
+              </div>
+              <h3 className="mt-6 text-xl font-semibold text-white">{step.title}</h3>
+              <p className="mt-4 text-sm leading-relaxed text-gray-300">
+                {step.description}
+              </p>
+              <ul className="mt-6 space-y-3 text-sm text-gray-300">
+                {step.bullets.map((bullet) => (
+                  <li
+                    key={bullet}
+                    className="flex items-start gap-3 rounded-2xl border border-cyan-500/10 bg-cyan-500/5 p-3 leading-relaxed"
+                  >
+                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-300" />
+                    <span>{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+        <div className="mt-16 rounded-3xl border border-white/10 bg-white/[0.03] p-6 text-center backdrop-blur-sm">
+          <p className="text-sm font-medium uppercase tracking-[0.3em] text-cyan-200">
+            Basic Workflow
+          </p>
+          <p className="mt-4 text-base text-gray-100">{workflow}</p>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/gpu/GpuHero.tsx

@@ -1,31 +1,42 @@
 'use client'
 
 import { Button } from '../../components/Button'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
 
 export function GpuHero() {
   return (
     <div className="relative bg-white">
       <div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-1/2">
         <img
-          alt=""
+          alt="Mycelium GPU nebula illustration"
           src="/images/gpuhero.png"
           className="size-full object-cover"
         />
-       
       </div>
       <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>
-          <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 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.
-          </p>
-          <div className="mt-8 flex items-center gap-x-4">
-            <Button to="/docs" variant="solid" color="cyan">
-              Get Started →
+          <Eyebrow className="tracking-[0.35em] uppercase text-cyan-500">
+            Mycelium GPU
+          </Eyebrow>
+          <SectionHeader as="h1" className="mt-4 text-gray-900">
+            Unify distributed GPU power into a sovereign acceleration fabric.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            Mycelium GPU transforms fragmented hardware across the ThreeFold
+            Grid into one adaptive intelligence layer. Run AI, ML, rendering,
+            and high-performance workloads anywhere—from edge devices to
+            planetary clusters—with deterministic performance and transparent
+            cost.
+          </P>
+          <P className="mt-4 italic text-gray-500">
+            The energy behind intelligence, orchestrated entirely through code.
+          </P>
+          <div className="mt-10 flex flex-wrap gap-4">
+            <Button to="#gpu-getting-started" as="a" variant="solid" color="cyan">
+              Start with GPU Access
             </Button>
-            <Button to="#architecture" variant="outline" color="cyan">
-              Explore Architecture →
+            <Button to="#gpu-architecture" as="a" variant="outline" color="cyan">
+              Explore the Mesh
             </Button>
           </div>
         </div>

src/pages/gpu/GpuIntegration.tsx

@@ -0,0 +1,81 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const integrationPoints = [
+  'Unified Mycelium networking provides secure access to GPU nodes.',
+  'Zero-trust security model extends to GPU operations automatically.',
+  'Quantum-safe storage available directly to GPU workloads.',
+  'Native Kubernetes support exposes GPUs through familiar resources.',
+]
+
+const yamlExample = `apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: gpu-workload
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: gpu-compute
+  template:
+    metadata:
+      labels:
+        app: gpu-compute
+    spec:
+      containers:
+        - name: gpu-compute
+          image: tensorflow/tensorflow:latest-gpu
+          resources:
+            limits:
+              nvidia.com/gpu: 1
+          env:
+            - name: MYCELIUM_GPU_REGION
+              value: "auto"`
+
+export function GpuIntegration() {
+  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">
+            Cloud Integration
+          </Eyebrow>
+          <SectionHeader as="h2" color="light" className="mt-6">
+            Seamless with Mycelium Cloud infrastructure.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            GPU workloads plug directly into the same mesh that powers Mycelium
+            Cloud. Networking, security, and storage policies flow with every
+            deployment.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-10 lg:grid-cols-2">
+          <div className="space-y-4 rounded-3xl border border-white/10 bg-white/[0.04] p-8 text-left backdrop-blur-sm">
+            <h3 className="text-lg font-semibold text-white">
+              Platform alignment
+            </h3>
+            <ul className="space-y-3 text-sm text-gray-300">
+              {integrationPoints.map((point) => (
+                <li
+                  key={point}
+                  className="flex items-start gap-3 rounded-2xl border border-cyan-500/10 bg-cyan-500/5 p-3 leading-relaxed"
+                >
+                  <span className="mt-1 inline-block size-2 rounded-full bg-cyan-300" />
+                  <span>{point}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="rounded-3xl border border-white/10 bg-white/[0.04] p-8 backdrop-blur-sm">
+            <h3 className="text-lg font-semibold text-white">
+              Kubernetes deployment example
+            </h3>
+            <pre className="mt-6 overflow-x-auto rounded-2xl border border-white/10 bg-black/70 p-4 text-xs text-cyan-100">
+              <code>{yamlExample}</code>
+            </pre>
+          </div>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/gpu/GpuOverview.tsx

@@ -1,56 +1,108 @@
-import { CodeBracketSquareIcon, CubeTransparentIcon, LockClosedIcon, Squares2X2Icon } from '@heroicons/react/24/outline'
+import {
+  CodeBracketSquareIcon,
+  CubeTransparentIcon,
+  LockClosedIcon,
+  Squares2X2Icon,
+} from '@heroicons/react/24/outline'
 
-const features = [
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+
+const overviewCards = [
+  {
+    label: 'Overview',
+    title: 'Unified GPU acceleration across the ThreeFold Grid',
+    description:
+      'Mycelium GPU aggregates distributed hardware into a single fabric, delivering sovereign acceleration for AI, ML, and rendering workloads.',
+  },
+  {
+    label: 'Core Concept',
+    title: 'Sovereign intelligence layer',
+    description:
+      'No silos, no intermediaries—just raw, verifiable GPU power orchestrated through smart contracts and APIs you control.',
+  },
+]
+
+const principles = [
   {
     name: 'No Silos',
-    description: 'All GPU resources accessible through a single interface.',
+    description: 'Every GPU resource is accessible through a single interface.',
     icon: Squares2X2Icon,
   },
   {
     name: 'No Intermediaries',
-    description: 'Direct access to GPU resources without centralized control.',
+    description: 'Direct access to hardware without centralized brokers.',
     icon: CubeTransparentIcon,
   },
   {
     name: 'Verifiable Power',
-    description: 'Every GPU cycle cryptographically verified.',
+    description: 'Every GPU cycle is attested and cryptographically verified.',
     icon: LockClosedIcon,
   },
   {
     name: 'Code-Orchestrated',
-    description: 'Managed entirely through APIs and smart contracts.',
+    description: 'Smart contracts and APIs automate allocation and policy.',
     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>
+    <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">
+            The sovereign acceleration layer for intelligent workloads.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            Mycelium GPU makes distributed acceleration feel like one machine.
+            Harness global GPUs with deterministic performance, transparent
+            costs, and end-to-end verification.
+          </P>
         </div>
-      </div>
-    </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+          {overviewCards.map((card) => (
+            <div
+              key={card.title}
+              className="group relative overflow-hidden rounded-3xl border border-white/10 bg-white/[0.04] p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
+            >
+              <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/0 via-white/[0.05] to-cyan-300/20 opacity-0 transition group-hover:opacity-100" />
+              <div className="relative">
+                <Small className="text-xs uppercase tracking-[0.35em] text-cyan-200">
+                  {card.label}
+                </Small>
+                <h3 className="mt-4 text-lg font-semibold text-white">
+                  {card.title}
+                </h3>
+                <p className="mt-4 text-sm leading-relaxed text-gray-300">
+                  {card.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
+          {principles.map((principle) => (
+            <div
+              key={principle.name}
+              className="rounded-3xl border border-white/10 bg-white/[0.04] p-6 text-left transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/[0.08]"
+            >
+              <div className="mb-6 flex size-12 items-center justify-center rounded-full bg-cyan-500/15">
+                <principle.icon aria-hidden="true" className="size-6 text-cyan-300" />
+              </div>
+              <h3 className="text-base font-semibold text-white">
+                {principle.name}
+              </h3>
+              <p className="mt-3 text-sm leading-relaxed text-gray-300">
+                {principle.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
   )
 }

src/pages/gpu/GpuPage.tsx

@@ -1,20 +1,40 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { GpuHero } from './GpuHero'
-import { CallToAction } from './CallToAction'
 import { GpuOverview } from './GpuOverview'
+import { GpuArchitecture } from './GpuArchitecture'
+import { GpuIntegration } from './GpuIntegration'
+import { GpuUseCases } from './GpuUseCases'
+import { GpuGettingStarted } from './GpuGettingStarted'
+import { GpuDifferentiators } from './GpuDifferentiators'
+import { CallToAction } from './CallToAction'
 
 export default function GpuPage() {
   return (
-    <div>
+    <>
       <AnimatedSection>
         <GpuHero />
       </AnimatedSection>
       <AnimatedSection>
         <GpuOverview />
       </AnimatedSection>
+      <AnimatedSection>
+        <GpuArchitecture />
+      </AnimatedSection>
+      <AnimatedSection>
+        <GpuIntegration />
+      </AnimatedSection>
+      <AnimatedSection>
+        <GpuUseCases />
+      </AnimatedSection>
+      <AnimatedSection>
+        <GpuGettingStarted />
+      </AnimatedSection>
+      <AnimatedSection>
+        <GpuDifferentiators />
+      </AnimatedSection>
       <AnimatedSection>
         <CallToAction />
       </AnimatedSection>
-    </div>
+    </>
   )
 }

src/pages/gpu/GpuUseCases.tsx

@@ -0,0 +1,81 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const useCases = [
+  {
+    title: 'AI / ML Training',
+    description:
+      'Scale training, fine-tuning, and inference workloads anywhere on the grid.',
+    bullets: ['GPU acceleration', 'Scalable compute', 'Cost optimization'],
+  },
+  {
+    title: 'Rendering & Visualization',
+    description:
+      'Drive high-performance graphics pipelines for media, science, and immersive experiences.',
+    bullets: [
+      'Distributed 3D rendering',
+      'Scientific visualization',
+      'Real-time VR / AR processing',
+      'Digital twin simulations',
+    ],
+  },
+  {
+    title: 'General GPU Computing',
+    description:
+      'Harness sovereign acceleration for simulations, finance, blockchain, and research.',
+    bullets: [
+      'Scientific simulations',
+      'Financial modeling',
+      'Blockchain processing',
+      'Protein folding and discovery',
+    ],
+  },
+]
+
+export function GpuUseCases() {
+  return (
+    <section className="bg-white py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
+            Use Cases
+          </Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            Acceleration for every intelligent workload.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            From deep learning to immersive visualization, Mycelium GPU delivers
+            deterministic access to the power you need without the waitlists or
+            markups of centralized clouds.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-3">
+          {useCases.map((useCase) => (
+            <div
+              key={useCase.title}
+              className="flex h-full flex-col 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">
+                {useCase.title}
+              </h3>
+              <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                {useCase.description}
+              </p>
+              <ul className="mt-6 space-y-3 text-sm text-gray-600">
+                {useCase.bullets.map((bullet) => (
+                  <li
+                    key={bullet}
+                    className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
+                  >
+                    <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
+                    <span>{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}