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

2025-10-22 18:46:21 +02:00
parent 1f0f18105e
commit ce33e0f7c3
4 changed files with 73 additions and 3 deletions
--- a/src/pages/home/HomeHeroLight2.tsx
+++ b/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>
+  )
+}