59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
'use client'
|
|
|
|
import { useRef, useEffect } from 'react'
|
|
|
|
export function HomeHeroLight2() {
|
|
const videoRef = useRef<HTMLVideoElement>(null)
|
|
|
|
useEffect(() => {
|
|
if (videoRef.current) videoRef.current.playbackRate = 0.4
|
|
}, [])
|
|
|
|
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 */}
|
|
<div className="absolute inset-0 bg-white opacity-30 backdrop-blur-md z-0" />
|
|
|
|
{/* Center “halo” for text legibility */}
|
|
<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 text-5xl sm:text-7xl font-semibold tracking-tight leading-tight text-gray-900"
|
|
style={{ textShadow: '0 2px 8px rgba(0,0,0,0.08)' }}
|
|
>
|
|
Decentralized Autonomous Agentic Cloud.
|
|
</h1>
|
|
|
|
<p
|
|
className="mt-8 text-lg sm:text-xl font-medium text-gray-800/90 leading-relaxed"
|
|
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.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|