72 lines
2.9 KiB
TypeScript
72 lines
2.9 KiB
TypeScript
import { motion } from "framer-motion";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
export function Hero() {
|
|
return (
|
|
<section id="hero" className="relative pt-24 pb-32 overflow-hidden">
|
|
{/* Decorative background shapes */}
|
|
<div className="absolute top-0 right-0 -mr-48 -mt-48 w-96 h-96 rounded-full bg-accent/10 blur-3xl" />
|
|
<div className="absolute bottom-0 left-0 -ml-48 -mb-48 w-[40rem] h-[40rem] rounded-full bg-primary/5 blur-3xl" />
|
|
|
|
<div className="max-w-7xl mx-auto px-6 relative z-10">
|
|
<motion.div
|
|
className="max-w-4xl mx-auto text-center"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, staggerChildren: 0.1 }}
|
|
>
|
|
<motion.h1
|
|
className="text-5xl md:text-[64px] font-bold tracking-tight text-primary leading-[1.1] mb-6"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.1 }}
|
|
>
|
|
Chat and Go.
|
|
</motion.h1>
|
|
|
|
<motion.h2
|
|
className="text-2xl md:text-3xl font-medium text-muted-foreground mb-8"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
>
|
|
No CDT Code Search. No Paying for Third Parties.
|
|
</motion.h2>
|
|
|
|
<motion.p
|
|
className="text-lg md:text-xl text-primary/80 mb-10 max-w-2xl mx-auto leading-relaxed"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.3 }}
|
|
>
|
|
Complete your administrative tasks by using your natural language — just type what you need, and our AI reads it, gathers the required data, and gets it done automatically.
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
className="flex flex-col sm:flex-row items-center justify-center gap-4"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.4 }}
|
|
>
|
|
<Button
|
|
size="lg"
|
|
className="rounded-full bg-primary text-primary-foreground hover:bg-primary/90 h-14 px-8 text-lg w-full sm:w-auto shadow-lg shadow-primary/20"
|
|
data-testid="hero-cta-primary"
|
|
>
|
|
Get Started Free
|
|
</Button>
|
|
<Button
|
|
size="lg"
|
|
className="rounded-full bg-accent text-accent-foreground hover:bg-accent/90 h-14 px-8 text-lg w-full sm:w-auto shadow-lg shadow-accent/20"
|
|
data-testid="hero-cta-secondary"
|
|
>
|
|
Book a Demo
|
|
</Button>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|