new dropdown content from Mik

src/pages/cloud/CloudFeatures.tsx

@@ -0,0 +1,125 @@
+import { Container } from '../../components/Container'
+import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
+
+const featureSections = [
+  {
+    title: 'Mycelium Networking',
+    description:
+      'Ultra-fast, decentralized networking inspired by nature to keep services reachable without exposing surfaces.',
+    bullets: [
+      'End-to-end encrypted mesh connectivity between every node.',
+      'Direct node communication without centralized intermediaries.',
+      'Self-optimizing routes that heal around failures automatically.',
+      'Secure peer-to-peer communication across the entire grid.',
+    ],
+  },
+  {
+    title: 'Zero-Image Technology',
+    description:
+      'Metadata-first zero-images shrink artifacts up to 100x, reducing deployment time and bandwidth.',
+    bullets: [
+      'Deterministic deployments verified cryptographically.',
+      'Run containers, VMs, and Linux workloads with secure boot.',
+      'Smart contract orchestration manages every workload lifecycle.',
+      'Minimal artifact footprint accelerates delivery everywhere.',
+    ],
+  },
+  {
+    title: 'Quantum-Safe Storage (QSS)',
+    description:
+      'Quantum-resistant encryption secures data beyond the application layer for complete ownership.',
+    bullets: [
+      'Self-healing storage recovers instantly from corruption or failure.',
+      'Serve the same data via IPFS, S3, WebDAV, HTTP, and native FS.',
+      'Geo-aware placement enforces residency and redundancy policies.',
+      'Autonomous replication keeps data resilient across the globe.',
+    ],
+  },
+  {
+    title: 'Multi-Master Clusters',
+    description:
+      'High-availability Kubernetes with automatic failover and leadership orchestration.',
+    bullets: [
+      'Multi-master topologies orchestrated with zero downtime.',
+      'Automatic failover keeps control planes healthy and responsive.',
+      'HA operations managed without manual intervention or scripts.',
+      'Upgrades roll out seamlessly with continuous verification.',
+    ],
+  },
+  {
+    title: 'Effortless Load Balancing & Scaling',
+    description:
+      'Adaptive automation balances traffic and scales workloads based on demand.',
+    bullets: [
+      'Built-in autoscaling that responds to real-time usage.',
+      'Native load balancing distributes traffic globally.',
+      'High availability delivered without custom controllers.',
+      'Elastic scaling keeps costs aligned with workload demand.',
+    ],
+  },
+  {
+    title: 'Simple Web Gateway Access',
+    description:
+      'Expose services to the public web with declarative Kubernetes resources.',
+    bullets: [
+      'One resource publishes services without complex ingress rules.',
+      'Domain and prefix-based routing built into the platform.',
+      'No need to manage dedicated ingress controllers.',
+      'Consistent configuration across every cluster and region.',
+    ],
+  },
+]
+
+export function CloudFeatures() {
+  return (
+    <section className="bg-gray-50 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">
+            Infrastructure that verifies, heals, and scales itself.
+          </SectionHeader>
+          <P className="mt-6 text-gray-600">
+            From mesh networking to quantum-safe storage, every capability in
+            Mycelium Cloud is designed for sovereign control and autonomous
+            operations—so your teams focus on shipping workloads instead of
+            wiring infrastructure.
+          </P>
+        </div>
+        <div className="mt-16 grid gap-8 md:grid-cols-2 xl:grid-cols-3">
+          {featureSections.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>
+  )
+}