feat: clarify cloud infrastructure independence in features section

- Reorganized features to target specific user personas (DevOps, Security, Data, AI/ML teams)
- Updated feature descriptions to emphasize technical benefits and security posture
- Changed section eyebrow from "DEPLOY" to "CAPABILITIES" for clearer positioning

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={[
+                items={cloudNavItems}
-                  { name: 'Cloud', href: '/cloud' },
-                  { name: 'Compute', href: '/compute' },
-                  { name: 'Storage', href: '/storage' },
-                  { name: 'GPU', href: '/gpu' },
-                ]}
               />
               <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
+      <DarkCard className="p-0 rounded-3xl">
-        layoutId={layout ? `card-${card.title}` : undefined}
+        <motion.div
-        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"
+          layoutId={layout ? `card-${card.title}` : undefined}
-        style={{
+          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"
-          backgroundImage: `url(${card.bg})`,
+        >
-          backgroundSize: 'cover',
+        <div className="flex h-2/5 flex-col justify-center py-6 px-4">
-          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">
           <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">
+          <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-lg text-base  text-neutral-300">
+            <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">
+            <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-6 w-6" />
+              <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">
+          <H3 className="mt-6 text-gray-900">
-            Built on a sovereign, encrypted delivery mesh.
+            Built on a Sovereign, Encrypted Delivery Mesh.
-          </SectionHeader>
+          </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 reservenodeimg from '/images/cloud/reserve.png'
-import peersImg from '@/images/peers.png'
+import billingImg from '/images/cloud/billing.png'
-import settingImg from '@/images/setting.png'
+import kubeconfigImg from '/images/cloud/kubeconfig.png'
-import { PhoneFrame } from '@/components/PhoneFrame'
 
 
 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
-      <img src={connectorImg} alt="Mycelium Connector" width="366" height="732" className="-mt-8" />
+      src={reservenodeimg}
-    </AppScreen>
+      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
-      <img src={peersImg} alt="Mycelium Peers" width="366" height="732" className="-mt-8" />
+      src={kubeconfigImg}
-    </AppScreen>
+      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
-      <img src={settingImg} alt="Mycelium Settings" width="366" height="732" className="-mt-8" />
+      src={billingImg}
-    </AppScreen>
+      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="relative col-span-6 overflow-hidden">
-        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+        <div className="z-10 mx-auto w-full max-w-[366px]">
-          <CircleBackground id="primaryfeatures_desktop_circle" color="#13B5C8" className="animate-spin-slower" />
-        </div>
-        <PhoneFrame 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">
+              <div className="relative mx-auto w-full max-w-[366px]">
-                                <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]">
                 <feature.screen />
-              </PhoneFrame>
+              </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}
@@ -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,
+           Mycelium Cloud runs Kubernetes on a sovereign, self-healing network with compute, storage, and networking built in, so you don’t need external cloud dependencies.
-            efficiency, and security, making it a truly powerful force in the world
-            of decentralized networks.
           </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>
+            </H2>
-            <P className="mt-6 text-gray-600">
+            <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,13 +15,19 @@ 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>
+            <H5 className="mt-4 text-sm text-gray-600">
+              Works Alone. Works Together.
+              Mycelium Cloud can run on any network fabric, or pair with Mycelium Network
+              for sovereign connectivity.
             </H5>
             <div className="mt-10 flex items-center gap-x-6">
               <Button
