feat: redesign hero section with cloud background and decorative blobs

- Replaced hero background image with cloud.png and added cyan gradient blobs for visual depth
- Centered hero content with larger typography and improved spacing
- Removed onGetStartedClick callback in favor of direct href navigation

src/components/Header.tsx

@@ -28,7 +28,7 @@ export function Header() {
   return (
     <header>
       <nav>
-                <Container className="relative z-50 flex justify-between py-4">
+                <Container className="relative z-50 flex bg-transparent justify-between py-4">
           <div className="relative z-10 flex items-center gap-16">
             <Link to="/" aria-label="Home">
               <img src={pmyceliumLogo} alt="Mycelium" className="h-8 w-auto" />

src/pages/home/HomeAurora.tsx

@@ -1,45 +1,65 @@
-import { H1, H5 } from "@/components/Texts"
 import { Button } from "@/components/Button"
 
-
-export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => void }) {
+export function HomeAurora() {
   return (
     <div
-      className="relative bg-cover sm:bg-contain bg-right bg-no-repeat"
-      style={{ backgroundImage: "url('/images/hero11.webp')" }}
+      className="relative isolate overflow-hidden h-screen"
+      style={{
+        backgroundImage: "url('/images/cloud.png')",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+      }}
     >
-      <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-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">
-                Deploying at scale?{' '}
-                <a href="#" className="font-semibold whitespace-nowrap text-cyan-600">
-                  <span aria-hidden="true" className="absolute inset-0" />
-                  Book a call  <span>&rarr;</span>
-                </a>
+      <div className="relative isolate px-6 lg:px-8">
+        {/* Top cyan soft blob */}
+        <div
+          aria-hidden="true"
+          className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+        >
+          <div
+            style={{
+              clipPath:
+                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+            }}
+            className="relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#00eaff] to-[#009dff] opacity-10 sm:left-[calc(50%-30rem)] sm:w-288.75"
+          />
         </div>
       </div>
-            <H1 className="mt-8">
+
+      <div className="mx-auto max-w-7xl px-6 pt-20 pb-24 lg:pb-32 lg:px-8 lg:py-40">
+        <div className="mx-auto max-w-2xl text-center">
+          <h1 className="text-6xl font-semibold tracking-tight text-gray-900 lg:text-8xl">
             The Sovereign Agentic Cloud
-            </H1>
-            <H5 className="mt-8 text-lg text-gray-600">
+          </h1>
+
+          <p className="mt-8 text-lg font-medium text-pretty text-gray-500 lg:text-xl/8">
             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
-                variant="solid"
-                className=""
-                color="cyan"
-                onClick={onGetStartedClick}
-              >
+          </p>
+
+          <div className="mt-10 flex items-center justify-center gap-x-6">
+            <Button variant="solid" color="cyan" href="#">
               Start Hosting
             </Button>
-              <Button to="#" variant="outline">
+
+            <Button href="#" variant="outline" color="gray">
               Deploy in Cloud <span aria-hidden="true">→</span>
             </Button>
           </div>
+
+          {/* Bottom cyan soft blob */}
+          <div
+            aria-hidden="true"
+            className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl lg:top-[calc(100%-30rem)]"
+          >
+            <div
+              style={{
+                clipPath:
+                  'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+              }}
+              className="relative left-[calc(50%+3rem)] aspect-1155/678 w-144.5 -translate-x-1/2 bg-linear-to-tr from-[#00eaff] to-[#009dff] opacity-10 lg:left-[calc(50%+36rem)] lg:w-288.75"
+            />
           </div>
         </div>
       </div>

src/pages/home/HomeAuroracopy.tsx

@@ -0,0 +1,48 @@
+import { H1, H5 } from "@/components/Texts"
+import { Button } from "@/components/Button"
+
+
+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-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-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">
+                Deploying at scale?{' '}
+                <a href="#" className="font-semibold whitespace-nowrap text-cyan-600">
+                  <span aria-hidden="true" className="absolute inset-0" />
+                  Book a call  <span>&rarr;</span>
+                </a>
+              </div>
+            </div>
+            <H1 className="mt-8">
+              The Sovereign Agentic Cloud
+            </H1>
+            <H5 className="mt-8 text-lg text-gray-600">
+              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
+                variant="solid"
+                className=""
+                color="cyan"
+                onClick={onGetStartedClick}
+              >
+                 Start Hosting 
+              </Button>
+              <Button to="#" variant="outline">
+                Deploy in Cloud <span aria-hidden="true"> →</span>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/home/HomeGlobe.tsx

@@ -66,8 +66,8 @@ export function WorldMap() {
               className="lg:absolute lg:top-12 lg:-left-12 w-80"
             >
               <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>
+                <div><CT color="light" className="uppercase tracking-wide ">CORES</CT></div>
+                <div><CountUpNumber end={54958} className="mt-2 text-3xl font-bold text-white" /></div>
                 <CP color="light" className="mt-2 text-sm">
                   Total Central Processing Unit Cores available on the grid.
                 </CP>
@@ -82,8 +82,8 @@ export function WorldMap() {
               className="lg:absolute lg:-top-10 lg:right-0 w-80"
             >
               <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>
+                <div><CT color="light" className="uppercase tracking-wide">NODES</CT></div>
+                <div><CountUpNumber end={1493} className="mt-4 text-3xl font-bold text-white" /></div>
                 <CP color="light" className="mt-2 text-sm">
                   Total number of nodes on the grid.
                 </CP>
@@ -98,8 +98,8 @@ export function WorldMap() {
               className="lg:absolute lg:bottom-28 lg:-left-12 w-80"
             >
               <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>
+                <div><CT color="light" className="uppercase tracking-wide">SSD CAPACITY</CT></div>
+                <div><CountUpNumber end={5388956} className="mt-2 text-3xl font-bold text-white" /></div>
                 <CP color="light" className="mt-2 text-sm">
                   Total GB amount of storage (SSD, HDD, & RAM) on the grid.
                 </CP>
@@ -114,8 +114,8 @@ export function WorldMap() {
               className="lg:absolute lg:top-47 lg:right-0 w-80"
             >
               <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>
+                <div><CT color="light" className="uppercase tracking-wide">COUNTRIES</CT></div>
+                <div><CountUpNumber end={44} className="mt-2 text-3xl font-bold text-white" /></div>
                 <CP color="light" className="mt-2 text-sm">
                   Total number of countries with active nodes.
                 </CP>

src/pages/home/HomeHosting.tsx

@@ -1,65 +1,158 @@
-import {
-  ArrowPathIcon,
-  CloudArrowUpIcon,
-  ServerIcon,
-  ShieldCheckIcon,
-} from '@heroicons/react/24/outline'
+import { useId } from 'react'
+import { Container } from '../../components/Container'
 import { CP, CT, Eyebrow, H3, P } from '../../components/Texts'
 
+/* ✅ Custom Icons */
+
+function KubernetesIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
+      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
+      <path
+        d="M16 7
+           L23 11
+           L25 19
+           L19 25
+           L13 25
+           L7 19
+           L9 11
+           Z"
+        fill="#737373"
+      />
+      <circle cx={16} cy={16} r={2} fill="#171717" />
+      <line x1="16" y1="9"  x2="16" y2="14" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+      <line x1="22" y1="12" x2="17" y2="16" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+      <line x1="23" y1="19" x2="18" y2="17" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+      <line x1="16" y1="23" x2="16" y2="18" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+      <line x1="9"  y1="19" x2="15" y2="17" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+      <line x1="10" y1="12" x2="15" y2="16" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+    </svg>
+  )
+}
+
+function AIAgentsIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
+      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
+      <rect x={10} y={12} width={12} height={10} rx={3} fill="#737373" />
+      <line x1={16} y1={9} x2={16} y2={12} stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+      <circle cx={16} cy={8} r={2} fill="#171717" />
+      <circle cx={13} cy={17} r={1.5} fill="#171717" />
+      <circle cx={19} cy={17} r={1.5} fill="#171717" />
+      <line x1={13} y1={21} x2={19} y2={21} stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+    </svg>
+  )
+}
+
+function S3StorageIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
+      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
+      <path d="M10 12h12l-1 12H11L10 12z" fill="#737373" />
+      <rect x={10} y={10} width={12} height={3} rx={1} fill="#171717" />
+      <path d="M12 18c2 2 6 2 8 0" stroke="#171717" strokeWidth={2} strokeLinecap="round" />
+    </svg>
+  )
+}
+
+function VPNIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
+      <circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
+      <path
+        d="
+          M16 8
+          l8 4
+          v6
+          c0 4 -3 7 -8 9
+          c-5 -2 -8 -5 -8 -9
+          v-6
+          l8 -4
+        "
+        fill="#737373"
+      />
+      <path
+        d="M13 18l2 2l4 -4"
+        stroke="#171717"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+/* ✅ Updated Feature List */
+
 const features = [
   {
     name: 'Kubernetes Clusters',
     description: 'Deploy and scale containerized apps across your own hardware.',
-    icon: ServerIcon,
+    icon: KubernetesIcon,
   },
   {
     name: 'AI Agents & LLM Runtimes',
     description: 'Run open-source models locally, securely, and offline.',
-    icon: ArrowPathIcon,
+    icon: AIAgentsIcon,
   },
   {
     name: 'S3-Compatible Storage',
     description: 'Your own personal over-the-network drive, encrypted end-to-end.',
-    icon: CloudArrowUpIcon,
+    icon: S3StorageIcon,
   },
   {
     name: 'Mesh VPN & Zero-Trust Networking',
     description: 'Securely connect all your devices and remote locations.',
-    icon: ShieldCheckIcon,
+    icon: VPNIcon,
   },
 ]
 
+/* ✅ Component */
+
 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.
+    <section
+      id="comingsoon"
+      aria-label="Features"
+      className="py-20 sm:py-32 relative isolate overflow-hidden"
+      style={{
+        backgroundImage: "url('/images/bg2.jpg')",
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+      }}
+    >
+      {/* ✅ Soft overlay for readable text */}
+      <div className="absolute inset-0 bg-white/60 backdrop-blur-[1px]" />
+
+      <Container className="relative z-10">
+        <div className="mx-auto max-w-4xl sm:text-center">
+          <Eyebrow className="text-cyan-500">IN ACTIVE EVOLUTION</Eyebrow>
+          <H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+            Expanding the Network Layer
+          </H3>
+          <P className="mt-6 text-lg text-gray-600">
+            The Mycelium Network is evolving to support richer data movement, identity, and application connectivity across the mesh.
+            These enhancements deepen autonomy and improve real-world usability.
           </P>
-        <div className="mt-16">
-          <div className="grid grid-cols-1 gap-12 lg:grid-cols-4">
+        </div>
+
+        <ul
+          role="list"
+          className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-6 text-sm  sm:grid-cols-2 md:gap-y-10 lg:max-w-none 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>
+            <li
+              key={feature.name}
+              className="rounded-2xl border border-gray-200 px-8 py-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/70 backdrop-blur-sm"
+            >
+              <feature.icon className="h-12 w-12" />
+              <p className="mt-6 font-semibold text-gray-900 text-sm lg:text-base leading-tight">{feature.name}</p>
+              <p className="mt-2 text-gray-700 leading-tight">{feature.description}</p>
+            </li>
           ))}
-          </div>
-        </div>
-      </div>
-    </div>
+        </ul>
+      </Container>
+    </section>
   )
 }

src/pages/home/HomePage.tsx

@@ -6,7 +6,7 @@ import { WorldMap } from './HomeGlobe'
 import { HomeBenefits } from './HomeBenefits'
 import { CallToAction } from './CallToAction'
 import { HomeSlider } from './HomeSlider'
-import { HomeHostingDark } from './HomeHostingDark'
+import { HomeHosting } from './HomeHosting'
 
 
 export default function HomePage() {
@@ -26,7 +26,7 @@ export default function HomePage() {
       </AnimatedSection>
 
       <AnimatedSection>
-        <HomeHostingDark   />
+        <HomeHosting />
       </AnimatedSection>
 
       <AnimatedSection>