92 lines
3.7 KiB
TypeScript
92 lines
3.7 KiB
TypeScript
import { motion } from "framer-motion";
|
|
import { MessageSquare, Clock, Shield } from "lucide-react";
|
|
|
|
export function Features() {
|
|
const containerVariants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: { staggerChildren: 0.2 }
|
|
}
|
|
};
|
|
|
|
const itemVariants = {
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: { opacity: 1, y: 0, transition: { duration: 0.6 } }
|
|
};
|
|
|
|
return (
|
|
<section id="features" className="py-24 bg-secondary">
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl md:text-[48px] font-bold text-primary mb-4">
|
|
A New Standard for Practice
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
|
Everything you need to run your office, handled intuitively.
|
|
</p>
|
|
</div>
|
|
|
|
<motion.div
|
|
className="grid md:grid-cols-3 gap-8"
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={{ once: true, margin: "-100px" }}
|
|
>
|
|
{/* Feature 1 */}
|
|
<motion.div
|
|
variants={itemVariants}
|
|
className="bg-white rounded-3xl p-8 shadow-sm border border-border hover:shadow-lg hover:-translate-y-1 transition-all duration-300 group"
|
|
data-testid="feature-card-1"
|
|
>
|
|
<div className="w-14 h-14 bg-primary/5 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-primary/10 transition-colors">
|
|
<MessageSquare className="w-7 h-7 text-primary" />
|
|
</div>
|
|
<h3 className="text-2xl font-bold text-primary mb-4">
|
|
Real Intuitive Interface
|
|
</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
Chat with our AI agent to check eligibility and claims using your own words. No clicking around. Increase your work efficiency more than 10 times.
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Feature 2 */}
|
|
<motion.div
|
|
variants={itemVariants}
|
|
className="bg-white rounded-3xl p-8 shadow-sm border border-border hover:shadow-lg hover:-translate-y-1 transition-all duration-300 group"
|
|
data-testid="feature-card-2"
|
|
>
|
|
<div className="w-14 h-14 bg-accent/20 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-accent/30 transition-colors">
|
|
<Clock className="w-7 h-7 text-primary" />
|
|
</div>
|
|
<h3 className="text-2xl font-bold text-primary mb-4">
|
|
24/7 Patient Connection
|
|
</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
After-hours messaging and calling handled automatically by AI, in your way. Never miss any patient inquiry.
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Feature 3 */}
|
|
<motion.div
|
|
variants={itemVariants}
|
|
className="bg-white rounded-3xl p-8 shadow-sm border border-border hover:shadow-lg hover:-translate-y-1 transition-all duration-300 group"
|
|
data-testid="feature-card-3"
|
|
>
|
|
<div className="w-14 h-14 bg-green-100 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-green-200 transition-colors">
|
|
<Shield className="w-7 h-7 text-[#158915]" />
|
|
</div>
|
|
<h3 className="text-2xl font-bold text-primary mb-4">
|
|
Your Data, Your Control
|
|
</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
All patient data lives on your local computers. Automatic local and remote backup — always secure, always yours.
|
|
</p>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|