new dropdown content from Mik

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