131 lines
6.4 KiB
TypeScript
131 lines
6.4 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>
|
|
|
|
{/* Mock UI preview */}
|
|
<motion.div
|
|
className="mt-20 max-w-5xl mx-auto rounded-2xl overflow-hidden shadow-2xl shadow-primary/10 border border-border bg-white"
|
|
initial={{ opacity: 0, y: 40 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.5 }}
|
|
>
|
|
<div className="h-12 bg-secondary flex items-center px-4 gap-2 border-b border-border">
|
|
<div className="w-3 h-3 rounded-full bg-red-400" />
|
|
<div className="w-3 h-3 rounded-full bg-amber-400" />
|
|
<div className="w-3 h-3 rounded-full bg-green-400" />
|
|
<div className="ml-4 h-6 w-64 bg-white rounded-md opacity-50 flex items-center px-2">
|
|
<div className="text-[10px] text-muted-foreground font-mono">my-dental-software.app</div>
|
|
</div>
|
|
</div>
|
|
<div className="p-8 grid md:grid-cols-3 gap-6 bg-secondary/30">
|
|
<div className="md:col-span-2 space-y-4">
|
|
<div className="flex gap-4">
|
|
<div className="w-8 h-8 rounded-full bg-primary/10 flex-shrink-0" />
|
|
<div className="bg-white p-4 rounded-2xl rounded-tl-sm shadow-sm border border-border text-sm max-w-md">
|
|
Check John Smith
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-4 justify-end">
|
|
<div className="bg-white border border-border rounded-xl shadow-sm text-sm w-72 flex flex-col">
|
|
<div className="p-5 flex-1 space-y-2">
|
|
<div className="font-semibold text-primary text-base">John Smith</div>
|
|
<div className="text-muted-foreground">Insurance: Delta Dental</div>
|
|
</div>
|
|
<div className="border-t border-border px-5 py-4 flex gap-3">
|
|
<button data-testid="button-confirm" className="flex-1 bg-primary text-accent text-xs font-semibold py-2 rounded-full hover:opacity-90 transition-opacity">Confirm</button>
|
|
<button data-testid="button-cancel" className="flex-1 border border-border text-muted-foreground text-xs font-semibold py-2 rounded-full hover:bg-secondary transition-colors">Cancel</button>
|
|
</div>
|
|
</div>
|
|
<div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
|
|
<div className="w-3 h-3 bg-accent rounded-sm" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl shadow-sm border border-border p-5 h-full">
|
|
<h3 className="font-semibold text-sm mb-4 text-primary">Patient Summary</h3>
|
|
<div className="space-y-3">
|
|
<div className="h-2 w-full bg-secondary rounded-full" />
|
|
<div className="h-2 w-4/5 bg-secondary rounded-full" />
|
|
<div className="h-2 w-5/6 bg-secondary rounded-full" />
|
|
<div className="pt-4 mt-4 border-t border-border space-y-3">
|
|
<div className="flex justify-between items-center">
|
|
<div className="h-2 w-16 bg-secondary rounded-full" />
|
|
<div className="h-4 w-12 bg-accent/20 rounded-md" />
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<div className="h-2 w-20 bg-secondary rounded-full" />
|
|
<div className="h-4 w-12 bg-accent/20 rounded-md" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|