70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
'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's advancements in Agentic infrastructure support private, secure, and
|
|
autonomous Agents that connect, learn, and grow with you.
|
|
</H5>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|