new dropdown content from Mik

src/pages/storage/CallToAction.tsx

@@ -14,23 +14,31 @@ 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 storage into your stack.
           </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.
+            Partner with the Mycelium team to design quantum-safe, compliant
+            storage that meets your residency, redundancy, and performance
+            requirements across the globe.
           </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="#storage-developer-experience"
               as="a"
-              target="_blank"
               variant="outline"
               color="white"
             >
-              Read Docs
+              Explore developer workflow
             </Button>
           </div>
         </div>

src/pages/storage/StorageArchitecture.tsx

@@ -0,0 +1,97 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const architecture = [
+  {
+    title: 'Quantum-Safe Data Protection',
+    description:
+      'Post-quantum encryption and cryptographic verification protect every storage operation end-to-end.',
+    bullets: [
+      'Algorithms selected to resist quantum computing attacks.',
+      'Protection applied beneath the application layer.',
+      'All writes and reads verified cryptographically.',
+      'Future-proof design for long-lived data sets.',
+    ],
+  },
+  {
+    title: 'Autonomous Self-Healing',
+    description:
+      'Storage monitors itself, heals corruption, and restores replicas without human intervention.',
+    bullets: [
+      'Continuous detection of failures or anomalies.',
+      'Instant recovery without service interruption.',
+      'Integrity checks keep replicas in lockstep.',
+      '24/7 autonomy removes the pager from the loop.',
+    ],
+  },
+  {
+    title: 'Multi-Protocol Fabric',
+    description:
+      'A single data plane serves every protocol so workloads can mix and migrate freely.',
+    bullets: [
+      'Protocol adapters sit in front of the same storage core.',
+      'Applications choose the protocol that fits their workflow.',
+      'No data duplication needed to support multiple interfaces.',
+      'Consistent governance across all access patterns.',
+    ],
+  },
+  {
+    title: 'Geo-Aware Data Governance',
+    description:
+      'Data placement policies enforce sovereignty, redundancy, and compliance requirements.',
+    bullets: [
+      'Pin workloads to specific jurisdictions or providers.',
+      'Define redundancy at the dataset or workload level.',
+      'Automatic zone-to-zone replication hardens resilience.',
+      'Global distribution optimized across the ThreeFold Grid.',
+    ],
+  },
+]
+
+export function StorageArchitecture() {
+  return (
+    <section className="bg-gray-50 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">
+            Autonomous governance for planetary-scale storage.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            The Mycelium Storage data plane is designed to protect data at the
+            cryptographic layer, operate without manual intervention, and meet
+            jurisdictional requirements anywhere in the world.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+          {architecture.map((item) => (
+            <div
+              key={item.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">
+                {item.title}
+              </h3>
+              <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                {item.description}
+              </p>
+              <ul className="mt-6 space-y-3 text-sm text-gray-600">
+                {item.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/storage/StorageDeveloperExperience.tsx

@@ -0,0 +1,120 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+type Experience = {
+  title: string
+  description: string
+  code: string
+  language: string
+}
+
+const experiences: Experience[] = [
+  {
+    title: 'S3-Compatible Access',
+    description:
+      'Use familiar AWS SDKs to read and write data against the Mycelium Storage endpoint.',
+    language: 'python',
+    code: `import boto3
+
+s3_client = boto3.client(
+    's3',
+    endpoint_url='https://storage.mycelium.com',
+    aws_access_key_id='your_access_key',
+    aws_secret_access_key='your_secret_key'
+)
+
+s3_client.upload_file('local_file.txt', 'my-bucket', 'remote_file.txt')
+s3_client.download_file('my-bucket', 'remote_file.txt', 'downloaded_file.txt')`,
+  },
+  {
+    title: 'WebDAV Mount',
+    description:
+      'Mount storage as a filesystem for desktop workflows and legacy integrations.',
+    language: 'bash',
+    code: `mount -t davfs https://storage.mycelium.com/dav /mnt/storage
+cp /mnt/storage/data.txt ./
+echo "Data updated" > /mnt/storage/updated.txt`,
+  },
+  {
+    title: 'IPFS Integration',
+    description:
+      'Leverage IPFS for decentralized addressability without duplicating datasets.',
+    language: 'python',
+    code: `import ipfshttpclient
+
+client = ipfshttpclient.connect('/ip4/127.0.0.1/tcp/5001')
+result = client.add('data.txt')
+print(f"File available at: {result['Hash']}")`,
+  },
+  {
+    title: 'Geo-Aware Placement Policy',
+    description:
+      'Declare residency, redundancy, and protocol availability in a single configuration.',
+    language: 'yaml',
+    code: `apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: storage-config
+data:
+  placement: |
+    geo_aware_storage:
+      residency: "eu-west"
+      redundancy: 3
+      zones:
+        - "zone-1"
+        - "zone-2"
+        - "zone-3"
+      protocols:
+        - "s3"
+        - "ipfs"
+        - "webdav"`,
+  },
+]
+
+export function StorageDeveloperExperience() {
+  return (
+    <section
+      id="storage-developer-experience"
+      className="bg-gray-900 py-24 sm:py-32"
+    >
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-300">
+            Developer Experience
+          </Eyebrow>
+          <SectionHeader as="h2" color="light" className="mt-6">
+            Build with the interfaces you already know.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            Every protocol rides the same quantum-safe storage fabric, so moving
+            between APIs is as simple as switching adapters. Choose the workflow
+            that fits your stack.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+          {experiences.map((experience) => (
+            <div
+              key={experience.title}
+              className="flex h-full flex-col 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>
+                <h3 className="text-xl font-semibold text-white">
+                  {experience.title}
+                </h3>
+                <p className="mt-4 text-sm leading-relaxed text-gray-300">
+                  {experience.description}
+                </p>
+              </div>
+              <pre className="mt-6 overflow-x-auto rounded-2xl border border-white/10 bg-black/70 p-4 text-xs text-cyan-100">
+                <code>{experience.code}</code>
+              </pre>
+              <span className="mt-4 inline-flex w-fit items-center rounded-full border border-cyan-500/40 px-3 py-1 text-[0.65rem] font-semibold uppercase tracking-[0.3em] text-cyan-200">
+                {experience.language}
+              </span>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/storage/StorageDifferentiators.tsx

@@ -0,0 +1,65 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const differentiators = [
+  {
+    title: 'Quantum-Safe Protection',
+    description:
+      'Data is encrypted with algorithms that resist quantum attacks, preserving integrity for decades.',
+  },
+  {
+    title: 'Autonomous Self-Healing',
+    description:
+      'Failures and corruption are detected and repaired automatically—no on-call rotations required.',
+  },
+  {
+    title: 'Universal Protocol Support',
+    description:
+      'Serve the same data through IPFS, S3, WebDAV, HTTP, and native file systems without duplication.',
+  },
+  {
+    title: 'Geo-Aware Data Governance',
+    description:
+      'Define residency, redundancy, and distribution policies per workload and enforce them automatically.',
+  },
+  {
+    title: 'Ultra-Efficient Storage',
+    description:
+      'Zero-image technology reduces artifacts by up to 100x, cutting bandwidth and accelerating deployment.',
+  },
+]
+
+export function StorageDifferentiators() {
+  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">
+            Sovereignty, resilience, and flexibility in one fabric.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            Mycelium Storage blends quantum safety, autonomous operations, and
+            protocol choice into a single platform that meets the most demanding
+            requirements for modern data services.
+          </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>
+      </Container>
+    </section>
+  )
+}

src/pages/storage/StorageFeatures.tsx

@@ -0,0 +1,113 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+
+const features = [
+  {
+    title: 'Quantum-Safe Storage (QSS)',
+    description:
+      'Quantum-resistant encryption secures data beyond the application layer so ownership stays yours.',
+    bullets: [
+      'Beyond AES-256 with post-quantum algorithms.',
+      'Multi-layer protection enforced automatically.',
+      'Future-proof against emerging quantum threats.',
+      'Total control of keys, residency, and governance.',
+    ],
+  },
+  {
+    title: 'Self-Healing Storage System',
+    description:
+      'Autonomous recovery heals failures or corruption instantly with no human intervention.',
+    bullets: [
+      'Instant detection and repair of anomalies.',
+      'Integrity preserved while data is restored.',
+      'Continuous verification validates every replica.',
+      'Zero-ops recovery that runs around the clock.',
+    ],
+  },
+  {
+    title: 'Multi-Protocol Data Access',
+    description:
+      'Serve the same dataset over IPFS, S3, WebDAV, HTTP, and native file systems.',
+    bullets: [
+      'IPFS for decentralized, content-addressed retrieval.',
+      'S3-compatible API for existing tooling and SDKs.',
+      'WebDAV for mounted filesystem access.',
+      'HTTP and POSIX for direct application integration.',
+    ],
+  },
+  {
+    title: 'Geo-Aware Placement & Replication',
+    description:
+      'Define residency, redundancy, and distribution on a per-workload basis.',
+    bullets: [
+      'Pin data to specific jurisdictions or zones.',
+      'Custom redundancy policies per dataset.',
+      'Automatic zone-to-zone replication for resilience.',
+      'Global distribution across the ThreeFold Grid.',
+    ],
+  },
+  {
+    title: 'Ultra-Efficient Zero-Images (Flists)',
+    description:
+      'Metadata-only flists shrink images up to 100x, enabling instant Zero-OS deployments.',
+    bullets: [
+      'Drastically reduced storage footprint for artifacts.',
+      'Metadata-driven delivery accelerates boot times.',
+      'Bandwidth-efficient transfers to any node.',
+      'Perfect for immutable workloads and rapid rollback.',
+    ],
+  },
+]
+
+export function StorageFeatures() {
+  return (
+    <section id="storage-features" 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">
+            Core Features
+          </Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            Data services engineered for sovereignty and speed.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            Mycelium Storage combines quantum-safe cryptography, autonomous
+            healing, and universal protocol support. It adapts to every workload
+            without sacrificing control or performance.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 md:grid-cols-2">
+          {features.map((feature) => (
+            <div
+              key={feature.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"
+            >
+              <div>
+                <Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
+                  Capability
+                </Small>
+                <h3 className="mt-4 text-xl font-semibold text-gray-900">
+                  {feature.title}
+                </h3>
+                <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                  {feature.description}
+                </p>
+              </div>
+              <ul className="mt-6 space-y-3 text-sm text-gray-600">
+                {feature.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/storage/StorageHero.tsx

@@ -1,29 +1,46 @@
 'use client'
 
 import { Button } from '../../components/Button'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
 
 export function StorageHero() {
   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 Storage visual"
           src="/images/storagehero2.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">STORAGE</h2>
-          <p className="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">If GPUs are the engine, data is the lifeblood of intelligence.</p>
-          <p className="mt-6 text-base/7 text-gray-600">
-            Mycelium interconnects autonomous nodes with unified storage that adapts to every workload — from high-throughput object stores to parallel file systems.
-Rooted in open standards, it ensures speed, resilience, and true data sovereignty.
-          </p>
-          <div className="mt-8">
-            <Button href="#" variant="solid" color="cyan">
-              Talk to an expert
+          <Eyebrow className="tracking-[0.35em] uppercase text-cyan-500">
+            Mycelium Storage
+          </Eyebrow>
+          <SectionHeader as="h1" className="mt-4 text-gray-900">
+            Quantum-safe, sovereign data plane for every workload.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            Mycelium Storage delivers quantum-resistant protection, autonomous
+            recovery, and multi-protocol access across the ThreeFold Grid. Place
+            data exactly where you need it while keeping ownership entirely in
+            your hands.
+          </P>
+          <P className="mt-4 italic text-gray-500">
+            Quantum-safe. Self-healing. Universally accessible.
+          </P>
+          <div className="mt-10 flex flex-wrap gap-4">
+            <Button to="#storage-features" as="a" variant="solid" color="cyan">
+              Explore Features
+            </Button>
+            <Button
+              to="#storage-developer-experience"
+              as="a"
+              variant="outline"
+              color="cyan"
+            >
+              View Developer Flow
             </Button>
           </div>
         </div>

src/pages/storage/StorageOverview.tsx

@@ -0,0 +1,66 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+
+const highlights = [
+  {
+    label: 'Overview',
+    title: 'Quantum-safe, sovereign data management',
+    description:
+      'Mycelium Storage protects data beyond the application layer with autonomous recovery and geo-aware placement across the ThreeFold Grid.',
+  },
+  {
+    label: 'Core Concept',
+    title: 'Unified data plane across every protocol',
+    description:
+      'Serve the same dataset via IPFS, S3, WebDAV, HTTP, or native file systems while maintaining complete control over residency and redundancy.',
+  },
+  {
+    label: 'Outcome',
+    title: 'Ownership without compromise',
+    description:
+      'Quantum-resistant encryption, self-healing recovery, and programmable governance ensure data remains verifiable, available, and compliant.',
+  },
+]
+
+export function StorageOverview() {
+  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">
+            A quantum-safe data plane that heals itself.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            Built on sovereign infrastructure, Mycelium Storage keeps data
+            resilient, verifiable, and instantly accessible. Encryption,
+            replication, and governance are woven directly into the substrate.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-3">
+          {highlights.map((item) => (
+            <div
+              key={item.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">
+                  {item.label}
+                </Small>
+                <h3 className="mt-4 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>
+      </Container>
+    </section>
+  )
+}

src/pages/storage/StoragePage.tsx

@@ -1,16 +1,40 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { StorageHero } from './StorageHero'
+import { StorageOverview } from './StorageOverview'
+import { StorageFeatures } from './StorageFeatures'
+import { StorageArchitecture } from './StorageArchitecture'
+import { StorageDeveloperExperience } from './StorageDeveloperExperience'
+import { StorageUseCases } from './StorageUseCases'
+import { StorageDifferentiators } from './StorageDifferentiators'
 import { CallToAction } from './CallToAction'
 
 export default function StoragePage() {
   return (
-    <div>
+    <>
       <AnimatedSection>
         <StorageHero />
       </AnimatedSection>
+      <AnimatedSection>
+        <StorageOverview />
+      </AnimatedSection>
+      <AnimatedSection>
+        <StorageFeatures />
+      </AnimatedSection>
+      <AnimatedSection>
+        <StorageArchitecture />
+      </AnimatedSection>
+      <AnimatedSection>
+        <StorageDeveloperExperience />
+      </AnimatedSection>
+      <AnimatedSection>
+        <StorageUseCases />
+      </AnimatedSection>
+      <AnimatedSection>
+        <StorageDifferentiators />
+      </AnimatedSection>
       <AnimatedSection>
         <CallToAction />
       </AnimatedSection>
-    </div>
+    </>
   )
 }

src/pages/storage/StorageUseCases.tsx

@@ -0,0 +1,155 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const primaryUseCases = [
+  {
+    title: 'Data Sovereignty Applications',
+    bullets: [
+      'Privacy-first products with full control over data location.',
+      'Regulatory compliance for regional or industry mandates.',
+      'Enterprise workloads that demand audit-ready governance.',
+      'DigitalMe applications hosted with complete data ownership.',
+    ],
+  },
+  {
+    title: 'Multi-Protocol Applications',
+    bullets: [
+      'Support legacy S3, WebDAV, and HTTP workloads simultaneously.',
+      'Enable hybrid architectures that mix centralized and decentralized access.',
+      'Give developers freedom to choose best-fit protocols per service.',
+      'Simplify migrations by keeping data accessible through multiple APIs.',
+    ],
+  },
+  {
+    title: 'Backup and Recovery',
+    bullets: [
+      'Autonomous backups with continuous verification.',
+      'Cross-zone replication that survives regional outages.',
+      'Integrity monitoring that spots corruption immediately.',
+      'Instant recovery from failures without manual restore steps.',
+    ],
+  },
+  {
+    title: 'Content Distribution',
+    bullets: [
+      'Global CDN leveraging the breadth of the ThreeFold Grid.',
+      'IPFS integration for decentralized content addressing.',
+      'Serve the same assets over HTTP, S3, or WebDAV.',
+      'Geo-optimized placement keeps content close to users.',
+    ],
+  },
+]
+
+const storageSpecificUseCases = [
+  {
+    title: 'Data Sovereignty & Compliance',
+    bullets: [
+      'Guarantee residency in specific jurisdictions.',
+      'Protect personal or regulated data with audit trails.',
+      'Empower enterprises with region-specific governance.',
+      'Handle cross-border rules without duplicating datasets.',
+    ],
+  },
+  {
+    title: 'Multi-Protocol Data Solutions',
+    bullets: [
+      'Bridge legacy S3 tooling with decentralized IPFS access.',
+      'Offer WebDAV and HTTP endpoints for collaboration suites.',
+      'Blend centralized and decentralized patterns as needed.',
+      'Let developers change protocols without rewriting storage.',
+    ],
+  },
+  {
+    title: 'Autonomous Backup & Recovery',
+    bullets: [
+      'Self-healing backups that maintain integrity automatically.',
+      'Zone-aware replication delivers geographic redundancy.',
+      'Instant recovery with continuous verification.',
+      'Keeps backups up-to-date without operator intervention.',
+    ],
+  },
+  {
+    title: 'Content Distribution & CDN',
+    bullets: [
+      'Distribute media and assets across a planetary mesh.',
+      'Use IPFS for decentralized caching and retrieval.',
+      'Serve identical content across multiple access protocols.',
+      'Geo-optimize placement for latency-sensitive workloads.',
+    ],
+  },
+]
+
+export function StorageUseCases() {
+  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">
+            Sovereign storage for every data-intensive workload.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            Mycelium Storage adapts to compliance-driven enterprise data,
+            decentralized content distribution, and everything in between.
+            Choose the pattern that fits your strategy without sacrificing
+            ownership.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+          {primaryUseCases.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>
+              <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>
+        <div className="mt-16 rounded-3xl border border-slate-200 bg-slate-50 p-10 shadow-sm">
+          <h3 className="text-2xl font-semibold text-gray-900">
+            Storage-Specific Scenarios
+          </h3>
+          <p className="mt-4 text-sm leading-relaxed text-gray-600">
+            These patterns highlight how Mycelium Storage keeps sovereignty,
+            protocol flexibility, and resilience at the center of data strategy.
+          </p>
+          <div className="mt-10 grid gap-8 lg:grid-cols-2">
+            {storageSpecificUseCases.map((useCase) => (
+              <div
+                key={useCase.title}
+                className="rounded-3xl border border-cyan-100 bg-white p-6 leading-relaxed text-gray-600"
+              >
+                <h4 className="text-lg font-semibold text-gray-900">
+                  {useCase.title}
+                </h4>
+                <ul className="mt-4 space-y-3 text-sm">
+                  {useCase.bullets.map((bullet) => (
+                    <li key={bullet} className="flex gap-3">
+                      <span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
+                      <span>{bullet}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+      </Container>
+    </section>
+  )
+}