new cloud page

src/components/Footer.tsx

@@ -10,8 +10,8 @@ export function Footer() {
             <div className="flex items-center text-gray-900">
               <img src="/src/images/logomark.svg" alt="Mycelium Logomark" className="h-20 w-20 flex-none" />
               <div className="ml-4">
-                <p className="text-base font-semibold">Mycelium</p>
-                <p className="mt-1 text-sm">Unleash the Power of Decentralized Networks</p>
+                <p className="text-base font-semibold">Project Mycelium</p>
+                <p className="mt-1 text-sm">Unleash the Power of Decentralization</p>
               </div>
             </div>
             <nav className="mt-10 flex gap-8">

src/pages/cloud/CloudCTA.tsx

@@ -1,35 +1,35 @@
-import { motion } from 'framer-motion'
 import { Container } from '../../components/Container'
 import { Button } from '../../components/Button'
-import { CircleBackground } from '../../components/CircleBackground'
 
 export function CloudCTA() {
   return (
-    <section className="relative bg-white py-20 lg:py-32 overflow-hidden">
-      <CircleBackground color="cyan" className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+    <section className="relative overflow-hidden py-24 lg:py-32">
       <Container className="relative">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.8 }}
-          className="mx-auto max-w-3xl text-center"
-        >
-          <h2 className="text-3xl lg:text-5xl font-medium tracking-tight text-gray-900">
-            Ready to Transform Your Kubernetes Experience?
-          </h2>
-          <p className="mt-6 text-lg lg:text-xl text-gray-600">
-            Join thousands of developers and DevOps engineers who trust Mycelium Cloud for their production workloads.
+        <div className="relative mx-auto max-w-5xl overflow-hidden rounded-3xl border border-gray-200/60 bg-white/90 px-10 py-16 text-center shadow-[0_30px_120px_-70px_rgba(6,182,212,0.65)] backdrop-blur lg:px-16 lg:py-20">
+          <div className="max-w-3xl mx-auto">
+            <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-500">
+              Ready Today
             </p>
-          <div className="mt-10 flex flex-wrap gap-4 justify-center">
-            <Button to="/download" variant="solid" color="cyan">
-              Start Your Free Trial
-            </Button>
-            <Button to="https://manual.grid.tf" variant="outline" color="gray">
-              Read Documentation
+            <h2 className="mt-6 text-3xl font-semibold tracking-tight text-gray-900 lg:text-5xl">
+              Join thousands of developers and DevOps engineers who trust Mycelium Cloud for their production workloads.
+            </h2>
+            <p className="mt-6 text-lg text-gray-600">
+              Revolutionary Kubernetes automation, deterministic compute, and quantum-safe storage—delivered as a turnkey platform so your team can deploy, scale, and operate cloud-native applications with confidence.
+            </p>
+            <div className="mt-10 flex justify-center">
+              <Button
+                to="https://myceliumcloud.tf"
+                as="a"
+                variant="solid"
+                color="cyan"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Start Deploying
               </Button>
             </div>
-        </motion.div>
+          </div>
+        </div>
       </Container>
     </section>
   )

src/pages/cloud/CloudHero.tsx

@@ -1,65 +1,122 @@
-import { motion } from 'framer-motion'
-import { Globe } from '../../components/ui/Globe'
-import { CountUpNumber } from '../../components/CountUpNumber'
+import { useId } from 'react'
+
+import { Button } from '../../components/Button'
 import { Container } from '../../components/Container'
 
