91 lines
3.8 KiB
TypeScript
91 lines
3.8 KiB
TypeScript
import { motion } from "framer-motion";
|
|
|
|
export function HowItWorks() {
|
|
const steps = [
|
|
{
|
|
num: "01",
|
|
title: "Type your task in plain English",
|
|
desc: '"Check if John Smith is eligible for a crown"'
|
|
},
|
|
{
|
|
num: "02",
|
|
title: "Our AI reads it",
|
|
desc: "Looks up the data, and handles the task automatically"
|
|
},
|
|
{
|
|
num: "03",
|
|
title: "Get results instantly",
|
|
desc: "No CDT code lookup, no third-party logins"
|
|
}
|
|
];
|
|
|
|
return (
|
|
<section id="how-it-works" className="py-32 bg-primary text-white">
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className="grid md:grid-cols-2 gap-16 items-center">
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -30 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8 }}
|
|
>
|
|
<h2 className="text-4xl md:text-[48px] font-bold mb-6 text-white leading-tight">
|
|
How It Works
|
|
</h2>
|
|
<p className="text-xl text-white/70 mb-12">
|
|
Forget endless menus and nested screens. We built a system that understands what you want to do.
|
|
</p>
|
|
|
|
<div className="space-y-10">
|
|
{steps.map((step, idx) => (
|
|
<div key={idx} className="flex gap-6 items-start" data-testid={`step-${idx + 1}`}>
|
|
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-accent/20 flex items-center justify-center text-accent font-mono text-xl font-bold">
|
|
{step.num}
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-semibold mb-2">{step.title}</h3>
|
|
<p className="text-white/60">{step.desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 30 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
className="relative"
|
|
>
|
|
<div className="absolute inset-0 bg-accent/10 rounded-[40px] transform rotate-3" />
|
|
<div className="relative bg-white text-primary p-8 rounded-[40px] shadow-2xl border border-white/10">
|
|
<div className="flex flex-col gap-6 h-[400px]">
|
|
{/* Chat Mockup */}
|
|
<div className="self-end bg-secondary p-4 rounded-2xl rounded-tr-none text-sm max-w-[80%]">
|
|
Check if John Smith is eligible for a crown
|
|
</div>
|
|
<div className="self-start bg-primary text-white p-4 rounded-2xl rounded-tl-none text-sm max-w-[80%] shadow-md relative">
|
|
<div className="absolute -left-2 top-0 w-4 h-4 bg-primary transform rotate-45" />
|
|
<span className="text-accent font-medium mb-1 block">AI Assistant</span>
|
|
Done. John Smith is eligible for D2740 (Crown - porcelain/ceramic) through Delta Dental. Copay is 20%. Remaining annual maximum: $1,250.
|
|
</div>
|
|
<div className="self-end bg-secondary p-4 rounded-2xl rounded-tr-none text-sm max-w-[80%] mt-4">
|
|
Great, file the claim for Michael's extraction yesterday.
|
|
</div>
|
|
<div className="self-start bg-primary text-white p-4 rounded-2xl rounded-tl-none text-sm max-w-[80%] shadow-md relative">
|
|
<div className="absolute -left-2 top-0 w-4 h-4 bg-primary transform rotate-45" />
|
|
<span className="text-accent font-medium mb-1 block">AI Assistant</span>
|
|
Claim filed for Michael (D7140) to MetLife. Sent at 9:14 AM.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|