refactor: improve hero components and naming consistency

- Renamed AgentsHeroAlt component to AgentHeroAlt for consistent singular naming
- Updated hero section padding and spacing for consistent layout across GPU and Storage pages
- Changed Storage hero image object-fit from cover to contain to match GPU hero styling
- Removed redundant padding classes (sm:py-32, xl:pr-32) from hero components
- Fixed indentation in AgentsPage component

src/components/AnimatedSection.tsx

@@ -1,4 +1,5 @@
 import { motion } from 'framer-motion'
+import { forwardRef } from 'react'
 
 type AnimatedSectionProps = {
   children: React.ReactNode
@@ -6,9 +7,11 @@ type AnimatedSectionProps = {
   className?: string
 }
 
-export function AnimatedSection({ children, id, className }: AnimatedSectionProps) {
+export const AnimatedSection = forwardRef<HTMLElement, AnimatedSectionProps>(
+  ({ children, id, className }, ref) => {
   return (
         <motion.section
+      ref={ref}
       id={id}
       className={className}
       initial={{ opacity: 0, y: 40 }}
@@ -19,4 +22,5 @@ export function AnimatedSection({ children, id, className }: AnimatedSectionProp
       {children}
     </motion.section>
   )
-}
+  },
+)

src/components/Texts.tsx

@@ -131,7 +131,7 @@ export const FeatureTitle = createTextComponent(
 )
 export const FeatureDescription = createTextComponent(
   'p',
-  'text-sm leading-normal tracking-normal'
+  'lg:text-base text-sm leading-normal tracking-normal'
 )
 export const MobileFeatureTitle = createTextComponent(
   'h3',
@@ -163,4 +163,4 @@ export const DownloadCardDescription = createTextComponent(
 )
 
 export const CT = createTextComponent('span', 'text-lg lg:text-xl font-semibold')
-export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-relaxed font-light')
+export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-tight font-light')

src/components/ui/apple-cards-carousel.tsx

@@ -11,6 +11,7 @@ import {
 import { cn } from "@/lib/utils";
 import { Link } from "react-router-dom";
 import { motion } from "motion/react";
+import { DarkCard } from "./cards";
 
 interface CarouselProps {
   items: JSX.Element[];
@@ -129,11 +130,12 @@ export const Card = ({
 }) => {
   return (
     <Link to={card.link}>
+      <DarkCard className="p-0 rounded-3xl">
         <motion.div
           layoutId={layout ? `card-${card.title}` : undefined}
-        className="relative z-10 flex h-104 w-80 flex-col justify-between overflow-hidden rounded-3xl border border-gray-500/30 bg-[#1C1C1C] transition-transform duration-200 hover:scale-105 md:h-120 md:w-96"
+          className="relative z-10 flex h-104 w-80 flex-col justify-between overflow-hidden rounded-3xl p-8 md:h-120 md:w-96"
         >
-        <div className="flex h-2/5 flex-col justify-center py-6 px-8">
+        <div className="flex h-2/5 flex-col justify-center py-6 px-4">
           <motion.p
             layoutId={layout ? `category-${card.category}` : undefined}
             className="text-left font-sans font-semibold text-cyan-500 uppercase tracking-wider text-xs   md:text-sm"
@@ -150,8 +152,8 @@ export const Card = ({
             <motion.p className="max-w-xs text-left font-sans lg:text-xl text-lg text-neutral-300 lg:leading-normal leading-tight">
               {card.description}
             </motion.p>
-            <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[#212121] text-[#858585] transition-colors duration-200 hover:bg-[#262626] hover:text-white md:h-8 md:w-8">
-              <IconChevronRight className="h-4 w-4 md:h-6 md:w-6" />
+            <div className="flex h-6 w-6 ml-2 shrink-0 items-center justify-center rounded-full bg-[#212121] text-[#858585] transition-colors duration-200 hover:bg-[#262626] hover:text-white md:h-8 md:w-8">
+              <IconChevronRight className="h-4 w-4 md:h-6 md:w-6 " />
             </div>
           </div>
         </div>
@@ -163,6 +165,7 @@ export const Card = ({
           />
         </div>
         </motion.div>
+      </DarkCard>
     </Link>
   );
 };

src/components/ui/cards.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const DarkCard = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "border border-white/10 bg-white/3 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 rounded-3xl hover:bg-white/6 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/15",
+      className
+    )}
+    {...props}
+  />
+));
+DarkCard.displayName = "DarkCard";
+
+export { DarkCard };

src/pages/agents/AgentHeroAlt.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { Button } from '../../components/Button'
+import { Eyebrow, SectionHeader, P, H3 } from '../../components/Texts'
+
+export function AgentHeroAlt() {
+  return (
+    <div className="relative bg-white lg:mt-10 mt-0">
+      <div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-2/3">
+        <img
+          alt=""
+          src="/images/agents.png"
+          className="size-full object-cover"
+        />
+       
+      </div>
+      <div className="relative mx-auto max-w-7xl py-24 sm:py-32 lg:px-8">
+        <div className="pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24 xl:pr-32">
+          <Eyebrow className="text-base/7 font-semibold text-cyan-500">AGENT</Eyebrow>
+          <H3 as="h1" className="mt-2 text-gray-900">Sovereign AI Agents, Coming Soon.</H3>
+          <P className="mt-6  text-gray-600">
+            Hero is the autonomous agent layer for the Mycelium platform—trusted, policy-aware AI that runs on infrastructure you control and remembers what matters.
+          </P>
+          <div className="mt-8">
+            <Button href="#" variant="solid" color="cyan">
+              Join the Waitlist
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/agents/AgentsPage.tsx

@@ -3,13 +3,13 @@ import { DeploySection } from './DeploySection'
 import { GallerySection } from './GallerySection'
 import { Companies } from './Companies'
 import { BentoSection } from './BentoSection'
-import { AgentsHeroAlt } from './AgentsHeroAlt'
+import { AgentHeroAlt } from './AgentHeroAlt'
 
 export default function AgentsPage() {
   return (
     <div>
       <AnimatedSection>
-        <AgentsHeroAlt />
+      <AgentHeroAlt />
       </AnimatedSection>
 
       <AnimatedSection>

src/pages/cloud/CloudArchitecture.tsx

@@ -1,5 +1,5 @@
 import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Eyebrow, H3, P } from '../../components/Texts'
 
 const architectureSections = [
   {
@@ -39,15 +39,15 @@ const architectureSections = [
 
 export function CloudArchitecture() {
   return (
-    <section className="bg-white py-24 sm:py-32">
+    <section className="bg-white py-24 lg:py-32">
       <Container>
-        <div className="mx-auto max-w-3xl text-center">
+        <div className="mx-auto max-w-5xl text-center">
           <Eyebrow>
             Technical Architecture
           </Eyebrow>
-          <SectionHeader as="h2" className="mt-6 text-gray-900">
-            Built on a sovereign, encrypted delivery mesh.
-          </SectionHeader>
+          <H3 className="mt-6 text-gray-900">
+            Built on a Sovereign, Encrypted Delivery Mesh.
+          </H3>
           <P className="mt-6 text-gray-600">
             Mycelium Cloud rides on the ThreeFold Grid, pairing encrypted mesh
             networking with deterministic K3s orchestration. Every layer is
@@ -59,7 +59,7 @@ export function CloudArchitecture() {
           {architectureSections.map((section) => (
             <div
               key={section.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"
+              className="flex h-full flex-col rounded-3xl border border-slate-200 bg-gray-50/25 p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg "
             >
               <div className="flex items-center gap-3">
                 <span className="inline-flex size-10 items-center justify-center rounded-full bg-cyan-500/10 text-base font-semibold uppercase tracking-[0.3em] text-cyan-600">

src/pages/cloud/CloudFeatures.tsx

@@ -363,7 +363,7 @@ function CloudFeaturesMobile() {
               <div className="relative mx-auto w-full max-w-[366px]">
                 <feature.screen />
               </div>
-              <div className="absolute inset-x-0 bottom-0 bg-gray-800/95 p-6 backdrop-blur-sm sm:p-10">
+              <div className="absolute inset-x-0 bottom-0 bg-gray-800 p-6 backdrop-blur-sm sm:p-10">
                 <feature.icon className="h-8 w-8" />
                 <MobileFeatureTitle color="white" className="mt-6">
                   {feature.name}
@@ -383,7 +383,7 @@ function CloudFeaturesMobile() {
             key={featureIndex}
             className={clsx(
               'relative h-0.5 w-4 rounded-full',
-              featureIndex === activeIndex ? 'bg-gray-300' : 'bg-gray-500',
+              featureIndex === activeIndex ? 'bg-gray-600' : 'bg-gray-700',
             )}
             aria-label={`Go to slide ${featureIndex + 1}`}
             onClick={() => {
@@ -415,7 +415,7 @@ export function CloudFeatures() {
             A Decentralized Cloud that Operates Itself
           </SectionHeader>
           <P color="light" className="mt-6">
-           Mycelium Cloud orchestrates Kubernetes clusters on the ThreeFold Grid with cryptographic certainty. Networking, storage, and orchestration are all built-in so developers can deploy critical workloads without wrestling infrastructure.
+           Mycelium Cloud runs Kubernetes on a sovereign, self-healing network. Storage, networking, and compute are all integrated.
           </P>
         </div>
       </Container>

src/pages/cloud/CloudHero.tsx

@@ -2,7 +2,7 @@ import { useId } from 'react'
 
 import { Button } from '../../components/Button'
 import { Container } from '../../components/Container'
-import { Eyebrow, SectionHeader, P } from '../../components/Texts'
+import { Eyebrow, H2, P, H5 } from '../../components/Texts'
 
 function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
   const id = useId()
@@ -82,16 +82,16 @@ export function CloudHero() {
             <Eyebrow className="tracking-[0.35em] uppercase text-cyan-500">
               Mycelium Cloud
             </Eyebrow>
-            <SectionHeader as="h1" className="mt-6 text-gray-900">
+            <H2 as="h1" className="mt-6 text-gray-900">
               Deploy sovereign Kubernetes clusters on decentralized
               infrastructure.
-            </SectionHeader>
-            <P className="mt-6 text-gray-600">
+            </H2>
+            <H5  className="mt-6 text-gray-600">
               Mycelium Cloud turns the ThreeFold Grid into a programmable
               substrate for K3s. Launch verifiable clusters with nature-inspired
               networking, quantum-safe storage, and zero-image delivery that
               keeps every workload deterministic.
-            </P>
+            </H5>
             <P className="mt-6 text-gray-500">
               Developer guide to decentralized cloud computing.
             </P>

src/pages/cloud/CloudHeroNew.tsx

@@ -15,13 +15,14 @@ export function CloudHeroNew() {
              Mycelium Cloud
             </Eyebrow>
             <H3 className="mt-4">
-              Deploy sovereign Kubernetes clusters on decentralized infrastructure.
+              Run Kubernetes on the Sovereign Agentic Cloud
             </H3>
             <H5 className="mt-8 text-lg text-gray-600">
               Mycelium Cloud turns the ThreeFold Grid into a programmable substrate for K3s. 
             </H5>
             <H5 className="mt-4 text-lg text-gray-600">
-              Launch verifiable clusters with nature-inspired networking, quantum-safe storage, and zero-image delivery that keeps every workload deterministic.
+              Deploy K3s clusters on a global, self-healing mesh network.
+Your workloads run on sovereign, encrypted infrastructure, without centralized cloud control.
  </H5>
             <div className="mt-10 flex items-center gap-x-6">
               <Button

src/pages/cloud/CloudHosting.tsx

@@ -0,0 +1,65 @@
+import {
+  ArrowPathIcon,
+  CloudArrowUpIcon,
+  ServerIcon,
+  ShieldCheckIcon,
+} from '@heroicons/react/24/outline'
+import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
+
+const features = [
+  {
+    name: 'Kubernetes Clusters',
+    description: 'Deploy and scale containerized apps across your own hardware.',
+    icon: ServerIcon,
+  },
+  {
+    name: 'AI Agents & LLM Runtimes',
+    description: 'Run open-source models locally, securely, and offline.',
+    icon: ArrowPathIcon,
+  },
+  {
+    name: 'S3-Compatible Storage',
+    description: 'Your own personal over-the-network drive, encrypted end-to-end.',
+    icon: CloudArrowUpIcon,
+  },
+  {
+    name: 'Mesh VPN & Zero-Trust Networking',
+    description: 'Securely connect all your devices and remote locations.',
+    icon: ShieldCheckIcon,
+  },
+]
+
+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>
+        <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,
+          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">
+            {features.map((feature) => (
+              <div key={feature.name} className="relative">
+                <div className="flex h-full flex-col rounded-3xl border border-slate-200 bg-gray-50/25 p-8 pt-16 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg">
+                  <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>
+                  <CT as="h3" className="mt-4">
+                    {feature.name}
+                  </CT>
+                  <CP color="secondary" className="mt-4">
+                    {feature.description}
+                  </CP>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/cloud/CloudPage.tsx

@@ -6,6 +6,7 @@ import { CloudUseCases } from './CloudUseCases'
 import { SecurityPillars } from './SecurityPillars'
 import { CloudCTA } from './CloudCTA'
 import { CloudHeroNew } from './CloudHeroNew'
+import { CloudHosting } from './CloudHosting'
 
 export default function CloudPage() {
   return (
@@ -15,6 +16,10 @@ export default function CloudPage() {
         <CloudHeroNew />
       </AnimatedSection>
 
+      <AnimatedSection>
+        <CloudHosting />
+      </AnimatedSection>
+
       <AnimatedSection>
         <CloudFeatures />
       </AnimatedSection>

src/pages/compute/ComputeHero.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { Button } from '../../components/Button'
+import { Eyebrow, SectionHeader, P, H3 } from '../../components/Texts'
 
 export function ComputeHero() {
   return (
@@ -8,22 +9,24 @@ export function ComputeHero() {
       <div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-1/2">
         <img
           alt=""
-          src="/images/cloudhero.webp"
-          className="size-full object-cover"
+          src="/images/computehero.webp"
+          className="size-full object-contain"
         />
        
       </div>
-      <div className="relative mx-auto max-w-7xl py-24 sm:py-32 lg:px-8 lg:py-40">
-        <div className="pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24 xl:pr-32">
-          <h2 className="text-base/7 font-semibold text-cyan-500">COMPUTE</h2>
-          <p className="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">The pulse of intelligence runs here.</p>
-          <p className="mt-6 text-base/7 text-gray-600">
+      <div className="relative mx-auto max-w-7xl py-12 lg:py-24 lg:px-8">
+        <div className="max-w-2xl pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24">
+          <Eyebrow className="text-base/7 font-semibold text-cyan-500">COMPUTE</Eyebrow>
+          <H3 className="mt-2 text-gray-900">The pulse of Intelligence Runs Here.</H3>
+          <P className="mt-6  text-gray-600">
             Mycelium Compute brings predictable, sovereign performance — free from lock-in, free from drift.
             Deploy any workload, anywhere, with cryptographic precision and zero compromise.
+          </P>
+          <P className="mt-6  text-gray-600">
             From micro-VMs to full clusters, every operation is deterministic, self-managing, and stateless by design.
             Compute that verifies itself. Expands itself. Heals itself.
-          </p>
-          <div className="mt-8">
+          </P>
+          <div className="mt-12">
             <Button href="#" variant="solid" color="cyan">
               Experience Deterministic Compute
             </Button>

src/pages/gpu/GpuHero.tsx

@@ -9,12 +9,12 @@ export function GpuHero() {
       <div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-1/2">
         <img
           alt="Mycelium GPU nebula illustration"
-          src="/images/gpuhero.png"
-          className="size-full object-cover"
+          src="/images/gpuhero2.png"
+          className="size-full object-contain"
         />
       </div>
-      <div className="relative mx-auto max-w-7xl py-24 sm:py-32 lg:px-8 lg:py-40">
-        <div className="pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24 xl:pr-32">
+      <div className="relative mx-auto max-w-7xl py-24 lg:py-32 lg:px-8">
+        <div className="pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24 ">
           <Eyebrow className="tracking-[0.35em] uppercase text-cyan-500">
             Mycelium GPU
           </Eyebrow>

src/pages/home/CallToAction.tsx

@@ -14,10 +14,13 @@ export function CallToAction() {
       <Container className="relative">
         <div className="mx-auto max-w-xl text-center">
           <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
-            Activate Your Sovereign <br />Mycelium Stack
+            Use the Mycelium Stack Your Way
           </h2>
           <p className="mt-6 text-lg text-gray-300">
-            Mesh cloud workloads through the encrypted Mycelium Network and unlock AI experiences without ever surrendering control of your infrastructure, performance, or data.
+            Run workloads, connect environments, host nodes, and build agentic systems, all on one sovereign, self-healing network. 
+          </p>
+          <p className="mt-4 text-lg text-gray-300">
+            Start wherever you are. Scale however you choose.
           </p>
           <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
             <Button to="/cloud" variant="solid" color="cyan">

src/pages/home/HomeAurora.tsx

@@ -2,7 +2,7 @@ import { H1, H5 } from "@/components/Texts"
 import { Button } from "@/components/Button"
 
 
-export  function HomeAurora() {
+export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => void }) {
   return (
     <div
       className="relative bg-cover sm:bg-contain bg-right bg-no-repeat"
@@ -10,28 +10,30 @@ export  function HomeAurora() {
     >
       <div className="mx-auto max-w-7xl lg:px-4">
         <div className="px-6 pt-12 pb-24 sm:pb-32 lg:col-span-5 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-5">
-          <div className="mx-auto max-w-3xl lg:mx-0">
+          <div className="mx-auto max-w-2xl lg:mx-0">
             <div className="hidden sm:flex">
               <div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
                 Anim aute id magna aliqua ad ad non deserunt sunt.{' '}
                 <a href="#" className="font-semibold whitespace-nowrap text-cyan-600">
                   <span aria-hidden="true" className="absolute inset-0" />
-                  Read more <span aria-hidden="true">&rarr;</span>
+                  Read more <span aria-hidden="trwhenue">&rarr;</span>
                 </a>
               </div>
             </div>
             <H1 className="mt-8">
-              Full Sovereignty for Cloud, Network & AI.
+              The Sovereign Agentic Cloud
             </H1>
             <H5 className="mt-8 text-lg text-gray-600">
-              Build and run mission-critical workloads on distributed compute, encrypted networking, and sovereign AI orchestration without centralized gatekeepers.
+              A global, self-healing network you can join.
+              Host nodes, deploy workloads, or build private AI systems, 
+              all on infrastructure you own and control.
             </H5>
             <div className="mt-10 flex items-center gap-x-6">
               <Button
-                to="#"
                 variant="solid"
                 className=""
                 color="cyan"
+                onClick={onGetStartedClick}
               >
                 Get started
               </Button>

src/pages/home/HomeBenefits.tsx

@@ -8,27 +8,27 @@ import { H2, P, CP, Eyebrow } from '@/components/Texts'
 export function HomeBenefits() {
   const features = [
     {
-      title: "Sovereign",
+      title: "Sovereign by Default",
       description:
         "Own your infrastructure and your data. Mycelium Cloud eliminates dependency on centralized providers, giving you full digital sovereignty.",
       image: "/images/benefits/sovereign.webp",
     },
     {
-      title: "Autonomous",
+      title: "Hackable & Open",
       description:
-        "The cloud that runs itself. From deployment to scaling, Mycelium Cloud automates everything.",
+        "Open source and hackable by design. Learn, build, and experiment without permission.",
       image: "/images/benefits/autonomous.webp",
     },
     {
-      title: "Energy Efficient",
+      title: "Unbreakable by Design",
       description:
-        "Built on distributed nodes designed for minimal energy use, it redefines sustainability without compromising performance.",
+        "Distributed nodes make it resilient to attacks and failures. The network heals itself.",
       image: "/images/benefits/energy.webp",
     },
     {
-      title: "Cost Efficient",
+      title: "Cost & Energy Efficient",
       description:
-        "No middlemen. No inflated bills. Just pure compute power at a fraction of traditional cloud costs — optimized, transparent, and fair.",
+        "Distributed hardware eliminates hyperscale overhead. Pure compute power at a fraction of traditional cloud costs.",
       image: "/images/benefits/cost.webp",
     },
   ];

src/pages/home/HomeComparisonTable.tsx

@@ -0,0 +1,60 @@
+import { CheckIcon, XMarkIcon } from '@heroicons/react/24/outline'
+import { Eyebrow, H3, P, CT } from '../../components/Texts'
+
+const features = [
+  { name: 'Infrastructure Ownership', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
+  { name: 'Data Stays Local & Encrypted', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
+  { name: 'Private AI & LLMs on Your Own Hardware', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
+  { name: 'Self-Healing, No Single Point of Failure', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
+  { name: 'Zero-Trust, Cryptographic Identity', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
+  { name: 'Censorship-Resistant', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
+  { name: 'Standard Tooling (Kube, S3, Agents)', cloud: <CheckIcon className="h-6 w-6 text-green-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
+  { name: 'Vendor Lock-In', cloud: <CheckIcon className="h-6 w-6 text-red-500" />, mycelium: <XMarkIcon className="h-6 w-6 text-red-500" /> },
+  { name: 'One-Time Hardware Cost (No Rent Forever)', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
+]
+
+export function HomeComparisonTable() {
+  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-6xl lg:px-8">
+        <Eyebrow>COMPARISON</Eyebrow>
+        <H3 className="mt-2">Why People Choose Mycelium</H3>
+        <P className="mx-auto mt-5 max-w-prose">
+          Mycelium brings cloud-grade automation to infrastructure you control — without surrendering data, identity,
+          or uptime to centralized platforms.
+        </P>
+
+        <div className="mt-16 overflow-x-auto">
+          <table className="mx-auto w-full max-w-5xl table-auto border-collapse text-left">
+            <thead className="bg-cyan-50/60">
+              <tr className="text-base font-semibold text-slate-700">
+                <th className="py-4 pl-3 text-left">Capability</th>
+                <th className="py-4 pl-3 text-left">Traditional Cloud</th>
+                <th className="py-4 pl-3 text-left">Mycelium</th>
+              </tr>
+            </thead>
+
+            <tbody className="divide-y divide-slate-200">
+              {features.map((feature) => (
+                <tr key={feature.name}>
+                  <td className="py-3 pl-3">
+                    <CT>{feature.name}</CT>
+                  </td>
+
+                  <td className="py-3 pl-3">
+                    {feature.cloud}
+                  </td>
+
+                  <td className="py-3 pl-3">
+                    {feature.mycelium}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+      </div>
+    </div>
+  )
+}

src/pages/home/HomeGlobe.tsx

@@ -4,7 +4,7 @@ import { Globe } from "@/components/ui/Globe"
 import { motion } from "framer-motion"
 import { P, CT, CP, SectionHeader, Eyebrow } from "@/components/Texts"
 import { CountUpNumber } from '@/components/CountUpNumber'
-import { MagicCard } from '@/components/magicui/magic-card'
+import { DarkCard } from "@/components/ui/cards";
 
 export function WorldMap() {
   return (
@@ -65,16 +65,13 @@ export function WorldMap() {
               transition={{ duration: 0.5, delay: 0.4, ease: "easeOut" }}
               className="lg:absolute lg:top-12 lg:-left-12 w-80"
             >
-              <MagicCard
-                gradientColor="#334155"
-                className="border border-gray-500/30 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
-              >
+              <DarkCard>
                 <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">CORES</CT></div>
                 <div><CountUpNumber end={54958} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
                 <CP color="light" className="mt-2 text-sm">
                   Total Central Processing Unit Cores available on the grid.
                 </CP>
-              </MagicCard>
+              </DarkCard>
             </motion.div>
 
             <motion.div
@@ -84,16 +81,13 @@ export function WorldMap() {
               transition={{ duration: 0.5, delay: 0.5, ease: "easeOut" }}
               className="lg:absolute lg:-top-10 lg:right-0 w-80"
             >
-              <MagicCard
-                gradientColor="#334155"
-                className="border border-gray-500/30 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
-              >
+              <DarkCard>
                 <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">NODES</CT></div>
                 <div><CountUpNumber end={1493} className="mt-4 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
                 <CP color="light" className="mt-2 text-sm">
                   Total number of nodes on the grid.
                 </CP>
-              </MagicCard>
+              </DarkCard>
             </motion.div>
 
             <motion.div
@@ -103,16 +97,13 @@ export function WorldMap() {
               transition={{ duration: 0.5, delay: 0.6, ease: "easeOut" }}
               className="lg:absolute lg:bottom-28 lg:-left-12 w-80"
             >
-              <MagicCard
-                gradientColor="#334155"
-                className="border border-gray-500/30 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
-              >
+              <DarkCard>
                 <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">SSD CAPACITY</CT></div>
                 <div><CountUpNumber end={5388956} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
                 <CP color="light" className="mt-2 text-sm">
                   Total GB amount of storage (SSD, HDD, & RAM) on the grid.
                 </CP>
-              </MagicCard>
+              </DarkCard>
             </motion.div>
 
             <motion.div
@@ -122,16 +113,13 @@ export function WorldMap() {
               transition={{ duration: 0.5, delay: 0.7, ease: "easeOut" }}
               className="lg:absolute lg:top-47 lg:right-0 w-80"
             >
-              <MagicCard
-                gradientColor="#334155"
-                className="border border-gray-500/30 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-xl hover:shadow-cyan-500/20"
-              >
+              <DarkCard>
                 <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">COUNTRIES</CT></div>
                 <div><CountUpNumber end={44} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
                 <CP color="light" className="mt-2 text-sm">
                   Total number of countries with active nodes.
                 </CP>
-              </MagicCard>
+              </DarkCard>
             </motion.div>
           </div>
         </div>

src/pages/home/HomeHosting.tsx

@@ -0,0 +1,65 @@
+import {
+  ArrowPathIcon,
+  CloudArrowUpIcon,
+  ServerIcon,
+  ShieldCheckIcon,
+} from '@heroicons/react/24/outline'
+import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
+
+const features = [
+  {
+    name: 'Kubernetes Clusters',
+    description: 'Deploy and scale containerized apps across your own hardware.',
+    icon: ServerIcon,
+  },
+  {
+    name: 'AI Agents & LLM Runtimes',
+    description: 'Run open-source models locally, securely, and offline.',
+    icon: ArrowPathIcon,
+  },
+  {
+    name: 'S3-Compatible Storage',
+    description: 'Your own personal over-the-network drive, encrypted end-to-end.',
+    icon: CloudArrowUpIcon,
+  },
+  {
+    name: 'Mesh VPN & Zero-Trust Networking',
+    description: 'Securely connect all your devices and remote locations.',
+    icon: ShieldCheckIcon,
+  },
+]
+
+export function HomeHosting() {
+  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>
+        <H3 className="mt-2">Run Real Infrastructure on Your Own Hardware</H3>
+        <P className="mx-auto mt-5 max-w-prose">
+          Turn your own machines into real, production-grade infrastructure. Mycelium handles the networking,
+          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">
+            {features.map((feature) => (
+              <div key={feature.name} className="relative">
+                <div className="flex h-full flex-col rounded-3xl border border-slate-200 bg-gray-50/25 p-8 pt-16 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg">
+                  <span className="absolute -top-6 left-1/2 -translate-x-1/2 transform rounded-xl bg-indigo-500 p-3 shadow-lg">
+                    <feature.icon aria-hidden="true" className="size-8 text-white" />
+                  </span>
+                  <CT as="h3" className="mt-4">
+                    {feature.name}
+                  </CT>
+                  <CP color="secondary" className="mt-4">
+                    {feature.description}
+                  </CP>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/home/HomeHostingDark.tsx

@@ -0,0 +1,66 @@
+import {
+  CpuChipIcon,
+  CubeIcon,
+  CircleStackIcon,
+  LockClosedIcon,
+} from '@heroicons/react/24/outline'
+import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
+import { DarkCard } from '../../components/ui/cards'
+
+const features = [
+  {
+    name: 'Kubernetes Clusters',
+    description: 'Deploy and scale containerized apps across your own hardware.',
+    icon: CubeIcon,
+  },
+  {
+    name: 'AI Agents & LLM Runtimes',
+    description: 'Run open-source models locally, securely, and offline.',
+    icon: CpuChipIcon,
+  },
+  {
+    name: 'S3-Compatible Storage',
+    description: 'Your own personal over-the-network drive, encrypted end-to-end.',
+    icon: CircleStackIcon,
+  },
+  {
+    name: 'Mesh VPN & Zero-Trust Networking',
+    description: 'Securely connect all your devices and remote locations.',
+    icon: LockClosedIcon,
+  },
+]
+
+export function HomeHostingDark() {
+  return (
+    <div className="relative py-24 bg-[#111111] 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>
+        <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,
+          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">
+            {features.map((feature) => (
+              <div key={feature.name} className="relative">
+                <DarkCard className="flex h-full flex-col pt-16">
+                  <span className="absolute -top-6 left-1/2 -translate-x-1/2 transform rounded-xl bg-cyan-600 hover:bg-cyan-500 p-3 shadow-lg">
+                    <feature.icon aria-hidden="true" className="size-8 text-white" />
+                  </span>
+                  <CT as="h3" className="mt-4 text-gray-200">
+                    {feature.name}
+                  </CT>
+                  <CP color="secondary" className="mt-4 text-gray-400">
+                    {feature.description}
+                  </CP>
+                </DarkCard>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/home/HomePage.tsx

@@ -1,3 +1,4 @@
+import { useRef } from 'react'
 import { AnimatedSection } from '../../components/AnimatedSection'
 import { HomeAurora } from './HomeAurora'
 import { StackSectionLight } from './StackSection'
@@ -5,13 +6,20 @@ import { WorldMap } from './HomeGlobe'
 import { HomeBenefits } from './HomeBenefits'
 import { CallToAction } from './CallToAction'
 import { HomeSlider } from './HomeSlider'
+import { HomeHostingDark } from './HomeHostingDark'
+import { HomeComparisonTable } from './HomeComparisonTable'
 
 
 export default function HomePage() {
+  const sliderRef = useRef<HTMLDivElement>(null)
+
+  const handleScrollToSlider = () => {
+    sliderRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }
   return (
     <div>
       <AnimatedSection>
-        <HomeAurora />
+        <HomeAurora onGetStartedClick={handleScrollToSlider} />
       </AnimatedSection>
 
       <AnimatedSection id="next-section">
@@ -22,15 +30,22 @@ export default function HomePage() {
         <StackSectionLight />
       </AnimatedSection>
 
-
       <AnimatedSection>
-        <HomeSlider />
+        <HomeHostingDark   />
       </AnimatedSection>
 
       <AnimatedSection>
        <HomeBenefits />
       </AnimatedSection>
 
+      <AnimatedSection ref={sliderRef}>
+        <HomeSlider />
+      </AnimatedSection>
+
+      <AnimatedSection>
+        <HomeComparisonTable />
+      </AnimatedSection>
+
       <AnimatedSection>
         <CallToAction />
       </AnimatedSection>

src/pages/home/HomeSlider.tsx

@@ -9,17 +9,17 @@ export function HomeSlider() {
   ));
 
   return (
-    <div className="w-full h-full py-20 bg-[#0b0b0b]">
+    <div className="w-full h-full py-20 bg-[#111111]">
       <div className="max-w-7xl mx-auto pl-4">
         <Eyebrow className="text-left">
           Ecosystem
         </Eyebrow>
         <H3 className="text-left text-white">
-          Discover the Mycelium Components
+          Discover the Mycelium Products
         </H3>
         <div className="mt-4 max-w-3xl">
           <P className="text-left text-neutral-400">
-            From compute and networking to intelligent automation, these components work together to empower users, developers, and organizations to build freely, without intermediaries.
+            From compute and networking to intelligent automation, these components  can be used on its own or combined into a fully sovereign cloud.
           </P>
         </div>
       </div>
@@ -32,58 +32,39 @@ export function HomeSlider() {
 import networkImage from "/images/pages/network.webp";
 import agentImage from "/images/pages/agent.webp";
 import cloudImage from "/images/pages/cloud.webp";
-import gpuImage from "/images/pages/gpu.webp";
 import computeImage from "/images/pages/compute.webp";
-import storageImage from "/images/pages/storage.png";
 
 const data = [
+  {
+    category: "Cloud",
+    title: "Mycelium Cloud",
+    description: "Deploy Kubernetes clusters on sovereign infrastructure.",
+    src: "/images/pages/cloud.png",
+    bg: cloudImage,
+    link: "/cloud",
+  },
   {
     category: "DePIN",
     title: "Mycelium Network",
-    description: "A decentralized network for distributed computing.",
+    description: "Encrypted peer-to-peer mesh networking across the globe.",
     src: "/images/pages/network.png",
     bg: networkImage,
     link: "/network",
   },
   {
     category: "AI Agent",
-    title: "Mycelium Agent",
-    description: "An intelligent agent for task automation.",
+    title: "Mycelium Agents",
+    description: "Private, programmable AI systems that run on your hardware.",
     src: "/images/pages/agent.png",
     bg: agentImage,
     link: "/agent",
   },
   {
-    category: "Cloud",
-    title: "Mycelium Cloud",
-    description: "Decentralized cloud storage and services.",
-    src: "/images/pages/cloud.png",
-    bg: cloudImage,
-    link: "/cloud",
-  },
-
-  {
-    category: "GPU",
-    title: "Mycelium GPU",
-    description: "Access to a global network of GPUs.",
-    src: "/images/pages/gpu.png",
-    bg: gpuImage,
-    link: "/gpu",
-  },
-  {
-    category: "Compute",
-    title: "Mycelium Compute",
-    description: "Run computations on a distributed network.",
+    category: "Resources",
+    title: "Compute / Storage / GPU",
+    description: "The resource layers powering the stack.",
     src: "/images/pages/compute.png",
     bg: computeImage,
     link: "/compute",
   },
-  {
-    category: "Storage",
-    title: "Mycelium Storage",
-    description: "Secure and decentralized data storage.",
-    src: "/images/pages/storage.png",
-    bg: storageImage,
-    link: "/storage",
-  },
 ];

src/pages/storage/StorageHero.tsx

@@ -9,11 +9,11 @@ export function StorageHero() {
       <div className="relative h-80 overflow-hidden bg-transparent md:absolute md:right-0 md:h-full md:w-1/3 lg:w-1/2">
         <img
           alt="Mycelium Storage visual"
-          src="/images/storage4.png"
-          className="size-full object-cover"
+          src="/images/computehero11.webp"
+          className="size-full object-contain"
         />
       </div>
-      <div className="relative mx-auto max-w-7xl py-24 sm:py-32 lg:px-8 lg:py-40">
+      <div className="relative mx-auto max-w-7xl py-24 lg:py-32 lg:px-8">
         <div className="pr-6 pl-6 md:mr-auto md:w-2/3 md:pr-16 lg:w-1/2 lg:pl-0 lg:pr-24 xl:pr-32">
           <Eyebrow className="tracking-[0.35em] uppercase text-cyan-500">
             Mycelium Storage