-const stats = [
-  { value: 54958, label: 'CPU Cores' },
-  { value: 1493, label: 'Nodes' },
-  { value: 5388956, label: 'GB Storage' },
-  { value: 44, label: 'Countries' },
-]
+function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
+  const id = useId()
+
+  return (
+    <div {...props}>
+      <svg
+        viewBox="0 0 1026 1026"
+        fill="none"
+        aria-hidden="true"
+        className="absolute inset-0 h-full w-full animate-spin-slow"
+      >
+        <path
+          d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
+          stroke="#D4D4D4"
+          strokeOpacity="0.7"
+        />
+        <path
+          d="M513 1025C230.23 1025 1 795.77 1 513"
+          stroke={`url(#${id}-gradient-1)`}
+          strokeLinecap="round"
+        />
+        <defs>
+          <linearGradient
+            id={`${id}-gradient-1`}
+            x1="1"
+            y1="513"
+            x2="1"
+            y2="1025"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#06b6d4" />
+            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+      </svg>
+      <svg
+        viewBox="0 0 1026 1026"
+        fill="none"
+        aria-hidden="true"
+        className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
+      >
+        <path
+          d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
+          stroke="#D4D4D4"
+          strokeOpacity="0.7"
+        />
+        <path
+          d="M913 513c0 220.914-179.086 400-400 400"
+          stroke={`url(#${id}-gradient-2)`}
+          strokeLinecap="round"
+        />
+        <defs>
+          <linearGradient
+            id={`${id}-gradient-2`}
+            x1="913"
+            y1="513"
+            x2="913"
+            y2="913"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#06b6d4" />
+            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </div>
+  )
+}
 
 export function CloudHero() {
   return (
-    <section className="relative bg-white py-20 lg:py-32">
+    <div className="overflow-hidden pb-24 lg:py-32 lg:pb-0">
       <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-          {/* Text Content */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8 }}
-          >
-            <h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
+        <div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
+          <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
+            <h1 className="text-4xl font-medium tracking-tight text-gray-900 lg:text-6xl">
               Mycelium Cloud
             </h1>
-            <p className="mt-6 text-lg lg:text-xl text-gray-600">
-              Revolutionary Kubernetes platform that transforms how teams deploy and manage cloud-native applications at scale
+            <h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
+              Own every workload with certainty.
+            </h2>
+            <p className="mt-6 text-lg text-gray-600 leading-tight lg:text-xl lg:leading-normal">
+              Mycelium Cloud blends deterministic compute with quantum-safe storage, delivering a sovereign platform built for zero-ops automation.
             </p>
-          </motion.div>
-
-          {/* Globe */}
-          <motion.div
-            initial={{ opacity: 0, scale: 0.9 }}
-            animate={{ opacity: 1, scale: 1 }}
-            transition={{ duration: 0.8, delay: 0.2 }}
-            className="flex items-center justify-center"
+            <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
+              <Button to="/download" variant="solid" color="cyan">
+                Start Deploying
+              </Button>
+              <Button
+                to="https://manual.grid.tf"
+                as="a"
+                variant="outline"
+                color="gray"
+                target="_blank"
+                rel="noreferrer"
               >
-            <div className="relative w-full max-w-[500px] aspect-square">
-              <Globe className="w-full h-full" />
+                View Documentation
+              </Button>
             </div>
-          </motion.div>
           </div>
-
-        {/* Stats */}
-        <div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-6">
-          {stats.map((stat, index) => (
-            <motion.div
-              key={stat.label}
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5, delay: 0.4 + index * 0.1 }}
-              className="rounded-2xl bg-gray-50 border border-gray-200 p-6 text-center hover:shadow-md transition-shadow"
-            >
-              <div className="text-2xl lg:text-3xl font-bold text-cyan-500">
-                <CountUpNumber end={stat.value} />
+          <div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">
+            <BackgroundIllustration className="absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12" />
+            <div className="mx-auto h-[420px] max-w-[640px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:absolute lg:-inset-x-10 lg:-top-24 lg:h-auto lg:pt-10 xl:-bottom-36">
+              <img
+                src="/src/images/desktop.png"
+                alt="Mycelium Cloud dashboard preview"
+                className="mx-auto w-full max-w-[640px]"
+                width={1366}
+                height={768}
+              />
+            </div>
           </div>
-              <p className="mt-2 text-sm text-gray-600">{stat.label}</p>
-            </motion.div>
-          ))}
         </div>
       </Container>
-    </section>
+    </div>
   )
 }

src/pages/cloud/CloudOverview.tsx

