feat: update hero sections with new visual designs

- Added new hero section alternatives for Agents, Cloud, Compute and GPU pages with modern visual layouts
- Updated hero background images with new high-quality assets for better visual appeal
- Replaced spinning animation heroes with full-width image + text split layouts
- Added consistent styling across hero sections with left-aligned text and right-side hero images
- Updated hero copy to focus on platform capabilities and value propositions
- Replace

src/pages/agents/AgentsHeroAlt.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { H2, H5 } from "@/components/Texts";
+import { ScrollDownArrow } from '@/components/ScrollDownArrow';
+
+export function AgentsHeroAlt() {
+  return (
+    <div
+      style={{
+        backgroundImage: "url(/images/agentshero.png)",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+      }}
+      className="relative mx-auto flex min-h-screen flex-col items-center gap-6 px-4 pb-24 pt-[20vh] text-gray-800 lg:pb-0"
+    >
+      <div className="text-center -mt-5">
+        <H2>
+          <span className="">
+            Sovereign AI Agents, Coming Soon.
+          </span>
+        </H2>
+      </div>
+      <div className="max-w-4xl text-center font-light text-gray-500">
+        <H5>
+           Hero is the autonomous agent layer for the Mycelium platform—trusted, policy-aware AI that runs on infrastructure you control and remembers what matters.
+        </H5>
+      </div>
+      <div className="pt-6">
+        <ScrollDownArrow />
+      </div>
+    </div>
+  );
+}

src/pages/agents/AgentsPage.tsx

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

