feat: simplify storage page messaging and structure

- Streamlined call-to-action to focus on cloud vs. self-hosted options
- Condensed architecture and use cases sections to remove excessive detail
- Reorganized page component order and added new capability/design sections

src/pages/storage/CallToAction.tsx

@@ -14,12 +14,12 @@ 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">
-            Bring sovereign storage into your stack.
+            Choose How You Want to Start
           </h2>
           <p className="mt-6 text-lg text-gray-300">
-            Partner with the Mycelium team to design quantum-safe, compliant
+            Store data in your Mycelium Cloud environment 
-            storage that meets your residency, redundancy, and performance
+or host your own node for full sovereignty.
-            requirements across the globe.
+
           </p>
           <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
             <Button
@@ -30,7 +30,7 @@ export function CallToAction() {
               target="_blank"
               rel="noreferrer"
             >
-              Talk to our team
+              Use Storage in Cloud
             </Button>
             <Button
               to="#storage-developer-experience"
@@ -38,7 +38,7 @@ export function CallToAction() {
               variant="outline"
               color="white"
             >
-              Explore developer workflow
+              Host a Node
             </Button>
           </div>
         </div>

src/pages/storage/StorageArchitecture.tsx

@@ -3,48 +3,17 @@ import { Eyebrow, SectionHeader, P } from '../../components/Texts'
 
 const architecture = [
   {
-    title: 'Quantum-Safe Data Protection',
+    title: 'Encrypted Storage Substrate',
-    description:
+    description: 'Keeps data private and verifiable.',
-      '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',
+    title: 'Mesh Routing Layer',
-    description:
+    description: 'Connects clients and workloads securely, anywhere.',
-      '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',
+    title: 'Protocol Gateway Layer',
     description:
-      'A single data plane serves every protocol so workloads can mix and migrate freely.',
+      'Serve the same dataset over S3, IPFS, WebDAV, or HTTP.',
-    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.',
-    ],
   },
 ]
 
@@ -53,41 +22,29 @@ export function StorageArchitecture() {
     <section className="bg-gray-50 py-24 sm:py-32">
       <Container>
         <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow>
+          <Eyebrow>ARCHITECTURE</Eyebrow>
-            Technical Architecture
-          </Eyebrow>
           <SectionHeader as="h2" className="mt-6 text-gray-900">
-            Autonomous governance for planetary-scale storage.
+            HOW IT WORKS
           </SectionHeader>
           <P className="mt-6 text-gray-600">
-            The Mycelium Storage data plane is designed to protect data at the
+            A layered design that encrypts, routes, and exposes storage through
-            cryptographic layer, operate without manual intervention, and meet
+            multiple protocols — without duplicating data or compromising
-            jurisdictional requirements anywhere in the world.
+            sovereignty.
           </P>
         </div>
-        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+
+        <div className="mx-auto mt-16 max-w-4xl space-y-6">
           {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"
+              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-4 text-sm leading-relaxed text-gray-600">
+              <p className="mt-3 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>

src/pages/storage/StorageCapabilities.tsx

@@ -0,0 +1,64 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, H3, P, CT, CP } from '../../components/Texts'
+import {
+  ServerStackIcon,
+  GlobeAltIcon,
+  FolderOpenIcon,
+  LockClosedIcon,
+} from '@heroicons/react/24/solid'
+
+const capabilities = [
+  {
+    name: 'S3-Compatible Object Storage',
+    description: 'Works with existing SDKs & tooling.',
+    icon: ServerStackIcon,
+  },
+  {
+    name: 'IPFS & Content-Addressed Access',
+    description: 'Ideal for distributed and decentralized workloads.',
+    icon: GlobeAltIcon,
+  },
+  {
+    name: 'Filesystem Mounts (WebDAV / POSIX)',
+    description: 'Mount storage directly into workflows and apps.',
+    icon: FolderOpenIcon,
+  },
+  {
+    name: 'Encrypted Replication & Placement Control',
+    description: 'Choose where data physically lives – and who controls it.',
+    icon: LockClosedIcon,
+  },
+]
+
+export  function StorageCapabilities() {
+  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 Use Mycelium Storage For
+          </H3>
+          <P className="mt-6 text-gray-600">
+            A decentralized storage layer built for sovereign workloads — secure,
+            flexible, and globally addressable.
+          </P>
+        </div>
+
+        <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((item) => (
+              <div key={item.name} className="text-center">
+                <div className="mx-auto flex size-12 items-center justify-center rounded-xl bg-cyan-50">
+                  <item.icon className="size-6 text-cyan-600" aria-hidden="true" />
+                </div>
+                <CT className="mt-6 text-gray-900">{item.name}</CT>
+                <CP className="mt-2 text-gray-600">{item.description}</CP>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/storage/StorageDesign.tsx

@@ -0,0 +1,60 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, H3, P, CT, CP } from '../../components/Texts'
+import {
+  LockClosedIcon,
+  ArrowPathIcon,
+  GlobeAsiaAustraliaIcon,
+} from '@heroicons/react/24/solid'
+
+const benefits = [
+  {
+    name: 'Encrypted and verifiable at rest and in motion',
+    icon: LockClosedIcon,
+  },
+  {
+    name: 'Self-healing replication and integrity checks',
+    icon: ArrowPathIcon,
+  },
+  {
+    name: 'Residency + governance policies you actually control',
+    icon: GlobeAsiaAustraliaIcon,
+  },
+]
+
+export function StorageDesign() {
+  return (
+    <section className="bg-white py-24 sm:py-32">
+      <Container>
+        {/* Header */}
+        <div className="mx-auto max-w-3xl sm:text-center">
+          <Eyebrow>CORE VALUE</Eyebrow>
+          <H3 className="mt-4 text-gray-900">
+            Sovereign Storage That Heals Itself
+          </H3>
+          <P className="mt-6 text-gray-600">
+            Mycelium Storage continuously verifies integrity and restores
+            replicas automatically, so data stays available without operational
+            overhead.
+          </P>
+        </div>
+
+        {/* Benefits */}
+        <div className="mx-auto mt-16 max-w-5xl">
+          <dl className="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
+            {benefits.map((benefit) => (
+              <div key={benefit.name} className="relative pl-12">
+                <benefit.icon
+                  aria-hidden="true"
+                  className="absolute left-0 top-1 size-6 text-cyan-600"
+                />
+                <CT className="font-semibold text-gray-900">
+                  {benefit.name}
+                </CT>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/storage/StorageOverview.tsx

@@ -4,21 +4,21 @@ import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
 const highlights = [
   {
     label: 'Overview',
-    title: 'Quantum-safe, sovereign data management',
+    title: 'Encrypted & Verifiable Storage',
     description:
-      'Mycelium Storage protects data beyond the application layer with autonomous recovery and geo-aware placement across the ThreeFold Grid.',
+      'Data is secured with cryptographic identity, not cloud trust.',
   },
   {
     label: 'Core Concept',
-    title: 'Unified data plane across every protocol',
+    title: 'Self-Healing Replication',
     description:
-      'Serve the same dataset via IPFS, S3, WebDAV, HTTP, or native file systems while maintaining complete control over residency and redundancy.',
+      'The system repairs corruption and restores replicas automatically.',
   },
   {
     label: 'Outcome',
-    title: 'Ownership without compromise',
+    title: 'Multi-Protocol Access',
     description:
-      'Quantum-resistant encryption, self-healing recovery, and programmable governance ensure data remains verifiable, available, and compliant.',
+      'Serve the same dataset over S3, IPFS, or filesystem mounts, without duplicating data.',
   },
 ]
 
@@ -31,7 +31,7 @@ export function StorageOverview() {
             Platform Overview
           </Eyebrow>
           <SectionHeader as="h2" color="light" className="mt-6 font-medium">
-            A quantum-safe data plane that heals itself.
+            Core Features
           </SectionHeader>
           <P color="lightSecondary" className="mt-6">
             Built on sovereign infrastructure, Mycelium Storage keeps data

src/pages/storage/StoragePage.tsx

@@ -7,6 +7,8 @@ import { StorageDeveloperExperience } from './StorageDeveloperExperience'
 import { StorageUseCases } from './StorageUseCases'
 import { StorageDifferentiators } from './StorageDifferentiators'
 import { CallToAction } from './CallToAction'
+import { StorageCapabilities } from './StorageCapabilities'
+import { StorageDesign } from './StorageDesign'
 
 export default function StoragePage() {
   return (
@@ -14,24 +16,27 @@ export default function StoragePage() {
       <AnimatedSection>
         <StorageHero />
       </AnimatedSection>
+
       <AnimatedSection>
-        <StorageOverview />
+        <StorageCapabilities />
       </AnimatedSection>
+
       <AnimatedSection>
-        <StorageFeatures />
+        <StorageDesign />
       </AnimatedSection>
+
       <AnimatedSection>
         <StorageArchitecture />
       </AnimatedSection>
+      
       <AnimatedSection>
-        <StorageDeveloperExperience />
+        <StorageOverview />
       </AnimatedSection>
+
       <AnimatedSection>
         <StorageUseCases />
       </AnimatedSection>
-      <AnimatedSection>
+
-        <StorageDifferentiators />
-      </AnimatedSection>
       <AnimatedSection>
         <CallToAction />
       </AnimatedSection>

src/pages/storage/StorageUseCases.tsx

@@ -1,81 +1,19 @@
 import { Container } from '../../components/Container'
 import { Eyebrow, SectionHeader, P } from '../../components/Texts'
 
-const primaryUseCases = [
+const storageUseCases = [
   {
-    title: 'Data Sovereignty Applications',
+    title: 'Data Sovereignty & Compliance',
-    bullets: [
+    description: 'Keep data under your control, choose residency per dataset.',
-      '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',
+    title: 'Distributed Application Storage',
-    bullets: [
+    description: 'Serve data to services, agents, clusters, or edge workloads.',
-      '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: [
+    description:
-      'Global CDN leveraging the breadth of the ThreeFold Grid.',
+      'Serve public or private assets globally, without centralized hosting.',
-      '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.',
-    ],
   },
 ]
 
@@ -84,71 +22,32 @@ export function StorageUseCases() {
     <section className="bg-white py-24 sm:py-32">
       <Container>
         <div className="mx-auto max-w-3xl text-center">
-          <Eyebrow>
+          <Eyebrow>USE CASES</Eyebrow>
-            Use Cases
-          </Eyebrow>
           <SectionHeader as="h2" className="mt-6 text-gray-900">
-            Sovereign storage for every data-intensive workload.
+            Built for Real Data Workloads
           </SectionHeader>
           <P className="mt-6 text-gray-600">
             Mycelium Storage adapts to compliance-driven enterprise data,
-            decentralized content distribution, and everything in between.
+            distributed application workloads, and global asset delivery
-            Choose the pattern that fits your strategy without sacrificing
+            — without giving up sovereignty.
-            ownership.
           </P>
         </div>
-        <div className="mt-16 grid gap-8 lg:grid-cols-2">
+
-          {primaryUseCases.map((useCase) => (
+        <div className="mx-auto mt-16 max-w-4xl space-y-6">
+          {storageUseCases.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"
+              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">
                 {useCase.title}
               </h3>
-              <ul className="mt-6 space-y-3 text-sm text-gray-600">
+              <p className="mt-3 text-sm leading-relaxed text-gray-600">
-                {useCase.bullets.map((bullet) => (
+                {useCase.description}
-                  <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>
   )