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/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 />