UI Screens updated

2026-01-22 11:27:35 +05:30
parent 34e2c61edd
commit 37835cf5c9
9 changed files with 1301 additions and 83 deletions
--- a/app/components/sections/AIVoiceSoap.tsx
+++ b/app/components/sections/AIVoiceSoap.tsx
@@ -0,0 +1,88 @@
+"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>
+    );
+}