UI Screens updated

app/components/sections/AIDiagnosis.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Brain, Activity, Search, ShieldCheck } from "lucide-react";
+
+const features = [
+    {
+        title: "Precision Analysis",
+        description: "Deep learning models trained on millions of clinical cases.",
+        icon: Search
+    },
+    {
+        title: "Real-time Insight",
+        description: "Instantaneous diagnostic suggestions based on symptoms.",
+        icon: Activity
+    },
+    {
+        title: "Validated Models",
+        description: "Clinically validated AI ensuring high accuracy rates.",
+        icon: ShieldCheck
+    }
+];
+
+export default function AIDiagnosis() {
+    return (
+        <section id="diagnosis" className="py-24 bg-primary/5 relative">
+            <div className="container mx-auto px-6">
+                <div className="flex flex-col md:flex-row-reverse 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-secondary/10 border border-secondary/20 text-secondary text-sm font-semibold">
+                            <Brain className="w-4 h-4" />
+                            <span>Advanced Analytics</span>
+                        </div>
+
+                        <h2 className="text-4xl md:text-5xl font-bold leading-tight">
+                            AI-Powered <span className="text-gradient">Diagnosis</span> with Unmatched Precision
+                        </h2>
+
+                        <p className="text-lg text-foreground/60 leading-relaxed max-w-xl">
+                            Elevate your diagnostic accuracy with Skyheal&apos;s clinical brain. Our AI analyzes patient data, medical history, and current symptoms to provide actionable insights.
+                        </p>
+
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+                            {features.map((f, i) => (
+                                <div key={i} className="glass p-6 rounded-2xl group hover:border-primary/50 transition-colors">
+                                    <f.icon className="w-8 h-8 text-primary mb-4 group-hover:scale-110 transition-transform" />
+                                    <h3 className="font-bold text-lg mb-2">{f.title}</h3>
+                                    <p className="text-sm text-foreground/60">{f.description}</p>
+                                </div>
+                            ))}
+                        </div>
+                    </motion.div>
+
+                    <motion.div
+                        initial={{ opacity: 0, scale: 0.8 }}
+                        whileInView={{ opacity: 1, scale: 1 }}
+                        transition={{ duration: 0.8 }}
+                        className="flex-1"
+                    >
+                        <div className="relative group">
+                            <div className="absolute inset-0 bg-secondary/10 rounded-full blur-[100px] animate-pulse-slow" />
+                            <div className="relative glass aspect-square rounded-[3rem] overflow-hidden flex items-center justify-center p-12 border-white/5">
+                                <div className="absolute inset-0 opacity-20 pointer-events-none">
+                                    <div className="h-full w-full bg-[radial-gradient(#3b82f6_1px,transparent_1px)] [background-size:20px_20px]" />
+                                </div>
+                                <motion.div
+                                    animate={{
+                                        scale: [1, 1.05, 1],
+                                        rotate: [0, 5, -5, 0]
+                                    }}
+                                    transition={{ repeat: Infinity, duration: 8 }}
+                                >
+                                    <Brain className="w-48 h-48 text-primary drop-shadow-[0_0_80px_rgba(59,130,246,0.5)]" />
+                                </motion.div>
+
+                                {/* Orbital Elements */}
+                                {[...Array(3)].map((_, i) => (
+                                    <motion.div
+                                        key={i}
+                                        animate={{ rotate: 360 }}
+                                        transition={{ repeat: Infinity, duration: 10 + i * 5, ease: "linear" }}
+                                        className="absolute border border-white/5 rounded-full"
+                                        style={{
+                                            width: `${200 + i * 80}px`,
+                                            height: `${200 + i * 80}px`
+                                        }}
+                                    />
+                                ))}
+                            </div>
+                        </div>
+                    </motion.div>
+                </div>
+            </div>
+        </section>
+    );
+}