www_projectmycelium_com/src/pages/cloud/CloudFeatures.tsx

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