feat: add cloud video background and update StackSection styling to dark theme

public/images/phone-frame.svg

@@ -214,7 +214,7 @@
     </filter>
     <radialGradient id="b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(0 727 -642 0 184 1)">
-      <stop stop-color="#FAFAFA" />
+      <stop stop-color="#FFFFFF" />
       <stop offset="1" stop-color="#E6E6E6" />
     </radialGradient>
     <radialGradient id="c" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"

src/components/Layout.tsx

@@ -4,7 +4,7 @@ import { Footer } from './Footer'
 
 export function Layout() {
   return (
-    <div className="bg-gray-50 antialiased" style={{ fontFamily: 'var(--font-inter)' }}>
+    <div className="bg-white antialiased" style={{ fontFamily: 'var(--font-inter)' }}>
       <Header />
       <main>
         <Outlet />

src/images/phone-frame.svg

@@ -214,7 +214,7 @@
     </filter>
     <radialGradient id="b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(0 727 -642 0 184 1)">
-      <stop stop-color="#FAFAFA" />
+      <stop stop-color="#FFFFFF" />
       <stop offset="1" stop-color="#E6E6E6" />
     </radialGradient>
     <radialGradient id="c" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"

src/pages/agents/GallerySection.tsx

@@ -48,7 +48,7 @@ export function GallerySection() {
   const prev = () => setActive((i) => wrap(0, galleryItems.length, i - 1))
 
   return (
-    <div className="bg-[#FAFAFA]">
+    <div className="bg-white">
       <div className="relative isolate pt-8 pb-0 text-center w-full">
         <FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
           <div className="mx-auto max-w-5xl lg:mt-12">

src/pages/home/HomeHero.tsx

@@ -1,36 +1,37 @@
-import { motion } from 'framer-motion'
-import { TypeAnimation } from 'react-type-animation'
-import { Container } from '../../components/Container'
+'use client'
+
+import { H1, P } from '@/components/Texts'
+import { FadeIn } from '@/components/FadeIn'
+import { Button } from '@/components/Button'
 
 export function HomeHero() {
   return (
-    <section className="relative bg-white py-20 lg:py-32">
-      <Container>
-        <div className="mx-auto max-w-4xl text-center">
-          <h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
-            <TypeAnimation
-              sequence={[
-                'Decentralized Autonomous Agentic Cloud.',
-                1000,
-              ]}
-              wrapper="span"
-              speed={50}
-              repeat={0}
-            />
-          </h1>
-
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 1, delay: 1 }}
-            className="mt-8"
-          >
-            <p className="text-lg lg:text-xl text-gray-600">
-              Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
-            </p>
-          </motion.div>
+    <div
+      className="relative isolate overflow-hidden bg-white"
+      style={{
+        backgroundImage: 'url(/images/cloud.png)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }}
+    >
+      <div className="mx-auto max-w-7xl px-6  py-24 lg:py-32 lg:flex lg:px-8">
+        <div className="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8">
+          <H1 color="primary" className="mt-10 text-5xl font-semibold tracking-tight text-pretty sm:text-7xl">
+            Decentralized Autonomous Agentic Cloud.
+          </H1>
+          <P color="secondary" className="mt-8 text-lg font-medium text-pretty sm:text-xl/8">
+            Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
+          </P>
+          <div className="mt-10 flex items-center gap-x-6">
+            <Button variant="solid" color="cyan" href="#">
+              Get started
+            </Button>
+            <a href="#" className="text-sm/6 font-semibold text-gray-50">
+              Learn more <span aria-hidden="true">→</span>
+            </a>
+          </div>
         </div>
-      </Container>
-    </section>
+      </div>
+    </div>
   )
 }

src/pages/home/HomeHeroLight2.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { useRef, useEffect } from 'react'
+import { H1, H5 } from '@/components/Texts'
+
+export function HomeHeroLight2() {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (video) {
+      video.playbackRate = 0.4;
+      const playPromise = video.play();
+      if (playPromise !== undefined) {
+        playPromise.catch(error => {
+          console.error("Video autoplay was prevented:", error);
+        });
+      }
+    }
+  }, []);
+
+  return (
+    <section className="relative h-screen overflow-hidden">
+      {/* Background video */}
+      <video
+        ref={videoRef}
+        src="/videos/cloud.mp4"
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="absolute inset-0 h-full w-full object-cover z-[-10]"
+      />
+
+      {/* Global soft wash + blur (Temporarily commented out for debugging) */}
+      {/* <div className="absolute inset-0 bg-white opacity-30 backdrop-blur-md z-0" /> */}
+
+      {/* Center “halo” for text legibility (Temporarily commented out for debugging) */}
+      {/* <div
+        className="absolute inset-0 z-0"
+        style={{
+          background:
+            'radial-gradient(ellipse at center, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.88) 15%, rgba(255,255,255,0.72) 35%, rgba(255,255,255,0.08) 75%)'
+        }}
+      /> */}
+
+      {/* Content */}
+      <div className="relative z-10 h-full flex items-center justify-center">
+        <div className="mx-auto max-w-4xl text-center px-6 lg:px-8">
+          
+          <H1 
+            className="pt-6"
+            style={{ textShadow: '0 2px 8px rgba(0,0,0,0.08)' }}
+          >
+            Decentralized Autonomous Agentic Cloud.
+          </H1>
+
+          <H5
+            className="mt-8"
+            style={{ textShadow: '0 1px 4px rgba(0,0,0,0.06)' }}
+          >
+            Mycelium&apos;s advancements in Agentic infrastructure support private, secure, and
+            autonomous Agents that connect, learn, and grow with you.
+          </H5>
+        </div>
+      </div>
+    </section>
+  )
+}

src/pages/home/HomePage.tsx

@@ -2,6 +2,7 @@ import { AnimatedSection } from '../../components/AnimatedSection'
 import { HomeHero } from './HomeHero'
 import { WorldMapSection } from './WorldMapSection'
 import { StackSection } from './StackSection'
+import { HomeHeroLight2 } from './HomeHeroLight2'
 
 export default function HomePage() {
   return (
@@ -9,7 +10,7 @@ export default function HomePage() {
       <AnimatedSection>
         <HomeHero />
       </AnimatedSection>
-      
+
       <AnimatedSection>
         <WorldMapSection />
       </AnimatedSection>

src/pages/home/StackSection.tsx

@@ -24,7 +24,7 @@ const stackData = [
 
 export function StackSection() {
   return (
-    <section className="relative bg-white py-20 lg:py-32">
+    <section className="relative bg-black py-20 lg:py-32">
       <Container>
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-12 items-start">
           {/* Left Column - Text */}
@@ -35,7 +35,7 @@ export function StackSection() {
             transition={{ duration: 0.5 }}
             className="lg:col-span-1"
           >
-            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white">
               The Mycelium Stack
             </h2>
             <p className="mt-6 text-lg text-gray-600">