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

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