feat: replace SecurityPillars with CloudBluePrint component and reorder sections

- Removed CloudGettingStarted section from the page
- Replaced SecurityPillars with new CloudBluePrint component
- Adjusted section ordering to improve page flow

src/pages/cloud/CloudBluePrint.tsx

@@ -0,0 +1,52 @@
+import { H3, P, Eyebrow } from '../../components/Texts'
+
+
+export function CloudBluePrint() {
+  return (
+    <div className="bg-white py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <Eyebrow color="accent">Cloud Blueprint</Eyebrow>
+        <H3 color="primary">Your Personal Sovereign Cloud Workspace</H3>
+        <P color="primary">Digital Me is an example environment built to demonstrate what’s possible on top of the Mycelium Stack, a full personal cloud you can deploy, customize, or extend.
+            Your files, communication, apps, and optional AI agent, all running privately on infrastructure you choose.</P>
+        <div className="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-5">
+          <img
+            alt="Transistor"
+            src="https://tailwindcss.com/plus-assets/img/logos/158x48/transistor-logo-gray-900.svg"
+            width={158}
+            height={48}
+            className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
+          />
+          <img
+            alt="Reform"
+            src="https://tailwindcss.com/plus-assets/img/logos/158x48/reform-logo-gray-900.svg"
+            width={158}
+            height={48}
+            className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
+          />
+          <img
+            alt="Tuple"
+            src="https://tailwindcss.com/plus-assets/img/logos/158x48/tuple-logo-gray-900.svg"
+            width={158}
+            height={48}
+            className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
+          />
+          <img
+            alt="SavvyCal"
+            src="https://tailwindcss.com/plus-assets/img/logos/158x48/savvycal-logo-gray-900.svg"
+            width={158}
+            height={48}
+            className="col-span-2 max-h-12 w-full object-contain sm:col-start-2 lg:col-span-1"
+          />
+          <img
+            alt="Statamic"
+            src="https://tailwindcss.com/plus-assets/img/logos/158x48/statamic-logo-gray-900.svg"
+            width={158}
+            height={48}
+            className="col-span-2 col-start-2 max-h-12 w-full object-contain sm:col-start-auto lg:col-span-1"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/cloud/CloudFeatures.tsx

@@ -415,7 +415,7 @@ export function CloudFeatures() {
             A Decentralized Cloud that Operates Itself
           </SectionHeader>
           <P color="light" className="mt-6">
-           Mycelium Cloud runs Kubernetes on a sovereign, self-healing network. Storage, networking, and compute are all integrated.
+           Mycelium Cloud runs Kubernetes on a sovereign, self-healing network with compute, storage, and networking built in, so you don’t need external cloud dependencies.
           </P>
         </div>
       </Container>

src/pages/cloud/CloudHeroNew.tsx

@@ -24,6 +24,11 @@ export function CloudHeroNew() {
               Deploy K3s clusters on a global, self-healing mesh network.
               Your workloads run on sovereign, encrypted infrastructure, without centralized cloud control.
             </H5>
+            <H5 className="mt-4 text-sm text-gray-600">
+              Works Alone. Works Together.
+              Mycelium Cloud can run on any network fabric, or pair with Mycelium Network
+              for sovereign connectivity.
+            </H5>
             <div className="mt-10 flex items-center gap-x-6">
               <Button
                 to="#"
@@ -34,7 +39,7 @@ Your workloads run on sovereign, encrypted infrastructure, without centralized c
                 Get started
               </Button>
               <Button to="#" variant="outline">
-                Explore Docs <span aria-hidden="true"> →</span>
+                Documentation <span aria-hidden="true"> →</span>
               </Button>
             </div>
           </div>

src/pages/cloud/CloudHosting.tsx

@@ -8,24 +8,28 @@ import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
 
 const features = [
   {
+    Eyebrow: 'DevOps / Cloud teams',
     name: 'Kubernetes Clusters',
-    description: 'Deploy and scale containerized apps across your own hardware.',
+    description: 'Deterministic K3s workloads across sovereign hardware.',
     icon: ServerIcon,
   },
   {
-    name: 'AI Agents & LLM Runtimes',
+    Eyebrow: 'Security & infrastructure',
-    description: 'Run open-source models locally, securely, and offline.',
+    name: 'Encrypted Mesh Networking',
-    icon: ArrowPathIcon,
+    description: 'No public ingress, no exposed attack surface, zero-trust routing.',
+    icon: ShieldCheckIcon,
   },
   {
+    Eyebrow: 'Data-driven teams',
     name: 'S3-Compatible Storage',
-    description: 'Your own personal over-the-network drive, encrypted end-to-end.',
+    description: 'Distributed storage with erasure coding and residency control.',
     icon: CloudArrowUpIcon,
   },
   {
-    name: 'Mesh VPN & Zero-Trust Networking',
+    Eyebrow: 'AI / ML workloads',
-    description: 'Securely connect all your devices and remote locations.',
+    name: 'GPU-Ready',
-    icon: ShieldCheckIcon,
+    description: 'Scale inference & training on demand.',
+    icon: ArrowPathIcon,
   },
 ]
 
@@ -33,7 +37,7 @@ export function CloudHosting() {
   return (
     <div className="relative bg-white py-24 lg:py-32">
       <div className="mx-auto max-w-md px-6 text-center sm:max-w-3xl lg:max-w-7xl lg:px-8">
-        <Eyebrow>DEPLOY</Eyebrow>
+        <Eyebrow>CAPABILITIES</Eyebrow>
         <H3 className="mt-2">What You Can Run on Mycelium Cloud</H3>
         <P className="mx-auto mt-5 max-w-prose">
           Turn your own machines into real, production-grade infrastructure. Mycelium handles the networking,
@@ -48,6 +52,7 @@ export function CloudHosting() {
                   <span className="absolute -top-6 left-1/2 -translate-x-1/2 transform rounded-xl bg-cyan-500 hover:bg-cyan-400 p-3 shadow-lg">
                     <feature.icon aria-hidden="true" className="size-8 text-white" />
                   </span>
+                  <Eyebrow>{feature.Eyebrow}</Eyebrow>
                   <CT as="h3" className="mt-4">
                     {feature.name}
                   </CT>

src/pages/cloud/CloudPage.tsx

@@ -7,6 +7,7 @@ import { SecurityPillars } from './SecurityPillars'
 import { CloudCTA } from './CloudCTA'
 import { CloudHeroNew } from './CloudHeroNew'
 import { CloudHosting } from './CloudHosting'
+import { CloudBluePrint } from './CloudBluePrint'
 
 export default function CloudPage() {
   return (
@@ -28,15 +29,14 @@ export default function CloudPage() {
         <CloudArchitecture />
       </AnimatedSection>
 
-      <AnimatedSection>
-        <CloudGettingStarted />
-      </AnimatedSection>
       <AnimatedSection>
         <CloudUseCases />
       </AnimatedSection>
+
       <AnimatedSection>
-        <SecurityPillars />
+        <CloudBluePrint />
       </AnimatedSection>
+
       <AnimatedSection>
         <CloudCTA />
       </AnimatedSection>

src/pages/cloud/CloudUseCases.tsx

@@ -3,35 +3,33 @@ import { Eyebrow, SectionHeader, P, Small } from '../../components/Texts'
 
 const useCases = [
   {
-    title: 'AI / ML Training',
+    title: 'Enterprise & Private Kubernetes',
     description:
-      'Run GPU-accelerated workloads for deep learning, data science, and inference on demand.',
+      'Production-grade K3s clusters with full workload ownership and residency control. Deploy apps and internal services without vendor lock-in or exposed surfaces.',
-    bullets: ['GPU acceleration', 'Scalable compute', 'Cost optimization'],
-  },
-  {
-    title: 'Enterprise Kubernetes',
-    description:
-      'Operate production-grade clusters with complete control and no vendor lock-in.',
-    bullets: ['High availability', 'Security', 'Compliance'],
-  },
-  {
-    title: 'Edge & IoT',
-    description:
-      'Leverage global nodes for low-latency workloads and connected device deployments.',
-    bullets: ['Low latency', 'Global distribution', 'Real-time processing'],
-  },
-  {
-    title: 'DigitalMe Blueprint',
-    description:
-      'Launch a full digital workspace on Mycelium Cloud with pre-integrated services.',
     bullets: [
-      'Cryptpad • Encrypted collaboration',
+      'High availability + failover',
-      'Elements • Matrix chat',
+      'Encrypted, mesh-native networking',
-      'Stallwart • Mail, calendar, contacts',
+      'Compliance-ready governance & policy control',
-      'Gitea • Git hosting',
+    ],
-      'Nextcloud • File storage and sync',
+  },
-      'LiveKit / Jitsi • Real-time video',
+  {
-      'Single Sign-On backed by Gitea',
+    title: 'Edge & Distributed Deployments',
+    description:
+      'Place compute close to where data is created. Run clusters globally across home labs, offices, data centers, or edge locations.',
+    bullets: [
+      'Low-latency execution',
+      'Mesh-routed connectivity',
+      'Autonomous healing across region',
+    ],
+  },
+  {
+    title: 'AI / ML & Agent Workloads',
+    description:
+      'Run inference, training, and autonomous AI systems on sovereign compute. GPU orchestration, private vector storage, and model execution without handing data to hyperscalers.',
+    bullets: [
+      'Scales across nodes',
+      'Supports open-source & fine-tuned models',
+      'Built for agentic automation + RAG',
     ],
   },
 ]

src/pages/home/CallToAction.tsx

@@ -24,7 +24,7 @@ export function CallToAction() {
           </p>
           <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
             <Button to="/cloud" variant="solid" color="cyan">
-              Start Deployment
+              Get Started
             </Button>
             <Button
               to="https://threefold.info/mycelium_network/docs/"

src/pages/home/HomeBenefits.tsx

@@ -7,28 +7,29 @@ import { H2, P, CP, Eyebrow } from '@/components/Texts'
 
 export function HomeBenefits() {
   const features = [
+    {
+      title: "Unbreakable by Design",
+      description:
+        "No central cloud to censor or fail. The network heals itself.",
+      image: "/images/benefits/energy.webp",
+    },
     {
       title: "Sovereign by Default",
       description:
-        "Own your infrastructure and your data. Mycelium Cloud eliminates dependency on centralized providers, giving you full digital sovereignty.",
+        "Identity, compute, and data belong to you – cryptographically.",
       image: "/images/benefits/sovereign.webp",
     },
     {
       title: "Hackable & Open",
       description:
-        "Open source and hackable by design. Learn, build, and experiment without permission.",
+        "Learn, build, and experiment without permission.",
       image: "/images/benefits/autonomous.webp",
     },
-    {
+ 
-      title: "Unbreakable by Design",
-      description:
-        "Distributed nodes make it resilient to attacks and failures. The network heals itself.",
-      image: "/images/benefits/energy.webp",
-    },
     {
       title: "Cost & Energy Efficient",
       description:
-        "Distributed hardware eliminates hyperscale overhead. Pure compute power at a fraction of traditional cloud costs.",
+        "Distributed hardware eliminates hyperscale overhead.",
       image: "/images/benefits/cost.webp",
     },
   ];
@@ -39,7 +40,7 @@ export function HomeBenefits() {
          Benefits
         </Eyebrow>
         <H2 className="text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-black dark:text-white">
-          Why It Changes Everything
+          Why It Matters
         </H2>
 
         <P className=" max-w-3xl  my-4 mx-auto text-center text-gray-600">

src/pages/home/HomeHostingDark.tsx

@@ -10,7 +10,7 @@ import { DarkCard } from '../../components/ui/cards'
 const features = [
   {
     name: 'Kubernetes Clusters',
-    description: 'Deploy and scale containerized apps across your own hardware.',
+    description: 'Deploy and scale containerized apps across your own hardware. enabling a world of possibilities..',
     icon: CubeIcon,
   },
   {
@@ -37,9 +37,7 @@ export function HomeHostingDark() {
         <Eyebrow>DEPLOY</Eyebrow>
         <H3 className="mt-2 text-gray-200">Run Real Infrastructure on Your Own Hardware</H3>
         <P className="mx-auto mt-5 max-w-prose text-gray-400">
-          Turn your own machines into real, production-grade infrastructure. Mycelium handles the networking,
+          Build and run production-grade workloads on hardware you control, whether it’s your own node or capacity from the decentralized grid. Mycelium handles the networking, orchestration, and security layers, so you can deploy services the same way you would on a public cloud, without giving your data or control to anyone.
-          orchestration, and security layers, so you can deploy services the same way you would on public cloud without
-          giving your data or control to anyone.
         </P>
         <div className="mt-16">
           <div className="grid grid-cols-1 gap-12 lg:grid-cols-4">

src/pages/home/HomePage.tsx

@@ -26,22 +26,25 @@ export default function HomePage() {
         <WorldMap />
       </AnimatedSection>
 
-      <AnimatedSection>
-        <StackSectionLight />
-      </AnimatedSection>
-
       <AnimatedSection>
         <HomeHostingDark   />
       </AnimatedSection>
 
       <AnimatedSection>
-       <HomeBenefits />
+        <StackSectionLight />
       </AnimatedSection>
 
       <AnimatedSection ref={sliderRef}>
         <HomeSlider />
       </AnimatedSection>
 
+      <AnimatedSection>
+       <HomeBenefits />
+      </AnimatedSection>
+      
+      <AnimatedSection>
+        <HomeComparisonTable />
+      </AnimatedSection>
 
       <AnimatedSection>
         <CallToAction />

src/pages/home/HomeSlider.tsx

@@ -15,11 +15,11 @@ export function HomeSlider() {
           Ecosystem
         </Eyebrow>
         <H3 className="text-left text-white">
-          Discover the Mycelium Products
+          Discover Mycelium Components
         </H3>
         <div className="mt-4 max-w-3xl">
           <P className="text-left text-neutral-400">
-            From compute and networking to intelligent automation, these components  can be used on its own or combined into a fully sovereign cloud.
+            From compute and networking to Agents, these components  can be used on its own or combined into a fully sovereign cloud.
           </P>
         </div>
       </div>
@@ -35,6 +35,14 @@ import cloudImage from "/images/pages/cloud.webp";
 import computeImage from "/images/pages/compute.webp";
 
 const data = [
+    {
+    category: "Resources",
+    title: "Compute / Storage / GPU",
+    description: "The resource layers powering the stack.",
+    src: "/images/pages/compute.png",
+    bg: computeImage,
+    link: "/compute",
+  },
   {
     category: "Cloud",
     title: "Mycelium Cloud",
@@ -59,12 +67,4 @@ const data = [
     bg: agentImage,
     link: "/agent",
   },
-  {
-    category: "Resources",
-    title: "Compute / Storage / GPU",
-    description: "The resource layers powering the stack.",
-    src: "/images/pages/compute.png",
-    bg: computeImage,
-    link: "/compute",
-  },
 ];

src/pages/home/StackSection.tsx

@@ -63,9 +63,7 @@ export function StackSectionLight() {
 
           <FadeIn>
             <P color="dark" className="mt-6  text-gray-600">
-              Project Mycelium unifies compute, storage, networking, and AI into a resilient
+              Mycelium unifies compute, storage, networking, and AI into a self-governing comprehensive decentralized infrastructure fabric.
-              ecosystem that preserves data sovereignty, powers seamless collaboration,
-              and keeps every layer of your infrastructure secure end to end on decentralized infrastructure.
             </P>
           </FadeIn>
         </div>