46 lines
1.8 KiB
TypeScript
46 lines
1.8 KiB
TypeScript
import { motion } from 'framer-motion';
|
|
|
|
export const HeroSection = () => {
|
|
return (
|
|
<section className="relative snap-start">
|
|
<div className="relative flex h-screen w-full flex-col overflow-hidden bg-black">
|
|
<video className="absolute inset-0 h-full w-full object-cover" autoPlay muted loop playsInline>
|
|
<source src="/videos/hero.mp4" type="video/mp4" />
|
|
</video>
|
|
|
|
<div className="relative z-10 flex h-full w-full flex-col justify-between px-6 pb-16 pt-32 sm:px-10 lg:px-16">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, ease: 'easeOut' }}
|
|
className="max-w-3xl space-y-6"
|
|
>
|
|
|
|
<h1 className="text-4xl font-medium leading-tight text-white sm:text-5xl md:text-6xl">
|
|
The Planet's Sovereign Agentic Cloud
|
|
</h1>
|
|
<p className="max-w-xl text-lg text-white">
|
|
A new generation of decentralized cloud and AI infrastructure.
|
|
<br />
|
|
Secure, scalable, efficient, and sovereign by design. Deploy your own datacenter, scale globally, and turn infrastructure into profit.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, ease: 'easeOut', delay: 0.4 }}
|
|
className="flex items-center justify-between text-xs uppercase tracking-[0.3em] text-white"
|
|
>
|
|
<span>Scroll to explore</span>
|
|
<div className="flex items-center gap-3">
|
|
<span className="h-px w-16 bg-white/60" />
|
|
<span>Landing overview</span>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|