new dropdown content from Mik

src/pages/storage/StorageDifferentiators.tsx

@@ -0,0 +1,65 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+
+const differentiators = [
+  {
+    title: 'Quantum-Safe Protection',
+    description:
+      'Data is encrypted with algorithms that resist quantum attacks, preserving integrity for decades.',
+  },
+  {
+    title: 'Autonomous Self-Healing',
+    description:
+      'Failures and corruption are detected and repaired automatically—no on-call rotations required.',
+  },
+  {
+    title: 'Universal Protocol Support',
+    description:
+      'Serve the same data through IPFS, S3, WebDAV, HTTP, and native file systems without duplication.',
+  },
+  {
+    title: 'Geo-Aware Data Governance',
+    description:
+      'Define residency, redundancy, and distribution policies per workload and enforce them automatically.',
+  },
+  {
+    title: 'Ultra-Efficient Storage',
+    description:
+      'Zero-image technology reduces artifacts by up to 100x, cutting bandwidth and accelerating deployment.',
+  },
+]
+
+export function StorageDifferentiators() {
+  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">
+            Key Differentiators
+          </Eyebrow>
+          <SectionHeader as="h2" color="light" className="mt-6">
+            Sovereignty, resilience, and flexibility in one fabric.
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            Mycelium Storage blends quantum safety, autonomous operations, and
+            protocol choice into a single platform that meets the most demanding
+            requirements for modern data services.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 md:grid-cols-2">
+          {differentiators.map((item) => (
+            <div
+              key={item.title}
+              className="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]"
+            >
+              <h3 className="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>
+      </Container>
+    </section>
+  )
+}