@@ -33,7 +39,7 @@ export function CloudHeroNew() {
                 Get started
               </Button>
               <Button to="#" variant="outline">
-                Explore Docs <span aria-hidden="true"> →</span>
+                Documentation <span aria-hidden="true"> →</span>
               </Button>
             </div>
           </div>

src/pages/cloud/CloudHosting.tsx

@@ -0,0 +1,70 @@
+import {
+  ArrowPathIcon,
+  CloudArrowUpIcon,
+  ServerIcon,
+  ShieldCheckIcon,
+} from '@heroicons/react/24/outline'
+import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
+
+const features = [
+  {
+    Eyebrow: 'DevOps / Cloud teams',
+    name: 'Kubernetes Clusters',
+    description: 'Deterministic K3s workloads across sovereign hardware.',
+    icon: ServerIcon,
+  },
+  {
+    Eyebrow: 'Security & infrastructure',
+    name: 'Encrypted Mesh Networking',
+    description: 'No public ingress, no exposed attack surface, zero-trust routing.',
+    icon: ShieldCheckIcon,
+  },
+  {
+    Eyebrow: 'Data-driven teams',
+    name: 'S3-Compatible Storage',
+    description: 'Distributed storage with erasure coding and residency control.',
+    icon: CloudArrowUpIcon,
+  },
+  {
+    Eyebrow: 'AI / ML workloads',
+    name: 'GPU-Ready',
+    description: 'Scale inference & training on demand.',
+    icon: ArrowPathIcon,
+  },
+]
+
+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>CAPABILITIES</Eyebrow>
+        <H3 className="mt-2">What You Can Run on Mycelium Cloud</H3>
+        <P className="mx-auto mt-5 max-w-prose">
+          Turn your own machines into real, production-grade infrastructure. Mycelium handles the networking,
+          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>
+                  <Eyebrow>{feature.Eyebrow}</Eyebrow>
+                  <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 />
+        <CloudHosting />
-      </AnimatedSection>
-      <AnimatedSection>
-        <CloudArchitecture />
       </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"
+          src="/images/computehero.webp"
-          className="size-full object-cover"
+          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-12 lg:py-24 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">
+        <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">
-          <h2 className="text-base/7 font-semibold text-cyan-500">COMPUTE</h2>
+          <Eyebrow className="text-base/7 font-semibold text-cyan-500">COMPUTE</Eyebrow>
-          <p className="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">The pulse of intelligence runs here.</p>
+          <H3 className="mt-2 text-gray-900">The pulse of Intelligence Runs Here.</H3>
-          <p className="mt-6 text-base/7 text-gray-600">
+          <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>
+          </P>
-          <div className="mt-8">
+          <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"
+          src="/images/gpuhero2.png"
-          className="size-full object-cover"
+          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">
+        <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,14 +14,17 @@ 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">
-              Start Deployment
+              Get Started
             </Button>
             <Button
               to="https://threefold.info/mycelium_network/docs/"

src/pages/home/HomeAurora.tsx

@@ -2,41 +2,42 @@ 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.{' '}
+                Deploying at scale?{' '}
                 <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>
+                  Book a call  <span>&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.
+              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
+                 Start Hosting 
               </Button>
               <Button to="#" variant="outline">
-                Explore Docs <span aria-hidden="true"> →</span>
+                Deploy in Cloud <span aria-hidden="true"> →</span>
               </Button>
             </div>
           </div>

src/pages/home/HomeBenefits.tsx

@@ -8,27 +8,28 @@ import { H2, P, CP, Eyebrow } from '@/components/Texts'
 export function HomeBenefits() {
   const features = [
     {
-      title: "Sovereign",
+      title: "Unbreakable by Design",
       description:
-        "Own your infrastructure and your data. Mycelium Cloud eliminates dependency on centralized providers, giving you full digital sovereignty.",
+        "No central cloud to censor or fail. The network heals itself.",
-      image: "/images/benefits/sovereign.webp",
-    },
-    {
-      title: "Autonomous",
-      description:
-        "The cloud that runs itself. From deployment to scaling, Mycelium Cloud automates everything.",
-      image: "/images/benefits/autonomous.webp",
-    },
-    {
-      title: "Energy Efficient",
-      description:
-        "Built on distributed nodes designed for minimal energy use, it redefines sustainability without compromising performance.",
       image: "/images/benefits/energy.webp",
     },
     {
-      title: "Cost Efficient",
+      title: "Sovereign by Default",
       description:
-        "No middlemen. No inflated bills. Just pure compute power at a fraction of traditional cloud costs — optimized, transparent, and fair.",
+        "Identity, compute, and data belong to you – cryptographically.",
+      image: "/images/benefits/sovereign.webp",
+    },
+    {
+      title: "Hackable & Open",
+      description:
+        "Learn, build, and experiment without permission.",
+      image: "/images/benefits/autonomous.webp",
+    },
+ 
+    {
+      title: "Cost & Energy Efficient",
+      description:
+        "Distributed hardware eliminates hyperscale overhead.",
       image: "/images/benefits/cost.webp",
     },
   ];
@@ -39,7 +40,7 @@ export function HomeBenefits() {
          Benefits
         </Eyebrow>
         <H2 className="text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-black dark:text-white">
-          Why It Changes Everything
+          Why It Matters
         </H2>
 
         <P className=" max-w-3xl  my-4 mx-auto text-center text-gray-600">

src/pages/home/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
+              <DarkCard>
-                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"
-              >
                 <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
+              <DarkCard>
-                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"
-              >
                 <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
+              <DarkCard>
-                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"
-              >
                 <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
+              <DarkCard>
-                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"
-              >
                 <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,64 @@
+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. enabling a world of possibilities..',
+    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">
+          Build and run production-grade workloads on hardware you control, whether it’s your own node or capacity from the decentralized grid. Mycelium handles the networking, orchestration, and security layers, so you can deploy services the same way you would on a public cloud, without giving your data or control to anyone.
+        </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,31 +6,45 @@ 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">
         <WorldMap />
       </AnimatedSection>
 
+      <AnimatedSection>
+        <HomeHostingDark   />
+      </AnimatedSection>
+
       <AnimatedSection>
         <StackSectionLight />
       </AnimatedSection>
 
-
+      <AnimatedSection ref={sliderRef}>
-      <AnimatedSection>
         <HomeSlider />
       </AnimatedSection>
 
       <AnimatedSection>
        <HomeBenefits />
       </AnimatedSection>
+      
+      <AnimatedSection>
+        <HomeComparisonTable />
+      </AnimatedSection>
 
       <AnimatedSection>
         <CallToAction />

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 Mycelium Components
         </H3>
         <div className="mt-4 max-w-3xl">
           <P className="text-left text-neutral-400">
-            From compute and networking to intelligent automation, these components work together to empower users, developers, and organizations to build freely, without intermediaries.
+            From compute and networking to Agents, 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: "Resources",
+    title: "Compute / Storage / GPU",
+    description: "The resource layers powering the stack.",
+    src: "/images/pages/compute.png",
+    bg: computeImage,
+    link: "/compute",
+  },
+  {
+    category: "Cloud",
+    title: "Mycelium Cloud",
+    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/gallery/9.webp",
+    src: "/images/pages/network.png",
     bg: networkImage,
     link: "/network",
   },
   {
     category: "AI Agent",
-    title: "Mycelium Agent",
+    title: "Mycelium Agents",
-    description: "An intelligent agent for task automation.",
+    description: "Private, programmable AI systems that run on your hardware.",
-    src: "/images/gallery/2.webp",
+    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",
-    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/home/StackSection.tsx

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

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"
+          src="/images/computehero11.webp"
-          className="size-full object-cover"
+          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