diff --git a/public/videos/cloud.mp4 b/public/videos/cloud.mp4 new file mode 100644 index 0000000..dddb48e Binary files /dev/null and b/public/videos/cloud.mp4 differ diff --git a/src/pages/home/HomeHeroLight2.tsx b/src/pages/home/HomeHeroLight2.tsx new file mode 100644 index 0000000..cd13f00 --- /dev/null +++ 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(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 ( +
+ {/* Background video */} +
+ ) +} diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx index a457d00..ce849e8 100644 --- a/src/pages/home/HomePage.tsx +++ b/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() { - + diff --git a/src/pages/home/StackSection.tsx b/src/pages/home/StackSection.tsx index d6acce9..6ff5c46 100644 --- a/src/pages/home/StackSection.tsx +++ b/src/pages/home/StackSection.tsx @@ -24,7 +24,7 @@ const stackData = [ export function StackSection() { return ( -
+
{/* Left Column - Text */} @@ -35,7 +35,7 @@ export function StackSection() { transition={{ duration: 0.5 }} className="lg:col-span-1" > -

+

The Mycelium Stack