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/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',
-    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: 'Data Sovereignty & Compliance',
+    description: 'Keep data under your control, choose residency per dataset.',
   },
   {
-    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: 'Distributed Application Storage',
+    description: 'Serve data to services, agents, clusters, or edge workloads.',
   },
   {
     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.',
-    ],
+    description:
+      'Serve public or private assets globally, without centralized hosting.',
   },
 ]
 
@@ -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>
-            Use Cases
-          </Eyebrow>
+          <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.
-            Choose the pattern that fits your strategy without sacrificing
-            ownership.
+            distributed application workloads, and global asset delivery
+            — without giving up sovereignty.
           </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">
-                {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>
+              <p className="mt-3 text-sm leading-relaxed text-gray-600">
+                {useCase.description}
+              </p>
             </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>
   )