feat: add background video and enhance hover effects in CTA and GetStarted components

This commit is contained in:
2025-09-16 14:05:51 +02:00
parent 979a6523fa
commit 13ecc4d2ec
3 changed files with 36 additions and 12 deletions

View File

@@ -6,25 +6,37 @@ export function CallToAction() {
return (
<section
id="get-free-shares-today"
className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
className="relative overflow-hidden py-20 sm:py-28"
>
<div className="absolute left-20 top-1/2 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2">
<video
autoPlay
loop
muted
playsInline
className="absolute top-0 left-0 w-full h-full object-cover z-0"
>
<source src="/videos/cta.mp4" type="video/mp4" />
</video>
<div className="absolute top-0 left-0 w-full h-full bg-black opacity-50 z-10"></div>
<div className="absolute left-20 top-1/2 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2 z-20">
<CircleBackground color="#fff" className="animate-spin-slower" />
</div>
<Container className="relative">
<Container className="relative z-20">
<div className="mx-auto max-w-md sm:text-center">
<h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">
Decentralized AI Agents that are Truly Yours
Decentralized AI Agents that are Truly Yours
</h2>
<p className="mt-4 text-lg text-gray-300">
Why hand out your intelligence to centralized giants when you can build your own. Ready to own your intelligence?
Why hand out your intelligence to centralized giants when you can
build your own. Ready to own your intelligence?
</p>
<div className="mt-8 flex justify-center gap-x-6">
<Button
variant="solid"
href="#">Book a Meeting</Button>
<Button href="#"
variant="outline">Join the Waitlist</Button>
<Button variant="solid" href="#">
Book a Meeting
</Button>
<Button href="#" variant="outline">
Join the Waitlist
</Button>
</div>
</div>
</Container>