@@ -0,0 +1,65 @@
+import { CircleBackground } from '../../components/CircleBackground'
+import { Container } from '../../components/Container'
+
+const focusAreas = [
+  {
+    title: 'Sovereign by Design',
+    description:
+      'Control jurisdiction, residency, and governance for every workload with transparent, verifiable operations.',
+  },
+  {
+    title: 'Secure by Default',
+    description:
+      'Cryptographic verification, secure boot, and zero-image delivery protect the entire lifecycle automatically.',
+  },
+  {
+    title: 'Ready to Scale',
+    description:
+      'Autonomous orchestration keeps the platform elastic, cost-efficient, and always available across the globe.',
+  },
+]
+
+export function CloudOverview() {
+  return (
+    <section className="relative overflow-hidden bg-gray-900 py-24 lg:py-32">
+      <div className="pointer-events-none absolute inset-0">
+        <CircleBackground
+          color="#06b6d4"
+          className="absolute left-1/2 top-full -translate-x-1/2 -translate-y-1/2 opacity-40"
+        />
+        <CircleBackground
+          color="#22d3ee"
+          className="absolute -top-24 right-1/4 h-[420px] w-[420px] opacity-30 sm:opacity-40"
+        />
+      </div>
+      <Container className="relative">
+        <div className="mx-auto max-w-3xl text-center">
+          <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-400">
+            Mycelium Cloud
+          </p>
+          <h2 className="mt-6 text-3xl font-medium tracking-tight text-white lg:text-5xl">
+            A sovereign, self-healing cloud built for trusted automation.
+          </h2>
+          <p className="mt-6 text-lg text-gray-300">
+            Run critical workloads on a programmable substrate that keeps data private, compute deterministic, and operations autonomous.
+          </p>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-3">
+          {focusAreas.map((item) => (
+            <div
+              key={item.title}
+              className="rounded-3xl border border-white/10 bg-white/5 p-8 text-left shadow-[0_20px_60px_-40px_rgba(6,182,212,0.6)] backdrop-blur"
+            >
+              <div className="text-base font-semibold text-cyan-200">
+                {item.title}
+              </div>
+              <p className="mt-4 text-sm leading-relaxed text-gray-200">
+                {item.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/cloud/CloudPage.tsx

@@ -1,42 +1,28 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { CloudHero } from './CloudHero'
-import { FeaturesSection } from './FeaturesSection'
-import { MyceliumNetworking } from './MyceliumNetworking'
-import { WebGateway } from './WebGateway'
-import { MultiMaster } from './MultiMaster'
-import { LoadBalancing } from './LoadBalancing'
+import { CloudOverview } from './CloudOverview'
+import { ComputeStorageSplit } from './ComputeStorageSplit'
+import { SecurityPillars } from './SecurityPillars'
 import { CloudCTA } from './CloudCTA'
 
 export default function CloudPage() {
   return (
-    <div>
+    <>
       <AnimatedSection>
         <CloudHero />
       </AnimatedSection>
-      
       <AnimatedSection>
-        <FeaturesSection />
+        <CloudOverview />
       </AnimatedSection>
-
       <AnimatedSection>
-        <MyceliumNetworking />
+        <ComputeStorageSplit />
       </AnimatedSection>
-
       <AnimatedSection>
-        <WebGateway />
+        <SecurityPillars />
       </AnimatedSection>
-
-      <AnimatedSection>
-        <MultiMaster />
-      </AnimatedSection>
-
-      <AnimatedSection>
-        <LoadBalancing />
-      </AnimatedSection>
-
       <AnimatedSection>
         <CloudCTA />
       </AnimatedSection>
-    </div>
+    </>
   )
 }

src/pages/cloud/ComputeStorageSplit.tsx

@@ -0,0 +1,144 @@
+import { Container } from '../../components/Container'
+
+const computeFeatures = [
+  {
+    title: 'Deterministic Deployments',
+    description:
+      'Cryptographic verification ensures every workload deploys exactly as intended—no tampering, no drift.',
+  },
+  {
+    title: 'Self-Managing & Stateless Infrastructure',
+    description:
+      'Fully autonomous infrastructure that scales globally without manual intervention.',
+  },
+  {
+    title: 'Zero-Image Technology (100x Compression)',
+    description:
+      'Metadata-driven zero-images cut artifacts up to 100x, slashing bandwidth and deployment overhead.',
+  },
+  {
+    title: 'Smart Contract-Based Deployment',
+    description:
+      'Cryptographically signed contracts orchestrate every workload with transparent, tamper-proof execution.',
+  },
+  {
+    title: 'Multi-Workload Compatibility with Secure Boot',
+    description:
+      'Run containers, VMs, and Linux workloads anywhere with stateless secure boot and continuous verification.',
+  },
+]
+
+const storageFeatures = [
+  {
+    title: 'Quantum-Safe Storage (QSS)',
+    description:
+      'Quantum-resistant encryption secures data beyond the app layer so ownership and control stay yours.',
+  },
+  {
+    title: 'Self-Healing Storage System',
+    description:
+      'Autonomous recovery heals failures or corruption instantly, preserving integrity without human intervention.',
+  },
+  {
+    title: 'Multi-Protocol Data Access',
+    description:
+      'Serve the same data via IPFS, S3, WebDAV, HTTP, and native file systems for seamless integration.',
+  },
+  {
+    title: 'Geo-Aware Data Placement & Replication',
+    description:
+      'Define residency, redundancy, and distribution per workload while zone-to-zone replication hardens resilience.',
+  },
+  {
+    title: 'Ultra-Efficient Zero-Images (Flists)',
+    description:
+      'Metadata-only flists shrink images up to 100x, replacing heavy VMs and powering instant Zero-OS deployments.',
+  },
+]
+
+export function ComputeStorageSplit() {
+  return (
+    <section className="relative overflow-hidden bg-white">
+      <div className="absolute inset-0 bg-gradient-to-br from-cyan-50 via-white to-slate-50" />
+      <Container className="relative py-24 lg:py-32">
+        <div className="grid gap-12 lg:grid-cols-12 lg:gap-16">
+          <div className="flex flex-col items-center gap-10 text-center lg:col-span-5 lg:items-center lg:text-center">
+            <div className="max-w-xs">
+              <p className="text-xs font-semibold uppercase tracking-[0.35em] text-cyan-500">
+                Compute
+              </p>
+              <h2 className="mt-4 text-3xl font-medium tracking-tight text-gray-900">
+                Deterministic compute fabric.
+              </h2>
+              <p className="mt-4 text-sm text-gray-500">
+                Launch workloads with cryptographic certainty and autonomous operations.
+              </p>
+            </div>
+            <ul className="grid w-full gap-4">
+              {computeFeatures.map((item) => (
+                <li
+                  key={item.title}
+                  className="flex flex-col gap-1 rounded-2xl border border-cyan-100 bg-white/80 p-4 text-center transition hover:border-cyan-400/70 hover:bg-cyan-50/60 dark:bg-white/10"
+                >
+                  <span className="text-sm font-semibold text-gray-900">
+                    {item.title}
+                  </span>
+                  <span
+                    className="text-xs text-gray-500 leading-relaxed"
+                    style={{
+                      display: '-webkit-box',
+                      WebkitLineClamp: 2,
+                      WebkitBoxOrient: 'vertical',
+                      overflow: 'hidden',
+                    }}
+                  >
+                    {item.description}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="hidden lg:flex lg:col-span-2 lg:items-center lg:justify-center">
+            <span className="h-full w-px bg-gradient-to-b from-transparent via-cyan-200 to-transparent" />
+          </div>
+          <div className="flex flex-col items-center gap-10 text-center lg:col-span-5 lg:items-center lg:text-center">
+            <div className="max-w-xs">
+              <p className="text-xs font-semibold uppercase tracking-[0.35em] text-slate-500">
+                Storage
+              </p>
+              <h2 className="mt-4 text-3xl font-medium tracking-tight text-gray-900">
+                Quantum-safe, sovereign data plane.
+              </h2>
+              <p className="mt-4 text-sm text-gray-500">
+                Protect and place data precisely while keeping access effortless.
+              </p>
+            </div>
+            <ul className="grid w-full gap-4">
+              {storageFeatures.map((item) => (
+                <li
+                  key={item.title}
+                  className="flex flex-col gap-1 rounded-2xl border border-slate-200 bg-white/80 p-4 text-center transition hover:border-cyan-400/60 hover:bg-cyan-50/40 dark:bg-white/10"
+                >
+                  <span className="text-sm font-semibold text-gray-900">
+                    {item.title}
+                  </span>
+                  <span
+                    className="text-xs text-gray-500 leading-relaxed"
+                    style={{
+                      display: '-webkit-box',
+                      WebkitLineClamp: 2,
+                      WebkitBoxOrient: 'vertical',
+                      overflow: 'hidden',
+                    }}
+                  >
+                    {item.description}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/cloud/FeaturesSection.tsx

@@ -1,75 +0,0 @@
-import { motion } from 'framer-motion'
-import { Container } from '../../components/Container'
-
-const features = [
-  {
-    icon: '☁️',
-    title: 'Cloud-Native Architecture',
-    description: 'Built for the cloud with support for all major cloud providers and on-premise deployments.',
-  },
-  {
-    icon: '🛡️',
-    title: 'Enterprise Security',
-    description: 'Advanced security features including RBAC, network policies, and compliance monitoring.',
-  },
-  {
-    icon: '📊',
-    title: 'Real-time Monitoring',
-    description: 'Comprehensive monitoring and alerting with detailed metrics and performance insights.',
-  },
-  {
-    icon: '🚀',
-    title: 'One-Click Deployments',
-    description: 'Streamlined deployment process with automated CI/CD pipelines and rollback capabilities.',
-  },
-  {
-    icon: '👥',
-    title: 'Team Collaboration',
-    description: 'Built-in collaboration tools for teams with role-based access and shared workspaces.',
-  },
-  {
-    icon: '⚙️',
-    title: 'Advanced Configuration',
-    description: 'Flexible configuration management with support for Helm charts and custom resources.',
-  },
-]
-
-export function FeaturesSection() {
-  return (
-    <section className="bg-gray-50 py-20 lg:py-32">
-      <Container>
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.8 }}
-          className="text-center mb-16"
-        >
-          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
-            Everything You Need to Succeed
-          </h2>
-          <p className="mt-6 text-lg text-gray-600 max-w-3xl mx-auto">
-            Powerful tools and features designed for modern cloud-native applications
-          </p>
-        </motion.div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {features.map((feature, index) => (
-            <motion.div
-              key={feature.title}
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
-              className="rounded-2xl bg-white border border-gray-200 p-8 hover:border-cyan-500 hover:shadow-lg transition-all duration-300 text-center"
-            >
-              <div className="text-4xl mb-4">{feature.icon}</div>
-              <h3 className="text-xl font-semibold text-gray-900 mb-3">{feature.title}</h3>
-              <p className="text-gray-600">{feature.description}</p>
-            </motion.div>
-          ))}
-        </div>
-      </Container>
-    </section>
-  )
-}

src/pages/cloud/LoadBalancing.tsx

@@ -1,52 +0,0 @@
-import { motion } from 'framer-motion'
-import { Container } from '../../components/Container'
-
-export function LoadBalancing() {
-  return (
-    <section className="bg-gray-50 py-20 lg:py-32">
-      <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-          {/* Visual Placeholder */}
-          <motion.div
-            initial={{ opacity: 0, x: -20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="relative aspect-square rounded-2xl bg-gradient-to-br from-blue-50 to-cyan-50 border border-gray-200 flex items-center justify-center"
-          >
-            <div className="text-center p-8">
-              <div className="text-6xl mb-4">⚖️</div>
-              <p className="text-gray-600">Auto-scaling & Load Balancing</p>
-            </div>
-          </motion.div>
-
-          {/* Content */}
-          <motion.div
-            initial={{ opacity: 0, x: 20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-          >
-            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
-              Effortless Load Balancing & Scaling
-            </h2>
-            <p className="mt-6 text-lg text-gray-600">
-              Mycelium Cloud automatically balances traffic and scales your services up or down based on demand. Enjoy high availability and optimal performance with zero manual intervention.
-            </p>
-            <div className="mt-6 flex flex-wrap gap-3">
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                Auto-scaling
-              </span>
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                Built-in load balancing
-              </span>
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                High availability
-              </span>
-            </div>
-          </motion.div>
-        </div>
-      </Container>
-    </section>
-  )
-}

src/pages/cloud/MultiMaster.tsx

@@ -1,52 +0,0 @@
-import { motion } from 'framer-motion'
-import { Container } from '../../components/Container'
-
-export function MultiMaster() {
-  return (
-    <section className="bg-white py-20 lg:py-32">
-      <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-          {/* Content */}
-          <motion.div
-            initial={{ opacity: 0, x: -20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-          >
-            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
-              Multi-Master Clusters
-            </h2>
-            <p className="mt-6 text-lg text-gray-600">
-              High-availability Kubernetes clusters with multiple control plane nodes. Automatic failover, leader election, and zero-downtime upgrades built-in.
-            </p>
-            <div className="mt-6 flex flex-wrap gap-3">
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                HA Control Plane
-              </span>
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                Automatic Failover
-              </span>
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                Zero-downtime Upgrades
-              </span>
-            </div>
-          </motion.div>
-
-          {/* Visual Placeholder */}
-          <motion.div
-            initial={{ opacity: 0, x: 20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="relative aspect-square rounded-2xl bg-gradient-to-br from-cyan-50 to-blue-50 border border-gray-200 flex items-center justify-center"
-          >
-            <div className="text-center p-8">
-              <div className="text-6xl mb-4">⚡</div>
-              <p className="text-gray-600">High Availability Clusters</p>
-            </div>
-          </motion.div>
-        </div>
-      </Container>
-    </section>
-  )
-}

src/pages/cloud/MyceliumNetworking.tsx

@@ -1,49 +0,0 @@
-import { motion } from 'framer-motion'
-import { Container } from '../../components/Container'
-
-export function MyceliumNetworking() {
-  return (
-    <section className="bg-white py-20 lg:py-32">
-      <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-          {/* Content */}
-          <motion.div
-            initial={{ opacity: 0, x: -20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-          >
-            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
-              Mycelium Networking
-            </h2>
-            <p className="mt-6 text-lg text-gray-600">
-              Ultra-fast, decentralized networking inspired by nature. Mycelium Networking forms a resilient, adaptive mesh that routes around failures and optimizes for speed and security.
-            </p>
-            <div className="mt-6 flex flex-wrap gap-3">
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                End-to-end encrypted
-              </span>
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                Nature-inspired
-              </span>
-            </div>
-          </motion.div>
-
-          {/* Visual Placeholder */}
-          <motion.div
-            initial={{ opacity: 0, x: 20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="relative aspect-square rounded-2xl bg-gradient-to-br from-cyan-50 to-blue-50 border border-gray-200 flex items-center justify-center"
-          >
-            <div className="text-center p-8">
-              <div className="text-6xl mb-4">🕸️</div>
-              <p className="text-gray-600">Decentralized Mesh Network</p>
-            </div>
-          </motion.div>
-        </div>
-      </Container>
-    </section>
-  )
-}

src/pages/cloud/SecurityPillars.tsx

@@ -0,0 +1,62 @@
+import { CircleBackground } from '../../components/CircleBackground'
+import { Container } from '../../components/Container'
+
+const pillars = [
+  {
+    title: 'Provable Sovereignty',
+    description:
+      'Assign workloads to trusted zones, verify state with cryptographic proofs, and maintain full lineage for every byte.',
+  },
+  {
+    title: 'Autonomous Zero-Trust',
+    description:
+      'Identity, policy, and attestation are enforced continuously—no manual keys, no hidden backdoors, no shared control.',
+  },
+  {
+    title: 'Planetary-Scale Resilience',
+    description:
+      'Mesh-connected infrastructure routes around failure, keeping applications responsive even when regions go dark.',
+  },
+]
+
+export function SecurityPillars() {
+  return (
+    <section className="relative overflow-hidden bg-gray-900 py-24 lg:py-32">
+      <div className="pointer-events-none absolute inset-0">
+        <CircleBackground
+          color="#22d3ee"
+          className="absolute -top-20 left-1/2 h-[520px] w-[520px] -translate-x-1/2 opacity-30"
+        />
+        <div className="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-gray-900 to-transparent" />
+      </div>
+      <Container className="relative">
+        <div className="mx-auto max-w-3xl text-center">
+          <p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-400">
+            Sovereign Architecture
+          </p>
+          <h2 className="mt-6 text-3xl font-medium tracking-tight text-white lg:text-5xl">
+            Built for security, trust, and unstoppable continuity.
+          </h2>
+          <p className="mt-6 text-lg text-gray-300">
+            Every control surface is auditable and automated, enabling critical workloads to run with confidence.
+          </p>
+        </div>
+        <div className="mt-16 grid gap-8 lg:grid-cols-3">
+          {pillars.map((pillar) => (
+            <div
+              key={pillar.title}
+              className="rounded-3xl border border-white/10 bg-white/5 p-8 text-left backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-400/60"
+            >
+              <div className="text-lg font-semibold text-white">
+                {pillar.title}
+              </div>
+              <p className="mt-4 text-sm leading-relaxed text-gray-300">
+                {pillar.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  )
+}

src/pages/cloud/WebGateway.tsx

@@ -1,52 +0,0 @@
-import { motion } from 'framer-motion'
-import { Container } from '../../components/Container'
-
-export function WebGateway() {
-  return (
-    <section className="bg-gray-50 py-20 lg:py-32">
-      <Container>
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-          {/* Visual Placeholder */}
-          <motion.div
-            initial={{ opacity: 0, x: -20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-            className="relative aspect-square rounded-2xl bg-gradient-to-br from-blue-50 to-cyan-50 border border-gray-200 flex items-center justify-center"
-          >
-            <div className="text-center p-8">
-              <div className="text-6xl mb-4">🌐</div>
-              <p className="text-gray-600">Simple Web Gateway</p>
-            </div>
-          </motion.div>
-
-          {/* Content */}
-          <motion.div
-            initial={{ opacity: 0, x: 20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.8 }}
-          >
-            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
-              Simple Web Gateway Access
-            </h2>
-            <p className="mt-6 text-lg text-gray-600">
-              Expose any service to the public web with a simple Kubernetes resource. No complex Ingress controllers. Domain and prefix-based routing is built-in.
-            </p>
-            <div className="mt-6 flex flex-wrap gap-3">
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                Simple configuration
-              </span>
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                Built-in routing
-              </span>
-              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
-                No ingress controllers
-              </span>
-            </div>
-          </motion.div>
-        </div>
-      </Container>
-    </section>
-  )
-}

src/pages/network/Hero.tsx

@@ -78,7 +78,7 @@ export function Hero() {
         <div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
           <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
             <h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
-              Mycelium
+              Mycelium Network
             </h1>
             <h2 className="mt-6 lg:text-2xl text-xl tracking-tight leading-normal text-gray-600">
               Unleashing the Power of Decentralized Networks
@@ -86,9 +86,6 @@ export function Hero() {
             <p className="mt-6 lg:text-xl text-lg text-gray-600 lg:leading-normal leading-tight">
               Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking.
             </p>
-            <p className="mt-6 text-lg text-gray-600">
-              Coming Soon: New Decentralized Features
-            </p>
             <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
               <Button to="/download" variant="solid" color="cyan">
                 Get Mycelium