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/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>
+  )
+}