src/pages/cloud/CloudHeroAlt.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import { Button } from '../../components/Button'
+
+export function CloudHeroAlt() {
+  return (
+    <div className="relative bg-white">
+      <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/kubernetes.png"
+          className="size-full object-cover"
+        />
+       
+      </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">CLOUD</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">
+             Mycelium Cloud blends deterministic compute with quantum-safe storage, delivering a sovereign platform built for zero-ops automation.
+          </p>
+          <div className="mt-8">
+            <Button
+              href="#"
+              className="inline-flex rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            >
+              {' '}
+              Experience Deterministic Compute{' '}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/cloud/CloudPage.tsx

@@ -4,12 +4,13 @@ import { CloudOverview } from './CloudOverview'
 import { ComputeStorageSplit } from './ComputeStorageSplit'
 import { SecurityPillars } from './SecurityPillars'
 import { CloudCTA } from './CloudCTA'
+import { CloudHeroAlt } from './CloudHeroAlt'
 
 export default function CloudPage() {
   return (
     <>
       <AnimatedSection>
-        <CloudHero />
+        <CloudHeroAlt />
       </AnimatedSection>
       <AnimatedSection>
         <CloudOverview />

src/pages/compute/ComputeHero.tsx

@@ -1,125 +1,39 @@
 'use client'
 
-import { useId, useState } from 'react'
-
 import { Button } from '../../components/Button'
-import { Container } from '../../components/Container'
-import ContactForm from '../../components/ContactForm'
-
-function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
-  const id = useId()
 
+export function ComputeHero() {
   return (
-    <div {...props}>
-      <svg
-        viewBox="0 0 1026 1026"
-        fill="none"
-        aria-hidden="true"
-        className="absolute inset-0 h-full w-full animate-spin-slow"
-      >
-        <path
-          d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
-          stroke="#D4D4D4"
-          strokeOpacity="0.7"
+    <div className="relative bg-white">
+      <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/computehero4.png"
+          className="size-full object-cover"
         />
-        <path
-          d="M513 1025C230.23 1025 1 795.77 1 513"
-          stroke={`url(#${id}-gradient-1)`}
-          strokeLinecap="round"
-        />
-        <defs>
-          <linearGradient
-            id={`${id}-gradient-1`}
-            x1="1"
-            y1="513"
-            x2="1"
-            y2="1025"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#06b6d4" />
-            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
-          </linearGradient>
-        </defs>
-      </svg>
-      <svg
-        viewBox="0 0 1026 1026"
-        fill="none"
-        aria-hidden="true"
-        className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
-      >
-        <path
-          d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
-          stroke="#D4D4D4"
-          strokeOpacity="0.7"
-        />
-        <path
-          d="M913 513c0 220.914-179.086 400-400 400"
-          stroke={`url(#${id}-gradient-2)`}
-          strokeLinecap="round"
-        />
-        <defs>
-          <linearGradient
-            id={`${id}-gradient-2`}
-            x1="913"
-            y1="513"
-            x2="913"
-            y2="913"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#06b6d4" />
-            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
-          </linearGradient>
-        </defs>
-      </svg>
+       
+      </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">
+            Mycelium Compute brings predictable, sovereign performance — free from lock-in, free from drift.
+            Deploy any workload, anywhere, with cryptographic precision and zero compromise.
+            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">
+            <Button
+              href="#"
+              className="inline-flex rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            >
+              {' '}
+              Experience Deterministic Compute{' '}
+            </Button>
+          </div>
+        </div>
+      </div>
     </div>
   )
 }
-
-export function ComputeHero() {
-  const [isContactOpen, setIsContactOpen] = useState(false)
-
-  return (
-    <>
-      <div className="overflow-hidden pb-24 lg:py-32 lg:pb-0">
-        <Container>
-          <div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
-            <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
-              <h1 className="text-4xl font-medium tracking-tight text-gray-900 lg:text-6xl">
-                Mycelium Compute
-              </h1>
-              <h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
-                Verifiable, decentralized serverless computing.
-              </h2>
-              <p className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
-                The Mycelium Compute layer offers a decentralized function-as-a-service platform, enabling developers to run code without managing infrastructure.
-              </p>
-              <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
-                <Button variant="solid" color="cyan" onClick={() => setIsContactOpen(true)}>
-                  Join the Waitlist
-                </Button>
-              </div>
-            </div>
-            <div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">
-              <BackgroundIllustration className="absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12" />
-              <div className="mx-auto h-[420px] max-w-[640px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:absolute lg:-inset-x-10 lg:-top-24 lg:h-auto lg:pt-10 xl:-bottom-36">
-                <img
-                  src="/images/data.png"
-                  alt="Mycelium Compute illustration"
-                  className="mx-auto w-full max-w-[520px]"
-                  width={1024}
-                  height={1024}
-                />
-              </div>
-            </div>
-          </div>
-        </Container>
-      </div>
-      <ContactForm
-        isOpen={isContactOpen}
-        onClose={() => setIsContactOpen(false)}
-        title="Join the Waitlist"
-        formType="compute_waitlist"
-      />
-    </>
-  )
-}

src/pages/gpu/GpuHero.tsx

@@ -1,125 +1,38 @@
 'use client'
 
-import { useId, useState } from 'react'
-
 import { Button } from '../../components/Button'
-import { Container } from '../../components/Container'
-import ContactForm from '../../components/ContactForm'
-
-function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
-  const id = useId()
 
+export function GpuHero() {
   return (
-    <div {...props}>
-      <svg
-        viewBox="0 0 1026 1026"
-        fill="none"
-        aria-hidden="true"
-        className="absolute inset-0 h-full w-full animate-spin-slow"
-      >
-        <path
-          d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
-          stroke="#D4D4D4"
-          strokeOpacity="0.7"
+    <div className="relative bg-white">
+      <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/gpuhero.png"
+          className="size-full object-cover"
         />
-        <path
-          d="M513 1025C230.23 1025 1 795.77 1 513"
-          stroke={`url(#${id}-gradient-1)`}
-          strokeLinecap="round"
-        />
-        <defs>
-          <linearGradient
-            id={`${id}-gradient-1`}
-            x1="1"
-            y1="513"
-            x2="1"
-            y2="1025"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#06b6d4" />
-            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
-          </linearGradient>
-        </defs>
-      </svg>
-      <svg
-        viewBox="0 0 1026 1026"
-        fill="none"
-        aria-hidden="true"
-        className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
-      >
-        <path
-          d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
-          stroke="#D4D4D4"
-          strokeOpacity="0.7"
-        />
-        <path
-          d="M913 513c0 220.914-179.086 400-400 400"
-          stroke={`url(#${id}-gradient-2)`}
-          strokeLinecap="round"
-        />
-        <defs>
-          <linearGradient
-            id={`${id}-gradient-2`}
-            x1="913"
-            y1="513"
-            x2="913"
-            y2="913"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stopColor="#06b6d4" />
-            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
-          </linearGradient>
-        </defs>
-      </svg>
+       
+      </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">GPU</h2>
+          <p className="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">The energy behind intelligence.</p>
+          <p className="mt-6 text-base/7 text-gray-600">
+            Mycelium GPU unifies distributed acceleration into a single sovereign fabric — turning fragmented hardware into one adaptive intelligence layer.
+            Run AI, ML, and rendering workloads anywhere, from edge to core, with deterministic performance and transparent cost.
+            No silos. No intermediaries. Just raw, verifiable power — orchestrated through code, not control.
+          </p>
+          <div className="mt-8">
+            <Button
+              href="#"
+              className="inline-flex rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            >
+              {' '}
+              Unify Your GPU Power{' '}
+            </Button>
+          </div>
+        </div>
+      </div>
     </div>
   )
 }
-
-export function GpuHero() {
-  const [isContactOpen, setIsContactOpen] = useState(false)
-
-  return (
-    <>
-      <div className="overflow-hidden pb-24 lg:py-32 lg:pb-0">
-        <Container>
-          <div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
-            <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
-              <h1 className="text-4xl font-medium tracking-tight text-gray-900 lg:text-6xl">
-                Mycelium GPU
-              </h1>
-              <h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
-                Decentralized GPU resources for AI and rendering.
-              </h2>
-              <p className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
-                Access a global network of GPU providers for your intensive computing tasks, from machine learning to complex graphical rendering.
-              </p>
-              <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
-                <Button variant="solid" color="cyan" onClick={() => setIsContactOpen(true)}>
-                  Join the Waitlist
-                </Button>
-              </div>
-            </div>
-            <div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">
-              <BackgroundIllustration className="absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12" />
-              <div className="mx-auto h-[420px] max-w-[640px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:absolute lg:-inset-x-10 lg:-top-24 lg:h-auto lg:pt-10 xl:-bottom-36">
-                <img
-                  src="/images/network_icon.png"
-                  alt="Mycelium GPU illustration"
-                  className="mx-auto w-full max-w-[520px]"
-                  width={1024}
-                  height={1024}
-                />
-              </div>
-            </div>
-          </div>
-        </Container>
-      </div>
-      <ContactForm
-        isOpen={isContactOpen}
-        onClose={() => setIsContactOpen(false)}
-        title="Join the Waitlist"
-        formType="gpu_waitlist"
-      />
-    </>
-  )
-}

src/pages/home/HomeAurora.tsx

@@ -7,7 +7,7 @@ export function HomeAurora() {
   return (
     <div
       style={{
-        backgroundImage: "url(/images/mchip3.webp)",
+        backgroundImage: "url(/images/homehero1.png)",
         backgroundSize: "cover",
         backgroundPosition: "center",
       }}