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/StorageArchitecture.tsx

@@ -3,48 +3,17 @@ 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: 'Encrypted Storage Substrate',
+    description: 'Keeps data private and verifiable.',
   },
   {
-    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: 'Mesh Routing Layer',
+    description: 'Connects clients and workloads securely, anywhere.',
   },
   {
-    title: 'Multi-Protocol Fabric',
+    title: 'Protocol Gateway Layer',
     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.',
-    ],
+      'Serve the same dataset over S3, IPFS, WebDAV, or HTTP.',
   },
 ]
 
@@ -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>
-            Technical Architecture
-          </Eyebrow>
+          <Eyebrow>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
-            cryptographic layer, operate without manual intervention, and meet
-            jurisdictional requirements anywhere in the world.
+            A layered design that encrypts, routes, and exposes storage through
+            multiple protocols — without duplicating data or compromising
+            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>