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
+        <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/Header.tsx

@@ -1,11 +1,30 @@
-import { Link } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 import { Dropdown } from './ui/Dropdown'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { Container } from './Container'
 import { Button } from './Button'
 import pmyceliumLogo from '../images/logos/logo_1.png'
 
+
+const cloudNavItems = [
+  { name: 'Cloud', href: '/cloud' },
+  { name: 'Compute', href: '/compute' },
+  { name: 'Storage', href: '/storage' },
+  { name: 'GPU', href: '/gpu' },
+]
+
 export function Header() {
+  const location = useLocation()
+
+  const getCurrentPageName = () => {
+    const currentPath = location.pathname;
+    if (currentPath.startsWith('/compute')) return 'Compute';
+    if (currentPath.startsWith('/storage')) return 'Storage';
+    if (currentPath.startsWith('/gpu')) return 'GPU';
+    if (currentPath.startsWith('/cloud')) return 'Cloud';
+    return 'Cloud'; 
+  };
+
   return (
     <header>
       <nav>
@@ -18,16 +37,11 @@ export function Header() {
               <Dropdown
                 buttonContent={
                   <>
-                    Cloud
+                    {getCurrentPageName()}
                     <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
                   </>
                 }
-                items={[
-                  { name: 'Cloud', href: '/cloud' },
-                  { name: 'Compute', href: '/compute' },
-                  { name: 'Storage', href: '/storage' },
-                  { name: 'GPU', href: '/gpu' },
-                ]}
+                items={cloudNavItems}
               />
               <Link
                 to="/network"

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[];
@@ -73,7 +74,7 @@ export const Carousel = ({ items, initialScroll = 0 }: CarouselProps) => {
 
           <div
             className={cn(
-              "flex flex-row justify-start gap-4 pl-4",
+              "flex flex-row justify-start gap-6 pl-4",
               "mx-auto max-w-7xl", // remove max-w-4xl if you want the carousel to span the full width of its container
             )}
           >
@@ -127,42 +128,44 @@ export const Card = ({
   card: Card;
   layout?: boolean;
 }) => {
-  
   return (
     <Link to={card.link}>
-      <motion.div
-        layoutId={layout ? `card-${card.title}` : undefined}
-        className="relative z-10 flex h-60 w-56 flex-col items-start justify-start overflow-hidden rounded-3xl border border-gray-500/30 md:h-120 md:w-96 hover:scale-105 transition-transform duration-200"
-        style={{
-          backgroundImage: `url(${card.bg})`,
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-        }}
-      >
-        <div className="pointer-events-none absolute inset-x-0 top-0 z-30 h-full bg-gradient-to-b from-black/50 via-transparent to-transparent" />
-        <div className="relative z-40 p-8 w-full">
+      <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 p-8 md:h-120 md:w-96"
+        >
+        <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 text-sm font-medium text-white md:text-base"
+            className="text-left font-sans font-semibold text-cyan-500 uppercase tracking-wider text-xs   md:text-sm"
           >
             {card.category}
           </motion.p>
           <motion.p
             layoutId={layout ? `title-${card.title}` : undefined}
-            className="mt-2 max-w-xs text-left font-sans text-xl font-semibold [text-wrap:balance] text-white md:text-3xl"
+            className="mt-1 max-w-xs text-left font-sans text-xl font-semibold text-white [text-wrap:balance] lg:text-2xl"
           >
             {card.title}
           </motion.p>
-          <div className="flex flex-row justify-between items-center w-full mt-4">
-            <motion.p className="max-w-xs text-left font-sans lg:text-lg text-base  text-neutral-300">
+          <div className="mt-2 flex w-full flex-row items-center justify-between md:mt-4">
+            <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="h-8 w-8 bg-[#212121] rounded-full flex items-center justify-center text-[#858585] shrink-0 hover:bg-[#262626] hover:text-white active:bg-[#262626] active:text-white transition-colors duration-200">
-              <IconChevronRight className="h-6 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>
-      </motion.div>
+        <div className="relative flex h-3/5 w-full items-end justify-end bg-transparent">
+          <img
+            src={card.src}
+            alt={card.title}
+            className="h-full w-full origin-bottom-right scale-75 object-contain mb-10"
+          />
+        </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

@@ -11,7 +11,6 @@ import {
 } from 'framer-motion'
 import { useDebouncedCallback } from 'use-debounce'
 
-import { AppScreen } from '../network/AppScreen'
 import {
   Eyebrow,
   FeatureDescription,
@@ -20,13 +19,11 @@ import {
   P,
   SectionHeader,
 } from '@/components/Texts'
-import { CircleBackground } from '@/components/CircleBackground'
 import { Container } from '@/components/Container'
 
-import connectorImg from '@/images/connector.png'
-import peersImg from '@/images/peers.png'
-import settingImg from '@/images/setting.png'
-import { PhoneFrame } from '@/components/PhoneFrame'
+import reservenodeimg from '/images/cloud/reserve.png'
+import billingImg from '/images/cloud/billing.png'
+import kubeconfigImg from '/images/cloud/kubeconfig.png'
 
 
 interface CustomAnimationProps {
@@ -36,25 +33,25 @@ interface CustomAnimationProps {
 
 const features = [
   {
-    name: 'Mycelium Connector',
+    name: 'Decentralized Kubernetes',
     description:
-      "Start (and stop) your Mycelium connector to gain access to sites, apps, and workloads available exclusively on the Mycelium Network. View statistics around peers and traffic.",
+      "Reserve a node and deploy sovereign Kubernetes clusters on decentralized infrastructure.",
     icon: DeviceUserIcon,
-    screen: InviteScreen,
+    screen: ReserveNodeScreen,
   },
   {
-    name: 'Mycelium Peers',
+    name: 'Manage Your Cluster',
     description:
-      'Search and discover active peers on the Mycelium Network, or add your own.',
+      'Manage your cluster with ease, with a simple and intuitive interface.',
     icon: DeviceNotificationIcon,
-    screen: StocksScreen,
+    screen: ManageClusterScreen,
   },
   {
-    name: 'Network Setting',
+    name: 'Personalised Billings & Accounts',
     description:
-      'Find version and network information and trigger light or dark mode.',
+      'Easily manage your cluster billing and accounts with personalised configurations.',
     icon: DeviceTouchIcon,
-    screen: InvestScreen,
+    screen: PersonalisedBillingsScreen,
   },
 ]
 
@@ -182,28 +179,40 @@ const bodyAnimation: MotionProps = {
 }
 
 
-function InviteScreen() {
+function ReserveNodeScreen() {
   return (
-    <AppScreen className="w-full">
-      <img src={connectorImg} alt="Mycelium Connector" width="366" height="732" className="-mt-8" />
-    </AppScreen>
-  )
+    <img
+      src={reservenodeimg}
+      alt="Mycelium Reserve Node"
+      width={2432}
+      height={1442}
+      className="w-4xl max-w-none rounded-xl shadow-2xl ring-1 ring-gray-400/10 sm:w-240 md:-ml-32 lg:-ml-32"
+    />
+  );
 }
 
-function StocksScreen() {
+function ManageClusterScreen() {
   return (
-    <AppScreen className="w-full">
-      <img src={peersImg} alt="Mycelium Peers" width="366" height="732" className="-mt-8" />
-    </AppScreen>
-  )
+    <img
+      src={kubeconfigImg}
+      alt="Mycelium Kubeconfig"
+      width={2432}
+      height={1442}
+      className="w-4xl max-w-none rounded-xl shadow-2xl ring-1 ring-gray-400/10 sm:w-240 md:-ml-32 lg:-ml-32"
+    />
+  );
 }
 
-function InvestScreen() {
+function PersonalisedBillingsScreen() {
   return (
-    <AppScreen className="w-full">
-      <img src={settingImg} alt="Mycelium Settings" width="366" height="732" className="-mt-8" />
-    </AppScreen>
-  )
+    <img
+      src={billingImg}
+      alt="Mycelium Billing"
+      width={2432}
+      height={1442}
+      className="w-4xl max-w-none rounded-xl shadow-2xl ring-1 ring-gray-400/10 sm:w-240 md:-ml-32 lg:-ml-32"
+    />
+  );
 }
 
 function usePrevious<T>(value: T) {
@@ -216,7 +225,7 @@ function usePrevious<T>(value: T) {
   return ref.current
 }
 
-function FeaturesDesktop() {
+function CloudFeaturesDesktop() {
   let [changeCount, setChangeCount] = useState(0)
   let [selectedIndex, setSelectedIndex] = useState(0)
   let prevIndex = usePrevious(selectedIndex)
@@ -238,12 +247,12 @@ function FeaturesDesktop() {
       onChange={onChange}
       vertical
     >
-      <TabList className="z-10 order-last col-span-6 space-y-6">
+      <TabList className="z-10 col-span-6 space-y-6 pl-4 sm:pl-6 lg:pl-8">
         {features.map((feature, featureIndex) => (
           <div
             key={feature.name}
             className={clsx(
-              'relative rounded-2xl outline-2 transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-800/30',
+              'relative rounded-2xl outline-2 transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-800/30 ml-16',
               selectedIndex === featureIndex
                 ? 'outline-cyan-500'
                 : 'outline-transparent hover:outline-cyan-500',
@@ -252,7 +261,7 @@ function FeaturesDesktop() {
             {featureIndex === selectedIndex && (
               <motion.div
                 layoutId="activeBackground"
-                className="absolute inset-0 bg-gray-800"
+                className="absolute inset-0 bg-gray-800 "
                 initial={{ borderRadius: 16 }}
               />
             )}
@@ -271,11 +280,8 @@ function FeaturesDesktop() {
           </div>
         ))}
       </TabList>
-      <div className="relative col-span-6">
-        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-          <CircleBackground id="primaryfeatures_desktop_circle" color="#13B5C8" className="animate-spin-slower" />
-        </div>
-        <PhoneFrame className="z-10 mx-auto w-full max-w-[366px]">
+      <div className="relative col-span-6 overflow-hidden">
+        <div className="z-10 mx-auto w-full max-w-[366px]">
           <TabPanels as={Fragment}>
             <AnimatePresence
               initial={false}
@@ -296,13 +302,13 @@ function FeaturesDesktop() {
               )}
             </AnimatePresence>
           </TabPanels>
-        </PhoneFrame>
+        </div>
       </div>
     </TabGroup>
   )
 }
 
-function FeaturesMobile() {
+function CloudFeaturesMobile() {
   let [activeIndex, setActiveIndex] = useState(0)
   let slideContainerRef = useRef<React.ElementRef<'div'>>(null)
   let slideRefs = useRef<Array<React.ElementRef<'div'>>>([])
@@ -354,17 +360,10 @@ function FeaturesMobile() {
                   : 'outline-transparent hover:outline-cyan-500',
               )}
             >
-              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-                                <CircleBackground
-                  id={`primaryfeatures_mobile_circle_${featureIndex}`}
-                  color="#13B5C8"
-                  className={featureIndex % 2 === 1 ? 'rotate-180' : undefined}
-                />
-              </div>
-              <PhoneFrame className="relative mx-auto w-full max-w-[366px]">
+              <div className="relative mx-auto w-full max-w-[366px]">
                 <feature.screen />
-              </PhoneFrame>
-              <div className="absolute inset-x-0 bottom-0 bg-gray-800/95 p-6 backdrop-blur-sm sm:p-10">
+              </div>
+              <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}
@@ -384,7 +383,7 @@ function FeaturesMobile() {
             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={() => {
@@ -405,29 +404,27 @@ function FeaturesMobile() {
 export function CloudFeatures() {
   return (
     <section
-      id="howitworks"
+      id="overview"
       aria-label="Features for investing all your money"
       className="bg-gray-900 py-20 sm:py-32"
     >
       <Container>
         <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl">
-          <Eyebrow color="accent">How It Works</Eyebrow>
+          <Eyebrow color="accent">Platform Overview</Eyebrow>
           <SectionHeader color="white" className="mt-2">
-            How Mycelium Operates
+            A Decentralized Cloud that Operates Itself
           </SectionHeader>
           <P color="light" className="mt-6">
-            Mycelium, like its natural namesake, thrives on decentralization,
-            efficiency, and security, making it a truly powerful force in the world
-            of decentralized networks.
+           Mycelium Cloud runs Kubernetes on a sovereign, self-healing network. Storage, networking, and compute are all integrated.
           </P>
         </div>
       </Container>
+      <div className="hidden md:mt-20 md:block">
+          <CloudFeaturesDesktop />
+        </div>
       <div className="mt-16 md:hidden">
-        <FeaturesMobile />
+        <CloudFeaturesMobile />
       </div>
-      <Container className="hidden md:mt-20 md:block">
-        <FeaturesDesktop />
-      </Container>
     </section>
   )
 }

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

@@ -6,7 +6,7 @@ export function CloudHeroNew() {
   return (
     <div
       className="relative bg-cover lg:bg-contain bg-right bg-no-repeat"
-      style={{ backgroundImage: "url('/images/cloudhero3.webp')" }}
+      style={{ backgroundImage: "url('/images/cloudhero4.webp')" }}
     >
       <div className="mx-auto max-w-7xl lg:px-8">
         <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">
@@ -15,14 +15,15 @@ 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.
-            </H5>
+              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
                 to="#"

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

@@ -1,6 +1,4 @@
 import { AnimatedSection } from '../../components/AnimatedSection'
-import { CloudHero } from './CloudHero'
-import { CloudOverview } from './CloudOverview'
 import { CloudArchitecture } from './CloudArchitecture'
 import { CloudFeatures } from './CloudFeatures'
 import { CloudGettingStarted } from './CloudGettingStarted'
@@ -8,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 (
@@ -16,15 +15,19 @@ export default function CloudPage() {
       <AnimatedSection>
         <CloudHeroNew />
       </AnimatedSection>
+
       <AnimatedSection>
-        <CloudOverview />
-      </AnimatedSection>
-      <AnimatedSection>
-        <CloudArchitecture />
+        <CloudHosting />
       </AnimatedSection>
+
       <AnimatedSection>
         <CloudFeatures />
       </AnimatedSection>
+
+      <AnimatedSection>
+        <CloudArchitecture />
+      </AnimatedSection>
+
       <AnimatedSection>
         <CloudGettingStarted />
       </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/hero.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,36 +2,38 @@ 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"
       style={{ backgroundImage: "url('/images/hero11.webp')" }}
     >
-      <div className="mx-auto max-w-7xl lg:px-8">
+      <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.webp";
 
 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.",
-    src: "/images/gallery/9.webp",
+    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.",
-    src: "/images/gallery/2.webp",
+    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/gallery/3.webp",
-    bg: cloudImage,
-    link: "/cloud",
-  },
-
-  {
-    category: "GPU",
-    title: "Mycelium GPU",
-    description: "Access to a global network of GPUs.",
-    src: "/images/gallery/4.webp",
-    bg: gpuImage,
-    link: "/gpu",
-  },
-  {
-    category: "Compute",
-    title: "Mycelium Compute",
-    description: "Run computations on a distributed network.",
-    src: "/images/gallery/5.webp",
+    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/gallery/6.webp",
-    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