new dropdown content from Mik

src/pages/storage/StorageFeatures.tsx

@@ -0,0 +1,113 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+
+const features = [
+  {
+    title: 'Quantum-Safe Storage (QSS)',
+    description:
+      'Quantum-resistant encryption secures data beyond the application layer so ownership stays yours.',
+    bullets: [
+      'Beyond AES-256 with post-quantum algorithms.',
+      'Multi-layer protection enforced automatically.',
+      'Future-proof against emerging quantum threats.',
+      'Total control of keys, residency, and governance.',
+    ],
+  },
+  {
+    title: 'Self-Healing Storage System',
+    description:
+      'Autonomous recovery heals failures or corruption instantly with no human intervention.',
+    bullets: [
+      'Instant detection and repair of anomalies.',
+      'Integrity preserved while data is restored.',
+      'Continuous verification validates every replica.',
+      'Zero-ops recovery that runs around the clock.',
+    ],
+  },
+  {
+    title: 'Multi-Protocol Data Access',
+    description:
+      'Serve the same dataset over IPFS, S3, WebDAV, HTTP, and native file systems.',
+    bullets: [
+      'IPFS for decentralized, content-addressed retrieval.',
+      'S3-compatible API for existing tooling and SDKs.',
+      'WebDAV for mounted filesystem access.',
+      'HTTP and POSIX for direct application integration.',
+    ],
+  },
+  {
+    title: 'Geo-Aware Placement & Replication',
+    description:
+      'Define residency, redundancy, and distribution on a per-workload basis.',
+    bullets: [
+      'Pin data to specific jurisdictions or zones.',
+      'Custom redundancy policies per dataset.',
+      'Automatic zone-to-zone replication for resilience.',
+      'Global distribution across the ThreeFold Grid.',
+    ],
+  },
+  {
+    title: 'Ultra-Efficient Zero-Images (Flists)',
+    description:
+      'Metadata-only flists shrink images up to 100x, enabling instant Zero-OS deployments.',
+    bullets: [
+      'Drastically reduced storage footprint for artifacts.',
+      'Metadata-driven delivery accelerates boot times.',
+      'Bandwidth-efficient transfers to any node.',
+      'Perfect for immutable workloads and rapid rollback.',
+    ],
+  },
+]
+
+export function StorageFeatures() {
+  return (
+    <section id="storage-features" className="bg-white py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-3xl text-center">
+          <Eyebrow className="tracking-[0.32em] uppercase text-cyan-500">
+            Core Features
+          </Eyebrow>
+          <SectionHeader as="h2" className="mt-6 text-gray-900">
+            Data services engineered for sovereignty and speed.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            Mycelium Storage combines quantum-safe cryptography, autonomous
+            healing, and universal protocol support. It adapts to every workload
+            without sacrificing control or performance.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 md:grid-cols-2">
+          {features.map((feature) => (
+            <div
+              key={feature.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"
+            >
+              <div>
+                <Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
+                  Capability
+                </Small>
+                <h3 className="mt-4 text-xl font-semibold text-gray-900">
+                  {feature.title}
+                </h3>
+                <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                  {feature.description}
+                </p>
+              </div>
+              <ul className="mt-6 space-y-3 text-sm text-gray-600">
+                {feature.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>
+      </Container>
+    </section>
+  )
+}