89 lines
4.8 KiB
TypeScript
89 lines
4.8 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { Mic, CheckCircle2 } from "lucide-react";
|
|
|
|
export default function AIVoiceSoap() {
|
|
return (
|
|
<section id="voice-soap" className="py-24 relative overflow-hidden">
|
|
<div className="container mx-auto px-6">
|
|
<div className="flex flex-col md:flex-row items-center gap-16">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -50 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="flex-1 space-y-8"
|
|
>
|
|
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-primary text-sm font-semibold">
|
|
<Mic className="w-4 h-4" />
|
|
<span>AI Voice Intelligence</span>
|
|
</div>
|
|
|
|
<h2 className="text-4xl md:text-5xl font-bold leading-tight">
|
|
From <span className="text-gradient">Voice</span> to Professional <span className="text-gradient">SOAP</span> Notes Instantly
|
|
</h2>
|
|
|
|
<p className="text-lg text-foreground/60 leading-relaxed max-w-xl">
|
|
Focus on your patients, not your paperwork. Our advanced AI listens to your clinical conversations and generates structured, accurate SOAP notes in real-time.
|
|
</p>
|
|
|
|
<div className="space-y-4">
|
|
{[
|
|
"Real-time clinical voice transcription",
|
|
"Automated SOAP structure generation",
|
|
"Medical terminology specialization",
|
|
"HIPAA-compliant data processing"
|
|
].map((item, i) => (
|
|
<div key={i} className="flex items-center gap-3">
|
|
<CheckCircle2 className="w-5 h-5 text-accent" />
|
|
<span className="text-foreground/80">{item}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="flex-1 relative"
|
|
>
|
|
<div className="glass aspect-square rounded-3xl p-8 flex flex-col justify-center items-center relative group">
|
|
<div className="absolute inset-0 bg-primary/5 rounded-3xl blur-3xl group-hover:bg-primary/10 transition-colors" />
|
|
|
|
<div className="relative z-10 space-y-8 w-full">
|
|
<div className="flex justify-center">
|
|
<div className="w-24 h-24 rounded-full bg-primary/20 flex items-center justify-center animate-pulse-slow">
|
|
<Mic className="w-12 h-12 text-primary" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-center gap-1">
|
|
{Array.from({ length: 20 }).map((_, i) => (
|
|
<motion.div
|
|
key={i}
|
|
animate={{ height: [10, 20 + (i % 5) * 10, 10] }}
|
|
transition={{
|
|
repeat: Infinity,
|
|
duration: 1 + (i % 3) * 0.5,
|
|
ease: "easeInOut"
|
|
}}
|
|
className="w-1 bg-gradient-to-t from-primary to-secondary rounded-full"
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<div className="glass-dense rounded-xl p-4 space-y-2 border border-white/10">
|
|
<div className="h-2 w-3/4 bg-white/10 rounded-full animate-pulse" />
|
|
<div className="h-2 w-full bg-white/10 rounded-full animate-pulse" />
|
|
<div className="h-2 w-1/2 bg-white/10 rounded-full animate-pulse" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|