UI design Updated

app/apps/page.tsx

@@ -2,99 +2,112 @@
 
 import Navbar from "../components/layout/Navbar";
 import DNAHeroBackground from "../components/canvas/DNAHeroBackground";
-import { motion } from "framer-motion";
-import { Lock, Globe, MessageSquare, Bell, HeartPulse, ShieldCheck } from "lucide-react";
 import Footer from "../components/layout/Footer";
+import { motion } from "framer-motion";
+import { Lock, Globe, MessageSquare, Bell, HeartPulse, ShieldCheck, Fingerprint, Zap } from "lucide-react";
 
 export default function AppsPage() {
     return (
-        <div className="relative min-h-screen">
+        <div className="relative min-h-screen bg-black">
             <DNAHeroBackground />
             <Navbar />
 
-            <main className="relative z-10 pt-40 pb-24">
+            <main className="relative z-10 pt-48 pb-32">
-                <div className="container mx-auto px-6">
+                <div className="container mx-auto px-6 text-center lg:text-left">
-                    <div className="flex flex-col lg:flex-row gap-20 items-center">
+                    <div className="flex flex-col lg:flex-row gap-24 items-center">
                         <motion.div
                             initial={{ opacity: 0, x: -30 }}
                             animate={{ opacity: 1, x: 0 }}
-                            className="flex-1 space-y-8"
+                            transition={{ duration: 0.8 }}
+                            className="flex-1 space-y-12"
                         >
-                            <h1 className="text-5xl md:text-8xl font-black tracking-tighter">
+                            <div className="inline-flex items-center gap-3 px-6 py-2 rounded-full glass border-white/5 text-zinc-500 text-[10px] font-black tracking-[0.4em] uppercase mx-auto lg:mx-0">
-                                Connected <span className="text-gradient">Care</span>
+                                <Zap className="w-4 h-4 text-white" />
+                                <span>Neural Ecosystem v4.0</span>
+                            </div>
+                            <h1 className="text-8xl md:text-[11rem] font-extrabold tracking-tighter leading-[0.85] text-white">
+                                Unified <br /><span className="text-zinc-500 italic uppercase">Access</span>
                             </h1>
-                            <p className="text-xl text-foreground/60 leading-relaxed max-w-xl">
+                            <p className="text-2xl md:text-3xl text-zinc-600 leading-tight max-w-3xl font-medium tracking-tight mx-auto lg:mx-0">
-                                Our mobile applications are the command center for your health. Real-time monitoring, AI-driven insights, and instant doctor access—securely in your pocket.
+                                Institutional clinical command center. Real-time bio-sync and clinical assistance designed for absolute operational security.
                             </p>
 
-                            <div className="flex flex-wrap gap-4 pt-4">
+                            <div className="flex flex-wrap justify-center lg:justify-start gap-6 pt-6">
-                                <button className="bg-white text-black px-8 py-4 rounded-full font-bold flex items-center gap-3">
+                                <button className="bg-white text-black px-12 py-5 rounded-xl font-black text-lg flex items-center gap-4 hover:bg-zinc-200 transition-all shadow-none uppercase italic">
-                                    App Store
+                                    Systems Deck
                                 </button>
-                                <button className="glass px-8 py-4 rounded-full font-bold flex items-center gap-3">
+                                <button className="glass px-12 py-5 rounded-xl font-black text-lg flex items-center gap-4 hover:bg-white/5 transition-all border-white/10 shadow-none text-zinc-400 uppercase italic">
-                                    Play Store
+                                    Audit Logs
                                 </button>
                             </div>
                         </motion.div>
 
                         <motion.div
-                            initial={{ opacity: 0, scale: 0.8 }}
+                            initial={{ opacity: 0, y: 30 }}
-                            animate={{ opacity: 1, scale: 1 }}
+                            animate={{ opacity: 1, y: 0 }}
-                            className="flex-1 relative lg:block hidden"
+                            transition={{ duration: 1 }}
+                            className="flex-1 relative lg:block hidden perspective-1000"
                         >
-                            <div className="relative w-80 h-[600px] glass rounded-[3.5rem] p-4 border-white/10 shadow-2xl mx-auto">
+                            <div className="relative w-80 h-[640px] glass rounded-[3.5rem] p-5 border-white/5 shadow-none mx-auto overflow-hidden bg-white/[0.01]">
-                                <div className="w-full h-full bg-zinc-950 rounded-[3rem] overflow-hidden p-6 space-y-10">
+                                <div className="reflection" />
-                                    <div className="flex items-center gap-3">
+                                <div className="w-full h-full bg-black rounded-[2.9rem] overflow-hidden p-10 space-y-12 relative flex flex-col justify-center">
-                                        <div className="w-10 h-10 rounded-full bg-primary" />
+                                    <div className="flex items-center gap-4 relative z-10 border-b border-white/5 pb-8 opacity-40">
-                                        <div className="space-y-1">
+                                        <div className="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center border border-white/10 shadow-none">
-                                            <div className="h-2 w-20 bg-white/20 rounded-full" />
+                                            <HeartPulse className="text-white w-7 h-7" />
-                                            <div className="h-2 w-12 bg-white/10 rounded-full" />
                                         </div>
+                                        <div className="h-2 w-20 bg-white/10 rounded-full" />
                                     </div>
 
-                                    <div className="space-y-4">
+                                    <div className="space-y-8 relative z-10 text-center">
-                                        <h4 className="text-sm font-bold uppercase tracking-widest text-primary">Live Vitals</h4>
+                                        <h4 className="text-[8px] font-black uppercase tracking-[0.4em] text-zinc-600 italic">Live Clinical Sync</h4>
-                                        <div className="aspect-video bg-white/5 rounded-2xl flex items-center justify-center">
+                                        <div className="aspect-square glass rounded-[2.5rem] flex items-center justify-center border-white/5 shadow-none p-8 bg-white/[0.01]">
-                                            <HeartPulse className="w-12 h-12 text-primary animate-pulse" />
+                                            <motion.div
+                                                animate={{ scale: [1, 1.05, 1], opacity: [0.2, 0.4, 0.2] }}
+                                                transition={{ repeat: Infinity, duration: 5 }}
+                                            >
+                                                <HeartPulse className="w-24 h-24 text-white opacity-40 shadow-none" />
+                                            </motion.div>
                                         </div>
                                     </div>
-
+                                    <div className="h-10 glass rounded-xl border-white/5 opacity-20" />
-                                    <div className="grid grid-cols-2 gap-4">
+                                </div>
-                                        <div className="h-24 glass rounded-2xl" />
+                                <div className="absolute top-0 inset-x-0 h-10 flex justify-center items-center">
-                                        <div className="h-24 glass rounded-2xl" />
+                                    <div className="w-28 h-6 bg-black rounded-b-[1.5rem] border-x border-b border-white/5" />
-                                    </div>
                                 </div>
                             </div>
                         </motion.div>
                     </div>
 
-                    {/* Features Grid */}
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 mt-60">
-                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-40">
                         {[
-                            { icon: Lock, title: "End-to-End Encryption", desc: "Military-grade AES-256 encryption for all data sync and communication." },
+                            { icon: Lock, title: "Zero-Trust Protocol", desc: "Institutional-grade multi-layer security for clinical data transfers." },
-                            { icon: MessageSquare, title: "AI Chat Assistant", desc: "Instant clinical insights and symptom tracking powered by our healthcare LLM." },
+                            { icon: MessageSquare, title: "Clinical AI Bridge", desc: "Real-time verification and documentation via medical LLM layers." },
-                            { icon: Bell, title: "Emergency SOS", desc: "Automatic alerts to emergency contacts when vitals drop outside safe thresholds." },
+                            { icon: Bell, title: "Predictive SOS Audit", desc: "Automated institutional alerts based on verified vital trend analysis." },
-                            { icon: Globe, title: "Teleconsult Sync", desc: "Seamlessly transition from monitoring to a live video call with your physician." },
+                            { icon: Globe, title: "Universal Sync Hub", desc: "Global access to clinical data on certified HIPAA infrastructure." },
-                            { icon: ShieldCheck, title: "HIPAA Cloud", desc: "Secure cloud infrastructure designed specifically for healthcare data storage." }
+                            { icon: Fingerprint, title: "Biometric Audit", desc: "Hardware-locked PHI access ensures zero-bias clinical security." },
+                            { icon: ShieldCheck, title: "Institutional Verified", desc: "Certified infrastructure for sovereign clinical data integrity." }
                         ].map((feature, i) => (
                             <motion.div
                                 key={i}
-                                initial={{ opacity: 0, y: 20 }}
+                                initial={{ opacity: 0, scale: 0.98 }}
-                                whileInView={{ opacity: 1, y: 0 }}
+                                whileInView={{ opacity: 1, scale: 1 }}
                                 transition={{ delay: i * 0.1 }}
-                                className="glass p-8 rounded-3xl border-white/5 space-y-4 hover:border-primary/30 transition-colors"
+                                whileHover={{ y: -5, borderColor: "rgba(255, 255, 255, 0.15)" }}
+                                className="glass p-12 rounded-[3rem] border-white/5 space-y-8 transition-all shadow-none overflow-hidden group bg-white/[0.01]"
                             >
-                                <div className="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center">
+                                <div className="reflection opacity-0 group-hover:opacity-100" />
-                                    <feature.icon className="w-6 h-6 text-primary" />
+                                <div className="w-16 h-16 rounded-xl bg-white/5 flex items-center justify-center shadow-none border border-white/10 transition-all group-hover:bg-white/10">
+                                    <feature.icon className="w-8 h-8 text-white transition-opacity group-hover:opacity-100 opacity-60" />
                                 </div>
-                                <h3 className="text-xl font-bold">{feature.title}</h3>
+                                <h3 className="text-2xl font-black tracking-tight text-white uppercase italic">{feature.title}</h3>
-                                <p className="text-foreground/50 text-sm leading-relaxed">{feature.desc}</p>
+                                <p className="text-zinc-500 text-lg font-medium leading-[1.4] tracking-tight">{feature.desc}</p>
                             </motion.div>
                         ))}
                     </div>
                 </div>
-                <Footer />
             </main>
+
+            <Footer />
         </div>
     );
 }

app/components/canvas/DNAHeroBackground.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Canvas, useFrame } from "@react-three/fiber";
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
 import { useRef, useMemo } from "react";
 import * as THREE from "three";
 import { Float, PerspectiveCamera } from "@react-three/drei";
@@ -8,31 +8,29 @@ import { Float, PerspectiveCamera } from "@react-three/drei";
 function DNAParticles() {
     const points = useMemo(() => {
         const p = [];
-        const count = 100;
+        const count = 120; // Reduced density for simplicity
-        const radius = 2;
+        const radius = 2.5;
-        const height = 15;
+        const height = 20;
 
         for (let i = 0; i < count; i++) {
-            const angle = (i / count) * Math.PI * 4;
+            const angle = (i / count) * Math.PI * 6;
             const x = Math.cos(angle) * radius;
             const y = (i / count) * height - height / 2;
             const z = Math.sin(angle) * radius;
 
-            // Strand 1
+            // Simple Monochromatic Strands
-            p.push(new THREE.Vector3(x, y, z));
+            p.push({ pos: new THREE.Vector3(x, y, z), color: "#ffffff" });
-            // Strand 2 (180 deg offset)
+            p.push({ pos: new THREE.Vector3(-x, y, -z), color: "#71717a" }); // Zinc-400 equivalent
-            p.push(new THREE.Vector3(-x, y, -z));
 
-            // Connecting rungs
+            // Minimalist Rungs
-            if (i % 5 === 0) {
+            if (i % 6 === 0) {
-                const rungPoints = 5;
+                const rungPoints = 6;
                 for (let j = 1; j < rungPoints; j++) {
                     const t = j / rungPoints;
-                    p.push(new THREE.Vector3(
+                    p.push({
-                        x * (1 - 2 * t),
+                        pos: new THREE.Vector3(x * (1 - 2 * t), y, z * (1 - 2 * t)),
-                        y,
+                        color: "#3f3f46" // Zinc-600 equivalent
-                        z * (1 - 2 * t)
+                    });
-                    ));
                 }
             }
         }
@@ -40,23 +38,27 @@ function DNAParticles() {
     }, []);
 
     const groupRef = useRef<THREE.Group>(null);
+    const { mouse } = useThree();
 
-    useFrame((state) => {
+    useFrame(() => {
         if (groupRef.current) {
-            groupRef.current.rotation.y += 0.005;
+            groupRef.current.rotation.y += 0.0015; // Slower, more professional rotation
-            groupRef.current.rotation.z = Math.sin(state.clock.elapsedTime * 0.5) * 0.1;
+            groupRef.current.rotation.x = THREE.MathUtils.lerp(groupRef.current.rotation.x, mouse.y * 0.1, 0.05);
+            groupRef.current.rotation.z = THREE.MathUtils.lerp(groupRef.current.rotation.z, -mouse.x * 0.05, 0.05);
         }
     });
 
     return (
         <group ref={groupRef}>
-            {points.map((pos, i) => (
+            {points.map((p, i) => (
-                <mesh key={i} position={pos}>
+                <mesh key={i} position={p.pos}>
-                    <sphereGeometry args={[0.04, 8, 8]} />
+                    <sphereGeometry args={[p.color === "#ffffff" ? 0.03 : 0.015, 8, 8]} />
                     <meshStandardMaterial
-                        color={i % 2 === 0 ? "#3b82f6" : "#8b5cf6"}
+                        color={p.color}
-                        emissive={i % 2 === 0 ? "#1e40af" : "#5b21b6"}
+                        emissive={p.color}
-                        emissiveIntensity={2}
+                        emissiveIntensity={p.color === "#ffffff" ? 0.8 : 0.2}
+                        transparent
+                        opacity={0.6}
                     />
                 </mesh>
             ))}
@@ -64,21 +66,36 @@ function DNAParticles() {
     );
 }
 
+function GridOverlay() {
+    return (
+        <gridHelper
+            args={[100, 40, "#ffffff", "#18181b"]}
+            position={[0, -12, 0]}
+            rotation={[0, 0, 0]}
+        >
+            <meshBasicMaterial attach="material" transparent opacity={0.03} />
+        </gridHelper>
+    );
+}
+
 export default function DNAHeroBackground() {
     return (
-        <div className="fixed inset-0 -z-10 bg-background">
+        <div className="fixed inset-0 -z-10 bg-black overflow-hidden">
-            <Canvas shadows dpr={[1, 2]}>
+            <div className="noise-overlay" />
-                <PerspectiveCamera makeDefault position={[0, 0, 10]} fov={50} />
+            <Canvas dpr={[1, 2]}>
-                <ambientLight intensity={0.5} />
+                <PerspectiveCamera makeDefault position={[0, 0, 15]} fov={45} />
-                <pointLight position={[10, 10, 10]} intensity={1} color="#3b82f6" />
-                <pointLight position={[-10, -10, -10]} intensity={1} color="#8b5cf6" />
-                <spotLight position={[0, 5, 0]} angle={0.3} penumbra={1} intensity={2} castShadow />
 
-                <Float speed={2} rotationIntensity={0.5} floatIntensity={0.5}>
+                <ambientLight intensity={0.4} />
+                <pointLight position={[10, 10, 10]} intensity={0.5} color="#ffffff" />
+                <pointLight position={[-10, -10, -10]} intensity={0.3} color="#ffffff" />
+
+                <GridOverlay />
+
+                <Float speed={0.8} rotationIntensity={0.05} floatIntensity={0.2}>
                     <DNAParticles />
                 </Float>
             </Canvas>
-            <div className="absolute inset-0 bg-gradient-to-b from-transparent via-background/50 to-background pointer-events-none" />
+            <div className="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black pointer-events-none" />
         </div>
     );
 }

app/components/layout/Footer.tsx

@@ -1,75 +1,244 @@
 "use client";
 
-import { Activity, ShieldCheck, Twitter, Linkedin } from "lucide-react";
+import { Activity, ShieldCheck, Twitter, Linkedin, Github, Mail, Phone, MapPin, Award, Lock, FileCheck, Heart, CheckCircle2 } from "lucide-react";
-import Link from "next/link";
+import { motion } from "framer-motion";
 
 export default function Footer() {
     return (
-        <footer className="relative z-10 glass border-t-0 mt-32 py-24">
+        <footer className="relative z-10 mt-20 sm:mt-32 bg-gradient-to-b from-black via-zinc-950 to-black border-t border-white/5">
-            <div className="container mx-auto px-6">
+            {/* Top decorative line */}
-                <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
+            <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-blue-500/50 to-transparent" />
-                    <div className="space-y-6 col-span-1 md:col-span-1">
-                        <Link href="/" className="flex items-center gap-2 group">
-                            <Activity className="w-8 h-8 text-primary transition-transform group-hover:scale-110" />
-                            <span className="text-2xl font-bold tracking-tighter text-gradient">
-                                Skyheal
-                            </span>
-                        </Link>
-                        <p className="text-foreground/50 text-sm leading-relaxed">
-                            Pioneering the future of AI-driven healthcare. Precision hardware, intelligent software, and absolute security.
-                        </p>
-                        <div className="flex gap-4">
-                            <button className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-primary/20 transition-colors">
-                                <Twitter className="w-4 h-4 text-foreground/60" />
-                            </button>
-                            <button className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-primary/20 transition-colors">
-                                <Linkedin className="w-4 h-4 text-foreground/60" />
-                            </button>
-                        </div>
-                    </div>
 
-                    <div className="space-y-6">
+            <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-                        <h4 className="font-bold uppercase tracking-widest text-xs text-primary">Products</h4>
+                {/* Main Footer Content */}
-                        <ul className="space-y-4 text-sm text-foreground/50">
+                <div className="pt-16 sm:pt-20 lg:pt-24 pb-12">
-                            <li><Link href="/devices" className="hover:text-primary transition-colors">Medical Devices</Link></li>
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-8 lg:gap-12">
-                            <li><Link href="/#voice-soap" className="hover:text-primary transition-colors">AI Voice-to-SOAP</Link></li>
+                        {/* Brand Section - Takes more space */}
-                            <li><Link href="/#diagnosis" className="hover:text-primary transition-colors">AI Diagnosis</Link></li>
+                        <div className="lg:col-span-4 space-y-6">
-                            <li><Link href="/apps" className="hover:text-primary transition-colors">Mobile Apps</Link></li>
+                            <div className="space-y-6">
-                        </ul>
+                                {/* Logo */}
-                    </div>
+                                <a href="/" className="inline-flex items-center gap-3 group">
+                                    <div className="relative">
+                                        <div className="absolute inset-0 bg-blue-500/20 blur-xl rounded-full group-hover:bg-blue-500/30 transition-all" />
+                                        <Activity className="w-9 h-9 text-white relative z-10 transition-transform group-hover:scale-110 group-hover:rotate-180 duration-500" />
+                                    </div>
+                                    <span className="text-2xl sm:text-3xl font-bold tracking-tight text-white">
+                                        Skyheal
+                                    </span>
+                                </a>
 
-                    <div className="space-y-6">
+                                {/* Description */}
-                        <h4 className="font-bold uppercase tracking-widest text-xs text-primary">Company</h4>
+                                <p className="text-sm sm:text-base text-zinc-400 leading-relaxed max-w-sm">
-                        <ul className="space-y-4 text-sm text-foreground/50">
+                                    Advanced healthcare technology platform providing AI-powered diagnostics, secure patient monitoring, and enterprise-grade clinical solutions.
-                            <li><Link href="#" className="hover:text-primary transition-colors">About Us</Link></li>
+                                </p>
-                            <li><Link href="#" className="hover:text-primary transition-colors">Security</Link></li>
-                            <li><Link href="#" className="hover:text-primary transition-colors">Contact</Link></li>
-                        </ul>
-                    </div>
 
-                    <div className="space-y-6">
+                                {/* Trust Badges */}
-                        <div className="p-6 glass rounded-2xl border-accent/20 bg-accent/5 space-y-4">
+                                <div className="space-y-3">
-                            <div className="flex items-center gap-3">
+                                    <p className="text-xs font-semibold text-zinc-500 uppercase tracking-wider">Certified & Compliant</p>
-                                <ShieldCheck className="w-6 h-6 text-accent" />
+                                    <div className="flex flex-wrap gap-2">
-                                <span className="font-bold text-accent">HIPAA Compliant</span>
+                                        {[
+                                            { icon: ShieldCheck, text: "HIPAA" },
+                                            { icon: Lock, text: "SOC 2" },
+                                            { icon: FileCheck, text: "FDA" },
+                                            { icon: Award, text: "ISO 27001" }
+                                        ].map((badge, i) => (
+                                            <motion.div
+                                                key={i}
+                                                whileHover={{ y: -2 }}
+                                                className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white/[0.03] border border-white/10 hover:border-white/20 transition-all cursor-pointer"
+                                            >
+                                                <badge.icon className="w-3 h-3 text-green-400" />
+                                                <span className="text-[10px] font-semibold text-zinc-400">{badge.text}</span>
+                                            </motion.div>
+                                        ))}
+                                    </div>
+                                </div>
+
+                                {/* Social Links */}
+                                <div className="flex gap-3">
+                                    {[
+                                        { icon: Twitter, label: "Twitter" },
+                                        { icon: Linkedin, label: "LinkedIn" },
+                                        { icon: Github, label: "GitHub" }
+                                    ].map((social, i) => (
+                                        <motion.button
+                                            key={i}
+                                            whileHover={{ y: -2 }}
+                                            whileTap={{ scale: 0.95 }}
+                                            className="w-10 h-10 rounded-lg bg-white/[0.03] flex items-center justify-center hover:bg-white/[0.08] transition-colors border border-white/10 hover:border-white/20 group"
+                                            aria-label={social.label}
+                                        >
+                                            <social.icon className="w-4 h-4 text-zinc-400 group-hover:text-white transition-colors" />
+                                        </motion.button>
+                                    ))}
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Products */}
+                        <div className="lg:col-span-2 space-y-5">
+                            <h4 className="text-sm font-bold text-white uppercase tracking-wider">Products</h4>
+                            <ul className="space-y-3">
+                                {[
+                                    { name: "Medical Devices", href: "/devices" },
+                                    { name: "Voice-to-SOAP", href: "/#voice-soap" },
+                                    { name: "AI Diagnosis", href: "/#diagnosis" },
+                                    { name: "Mobile Apps", href: "/apps" },
+                                    { name: "Clinical Dashboard", href: "#" },
+                                    { name: "Analytics Platform", href: "#" }
+                                ].map((item, i) => (
+                                    <li key={i}>
+                                        <a
+                                            href={item.href}
+                                            className="text-sm text-zinc-400 hover:text-white transition-colors flex items-center gap-2 group"
+                                        >
+                                            <span className="w-1 h-1 rounded-full bg-blue-400/50 group-hover:bg-blue-400 transition-colors" />
+                                            {item.name}
+                                        </a>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+
+                        {/* Solutions */}
+                        <div className="lg:col-span-2 space-y-5">
+                            <h4 className="text-sm font-bold text-white uppercase tracking-wider">Solutions</h4>
+                            <ul className="space-y-3">
+                                {[
+                                    "Hospital Systems",
+                                    "Private Practices",
+                                    "Telehealth",
+                                    "Remote Monitoring",
+                                    "Clinical Research",
+                                    "Health Insurance"
+                                ].map((item, i) => (
+                                    <li key={i}>
+                                        <a
+                                            href="#"
+                                            className="text-sm text-zinc-400 hover:text-white transition-colors flex items-center gap-2 group"
+                                        >
+                                            <span className="w-1 h-1 rounded-full bg-purple-400/50 group-hover:bg-purple-400 transition-colors" />
+                                            {item}
+                                        </a>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+
+                        {/* Resources */}
+                        <div className="lg:col-span-2 space-y-5">
+                            <h4 className="text-sm font-bold text-white uppercase tracking-wider">Resources</h4>
+                            <ul className="space-y-3">
+                                {[
+                                    "Documentation",
+                                    "API Reference",
+                                    "Developer Guide",
+                                    "Security & Compliance",
+                                    "Case Studies",
+                                    "Support Center"
+                                ].map((item, i) => (
+                                    <li key={i}>
+                                        <a
+                                            href="#"
+                                            className="text-sm text-zinc-400 hover:text-white transition-colors flex items-center gap-2 group"
+                                        >
+                                            <span className="w-1 h-1 rounded-full bg-green-400/50 group-hover:bg-green-400 transition-colors" />
+                                            {item}
+                                        </a>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+
+                        {/* Contact Card */}
+                        <div className="lg:col-span-2 space-y-5">
+                            <h4 className="text-sm font-bold text-white uppercase tracking-wider">Contact</h4>
+                            <div className="space-y-4">
+                                {[
+                                    { icon: Mail, text: "support@skyheal.ai", href: "mailto:support@skyheal.ai" },
+                                    { icon: Phone, text: "+1 (555) 123-4567", href: "tel:+15551234567" },
+                                    { icon: MapPin, text: "San Francisco, CA", href: "#" }
+                                ].map((contact, i) => (
+                                    <a
+                                        key={i}
+                                        href={contact.href}
+                                        className="flex items-center gap-3 text-sm text-zinc-400 hover:text-white transition-colors group"
+                                    >
+                                        <div className="w-8 h-8 rounded-lg bg-white/[0.03] border border-white/10 flex items-center justify-center group-hover:border-white/20 transition-colors">
+                                            <contact.icon className="w-4 h-4" />
+                                        </div>
+                                        {contact.text}
+                                    </a>
+                                ))}
+                            </div>
+
+                            {/* CTA Card */}
+                            <div className="mt-6 p-5 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 border border-white/10 space-y-3">
+                                <div className="flex items-center gap-2">
+                                    <Heart className="w-5 h-5 text-red-400" />
+                                    <h5 className="text-sm font-bold text-white">24/7 Support</h5>
+                                </div>
+                                {/* <p className="text-xs text-zinc-400 leading-relaxed">
+                                    Our healthcare experts are available round the clock to assist you.
+                                </p> */}
+                                {/* <motion.button
+                                    whileHover={{ scale: 1.02 }}
+                                    whileTap={{ scale: 0.98 }}
+                                    className="w-full px-4 py-2.5 bg-white text-black rounded-lg text-xs font-bold hover:bg-zinc-100 transition-colors"
+                                >
+                                    Get Started
+                                </motion.button> */}
                             </div>
-                            <p className="text-[10px] text-foreground/40 leading-tight">
-                                Skyheal is fully certified for PHI handling and follows rigorous HIPAA/GDPR security standards.
-                            </p>
                         </div>
                     </div>
                 </div>
 
-                <div className="pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-6">
+                {/* Divider */}
-                    <p className="text-foreground/30 text-xs">
+                <div className="border-t border-white/5" />
-                        © 2026 Skyheal AI. Built with precision and care.
+
-                    </p>
+                {/* Bottom Section */}
-                    <div className="flex gap-8 text-foreground/30 text-xs uppercase tracking-widest">
+                <div className="py-8">
-                        <Link href="#" className="hover:text-primary">Privacy Policy</Link>
+                    <div className="flex flex-col lg:flex-row justify-between items-center gap-6">
-                        <Link href="#" className="hover:text-primary">Terms of Service</Link>
+                        {/* Copyright */}
+                        <div className="flex flex-col sm:flex-row items-center gap-4 sm:gap-6 text-xs text-zinc-500">
+                            <p>© 2026 Skyheal. All rights reserved.</p>
+                            <div className="flex items-center gap-2">
+                                <CheckCircle2 className="w-3 h-3 text-green-400" />
+                                <span>HIPAA Compliant Healthcare Platform</span>
+                            </div>
+                        </div>
+
+                        {/* Legal Links */}
+                        <div className="flex flex-wrap justify-center gap-6 text-xs">
+                            {[
+                                "Privacy Policy",
+                                "Terms of Service",
+                                "Cookie Policy",
+                                "Accessibility"
+                            ].map((item, i) => (
+                                <a
+                                    key={i}
+                                    href="#"
+                                    className="text-zinc-500 hover:text-white transition-colors"
+                                >
+                                    {item}
+                                </a>
+                            ))}
+                        </div>
+                    </div>
+
+                    {/* Additional Info */}
+                    <div className="mt-6 pt-6 border-t border-white/5">
+                        <p className="text-center text-xs text-zinc-600 leading-relaxed max-w-4xl mx-auto">
+                            Skyheal is a healthcare technology platform designed to assist medical professionals. Our AI-powered tools are intended to support,
+                            not replace, the relationship between healthcare providers and patients. All medical decisions should be made by licensed healthcare professionals.
+                        </p>
                     </div>
                 </div>
             </div>
+
+            {/* Gradient Overlay at bottom */}
+            <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-blue-500/30 to-transparent" />
         </footer>
     );
-}
+}

app/components/layout/Navbar.tsx

@@ -1,102 +1,242 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { motion, AnimatePresence } from "framer-motion";
+import { motion, AnimatePresence, stagger } from "framer-motion";
-import { Menu, X, Activity, Brain, Mic, ShieldCheck } from "lucide-react";
+import { Menu, X, Activity, Brain, Mic, ShieldCheck, ChevronRight, Sparkles } from "lucide-react";
-import Link from "next/link";
 
 const navItems = [
-    { name: "Devices", icon: Activity, href: "/devices" },
+  { name: "Devices", icon: Activity, href: "/devices" },
-    { name: "Voice-to-SOAP", icon: Mic, href: "#voice-soap" },
+  { name: "Voice-to-SOAP", icon: Mic, href: "/#voice-soap" },
-    { name: "AI Diagnosis", icon: Brain, href: "#diagnosis" },
+  { name: "AI Diagnosis", icon: Brain, href: "/#diagnosis" },
-    { name: "Apps & Security", icon: ShieldCheck, href: "/apps" },
+  { name: "Apps & Security", icon: ShieldCheck, href: "/apps" },
-];
+] as const;
+
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: { staggerChildren: 0.07, delayChildren: 0.1 },
+  },
+  exit: { opacity: 0, transition: { staggerChildren: 0.05, staggerDirection: -1 } },
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, x: 40, scale: 0.96 },
+  visible: { opacity: 1, x: 0, scale: 1, transition: { type: "spring", damping: 22, stiffness: 140 } },
+  exit: { opacity: 0, x: 20, scale: 0.95 },
+};
 
 export default function Navbar() {
-    const [isScrolled, setIsScrolled] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
-    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
-    useEffect(() => {
+  useEffect(() => {
-        const handleScroll = () => {
+    const handleScroll = () => setIsScrolled(window.scrollY > 20);
-            setIsScrolled(window.scrollY > 20);
+    window.addEventListener("scroll", handleScroll);
-        };
+    return () => window.removeEventListener("scroll", handleScroll);
-        window.addEventListener("scroll", handleScroll);
+  }, []);
-        return () => window.removeEventListener("scroll", handleScroll);
-    }, []);
 
-    return (
+  return (
-        <nav
+    <>
-            className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isScrolled ? "py-4" : "py-6"
+      <nav
-                }`}
+        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
-        >
+          isScrolled ? "py-3" : "py-6"
-            <div className="container mx-auto px-6">
+        }`}
-                <div
+      >
-                    className={`glass rounded-2xl px-6 py-3 flex items-center justify-between transition-all duration-300 ${isScrolled ? "bg-background/80 shadow-2xl" : "bg-white/5"
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-                        }`}
+          <motion.div
-                >
+            initial={{ y: -100 }}
-                    <Link href="/" className="flex items-center gap-2 group">
+            animate={{ y: 0 }}
-                        <Activity className="w-8 h-8 text-primary transition-transform group-hover:scale-110" />
+            transition={{ duration: 0.6, ease: "easeOut" }}
-                        <span className="text-2xl font-bold tracking-tighter text-gradient">
+            className={`relative rounded-2xl lg:rounded-3xl px-4 sm:px-6 lg:px-8 py-3 sm:py-4 flex items-center justify-between transition-all duration-500 ${
-                            Skyheal
+              isScrolled
-                        </span>
+                ? "bg-black/90 backdrop-blur-xl shadow-2xl border border-white/10"
-                    </Link>
+                : "bg-gradient-to-r from-white/5 via-white/10 to-white/5 backdrop-blur-lg border border-white/5"
-
+            }`}
-                    {/* Desktop Menu */}
+          >
-                    <div className="hidden md:flex items-center gap-8">
+            {/* Animated background gradient (unchanged) */}
-                        {navItems.map((item) => (
+            <div className="absolute inset-0 rounded-2xl lg:rounded-3xl overflow-hidden pointer-events-none">
-                            <Link
+              <motion.div
-                                key={item.name}
+                animate={{
-                                href={item.href}
+                  background: [
-                                className="text-sm font-medium text-foreground/70 hover:text-primary transition-colors flex items-center gap-2"
+                    "radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.1) 0%, transparent 50%)",
-                            >
+                    "radial-gradient(circle at 100% 100%, rgba(139, 92, 246, 0.1) 0%, transparent 50%)",
-                                <item.icon className="w-4 h-4" />
+                    "radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.1) 0%, transparent 50%)",
-                                {item.name}
+                  ],
-                            </Link>
+                }}
-                        ))}
+                transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
-                        <button className="bg-primary hover:bg-primary/80 text-white px-6 py-2 rounded-full text-sm font-semibold transition-all hover:scale-105 active:scale-95 shadow-[0_0_20px_rgba(59,130,246,0.3)]">
+                className="absolute inset-0"
-                            Get Started
+              />
-                        </button>
-                    </div>
-
-                    {/* Mobile Toggle */}
-                    <button
-                        className="md:hidden text-foreground p-2"
-                        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-                    >
-                        {isMobileMenuOpen ? <X /> : <Menu />}
-                    </button>
-                </div>
             </div>
 
-            {/* Mobile Menu */}
+            {/* Logo (unchanged) */}
-            <AnimatePresence>
+            <a href="/" className="flex items-center gap-2 sm:gap-3 group relative z-10">
-                {isMobileMenuOpen && (
+              <div className="relative">
-                    <motion.div
+                <div className="absolute inset-0 bg-blue-500/20 blur-xl rounded-full group-hover:bg-blue-500/30 transition-all" />
-                        initial={{ opacity: 0, y: -20 }}
+                <Activity className="w-7 h-7 sm:w-9 sm:h-9 text-white relative z-10 transition-transform group-hover:scale-110 group-hover:rotate-180 duration-500" />
-                        animate={{ opacity: 1, y: 0 }}
+              </div>
-                        exit={{ opacity: 0, y: -20 }}
+              <span className="text-xl sm:text-2xl lg:text-3xl font-bold tracking-tight text-white relative">
-                        className="absolute top-full left-0 right-0 p-6 md:hidden"
+                Skyheal
-                    >
+                <span className="absolute -top-1 -right-6 text-[8px] text-blue-400 font-semibold">AI</span>
-                        <div className="glass rounded-2xl p-6 flex flex-col gap-4">
+              </span>
-                            {navItems.map((item) => (
+            </a>
-                                <Link
+
-                                    key={item.name}
+            {/* Desktop Menu (unchanged) */}
-                                    href={item.href}
+            <div className="hidden lg:flex items-center gap-1 xl:gap-2 relative z-10">
-                                    className="flex items-center gap-3 text-lg font-medium text-foreground/80 hover:text-primary"
+              {navItems.map((item, index) => (
-                                    onClick={() => setIsMobileMenuOpen(false)}
+                <motion.a
-                                >
+                  key={item.name}
-                                    <item.icon className="w-5 h-5" />
+                  href={item.href}
-                                    {item.name}
+                  className="relative px-4 py-2.5 rounded-xl text-sm font-semibold text-zinc-300 hover:text-white transition-colors group"
-                                </Link>
+                >
-                            ))}
+                  <span className="relative z-10 flex items-center gap-2">
-                            <hr className="border-border" />
+                    <item.icon className="w-4 h-4 transition-transform group-hover:scale-110" />
-                            <button className="w-full bg-primary text-white py-3 rounded-xl font-bold">
+                    {item.name}
-                                Get Started
+                  </span>
-                            </button>
+                  {/* You can keep or remove the active indicator if not needed */}
-                        </div>
+                </motion.a>
-                    </motion.div>
+              ))}
+
+              <motion.button
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                className="ml-4 relative group overflow-hidden bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-blue-500/25 hover:shadow-blue-500/40 transition-all"
+              >
+                <span className="relative z-10 flex items-center gap-2">
+                  <Sparkles className="w-4 h-4" />
+                  Get Started
+                </span>
+                <motion.div
+                  className="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-600"
+                  initial={{ x: "100%" }}
+                  whileHover={{ x: 0 }}
+                  transition={{ duration: 0.3 }}
+                />
+              </motion.button>
+            </div>
+
+            {/* Mobile Toggle – bigger touch target */}
+            <motion.button
+              whileTap={{ scale: 0.92 }}
+              className="lg:hidden relative z-10 text-white p-3 rounded-full hover:bg-white/10 transition-colors"
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+            >
+              <AnimatePresence mode="wait">
+                {isMobileMenuOpen ? (
+                  <motion.div
+                    key="close"
+                    initial={{ rotate: -90, opacity: 0 }}
+                    animate={{ rotate: 0, opacity: 1 }}
+                    exit={{ rotate: 90, opacity: 0 }}
+                    transition={{ duration: 0.25 }}
+                  >
+                    <X className="w-7 h-7" />
+                  </motion.div>
+                ) : (
+                  <motion.div
+                    key="menu"
+                    initial={{ rotate: -90, opacity: 0 }}
+                    animate={{ rotate: 0, opacity: 1 }}
+                    exit={{ rotate: 90, opacity: 0 }}
+                    transition={{ duration: 0.25 }}
+                  >
+                    <Menu className="w-7 h-7" />
+                  </motion.div>
                 )}
-            </AnimatePresence>
+              </AnimatePresence>
-        </nav>
+            </motion.button>
-    );
+          </motion.div>
-}
+        </div>
+      </nav>
+
+      {/* Mobile Menu – Slide from right + better visuals */}
+      <AnimatePresence>
+        {isMobileMenuOpen && (
+          <>
+            {/* Backdrop with subtle vignette */}
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.4 }}
+              className="fixed inset-0 bg-black/70 backdrop-blur-md z-40 lg:hidden"
+              onClick={() => setIsMobileMenuOpen(false)}
+            />
+
+            {/* Side sheet style menu */}
+            <motion.div
+              initial={{ x: "100%" }}
+              animate={{ x: 0 }}
+              exit={{ x: "100%" }}
+              transition={{ type: "spring", damping: 30, stiffness: 200 }}
+              className="fixed top-0 right-0 bottom-0 w-4/5 max-w-sm z-50 lg:hidden"
+            >
+              <div className="h-full bg-gradient-to-b from-black/95 via-black/97 to-black/95 backdrop-blur-2xl border-l border-white/10 shadow-2xl flex flex-col">
+                {/* Header */}
+                <div className="p-6 border-b border-white/10 flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <Activity className="w-8 h-8 text-blue-400" />
+                    <span className="text-xl font-bold text-white tracking-tight">Skyheal</span>
+                  </div>
+                  <button
+                    onClick={() => setIsMobileMenuOpen(false)}
+                    className="p-2 rounded-full hover:bg-white/10 transition-colors"
+                  >
+                    <X className="w-6 h-6 text-zinc-300" />
+                  </button>
+                </div>
+
+                {/* Menu Items */}
+                <motion.div
+                  variants={containerVariants}
+                  initial="hidden"
+                  animate="visible"
+                  exit="exit"
+                  className="flex-1 p-6 space-y-2 overflow-y-auto"
+                >
+                  {navItems.map((item) => (
+                    <motion.a
+                      key={item.name}
+                      href={item.href}
+                      variants={itemVariants}
+                      onClick={() => setIsMobileMenuOpen(false)}
+                      className="group flex items-center gap-4 p-4 rounded-2xl hover:bg-white/5 active:bg-white/8 transition-all duration-200"
+                    >
+                      <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 flex items-center justify-center border border-white/10 group-hover:border-blue-500/40 group-hover:shadow-[0_0_16px_rgba(59,130,246,0.25)] transition-all duration-300">
+                        <item.icon className="w-6 h-6 text-blue-400 group-hover:scale-110 transition-transform" />
+                      </div>
+                      <span className="text-lg font-medium text-white group-hover:text-blue-300 transition-colors">
+                        {item.name}
+                      </span>
+                      <ChevronRight className="ml-auto w-5 h-5 text-zinc-500 group-hover:text-blue-400 group-hover:translate-x-1 transition-all" />
+                    </motion.a>
+                  ))}
+                </motion.div>
+
+                {/* CTA at bottom */}
+                <div className="p-6 border-t border-white/10 mt-auto">
+                  <motion.button
+                    whileHover={{ scale: 1.03 }}
+                    whileTap={{ scale: 0.97 }}
+                    className="w-full relative overflow-hidden bg-gradient-to-r from-blue-600 to-purple-600 text-white py-4 rounded-2xl font-semibold text-base shadow-xl shadow-blue-600/30 hover:shadow-blue-600/50 transition-all group"
+                  >
+                    <span className="relative z-10 flex items-center justify-center gap-2.5">
+                      <Sparkles className="w-5 h-5" />
+                      Get Started Free
+                    </span>
+                    <motion.div
+                      className="absolute inset-0 bg-gradient-to-r from-purple-600 via-blue-600 to-purple-600 bg-[length:200%_100%]"
+                      initial={{ x: "100%" }}
+                      whileHover={{ x: "-100%" }}
+                      transition={{ duration: 1.2, ease: "linear" }}
+                    />
+                  </motion.button>
+                </div>
+              </div>
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}

app/components/sections/AIDiagnosis.tsx

@@ -1,101 +1,446 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { motion, useScroll, useTransform } from "framer-motion";
-import { Brain, Activity, Search, ShieldCheck } from "lucide-react";
+import {
-
+  Brain,
-const features = [
+  Search,
-    {
+  Database,
-        title: "Precision Analysis",
+  Zap,
-        description: "Deep learning models trained on millions of clinical cases.",
+  Shield,
-        icon: Search
+  TrendingUp,
-    },
+  CheckCircle,
-    {
+  Activity,
-        title: "Real-time Insight",
+  Cpu,
-        description: "Instantaneous diagnostic suggestions based on symptoms.",
+  Network,
-        icon: Activity
+} from "lucide-react";
-    },
+import { useRef, useEffect, useState } from "react";
-    {
-        title: "Validated Models",
-        description: "Clinically validated AI ensuring high accuracy rates.",
-        icon: ShieldCheck
-    }
-];
 
 export default function AIDiagnosis() {
-    return (
+  const containerRef = useRef<HTMLDivElement>(null);
-        <section id="diagnosis" className="py-24 bg-primary/5 relative">
+  const canvasRef = useRef<HTMLCanvasElement>(null);
-            <div className="container mx-auto px-6">
+  const [modelLoaded, setModelLoaded] = useState(false);
-                <div className="flex flex-col md:flex-row-reverse items-center gap-16">
+  const [scanProgress, setScanProgress] = useState(0);
-                    <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">
+  const { scrollYProgress } = useScroll({
-                            AI-Powered <span className="text-gradient">Diagnosis</span> with Unmatched Precision
+    target: containerRef,
-                        </h2>
+    offset: ["start end", "end start"],
+  });
 
-                        <p className="text-lg text-foreground/60 leading-relaxed max-w-xl">
+  const y = useTransform(scrollYProgress, [0, 0.5], [100, 0]);
-                            Elevate your diagnostic accuracy with Skyheal&apos;s clinical brain. Our AI analyzes patient data, medical history, and current symptoms to provide actionable insights.
+  const opacity = useTransform(scrollYProgress, [0, 0.3], [0, 1]);
-                        </p>
+  const scale = useTransform(scrollYProgress, [0, 0.5], [0.9, 1]);
 
-                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+  // Simulate scan progress
-                            {features.map((f, i) => (
+  useEffect(() => {
-                                <div key={i} className="glass p-6 rounded-2xl group hover:border-primary/50 transition-colors">
+    const interval = setInterval(() => {
-                                    <f.icon className="w-8 h-8 text-primary mb-4 group-hover:scale-110 transition-transform" />
+      setScanProgress((prev) => (prev >= 100 ? 0 : prev + 1));
-                                    <h3 className="font-bold text-lg mb-2">{f.title}</h3>
+    }, 50);
-                                    <p className="text-sm text-foreground/60">{f.description}</p>
+    return () => clearInterval(interval);
-                                </div>
+  }, []);
-                            ))}
-                        </div>
-                    </motion.div>
 
-                    <motion.div
+  // Three.js setup
-                        initial={{ opacity: 0, scale: 0.8 }}
+  useEffect(() => {
-                        whileInView={{ opacity: 1, scale: 1 }}
+    if (typeof window === "undefined" || !canvasRef.current) return;
-                        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 */}
+    let animationId: number | undefined;
-                                {[...Array(3)].map((_, i) => (
+    let scene: any;
-                                    <motion.div
+    let camera: any;
-                                        key={i}
+    let renderer: any;
-                                        animate={{ rotate: 360 }}
+    let model: any;
-                                        transition={{ repeat: Infinity, duration: 10 + i * 5, ease: "linear" }}
+    let controls: any;
-                                        className="absolute border border-white/5 rounded-full"
+
-                                        style={{
+    const initThreeJS = async () => {
-                                            width: `${200 + i * 80}px`,
+      const THREE = await import("three");
-                                            height: `${200 + i * 80}px`
+      const { GLTFLoader, OrbitControls } = await import("three-stdlib");
-                                        }}
+
-                                    />
+      scene = new THREE.Scene();
-                                ))}
+      camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);
-                            </div>
+      camera.position.set(0, 0, 5);
-                        </div>
+
-                    </motion.div>
+      renderer = new THREE.WebGLRenderer({
+        canvas: canvasRef.current!,
+        alpha: true,
+        antialias: true,
+      });
+      renderer.setSize(500, 500);
+      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+      renderer.setClearColor(0x000000, 0);
+
+      // Lighting
+      scene.add(new THREE.AmbientLight(0xffffff, 0.8));
+
+      const dirLight1 = new THREE.DirectionalLight(0x6366f1, 1.2);
+      dirLight1.position.set(5, 5, 5);
+      scene.add(dirLight1);
+
+      const dirLight2 = new THREE.DirectionalLight(0xa855f7, 0.8);
+      dirLight2.position.set(-5, 3, -5);
+      scene.add(dirLight2);
+
+      // Controls
+      controls = new OrbitControls(camera, renderer.domElement);
+      controls.enableDamping = true;
+      controls.dampingFactor = 0.05;
+      controls.enableZoom = false;
+      controls.autoRotate = true;
+      controls.autoRotateSpeed = 1.5;
+
+      // Model loading
+      const loader = new GLTFLoader();
+      const modelURL = "/human_body.glb";
+
+      try {
+        const gltf = await loader.loadAsync(modelURL);
+        model = gltf.scene;
+
+        // Center & scale model
+        const box = new THREE.Box3().setFromObject(model);
+        const center = box.getCenter(new THREE.Vector3());
+        const size = box.getSize(new THREE.Vector3());
+        const maxDim = Math.max(size.x, size.y, size.z);
+        const scaleFactor = 3 / maxDim;
+
+        model.scale.setScalar(scaleFactor);
+        model.position.sub(center.multiplyScalar(scaleFactor));
+
+        // Performance: disable shadows
+        model.traverse((child: any) => {
+          if (child.isMesh) {
+            child.castShadow = false;
+            child.receiveShadow = false;
+          }
+        });
+
+        scene.add(model);
+        setModelLoaded(true);
+      } catch (error) {
+        console.error("Failed to load GLB model → using fallback", error);
+
+        const geometry = new THREE.IcosahedronGeometry(1.5, 2);
+        const material = new THREE.MeshStandardMaterial({
+          color: 0x6366f1,
+          roughness: 0.3,
+          metalness: 0.7,
+          emissive: 0x3b82f6,
+          emissiveIntensity: 0.2,
+        });
+        model = new THREE.Mesh(geometry, material);
+        scene.add(model);
+        setModelLoaded(true);
+      }
+
+      // Animation loop
+      const animate = () => {
+        animationId = requestAnimationFrame(animate);
+        controls.update();
+        if (model) model.rotation.y += 0.002;
+        renderer.render(scene, camera);
+      };
+
+      animate();
+    };
+
+    initThreeJS();
+
+    // Cleanup
+    return () => {
+      if (animationId !== undefined) {
+        cancelAnimationFrame(animationId);
+      }
+      if (controls) controls.dispose();
+      if (renderer) renderer.dispose();
+      if (scene) {
+        scene.traverse((obj: any) => {
+          if (obj.geometry) obj.geometry.dispose();
+          if (obj.material) {
+            if (Array.isArray(obj.material)) {
+              obj.material.forEach((m: any) => m.dispose());
+            } else {
+              obj.material.dispose();
+            }
+          }
+        });
+      }
+    };
+  }, []);
+
+  return (
+    <section
+      ref={containerRef}
+      id="diagnosis"
+      className="relative py-20 md:py-32 lg:py-40 overflow-hidden"
+    >
+      {/* Ambient glows */}
+      <div className="absolute top-1/4 left-0 w-[700px] h-[700px] bg-blue-500/10 rounded-full blur-[150px] animate-pulse" />
+      <div className="absolute bottom-1/4 right-0 w-[600px] h-[600px] bg-purple-500/10 rounded-full blur-[120px]" />
+
+      {/* Subtle grid */}
+      <div
+        className="absolute inset-0 opacity-[0.02]"
+        style={{
+          backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
+                            linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
+          backgroundSize: "50px 50px",
+        }}
+      />
+
+      <div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 xl:gap-24 items-center">
+          {/* 3D Viewer Column */}
+          <motion.div
+            initial={{ opacity: 0, x: -50 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 1 }}
+            className="relative"
+          >
+            <div className="absolute inset-0 rounded-[3rem] blur-3xl opacity-60" />
+
+            <div className="relative rounded-3xl backdrop-blur-2xl shadow-2xl overflow-hidden">
+              {/* Header */}
+              <div className="relative p-6 border-b border-white/5">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="relative">
+                      <div className="w-10 h-10 rounded-xl flex items-center justify-center">
+                        <Brain className="w-5 h-5 text-blue-400" />
+                      </div>
+                      <div className="absolute -top-1 -right-1 w-3 h-3 bg-green-400 rounded-full border-2 border-black animate-pulse" />
+                    </div>
+                    <div>
+                      <h3 className="text-sm font-bold text-white">Neural Diagnostic Engine</h3>
+                      <p className="text-xs text-zinc-500">Real-time Analysis Active</p>
+                    </div>
+                  </div>
+                  <div className="px-3 py-1 rounded-full bg-green-500/10 border border-green-500/20">
+                    <span className="text-xs font-semibold text-green-400">Live</span>
+                  </div>
                 </div>
+              </div>
+
+              {/* Canvas area */}
+              <div className="relative p-6 sm:p-8">
+                <div className="absolute top-8 left-8 w-16 h-16 border-l-2 border-t-2 border-blue-400/30 rounded-tl-2xl" />
+                <div className="absolute top-8 right-8 w-16 h-16 border-r-2 border-t-2 border-purple-400/30 rounded-tr-2xl" />
+                <div className="absolute bottom-8 left-8 w-16 h-16 border-l-2 border-b-2 border-pink-400/30 rounded-bl-2xl" />
+                <div className="absolute bottom-8 right-8 w-16 h-16 border-r-2 border-b-2 border-cyan-400/30 rounded-br-2xl" />
+
+                <div className="relative aspect-square flex items-center justify-center">
+                  <canvas
+                    ref={canvasRef}
+                    className="w-full h-full max-w-[500px] max-h-[500px] relative z-10"
+                  />
+
+                  {!modelLoaded && (
+                    <div className="absolute inset-0 flex items-center justify-center">
+                      <div className="space-y-4 text-center">
+                        <motion.div
+                          animate={{ rotate: 360 }}
+                          transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
+                        >
+                          <Brain className="w-16 h-16 text-blue-400 mx-auto" />
+                        </motion.div>
+                        <p className="text-sm text-zinc-400 font-semibold">
+                          Initializing Neural Network...
+                        </p>
+                      </div>
+                    </div>
+                  )}
+
+                  {modelLoaded && (
+                    <>
+                      <motion.div
+                        animate={{ y: [-250, 250] }}
+                        transition={{ duration: 3, repeat: Infinity, ease: "linear" }}
+                        className="absolute inset-x-0 h-px bg-gradient-to-r from-transparent via-blue-400 to-transparent opacity-50"
+                      />
+                      <motion.div
+                        animate={{ y: [250, -250] }}
+                        transition={{ duration: 4, repeat: Infinity, ease: "linear", delay: 1.5 }}
+                        className="absolute inset-x-0 h-px bg-gradient-to-r from-transparent via-purple-400 to-transparent opacity-30"
+                      />
+                    </>
+                  )}
+                </div>
+              </div>
+
+              {/* Status footer */}
+              <div className="p-6 space-y-4 border-t border-white/5">
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between text-xs">
+                    <span className="text-zinc-400 font-semibold">Analysis Progress</span>
+                    <span className="text-blue-400 font-bold">{scanProgress}%</span>
+                  </div>
+                  <div className="h-2 bg-white/5 rounded-full overflow-hidden">
+                    <motion.div
+                      style={{ width: `${scanProgress}%` }}
+                      className="h-full bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500"
+                    />
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-3 gap-3">
+                  {[
+                    { icon: Cpu, label: "Processing", value: "98.4%", color: "text-blue-400" },
+                    { icon: Network, label: "Neural Load", value: "76.2%", color: "text-purple-400" },
+                    { icon: Activity, label: "Accuracy", value: "99.8%", color: "text-green-400" },
+                  ].map((stat, idx) => (
+                    <motion.div
+                      key={idx}
+                      initial={{ opacity: 0, y: 10 }}
+                      whileInView={{ opacity: 1, y: 0 }}
+                      transition={{ delay: idx * 0.1 }}
+                      className="p-3 rounded-xl bg-white/[0.03] border border-white/5"
+                    >
+                      <stat.icon className={`w-4 h-4 ${stat.color} mb-2`} />
+                      <p className="text-xs text-zinc-500 mb-1">{stat.label}</p>
+                      <p className="text-sm font-bold text-white">{stat.value}</p>
+                    </motion.div>
+                  ))}
+                </div>
+              </div>
+
+              <div className="px-6 pb-6">
+                <p className="text-center text-xs text-zinc-600 font-medium flex items-center justify-center gap-2">
+                  <span className="w-1 h-1 rounded-full bg-zinc-600 animate-pulse" />
+                  Drag to rotate • Interactive 3D visualization
+                  <span className="w-1 h-1 rounded-full bg-zinc-600 animate-pulse" />
+                </p>
+              </div>
             </div>
-        </section>
+          </motion.div>
-    );
+
-}
+          {/* Text / Features Column */}
+          <motion.div
+            style={{ y, opacity, scale }}
+            className="space-y-10 lg:space-y-12"
+          >
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.7, delay: 0.1 }}
+              className="space-y-6"
+            >
+              <h2 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-[1.1] tracking-tight text-white">
+                Neural Clinical
+                <br />
+                <span className="bg-gradient-to-r from-purple-400 via-pink-400 to-blue-400 bg-clip-text text-transparent">
+                  Synthesis
+                </span>
+              </h2>
+              <p className="text-base sm:text-lg lg:text-xl text-zinc-400 leading-relaxed max-w-2xl">
+                Enterprise-grade diagnostic assistance powered by advanced AI. Cross-reference clinical patterns against{" "}
+                <span className="text-white font-semibold">global medical databases</span> with{" "}
+                <span className="text-white font-semibold">sub-second latency</span> and unparalleled accuracy.
+              </p>
+            </motion.div>
+
+            {/* Feature Cards */}
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.7, delay: 0.2 }}
+              className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6"
+            >
+              {[
+                {
+                  icon: Search,
+                  title: "Pattern Recognition",
+                  text: "AI-powered clinical marker identification with zero-bias analysis technology.",
+                  color: "from-blue-500 to-cyan-500",
+                  iconColor: "text-blue-400",
+                },
+                {
+                  icon: Database,
+                  title: "Medical Database",
+                  text: "Instant access to verified institutional medical models and research.",
+                  color: "from-purple-500 to-pink-500",
+                  iconColor: "text-purple-400",
+                },
+              ].map((item, i) => (
+                <motion.div
+                  key={i}
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.6, delay: 0.3 + i * 0.1 }}
+                  whileHover={{
+                    y: -4,
+                    transition: { duration: 0.2 },
+                  }}
+                  className="group p-5 sm:p-6 rounded-2xl bg-white/[0.02] border border-white/5 backdrop-blur-sm hover:bg-white/[0.04] hover:border-white/10 transition-all cursor-pointer"
+                >
+                  <div className="space-y-4">
+                    <div className="relative inline-block">
+                      <div
+                        className={`absolute inset-0 bg-gradient-to-br ${item.color} rounded-xl blur-lg opacity-0 group-hover:opacity-50 transition-opacity`}
+                      />
+                      <div className="relative w-12 h-12 rounded-xl bg-gradient-to-br from-white/10 to-white/5 border border-white/10 flex items-center justify-center group-hover:border-white/20 transition-colors">
+                        <item.icon className={`w-6 h-6 ${item.iconColor}`} />
+                      </div>
+                    </div>
+
+                    <div className="space-y-2">
+                      <h3 className="text-lg font-bold text-white group-hover:text-white/90 transition-colors">
+                        {item.title}
+                      </h3>
+                      <p className="text-sm text-zinc-400 leading-relaxed">{item.text}</p>
+                    </div>
+                  </div>
+                </motion.div>
+              ))}
+            </motion.div>
+
+            {/* Stats */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.7, delay: 0.4 }}
+              className="grid grid-cols-3 gap-4 sm:gap-6 pt-6"
+            >
+              {[
+                { icon: Zap, value: "<500ms", label: "Query Time" },
+                { icon: Shield, value: "100%", label: "Secure" },
+                { icon: TrendingUp, value: "99.8%", label: "Accuracy" },
+              ].map((stat, i) => (
+                <div key={i} className="text-center space-y-2">
+                  <div className="flex justify-center">
+                    <div className="p-2 rounded-lg bg-white/5 border border-white/10">
+                      <stat.icon className="w-4 h-4 sm:w-5 sm:h-5 text-purple-400" />
+                    </div>
+                  </div>
+                  <p className="text-xl sm:text-2xl font-bold text-white">{stat.value}</p>
+                  <p className="text-[10px] sm:text-xs text-zinc-500 font-semibold uppercase tracking-wider">
+                    {stat.label}
+                  </p>
+                </div>
+              ))}
+            </motion.div>
+
+            {/* Trust Indicators */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.7, delay: 0.5 }}
+              className="flex flex-wrap gap-3 sm:gap-4 pt-4"
+            >
+              {["FDA Compliant", "HIPAA Certified", "ISO 27001"].map((badge, i) => (
+                <div
+                  key={i}
+                  className="flex items-center gap-2 px-3 sm:px-4 py-2 rounded-full bg-white/[0.03] border border-white/10 backdrop-blur-sm"
+                >
+                  <CheckCircle className="w-3 h-3 sm:w-4 sm:h-4 text-green-400" />
+                  <span className="text-[10px] sm:text-xs text-zinc-400 font-semibold">{badge}</span>
+                </div>
+              ))}
+            </motion.div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}

app/components/sections/AIPrescription.tsx

@@ -1,88 +1,195 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { motion, useScroll, useTransform } from "framer-motion";
-import { Pill, Zap, Users, ClipboardCheck } from "lucide-react";
+import { Pill, ShieldCheck, Zap, ArrowRight, Building2, Truck } from "lucide-react";
+import { useRef } from "react";
 
 export default function AIPrescription() {
+    const containerRef = useRef(null);
+    const { scrollYProgress } = useScroll({
+        target: containerRef,
+        offset: ["start end", "end start"]
+    });
+
+    const rotateX = useTransform(scrollYProgress, [0, 1], [-10, 10]);
+    const y = useTransform(scrollYProgress, [0, 1], [40, -40]);
+
     return (
-        <section id="prescription" className="py-24 relative">
+        <section ref={containerRef} id="prescription" className="py-20 sm:py-32 lg:py-40 relative overflow-hidden bg-black">
-            <div className="container mx-auto px-6">
+            <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-                <div className="flex flex-col md:flex-row items-center gap-16">
+                <div className="flex flex-col lg:flex-row items-center gap-12 sm:gap-16 lg:gap-20 xl:gap-32">
                     <motion.div
-                        initial={{ opacity: 0, x: -50 }}
+                        style={{ y }}
+                        initial={{ opacity: 0, x: -30 }}
                         whileInView={{ opacity: 1, x: 0 }}
                         transition={{ duration: 0.8 }}
-                        className="flex-1 space-y-8"
+                        className="flex-1 space-y-10 sm:space-y-12 lg:space-y-16"
                     >
-                        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/10 border border-accent/20 text-accent text-sm font-semibold">
+                        <div className="space-y-6">
-                            <Pill className="w-4 h-4" />
+                            <div className="inline-flex items-center gap-3 px-5 py-2.5 rounded-full bg-white/5 border border-white/10 text-zinc-300 text-xs font-semibold tracking-wide">
-                            <span>Smart Fulfillment</span>
+                                <Zap className="w-4 h-4 text-emerald-400" />
+                                <span>Clinical Fulfillment Engine</span>
+                            </div>
+                            <h2 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-[1.1] text-white">
+                                Automated Order <br />
+                                <span className="text-zinc-400">Lifecycle Management</span>
+                            </h2>
+                            <p className="text-lg md:text-xl text-zinc-400 leading-relaxed max-w-xl">
+                                Enterprise-grade pharmaceutical orchestration with AI-powered drug interaction screening, real-time compliance monitoring, and seamless clinical workflow integration.
+                            </p>
+                            
+                            {/* Key Metrics */}
+                            <div className="grid grid-cols-3 gap-3 sm:gap-4 pt-4">
+                                <div className="p-3 sm:p-4 rounded-xl bg-white/[0.03] border border-white/10">
+                                    <div className="text-xl sm:text-2xl md:text-3xl font-bold text-white">99.8%</div>
+                                    <div className="text-[10px] sm:text-xs text-zinc-500 mt-1">Accuracy Rate</div>
+                                </div>
+                                <div className="p-3 sm:p-4 rounded-xl bg-white/[0.03] border border-white/10">
+                                    <div className="text-xl sm:text-2xl md:text-3xl font-bold text-white">&lt;2s</div>
+                                    <div className="text-[10px] sm:text-xs text-zinc-500 mt-1">Avg Response</div>
+                                </div>
+                                <div className="p-3 sm:p-4 rounded-xl bg-white/[0.03] border border-white/10">
+                                    <div className="text-xl sm:text-2xl md:text-3xl font-bold text-white">24/7</div>
+                                    <div className="text-[10px] sm:text-xs text-zinc-500 mt-1">Monitoring</div>
+                                </div>
+                            </div>
                         </div>
 
-                        <h2 className="text-4xl md:text-5xl font-bold leading-tight">
+                        <div className="space-y-4 sm:space-y-6">
-                            End-to-End <span className="text-gradient">AI Prescription</span> Ecosystem
-                        </h2>
-
-                        <p className="text-lg text-foreground/60 leading-relaxed max-w-xl">
-                            From the doctor&apos;s desk to the patient&apos;s door. Skyheal automates the entire prescription lifecycle, ensuring safety, compliance, and convenience.
-                        </p>
-
-                        <div className="space-y-6">
                             {[
-                                { icon: Zap, text: "Instant Pharmacy Integration", label: "Smart Link" },
+                                { 
-                                { icon: Users, text: "Patient Medication Management", label: "Care Portal" },
+                                    icon: Pill, 
-                                { icon: ClipboardCheck, text: "Automatic Drug Interaction Checks", label: "Safety First" }
+                                    title: "Drug Interaction Screening", 
+                                    desc: "Advanced AI cross-references patient medications against 500,000+ drug interaction databases in real-time.",
+                                    stat: "250K+ checks/day"
+                                },
+                                { 
+                                    icon: ShieldCheck, 
+                                    title: "Regulatory Compliance", 
+                                    desc: "Automated verification against FDA, DEA, and state regulations with instant flagging of non-compliant orders.",
+                                    stat: "100% compliant"
+                                }
                             ].map((item, i) => (
-                                <div key={i} className="flex items-center gap-6 p-4 rounded-2xl bg-white/5 hover:bg-white/10 transition-colors border border-white/5">
+                                <motion.div
-                                    <div className="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center">
+                                    key={i}
-                                        <item.icon className="w-6 h-6 text-primary" />
+                                    initial={{ opacity: 0, x: -20 }}
+                                    whileInView={{ opacity: 1, x: 0 }}
+                                    transition={{ delay: i * 0.2 }}
+                                    className="flex gap-4 sm:gap-6 group p-4 sm:p-6 rounded-2xl bg-white/[0.02] border border-white/5 hover:border-white/10 hover:bg-white/[0.04] transition-all"
+                                >
+                                    <div className="w-12 h-12 sm:w-14 sm:h-14 rounded-xl bg-gradient-to-br from-white/10 to-white/5 flex items-center justify-center border border-white/10 shrink-0">
+                                        <item.icon className="w-6 h-6 sm:w-7 sm:h-7 text-white" />
                                     </div>
-                                    <div>
+                                    <div className="space-y-2 flex-1 min-w-0">
-                                        <span className="text-xs font-bold uppercase tracking-widest text-primary/60">{item.label}</span>
+                                        <div className="flex items-start sm:items-center justify-between gap-2 sm:gap-4 flex-col sm:flex-row">
-                                        <p className="text-base font-medium text-foreground/90">{item.text}</p>
+                                            <h4 className="text-base sm:text-lg font-bold text-white">{item.title}</h4>
+                                            <span className="text-[10px] sm:text-xs font-semibold text-emerald-400 bg-emerald-400/10 px-2.5 sm:px-3 py-1 rounded-full whitespace-nowrap">
+                                                {item.stat}
+                                            </span>
+                                        </div>
+                                        <p className="text-xs sm:text-sm text-zinc-400 leading-relaxed">{item.desc}</p>
                                     </div>
-                                </div>
+                                </motion.div>
                             ))}
                         </div>
                     </motion.div>
 
                     <motion.div
-                        initial={{ opacity: 0, y: 50 }}
+                        style={{ rotateX }}
-                        whileInView={{ opacity: 1, y: 0 }}
+                        initial={{ opacity: 0, scale: 0.9 }}
-                        transition={{ duration: 0.8 }}
+                        whileInView={{ opacity: 1, scale: 1 }}
-                        className="flex-1"
+                        transition={{ duration: 1 }}
+                        className="flex-1 relative w-full max-w-lg mx-auto lg:mx-0"
                     >
-                        <div className="glass rounded-[2.5rem] p-1 shadow-2xl overflow-hidden">
+                        <div className="rounded-3xl p-px border border-white/10 shadow-2xl bg-gradient-to-br from-white/[0.05] to-transparent backdrop-blur-sm">
-                            <div className="bg-background/40 p-8 rounded-[2.25rem] space-y-8">
+                            <div className="relative aspect-[4/5] rounded-[calc(1.5rem-1px)] overflow-hidden bg-gradient-to-br from-zinc-900 to-black p-6 sm:p-8 lg:p-10 xl:p-12 space-y-6 sm:space-y-8">
-                                <div className="flex items-center justify-between border-b border-white/5 pb-4">
+                                {/* Header with Status */}
-                                    <div className="flex items-center gap-3">
+                                <div className="relative z-10 flex items-center justify-between">
-                                        <div className="w-10 h-10 rounded-full bg-accent/20 flex items-center justify-center">
+                                    <div>
-                                            <Pill className="w-5 h-5 text-accent" />
+                                        <h3 className="text-xs sm:text-sm font-semibold text-zinc-400">Order Processing</h3>
+                                        <p className="text-xl sm:text-2xl font-bold text-white mt-1">RX-2847392</p>
+                                    </div>
+                                    <div className="px-2.5 sm:px-3 py-1 sm:py-1.5 bg-emerald-500/20 border border-emerald-500/30 rounded-full">
+                                        <span className="text-[10px] sm:text-xs font-semibold text-emerald-400">Active</span>
+                                    </div>
+                                </div>
+
+                                {/* Workflow Steps */}
+                                <div className="flex justify-between items-center relative gap-2 sm:gap-3">
+                                    <div className="w-12 h-12 sm:w-14 sm:h-14 rounded-xl border-white/20 border flex items-center justify-center relative shadow-lg bg-white/5 backdrop-blur-sm">
+                                        <Building2 className="text-white w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7" />
+                                        <div className="absolute -bottom-5 sm:-bottom-6 text-[9px] sm:text-[10px] font-semibold text-zinc-400 whitespace-nowrap">Pharmacy</div>
+                                    </div>
+
+                                    <div className="flex-1 h-px bg-white/10 relative overflow-hidden">
+                                        <motion.div
+                                            animate={{ x: ["-100%", "300%"] }}
+                                            transition={{ repeat: Infinity, duration: 3, ease: "linear" }}
+                                            className="absolute top-0 w-16 sm:w-20 h-full bg-gradient-to-r from-transparent via-emerald-400/50 to-transparent"
+                                        />
+                                    </div>
+
+                                    <div className="w-12 h-12 sm:w-14 sm:h-14 rounded-xl border-white/20 border flex items-center justify-center relative shadow-lg bg-white/5 backdrop-blur-sm">
+                                        <Truck className="text-white w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7" />
+                                        <div className="absolute -bottom-5 sm:-bottom-6 text-[9px] sm:text-[10px] font-semibold text-zinc-400 whitespace-nowrap">Delivery</div>
+                                    </div>
+                                </div>
+
+                                {/* Processing Details */}
+                                <div className="space-y-3 sm:space-y-4 pt-6 sm:pt-8">
+                                    {/* Patient Info Card */}
+                                    <div className="p-4 sm:p-5 rounded-xl border border-white/10 space-y-2.5 sm:space-y-3 shadow-lg bg-white/[0.03] backdrop-blur-sm">
+                                        <div className="flex items-center justify-between">
+                                            <span className="text-[10px] sm:text-xs font-semibold text-zinc-400">Patient ID</span>
+                                            <span className="text-[10px] sm:text-xs font-bold text-white">PT-8492</span>
                                         </div>
-                                        <div>
+                                        <div className="flex items-center justify-between">
-                                            <h4 className="font-bold text-sm">Prescription Portal</h4>
+                                            <span className="text-[10px] sm:text-xs font-semibold text-zinc-400">Medication</span>
-                                            <p className="text-xs text-foreground/50">Active Session</p>
+                                            <span className="text-[10px] sm:text-xs font-bold text-white">Lisinopril 10mg</span>
+                                        </div>
+                                        <div className="flex items-center justify-between">
+                                            <span className="text-[10px] sm:text-xs font-semibold text-zinc-400">Quantity</span>
+                                            <span className="text-[10px] sm:text-xs font-bold text-white">30 tablets</span>
                                         </div>
                                     </div>
-                                    <div className="px-3 py-1 rounded-full bg-accent/10 text-accent text-[10px] font-bold uppercase">Verified</div>
-                                </div>
 
-                                <div className="space-y-4">
+                                    {/* Verification Status */}
-                                    {[1, 2].map((_, i) => (
+                                    <motion.div className="p-5 sm:p-6 bg-gradient-to-br from-emerald-500/10 to-emerald-500/5 rounded-xl border border-emerald-500/20 space-y-3 sm:space-y-4 relative group overflow-hidden">
-                                        <div key={i} className="p-4 rounded-xl bg-white/5 border border-white/5 space-y-3">
+                                        <div className="absolute inset-0 bg-gradient-to-r from-emerald-500/0 via-emerald-500/5 to-emerald-500/0 opacity-0 group-hover:opacity-100 transition-opacity" />
-                                            <div className="flex justify-between items-start">
+                                        
-                                                <div className="h-4 w-1/3 bg-white/10 rounded-md animate-pulse" />
+                                        <div className="flex justify-between items-start relative z-10">
-                                                <div className="h-4 w-20 bg-primary/20 rounded-md" />
+                                            <div className="space-y-1">
+                                                <h4 className="text-sm sm:text-base font-bold text-white flex items-center gap-2">
+                                                    <ShieldCheck className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-emerald-400" />
+                                                    Verified & Approved
+                                                </h4>
+                                                <p className="text-[10px] sm:text-xs font-medium text-zinc-400">Completed at 12:44 PM EST</p>
                                             </div>
-                                            <div className="h-2 w-full bg-white/5 rounded-full" />
+                                            <div className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
-                                            <div className="h-2 w-2/3 bg-white/5 rounded-full" />
                                         </div>
-                                    ))}
-                                </div>
 
-                                <button className="w-full bg-accent hover:bg-accent/80 text-white py-4 rounded-xl font-bold transition-all transform hover:translate-y-[-2px] shadow-lg shadow-accent/20">
+                                        {/* Checks List */}
-                                    Authorize Digital Delivery
+                                        <div className="space-y-2 relative z-10">
-                                </button>
+                                            {[
+                                                "Drug interaction check",
+                                                "Dosage verification",
+                                                "Insurance validation"
+                                            ].map((check, idx) => (
+                                                <div key={idx} className="flex items-center gap-2 text-[10px] sm:text-xs text-zinc-300">
+                                                    <div className="w-3.5 h-3.5 sm:w-4 sm:h-4 rounded-full bg-emerald-400/20 border border-emerald-400/40 flex items-center justify-center shrink-0">
+                                                        <div className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
+                                                    </div>
+                                                    <span>{check}</span>
+                                                </div>
+                                            ))}
+                                        </div>
+
+                                        <button className="relative z-10 w-full bg-white text-black py-3 sm:py-3.5 rounded-lg font-bold text-xs sm:text-sm flex items-center justify-center gap-2 hover:bg-zinc-100 active:scale-[0.98] transition-all shadow-lg">
+                                            View Full Report
+                                            <ArrowRight className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+                                        </button>
+                                    </motion.div>
+                                </div>
                             </div>
                         </div>
                     </motion.div>
@@ -90,4 +197,4 @@ export default function AIPrescription() {
             </div>
         </section>
     );
-}
+}

app/components/sections/AIVoiceSoap.tsx

@@ -1,83 +1,168 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { motion, useScroll, useTransform } from "framer-motion";
-import { Mic, CheckCircle2 } from "lucide-react";
+import { Mic, CheckCircle2, Brain, Zap, Lock, Sparkles } from "lucide-react";
+import { useRef } from "react";
 
 export default function AIVoiceSoap() {
+    const containerRef = useRef(null);
+    const { scrollYProgress } = useScroll({
+        target: containerRef,
+        offset: ["start end", "end start"],
+    });
+
+    const scale = useTransform(scrollYProgress, [0, 0.5], [0.95, 1]);
+    const opacity = useTransform(scrollYProgress, [0, 0.4], [0.6, 1]);
+    const y = useTransform(scrollYProgress, [0, 0.5], [40, 0]);
+
+    const bars = Array.from({ length: 24 }, (_, i) => ({
+        height: [20, 45 + Math.sin(i * 0.8) * 30, 20],
+        duration: 2 + (i % 8) * 0.25,
+        delay: i * 0.03,
+    }));
+
     return (
-        <section id="voice-soap" className="py-24 relative overflow-hidden">
+        <section
-            <div className="container mx-auto px-6">
+            ref={containerRef}
-                <div className="flex flex-col md:flex-row items-center gap-16">
+            id="voice-soap"
+            className="relative py-20 md:py-32 lg:py-40 text-white overflow-hidden"
+        >
+            <div className="absolute inset-0 bg-gradient-to-b from-zinc-950 via-zinc-900/50 to-zinc-950" />
+            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-blue-950/20 via-transparent to-transparent" />
+
+            <div className="container relative z-10 mx-auto px-5 md:px-8 lg:px-12 max-w-7xl">
+                <div className="grid lg:grid-cols-2 gap-16 lg:gap-24 xl:gap-32 items-center">
                     <motion.div
-                        initial={{ opacity: 0, x: -50 }}
+                        style={{ scale, opacity, y }}
-                        whileInView={{ opacity: 1, x: 0 }}
+                        className="space-y-10 lg:space-y-14"
-                        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">
+                        <motion.div
+                            initial={{ opacity: 0, y: 20 }}
+                            whileInView={{ opacity: 1, y: 0 }}
+                            transition={{ duration: 0.6 }}
+                            viewport={{ once: true }}
+                            className="inline-flex items-center gap-3 px-6 py-2 rounded-full bg-blue-950/40 border border-blue-800/40 text-blue-400 text-xs font-semibold tracking-wide uppercase"
+                        >
                             <Mic className="w-4 h-4" />
-                            <span>AI Voice Intelligence</span>
+                            Ambient Clinical Intelligence
+                        </motion.div>
+
+                        <div className="space-y-6">
+                            <h2 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-tight">
+                                Autonomous{" "}
+                                <span className="text-blue-400">Voice-to-SOAP</span>
+                            </h2>
+                            <p className="text-xl md:text-2xl text-zinc-400 leading-relaxed max-w-3xl font-light">
+                                Transform ambient conversations into structured, accurate{" "}
+                                <span className="text-white font-medium">SOAP notes</span> in real-time — with enterprise-grade security and clinical precision.
+                            </p>
                         </div>
 
-                        <h2 className="text-4xl md:text-5xl font-bold leading-tight">
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 pt-6">
-                            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",
+                                { icon: Brain, title: "Neural Context Understanding", desc: "Advanced NLP for medical terminology and context" },
-                                "Automated SOAP structure generation",
+                                { icon: Zap, title: "Instant SOAP Generation", desc: "Zero-latency transcription to structured notes" },
-                                "Medical terminology specialization",
+                                { icon: Lock, title: "End-to-End PHI Security", desc: "AES-256 encryption & HIPAA/GDPR compliant" },
-                                "HIPAA-compliant data processing"
+                                { icon: Sparkles, title: "Auto-Suggest & Edit", desc: "AI-powered refinements & clinician review" },
                             ].map((item, i) => (
-                                <div key={i} className="flex items-center gap-3">
+                                <motion.div
-                                    <CheckCircle2 className="w-5 h-5 text-accent" />
+                                    key={i}
-                                    <span className="text-foreground/80">{item}</span>
+                                    initial={{ opacity: 0, y: 15 }}
-                                </div>
+                                    whileInView={{ opacity: 1, y: 0 }}
+                                    transition={{ duration: 0.5, delay: 0.15 * i }}
+                                    viewport={{ once: true }}
+                                    whileHover={{ scale: 1.03, transition: { duration: 0.2 } }}
+                                    className="flex gap-5 p-5 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-blue-800/50 transition-all"
+                                >
+                                    <div className="w-12 h-12 rounded-xl bg-blue-950/40 border border-blue-800/40 flex items-center justify-center flex-shrink-0">
+                                        <item.icon className="w-6 h-6 text-blue-400" />
+                                    </div>
+                                    <div className="space-y-1">
+                                        <h4 className="text-lg font-semibold text-white">{item.title}</h4>
+                                    </div>
+                                </motion.div>
                             ))}
                         </div>
                     </motion.div>
 
                     <motion.div
-                        initial={{ opacity: 0, scale: 0.8 }}
+                        initial={{ opacity: 0, scale: 0.96 }}
                         whileInView={{ opacity: 1, scale: 1 }}
-                        transition={{ duration: 0.8 }}
+                        transition={{ duration: 0.8, delay: 0.2 }}
-                        className="flex-1 relative"
+                        viewport={{ once: true }}
+                        className="relative w-full max-w-lg mx-auto lg:mx-0"
                     >
-                        <div className="glass aspect-square rounded-3xl p-8 flex flex-col justify-center items-center relative group">
+                        <div className="relative rounded-3xl backdrop-blur-xl shadow-2xl overflow-hidden">
-                            <div className="absolute inset-0 bg-primary/5 rounded-3xl blur-3xl group-hover:bg-primary/10 transition-colors" />
+                            <div className="absolute inset-0  pointer-events-none" />
 
-                            <div className="relative z-10 space-y-8 w-full">
+                            <div className="p-8 md:p-10 lg:p-12 space-y-10 lg:space-y-12 relative">
                                 <div className="flex justify-center">
-                                    <div className="w-24 h-24 rounded-full bg-primary/20 flex items-center justify-center animate-pulse-slow">
+                                    <div className="relative">
-                                        <Mic className="w-12 h-12 text-primary" />
+                                        <motion.div
+                                            animate={{ scale: [1, 1.4, 1], opacity: [0.4, 0, 0.4] }}
+                                            transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
+                                            className="absolute inset-[-20%] rounded-full bg-blue-500/20 blur-2xl"
+                                        />
+                                        <motion.div
+                                            animate={{ scale: [1, 1.3, 1], opacity: [0.3, 0, 0.3] }}
+                                            transition={{ duration: 4, repeat: Infinity, ease: "easeInOut", delay: 0.6 }}
+                                            className="absolute inset-[-20%] rounded-full bg-purple-500/15 blur-3xl"
+                                        />
+
+                                        <div className="relative w-24 h-24 md:w-32 md:h-32 lg:w-40 lg:h-40 rounded-full bg-zinc-800/70 border-2 border-zinc-700 flex items-center justify-center shadow-inner">
+                                            <Mic className="w-12 h-12 md:w-16 md:h-16 lg:w-20 lg:h-20 text-blue-400 drop-shadow-lg" />
+                                        </div>
                                     </div>
                                 </div>
 
-                                <div className="flex justify-center gap-1">
+                                <div className="flex justify-center items-end gap-1.5 h-32 md:h-6 px-4">
-                                    {Array.from({ length: 20 }).map((_, i) => (
+                                    {bars.map((bar, i) => (
                                         <motion.div
                                             key={i}
-                                            animate={{ height: [10, 20 + (i % 5) * 10, 10] }}
+                                            animate={{ height: bar.height }}
                                             transition={{
                                                 repeat: Infinity,
-                                                duration: 1 + (i % 3) * 0.5,
+                                                duration: bar.duration,
-                                                ease: "easeInOut"
+                                                ease: "easeInOut",
+                                                delay: bar.delay,
                                             }}
-                                            className="w-1 bg-gradient-to-t from-primary to-secondary rounded-full"
+                                            className="w-1.5 md:w-2 rounded-full bg-gradient-to-t from-blue-700 to-blue-400 shadow-md"
+                                            style={{ opacity: 0.4 + (i % 8) * 0.08 }}
                                         />
                                     ))}
                                 </div>
 
-                                <div className="glass-dense rounded-xl p-4 space-y-2 border border-white/10">
+                                <motion.div
-                                    <div className="h-2 w-3/4 bg-white/10 rounded-full animate-pulse" />
+                                    initial={{ opacity: 0, y: 20 }}
-                                    <div className="h-2 w-full bg-white/10 rounded-full animate-pulse" />
+                                    whileInView={{ opacity: 1, y: 0 }}
-                                    <div className="h-2 w-1/2 bg-white/10 rounded-full animate-pulse" />
+                                    transition={{ duration: 0.7, delay: 0.4 }}
-                                </div>
+                                    viewport={{ once: true }}
+                                    className="relative rounded-2xl bg-zinc-800/60 border border-zinc-700/80 p-6 md:p-8 shadow-inner overflow-hidden"
+                                >
+                                    <motion.div
+                                        animate={{ x: ["-100%", "200%"] }}
+                                        transition={{ duration: 4, repeat: Infinity, ease: "linear", repeatDelay: 3 }}
+                                        className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent pointer-events-none"
+                                    />
+
+                                    <div className="space-y-4 text-sm md:text-base">
+                                        <div className="flex items-center gap-3">
+                                            <div className="w-2.5 h-2.5 rounded-full bg-blue-500 shadow-lg" />
+                                            <div className="h-3 bg-gradient-to-r from-blue-400/30 to-transparent rounded-full flex-1" />
+                                        </div>
+                                        <div className="h-2.5 bg-zinc-700/50 rounded-full ml-8" />
+                                        <div className="h-2.5 bg-zinc-700/50 rounded-full ml-8 w-5/6" />
+                                        <div className="h-2.5 bg-zinc-700/50 rounded-full ml-8 w-3/4" />
+                                    </div>
+
+                                    <div className="mt-6 flex items-center gap-3 text-xs md:text-sm text-zinc-400">
+                                        <div className="flex items-center gap-2">
+                                            <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
+                                            <span>Processing in real-time</span>
+                                        </div>
+                                        <div className="ml-auto text-emerald-400 font-medium">Secure • Encrypted</div>
+                                    </div>
+                                </motion.div>
                             </div>
                         </div>
                     </motion.div>
@@ -85,4 +170,4 @@ export default function AIVoiceSoap() {
             </div>
         </section>
     );
-}
+}

app/components/sections/AppEcosystem.tsx

@@ -1,91 +1,167 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { motion, useScroll, useTransform, type Variants } from "framer-motion";
-import { Smartphone, ShieldCheck, HeartPulse, Fingerprint } from "lucide-react";
+import { Mic, CheckCircle2, ShieldCheck, Zap, Activity } from "lucide-react";
+import { useRef } from "react";
 
-export default function AppEcosystem() {
+export default function AIVoiceSoap() {
-    return (
+  const containerRef = useRef<HTMLDivElement>(null);
-        <section className="py-24 relative overflow-hidden">
-            <div className="container mx-auto px-6">
-                <div className="flex flex-col md:flex-row-reverse items-center gap-20">
-                    <motion.div
-                        initial={{ opacity: 0, x: 50 }}
-                        whileInView={{ opacity: 1, x: 0 }}
-                        transition={{ duration: 0.8 }}
-                        className="flex-1 space-y-10"
-                    >
-                        <div className="space-y-4">
-                            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/10 border border-accent/20 text-accent text-sm font-semibold">
-                                <Smartphone className="w-4 h-4" />
-                                <span>Mobile Intelligence</span>
-                            </div>
-                            <h2 className="text-4xl md:text-6xl font-black tracking-tighter">
-                                Health in your <span className="text-gradient">Pocket</span>
-                            </h2>
-                            <p className="text-xl text-foreground/60 leading-relaxed max-w-2xl">
-                                Experience end-to-end healthcare with our companion mobile apps. Real-time data sync, encrypted messaging, and emergency alerts at your fingertips.
-                            </p>
-                        </div>
 
-                        <div className="space-y-6">
+  const { scrollYProgress } = useScroll({
-                            {[
+    target: containerRef,
-                                { icon: Fingerprint, title: "Biometric Security", text: "Secure access with FaceID and Fingerprint authentication." },
+    offset: ["start end", "end start"],
-                                { icon: ShieldCheck, title: "HIPAA Certified", text: "Multi-layered encryption for all personal health information (PHI)." },
+  });
-                                { icon: HeartPulse, title: "Live Streaming", text: "Instant vital data visualization from connected Bluetooth devices." }
-                            ].map((item, i) => (
-                                <div key={i} className="flex gap-6 group">
-                                    <div className="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center border border-white/10 group-hover:bg-primary/20 transition-colors">
-                                        <item.icon className="w-6 h-6 text-primary" />
-                                    </div>
-                                    <div>
-                                        <h4 className="font-extrabold text-lg">{item.title}</h4>
-                                        <p className="text-foreground/50">{item.text}</p>
-                                    </div>
-                                </div>
-                            ))}
-                        </div>
-                    </motion.div>
 
-                    <motion.div
+  const y = useTransform(scrollYProgress, [0, 0.4], [50, 0]);
-                        initial={{ opacity: 0, y: 50 }}
+  const opacity = useTransform(scrollYProgress, [0, 0.25], [0, 1]);
-                        whileInView={{ opacity: 1, y: 0 }}
-                        transition={{ duration: 0.8 }}
-                        className="flex-1"
-                    >
-                        <div className="relative mx-auto max-w-[300px]">
-                            {/* Phone Frame Mockup */}
-                            <div className="relative w-full aspect-[1/2] glass rounded-[3rem] p-4 border-white/20 shadow-[0_0_80px_rgba(59,130,246,0.2)] overflow-hidden">
-                                <div className="absolute top-0 inset-x-0 h-8 flex justify-center items-center">
-                                    <div className="w-20 h-4 bg-black rounded-full" />
-                                </div>
-                                <div className="h-full w-full bg-zinc-900 rounded-[2.5rem] p-6 space-y-8 relative">
-                                    <div className="flex justify-between items-center">
-                                        <div className="space-y-1">
-                                            <div className="h-2 w-16 bg-white/10 rounded-full" />
-                                            <div className="h-3 w-24 bg-white/20 rounded-full" />
-                                        </div>
-                                        <div className="w-10 h-10 rounded-full bg-primary/20" />
-                                    </div>
 
-                                    <div className="aspect-square glass rounded-2xl p-6 flex items-center justify-center">
+  const cardVariants: Variants = {
-                                        <HeartPulse className="w-20 h-20 text-primary animate-pulse" />
+    hidden: { opacity: 0, y: 30 },
-                                    </div>
+    visible: (custom: number) => ({
+      opacity: 1,
+      y: 0,
+      transition: {
+        delay: 0.12 + custom * 0.14,
+        duration: 0.65,
+        ease: "easeOut",
+      },
+    }),
+  };
 
-                                    <div className="space-y-4">
+  const features = [
-                                        {[1, 2, 3].map((_, i) => (
+    {
-                                            <div key={i} className="h-12 bg-white/5 rounded-xl border border-white/5" />
+      icon: Mic,
-                                        ))}
+      title: "Natural Voice Capture",
-                                    </div>
+      desc: "Speak freely — AI transcribes SOAP notes in real time with clinical accuracy.",
-                                </div>
+      color: "text-emerald-400",
-                            </div>
+      bg: "from-emerald-600/15 to-emerald-800/5",
+    },
+    {
+      icon: Activity,
+      title: "Context-Aware Intelligence",
+      desc: "Understands medical terminology, patient history context & follow-up questions.",
+      color: "text-blue-400",
+      bg: "from-blue-600/15 to-blue-800/5",
+    },
+    {
+      icon: Zap,
+      title: "Instant Structuring",
+      desc: "Converts conversation to structured Subjective, Objective, Assessment, Plan format.",
+      color: "text-indigo-400",
+      bg: "from-indigo-600/15 to-indigo-800/5",
+    },
+    {
+      icon: ShieldCheck,
+      title: "Secure & Compliant",
+      desc: "End-to-end encryption, HIPAA/GDPR compliant voice processing & storage.",
+      color: "text-cyan-400",
+      bg: "from-cyan-600/15 to-cyan-800/5",
+    },
+  ];
 
-                            {/* Decorative Elements */}
+  return (
-                            <div className="absolute -z-10 -bottom-10 -right-10 w-40 h-40 bg-accent/20 blur-[60px] rounded-full" />
+    <section
-                            <div className="absolute -z-10 top-20 -left-20 w-48 h-48 bg-primary/20 blur-[60px] rounded-full" />
+      ref={containerRef}
-                        </div>
+      className="relative py-20 md:py-28 lg:py-36 overflow-hidden"
-                    </motion.div>
+    >
-                </div>
+      {/* Subtle ambient glows */}
+      <div className="absolute inset-0 pointer-events-none">
+        <div className="absolute top-20 left-10 w-96 h-96 bg-emerald-600/5 rounded-full blur-3xl" />
+        <div className="absolute bottom-10 right-10 w-80 h-80 bg-blue-600/5 rounded-full blur-3xl" />
+      </div>
+
+      <div className="container relative z-10 mx-auto px-5 sm:px-6 lg:px-8">
+        <div className="grid lg:grid-cols-2 gap-12 xl:gap-16 items-center">
+          {/* Left – Text + Trust */}
+          <motion.div
+            style={{ y, opacity }}
+            className="space-y-10 lg:space-y-12 order-2 lg:order-1"
+          >
+            <div className="inline-flex items-center gap-3 px-5 py-2.5 rounded-full bg-slate-800/40 backdrop-blur-lg border border-slate-700/50">
+              <Mic className="w-5 h-5 text-emerald-400" />
+              <span className="text-xs font-semibold tracking-wider uppercase text-slate-300">
+                AI-Powered Voice Notes
+              </span>
             </div>
-        </section>
+
-    );
+            <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight text-white tracking-tight">
-}
+              Document Care
+              <br />
+              <span className="bg-gradient-to-r from-emerald-400 via-blue-400 to-indigo-400 bg-clip-text text-transparent">
+                With Your Voice
+              </span>
+            </h2>
+
+            <p className="text-lg md:text-xl text-slate-300 leading-relaxed max-w-2xl">
+              Speak naturally during consultations. Our AI instantly transcribes, structures, and organizes SOAP notes — saving hours while maintaining clinical precision and full compliance.
+            </p>
+
+            {/* Metrics */}
+            <div className="grid grid-cols-3 gap-6 md:gap-10">
+              {[
+                { value: "98.7%", label: "Transcription Accuracy", icon: CheckCircle2 },
+                { value: "<1s", label: "Real-Time Processing", icon: Zap },
+                { value: "HIPAA", label: "Compliant", icon: ShieldCheck },
+              ].map((item, i) => (
+                <div key={i} className="text-center space-y-2">
+                  <item.icon className="w-6 h-6 mx-auto text-emerald-400" />
+                  <p className="text-2xl md:text-3xl font-bold text-white">{item.value}</p>
+                  <p className="text-xs uppercase tracking-wider text-slate-500 font-medium">
+                    {item.label}
+                  </p>
+                </div>
+              ))}
+            </div>
+
+            {/* Badges */}
+            <div className="flex flex-wrap gap-3">
+              {["HIPAA Compliant", "GDPR Ready", "Encrypted Voice", "Audit Logs"].map((badge, i) => (
+                <div
+                  key={i}
+                  className="flex items-center gap-2 px-4 py-2 rounded-full bg-slate-800/30 border border-slate-700/50 backdrop-blur-sm"
+                >
+                  <CheckCircle2 className="w-4 h-4 text-emerald-400" />
+                  <span className="text-sm text-slate-300 font-medium">{badge}</span>
+                </div>
+              ))}
+            </div>
+          </motion.div>
+
+          {/* Right – Feature Cards */}
+          <div className="grid sm:grid-cols-2 gap-5 md:gap-6 order-1 lg:order-2">
+            {features.map((feature, i) => (
+              <motion.div
+                key={i}
+                custom={i}
+                variants={cardVariants}
+                initial="hidden"
+                whileInView="visible"
+                viewport={{ once: true, margin: "-100px" }}
+                whileHover={{ y: -6, scale: 1.03, transition: { duration: 0.3 } }}
+                className="group relative p-6 md:p-8 rounded-2xl bg-gradient-to-br from-slate-900/50 to-slate-950/50 border border-slate-700/50 backdrop-blur-lg shadow-xl hover:border-slate-600/70 transition-all duration-300 flex flex-col"
+              >
+                <div className="flex items-start gap-4">
+                  <div
+                    className={`p-3.5 rounded-xl bg-gradient-to-br ${feature.bg} border border-slate-600/50 group-hover:border-slate-500/70 transition-colors`}
+                  >
+                    <feature.icon className={`w-7 h-7 ${feature.color}`} />
+                  </div>
+
+                  <div className="flex-1 space-y-3">
+                    <h3 className="text-lg font-semibold text-white group-hover:text-slate-100 transition-colors">
+                      {feature.title}
+                    </h3>
+                    {/* Uncomment if you want descriptions back */}
+                    {/* <p className="text-sm text-slate-400 leading-relaxed">{feature.desc}</p> */}
+                  </div>
+                </div>
+
+                <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-emerald-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

app/components/sections/DeviceShowcase.tsx

@@ -1,81 +1,351 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
-import { Activity, Bluetooth, Gauge, MonitorSmartphone } from "lucide-react";
+import { Bluetooth, BrainCircuit, Cloud, Zap, Shield, Radio, CheckCircle2, ArrowRight } from "lucide-react";
+import { useState } from "react";
 
-const devices = [
+const technologies = [
-    {
+  {
-        title: "Vitals Monitor",
+    title: "Bluetooth Devices",
-        description: "Bluetooth-enabled real-time tracking of blood pressure, SpO2, and heart rate.",
+    description: "Seamlessly connect medical-grade IoT devices with enterprise-level security and real-time data synchronization.",
-        icon: Activity,
+    icon: Bluetooth,
-        color: "from-blue-500 to-cyan-400"
+    id: "bluetooth",
-    },
+    features: [
-    {
+      { label: "Auto-Pairing", icon: Zap },
-        title: "Fetal Doppler",
+      { label: "AES-256 Security", icon: Shield },
-        description: "Hospital-grade fetal heart rate monitoring for remote maternity care.",
+      { label: "Low Energy Mode", icon: Radio }
-        icon: Gauge,
+    ],
-        color: "from-purple-500 to-pink-500"
+    metrics: [
-    },
+      { value: "50+", label: "Connected Devices" },
-    {
+      { value: "99.9%", label: "Reliability" }
-        title: "Smart Weight Scale",
+    ]
-        description: "Advanced body composition analysis with automatic health profile syncing.",
+  },
-        icon: MonitorSmartphone,
+  {
-        color: "from-emerald-500 to-teal-400"
+    title: "AI Agents",
-    }
+    description: "Intelligent automation powered by advanced machine learning models for predictive analytics and clinical decision support.",
+    icon: BrainCircuit,
+    id: "ai-agents",
+    features: [
+      { label: "Pattern Recognition", icon: BrainCircuit },
+      { label: "Predictive Analytics", icon: Zap },
+      { label: "Auto-Learning", icon: Radio }
+    ],
+    metrics: [
+      { value: "98.5%", label: "Accuracy Rate" },
+      { value: "<100ms", label: "Response Time" }
+    ]
+  },
+  {
+    title: "Cloud Management",
+    description: "Enterprise cloud infrastructure with multi-region redundancy, automated scaling, and comprehensive data governance.",
+    icon: Cloud,
+    id: "cloud",
+    features: [
+      { label: "Multi-Region", icon: Cloud },
+      { label: "Auto-Scaling", icon: Zap },
+      { label: "HIPAA Compliant", icon: Shield }
+    ],
+    metrics: [
+      { value: "99.99%", label: "Uptime SLA" },
+      { value: "Global", label: "Coverage" }
+    ]
+  }
 ];
 
-export default function DeviceShowcase() {
+interface Technology {
-    return (
+  title: string;
-        <section id="devices" className="py-24 relative overflow-hidden">
+  description: string;
-            <div className="container mx-auto px-6">
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
-                <div className="text-center max-w-3xl mx-auto mb-20 space-y-4">
+  id: string;
-                    <motion.div
+  features: Array<{ label: string; icon: React.ComponentType<React.SVGProps<SVGSVGElement>> }>;
-                        initial={{ opacity: 0, y: 20 }}
+  metrics: Array<{ value: string; label: string }>;
-                        whileInView={{ opacity: 1, y: 0 }}
+}
-                        transition={{ duration: 0.8 }}
+
-                    >
+function TechCard({ tech, i }: { tech: Technology; i: number }) {
-                        <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 mb-4">
+  const [isHovered, setIsHovered] = useState(false);
-                            <Bluetooth className="w-4 h-4" />
+  const x = useMotionValue(0);
-                            <span>Smart Peripherals</span>
+  const y = useMotionValue(0);
+
+  const mouseXSpring = useSpring(x, { stiffness: 300, damping: 30 });
+  const mouseYSpring = useSpring(y, { stiffness: 300, damping: 30 });
+
+  const rotateX = useTransform(mouseYSpring, [-0.5, 0.5], ["8deg", "-8deg"]);
+  const rotateY = useTransform(mouseXSpring, [-0.5, 0.5], ["-8deg", "8deg"]);
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const width = rect.width;
+    const height = rect.height;
+    const mouseX = e.clientX - rect.left;
+    const mouseY = e.clientY - rect.top;
+    const xPct = mouseX / width - 0.5;
+    const yPct = mouseY / height - 0.5;
+    x.set(xPct);
+    y.set(yPct);
+  };
+
+  const handleMouseLeave = () => {
+    x.set(0);
+    y.set(0);
+    setIsHovered(false);
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 50 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.7, delay: i * 0.15, ease: "easeOut" }}
+      onMouseMove={handleMouseMove}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={handleMouseLeave}
+      style={{
+        rotateX,
+        rotateY,
+        transformStyle: "preserve-3d",
+      }}
+      className="relative group cursor-pointer"
+    >
+      {/* Subtle Glow */}
+      <motion.div
+        animate={{
+          opacity: isHovered ? 0.15 : 0.05,
+          scale: isHovered ? 1.05 : 1
+        }}
+        transition={{ duration: 0.4 }}
+        className="absolute -inset-4 bg-white/10 rounded-[3rem] blur-3xl"
+      />
+
+      {/* Card Container */}
+      <div className="relative rounded-[2.5rem] bg-zinc-950/50 backdrop-blur-xl border border-white/10 overflow-hidden hover:border-white/20 transition-all duration-500">
+        <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
+        
+        <div className="absolute inset-0 opacity-[0.015]" style={{
+          backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
+                            linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
+          backgroundSize: '30px 30px'
+        }} />
+
+        <div className="relative p-8 lg:p-10" style={{ transform: "translateZ(50px)" }}>
+          {/* Icon Section */}
+          <motion.div
+            animate={{ y: isHovered ? -5 : 0 }}
+            transition={{ duration: 0.4 }}
+            className="relative mb-8"
+          >
+            <div className="relative inline-flex items-center gap-4">
+              <motion.div
+                animate={{ scale: isHovered ? 1.1 : 1 }}
+                transition={{ duration: 0.3 }}
+                className="w-16 h-16 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center backdrop-blur-sm group-hover:bg-white/10 group-hover:border-white/20 transition-all"
+              >
+                <tech.icon className="w-8 h-8 text-white" />
+              </motion.div>
+
+              <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-green-500/10 border border-green-500/20">
+                <div className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" />
+                <span className="text-[10px] text-green-400 font-bold uppercase tracking-wider">Active</span>
+              </div>
+            </div>
+          </motion.div>
+
+          {/* Content */}
+          <div className="space-y-4 mb-8">
+            <h3 className="text-2xl sm:text-3xl font-black tracking-tight text-white">
+              {tech.title}
+            </h3>
+            <p className="text-zinc-400 leading-relaxed text-sm font-light">
+              {tech.description}
+            </p>
+          </div>
+
+          {/* Features */}
+          <div className="space-y-3 mb-8">
+            {tech.features.map((feature, idx) => (
+              <motion.div
+                key={idx}
+                initial={{ opacity: 0, x: -10 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                viewport={{ once: true }}
+                transition={{ delay: i * 0.15 + idx * 0.1 }}
+                className="flex items-center gap-3"
+              >
+                <div className="p-1.5 rounded-md bg-white/5 border border-white/10">
+                  <feature.icon className="w-3.5 h-3.5 text-zinc-400" />
+                </div>
+                <span className="text-xs text-zinc-500 font-semibold tracking-wide">
+                  {feature.label}
+                </span>
+              </motion.div>
+            ))}
+          </div>
+
+          {/* Metrics */}
+          <div className="grid grid-cols-2 gap-4 mb-6 p-4 rounded-2xl bg-white/[0.02] border border-white/5">
+            {tech.metrics.map((metric, idx) => (
+              <div key={idx} className="text-center">
+                <p className="text-xl font-black text-white mb-1">{metric.value}</p>
+                <p className="text-[10px] text-zinc-500 font-semibold uppercase tracking-wider">{metric.label}</p>
+              </div>
+            ))}
+          </div>
+
+    
+                    {/* Bottom Action */}
+                    <div className="flex items-center justify-between pt-6 border-t border-white/5 group-hover:border-white/10 transition-colors">
+                        <div className="flex items-center gap-2">
+                            <CheckCircle2 className="w-4 h-4 text-zinc-600" />
+                            <span className="text-xs text-zinc-600 font-semibold uppercase tracking-wider">
+                                Integrated
+                            </span>
                         </div>
-                        <h2 className="text-4xl md:text-6xl font-black tracking-tighter">
+                        
-                            A Connected <span className="text-gradient">Hardware</span> Ecosystem
+                        <motion.div
+                            animate={{
+                                x: isHovered ? 5 : 0
+                            }}
+                            transition={{ duration: 0.3 }}
+                            className="flex items-center gap-2 text-zinc-500 group-hover:text-white transition-colors"
+                        >
+                            <span className="text-sm font-semibold">Learn More</span>
+                            <ArrowRight className="w-4 h-4" />
+                        </motion.div>
+                    </div>
+                </div>
+
+                {/* Bottom Subtle Accent */}
+                <motion.div
+                    animate={{
+                        scaleX: isHovered ? 1 : 0,
+                    }}
+                    transition={{ duration: 0.5 }}
+                    className="absolute bottom-0 left-0 right-0 h-px bg-white/20 origin-left"
+                />
+            </div>
+        </motion.div>
+    );
+}
+
+export default function TechShowcase() {
+    return (
+        <section id="technologies" className="relative py-20 md:py-32 lg:py-40 overflow-hidden">
+            {/* Ambient Effects - More Subtle */}
+            <div className="absolute top-1/3 left-0 w-[500px] h-[500px] bg-blue-500/5 rounded-full blur-[120px]" />
+            <div className="absolute bottom-1/3 right-0 w-[500px] h-[500px] bg-purple-500/5 rounded-full blur-[120px]" />
+            
+            {/* Dot Grid Pattern */}
+            <div className="absolute inset-0 opacity-[0.02]" style={{
+                backgroundImage: `radial-gradient(circle, rgba(255,255,255,0.4) 1px, transparent 1px)`,
+                backgroundSize: '40px 40px'
+            }} />
+
+            <div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
+                {/* Header Section */}
+                <div className="max-w-5xl mb-16 md:mb-24 space-y-8">
+                    <motion.div
+                        initial={{ opacity: 0, y: 30 }}
+                        whileInView={{ opacity: 1, y: 0 }}
+                        viewport={{ once: true }}
+                        transition={{ duration: 0.8 }}
+                        className="space-y-6"
+                    >
+                        {/* Badge */}
+                        <div className="inline-flex items-center gap-3 px-5 py-2.5 rounded-full bg-white/5 backdrop-blur-xl border border-white/10 shadow-lg">
+                            <div className="relative">
+                                <Zap className="w-4 h-4 text-white" />
+                                <div className="absolute inset-0 bg-white/20 blur-md animate-pulse" />
+                            </div>
+                            <span className="text-[11px] font-bold tracking-[0.3em] uppercase text-zinc-300">
+                                Technology Infrastructure
+                            </span>
+                        </div>
+
+                        {/* Title */}
+                        <h2 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-black leading-[0.9] tracking-tighter text-white">
+                            Enterprise
+                            <br />
+                            <span className="text-zinc-600">Technology Stack</span>
                         </h2>
-                        <p className="text-lg text-foreground/60 leading-relaxed">
+
-                            Seamlessly bridge the gap between physical health and digital intelligence with our HIPAA-compliant Bluetooth medical devices.
+                        {/* Description */}
+                        <p className="text-lg sm:text-xl lg:text-2xl text-zinc-400 leading-relaxed max-w-3xl font-light">
+                            Cutting-edge infrastructure powering{" "}
+                            <span className="text-white font-medium">intelligent healthcare delivery</span> through{" "}
+                            <span className="text-white font-medium">seamless device integration</span> and{" "}
+                            <span className="text-white font-medium">autonomous AI systems</span>.
                         </p>
+
+                        {/* Stats */}
+                        <div className="flex flex-wrap gap-8 pt-4">
+                            {[
+                                { icon: Zap, label: "Processing Speed", value: "Real-time" },
+                                { icon: Shield, label: "Security", value: "Enterprise" },
+                                { icon: Cloud, label: "Infrastructure", value: "Global" }
+                            ].map((stat, i) => (
+                                <motion.div
+                                    key={i}
+                                    initial={{ opacity: 0, x: -20 }}
+                                    whileInView={{ opacity: 1, x: 0 }}
+                                    viewport={{ once: true }}
+                                    transition={{ duration: 0.6, delay: 0.2 + i * 0.1 }}
+                                    className="flex items-center gap-3"
+                                >
+                                    <div className="p-2.5 rounded-lg bg-white/5 border border-white/10">
+                                        <stat.icon className="w-5 h-5 text-white" />
+                                    </div>
+                                    <div>
+                                        <p className="text-xl font-black text-white">{stat.value}</p>
+                                        <p className="text-xs text-zinc-500 font-semibold uppercase tracking-wider">{stat.label}</p>
+                                    </div>
+                                </motion.div>
+                            ))}
+                        </div>
                     </motion.div>
                 </div>
 
-                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                {/* Technology Cards Grid */}
-                    {devices.map((device, i) => (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
-                        <motion.div
+                    {technologies.map((tech, i) => (
-                            key={i}
+                        <TechCard key={tech.id} tech={tech} i={i} />
-                            initial={{ opacity: 0, y: 30 }}
-                            whileInView={{ opacity: 1, y: 0 }}
-                            transition={{ duration: 0.5, delay: i * 0.1 }}
-                            whileHover={{ y: -10 }}
-                            className="glass p-8 rounded-[2rem] border-white/5 group relative overflow-hidden"
-                        >
-                            <div className={`absolute -top-24 -right-24 w-48 h-48 bg-gradient-to-br ${device.color} opacity-10 blur-3xl group-hover:opacity-20 transition-opacity`} />
-
-                            <div className="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center mb-8 border border-white/10 group-hover:scale-110 transition-transform">
-                                <device.icon className="w-8 h-8 text-primary" />
-                            </div>
-
-                            <h3 className="text-2xl font-bold mb-4">{device.title}</h3>
-                            <p className="text-foreground/60 leading-relaxed mb-6">
-                                {device.description}
-                            </p>
-
-                            <div className="flex items-center gap-2 text-primary font-bold text-sm tracking-widest uppercase opacity-0 group-hover:opacity-100 transition-opacity">
-                                <span>Explore Tech</span>
-                                <Bluetooth className="w-4 h-4" />
-                            </div>
-                        </motion.div>
                     ))}
                 </div>
+
+                {/* Bottom CTA */}
+                <motion.div
+                    initial={{ opacity: 0, y: 30 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    transition={{ duration: 0.8, delay: 0.4 }}
+                    className="mt-16 md:mt-24 text-center space-y-6"
+                >
+                    <div className="space-y-3">
+                        <p className="text-zinc-400 text-base font-medium">
+                            Ready to integrate our technology stack?
+                        </p>
+                        <p className="text-zinc-600 text-sm max-w-2xl mx-auto">
+                            Our engineering team will work with you to customize and deploy the perfect solution for your healthcare infrastructure.
+                        </p>
+                    </div>
+                    
+                    <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+                        <motion.button
+                            whileHover={{ scale: 1.02 }}
+                            whileTap={{ scale: 0.98 }}
+                            className="px-8 py-4 rounded-full bg-white text-black font-bold text-sm tracking-wide uppercase shadow-[0_0_30px_rgba(255,255,255,0.1)] hover:shadow-[0_0_40px_rgba(255,255,255,0.2)] transition-all"
+                        >
+                            Schedule Demo
+                        </motion.button>
+                        
+                        <motion.button
+                            whileHover={{ scale: 1.02 }}
+                            whileTap={{ scale: 0.98 }}
+                            className="px-8 py-4 rounded-full bg-white/5 border border-white/10 text-white font-bold text-sm tracking-wide uppercase hover:bg-white/10 hover:border-white/20 transition-all"
+                        >
+                            View Documentation
+                        </motion.button>
+                    </div>
+                </motion.div>
             </div>
         </section>
     );
-}
+}

app/components/sections/TelehealthSolutions.tsx

@@ -1,94 +1,93 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { motion, useScroll, useTransform } from "framer-motion";
-import { Video, ShoppingCart, ShieldCheck, Globe } from "lucide-react";
+import { Video, Shield, Clock, Users, Globe, Activity } from "lucide-react";
+import { useRef } from "react";
 
 export default function TelehealthSolutions() {
+    const containerRef = useRef(null);
+    const { scrollYProgress } = useScroll({
+        target: containerRef,
+        offset: ["start end", "end start"]
+    });
+
+    const scale = useTransform(scrollYProgress, [0, 0.5], [0.98, 1]);
+    const rotateY = useTransform(scrollYProgress, [0, 0.5], [10, 0]);
+
+    const services = [
+        { icon: Video, title: "Clinical HD Video", desc: "Institutional-grade secure streaming for pediatric and adult care." },
+        { icon: Clock, title: "Zero-Latency Triage", desc: "Automated routing based on real-time vital analysis." },
+        { icon: Shield, title: "Military Encryption", desc: "End-to-end PHI security layers for absolute data integrity." },
+        { icon: Globe, title: "Global Registry", desc: "Unified clinical records accessible across institutional borders." }
+    ];
+
     return (
-        <section className="py-24 relative overflow-hidden bg-primary/5">
+        <section ref={containerRef} id="solutions" className="py-24 relative overflow-hidden perspective-1000">
             <div className="container mx-auto px-6">
-                <div className="flex flex-col lg:flex-row items-center gap-20">
+                <motion.div
-                    <motion.div
+                    style={{ scale, rotateY }}
-                        initial={{ opacity: 0, x: -50 }}
+                    initial={{ opacity: 0 }}
-                        whileInView={{ opacity: 1, x: 0 }}
+                    whileInView={{ opacity: 1 }}
-                        transition={{ duration: 0.8 }}
+                    transition={{ duration: 0.8 }}
-                        className="flex-1 space-y-10"
+                    className="glass rounded-[4rem] border-white/5 p-12 lg:p-24 overflow-hidden relative shadow-none min-h-[800px] flex flex-col justify-center bg-white/[0.01]"
-                    >
+                >
-                        <div className="space-y-4">
+                    <div className="reflection" />
-                            <h2 className="text-4xl md:text-6xl font-black tracking-tighter">
-                                Clinic without <span className="text-gradient">Boundaries</span>
-                            </h2>
-                            <p className="text-xl text-foreground/60 leading-relaxed max-w-2xl">
-                                Advanced tele-consultation and integrated cart solutions designed for modern healthcare infrastructure. High-fidelity, low-latency, and fully secure.
-                            </p>
-                        </div>
 
-                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
+                    <div className="flex flex-col lg:flex-row gap-20 items-center relative z-10">
-                            <div className="space-y-4">
+                        <div className="flex-1 space-y-12">
-                                <div className="w-12 h-12 rounded-xl bg-blue-500/20 flex items-center justify-center">
+                            <div className="space-y-8 text-center lg:text-left">
-                                    <Video className="w-6 h-6 text-blue-500" />
+                                <div className="inline-flex items-center gap-3 px-6 py-2 rounded-full glass border-white/5 text-zinc-400 text-[10px] font-black tracking-[0.4em] uppercase mx-auto lg:mx-0">
+                                    <Activity className="w-4 h-4 text-white" />
+                                    <span>Clinical Service Layer</span>
                                 </div>
-                                <h3 className="text-xl font-bold">Teleconsult</h3>
+                                <h2 className="text-6xl md:text-8xl font-extrabold tracking-tighter leading-[0.9]">
-                                <p className="text-sm text-foreground/50">HD video consultation with integrated EHR and vital streaming capabilities.</p>
+                                    Connected <br /><span className="text-zinc-500 italic uppercase">Logistics</span>
+                                </h2>
+                                <p className="text-xl md:text-2xl text-zinc-500 leading-relaxed max-w-2xl font-medium tracking-tight mx-auto lg:mx-0">
+                                    Institutional delivery systems for virtual care. Bridging the gap between the patient and the neural clinic with uncompromised operational speed.
+                                </p>
                             </div>
-                            <div className="space-y-4">
+
-                                <div className="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center">
+                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-8 pt-4">
-                                    <ShoppingCart className="w-6 h-6 text-purple-500" />
+                                {services.map((item, i) => (
-                                </div>
+                                    <motion.div
-                                <h3 className="text-xl font-bold">Telecart</h3>
+                                        key={i}
-                                <p className="text-sm text-foreground/50">Managed healthcare shopping experience for devices and medication.</p>
+                                        whileHover={{ scale: 1.02, backgroundColor: "rgba(255, 255, 255, 0.02)" }}
+                                        className="flex flex-col gap-6 p-10 glass rounded-[2rem] border-white/[0.03] transition-all shadow-none group"
+                                    >
+                                        <div className="w-14 h-14 rounded-xl bg-white/5 flex items-center justify-center border border-white/10 group-hover:border-white/30 transition-all">
+                                            <item.icon className="w-6 h-6 text-white" />
+                                        </div>
+                                        <div>
+                                            <h4 className="text-xl font-black tracking-tight uppercase italic mb-2">{item.title}</h4>
+                                            <p className="text-base text-zinc-600 font-medium leading-relaxed">{item.desc}</p>
+                                        </div>
+                                    </motion.div>
+                                ))}
                             </div>
                         </div>
 
-                        <div className="flex items-center gap-6 p-6 glass rounded-2xl border-primary/20 bg-primary/5">
+                        <div className="flex-1 relative hidden lg:block">
-                            <ShieldCheck className="w-10 h-10 text-primary flex-shrink-0" />
+                            <div className="aspect-square glass rounded-[3rem] p-4 border-white/5 relative flex items-center justify-center overflow-hidden bg-white/[0.01]">
-                            <div>
+                                <div className="absolute inset-x-8 inset-y-8 border-[0.5px] border-white/5 rounded-2xl" />
-                                <h4 className="font-bold">Enterprise-Grade Security</h4>
+                                <motion.div
-                                <p className="text-sm text-foreground/60">All consultations are end-to-end encrypted and HIPAA-compliant.</p>
+                                    animate={{
-                            </div>
+                                        scale: [1, 1.05, 1],
-                        </div>
+                                        opacity: [0.3, 0.6, 0.3]
-                    </motion.div>
+                                    }}
-
+                                    transition={{ repeat: Infinity, duration: 5 }}
-                    <motion.div
+                                >
-                        initial={{ opacity: 0, scale: 0.9 }}
+                                    <Users className="w-64 h-64 text-white opacity-10" />
-                        whileInView={{ opacity: 1, scale: 1 }}
+                                </motion.div>
-                        transition={{ duration: 0.8 }}
+                                <div className="absolute inset-0 flex items-center justify-center">
-                        className="flex-1"
+                                    <div className="w-32 h-32 rounded-full glass border-white/10 flex items-center justify-center animate-pulse">
-                    >
+                                        <Video className="w-12 h-12 text-white" />
-                        <div className="relative">
-                            <div className="absolute inset-0 bg-primary/10 rounded-3xl blur-3xl transform rotate-3" />
-                            <div className="relative glass aspect-video rounded-3xl overflow-hidden border-white/5 shadow-2xl">
-                                <div className="bg-background/80 p-2 border-b border-white/5 flex items-center gap-2">
-                                    <div className="w-3 h-3 rounded-full bg-red-400" />
-                                    <div className="w-3 h-3 rounded-full bg-yellow-400" />
-                                    <div className="w-3 h-3 rounded-full bg-green-400" />
-                                    <div className="ml-4 h-5 w-1/3 bg-white/5 rounded-full" />
-                                </div>
-                                <div className="h-full w-full bg-gradient-to-br from-zinc-900 to-black p-8 flex items-center justify-center relative">
-                                    <div className="absolute inset-0 opacity-10">
-                                        <Globe className="w-full h-full text-white" />
-                                    </div>
-                                    <div className="text-center space-y-4">
-                                        <div className="w-20 h-20 rounded-full glass mx-auto flex items-center justify-center border-primary/30">
-                                            <Video className="w-8 h-8 text-primary animate-pulse" />
-                                        </div>
-                                        <div className="space-y-2">
-                                            <div className="h-2 w-32 bg-white/20 rounded-full mx-auto" />
-                                            <div className="h-2 w-24 bg-white/10 rounded-full mx-auto" />
-                                        </div>
-                                    </div>
-                                    {/* Floating HUD Elements */}
-                                    <div className="absolute top-12 right-12 glass p-4 rounded-xl border-accent/20">
-                                        <div className="flex items-center gap-3">
-                                            <div className="w-2 h-2 rounded-full bg-accent animate-ping" />
-                                            <span className="text-[10px] font-bold uppercase tracking-widest text-accent">Active Sync</span>
-                                        </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                    </motion.div>
+                    </div>
-                </div>
+                </motion.div>
             </div>
         </section>
     );

app/devices/page.tsx

@@ -1,108 +1,360 @@
 "use client";
 
 import Navbar from "../components/layout/Navbar";
-import DNAHeroBackground from "../components/canvas/DNAHeroBackground";
-import { motion } from "framer-motion";
-import { Activity, Bluetooth, ShieldCheck, Zap } from "lucide-react";
 import Footer from "../components/layout/Footer";
+import { motion } from "framer-motion";
+import {
+  Thermometer,
+  Activity,
+  HeartPulse,
+  Droplet,
+  Baby,
+  Scale,
+  Bluetooth,
+  ShieldCheck,
+  FileText,
+} from "lucide-react";
+
+interface DeviceItem {
+  title: string;
+  subtitle: string;
+  description: string;
+  highlights: string[];
+  specs: string[];
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+}
+
+function DeviceCard({ item, index }: { item: DeviceItem; index: number }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 40 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.7, delay: index * 0.12, ease: "easeOut" }}
+      viewport={{ once: true, margin: "-100px" }}
+      whileHover={{ y: -8, scale: 1.015 }}
+      className={`
+        group relative
+        bg-neutral-950/70 backdrop-blur-xl
+        border border-neutral-800/60
+        rounded-2xl overflow-hidden
+        shadow-[0_8px_32px_rgba(0,0,0,0.4)]
+        hover:border-blue-900/50 hover:shadow-[0_16px_48px_rgba(37,99,235,0.12)]
+        transition-all duration-500
+      `}
+    >
+      {/* Subtle internal gradient glow */}
+      <div className="absolute inset-0 bg-gradient-to-br from-blue-950/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
+
+      <div className="relative px-7 pt-7 pb-6 border-b border-neutral-800/50 bg-gradient-to-b from-neutral-900/40 to-transparent">
+        <div className="flex items-center gap-5">
+          <div className="
+            p-4 rounded-xl
+            bg-neutral-900/80 border border-neutral-800/70
+            group-hover:border-blue-800/50 group-hover:bg-blue-950/20
+            transition-all duration-300
+          ">
+            <item.icon className="
+              w-8 h-8 text-neutral-400
+              group-hover:text-blue-400/90
+              transition-colors duration-300
+            " />
+          </div>
+
+          <div>
+            <h3 className="text-2xl font-semibold text-white tracking-tight leading-tight">
+              {item.title}
+            </h3>
+            <p className="text-sm text-neutral-500 mt-1 font-medium">
+              {item.subtitle}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Uncomment this block if you want to bring back the card details */}
+      {/* 
+      <div className="p-7 space-y-7">
+        <p className="text-neutral-300 leading-relaxed text-[15px] font-light">
+          {item.description}
+        </p>
+
+        <div className="grid grid-cols-2 sm:grid-cols-3 gap-4 text-sm">
+          {item.highlights.map((highlight, i) => (
+            <div key={i} className="flex items-center gap-2.5">
+              <div className="
+                w-1.5 h-1.5 rounded-full
+                bg-neutral-600 group-hover:bg-blue-500/70
+                transition-colors duration-300
+              " />
+              <span className="text-neutral-200 font-medium">{highlight}</span>
+            </div>
+          ))}
+        </div>
+
+        <div className="flex flex-wrap gap-2.5">
+          {item.specs.map((spec, i) => (
+            <span
+              key={i}
+              className="
+                px-4 py-1.5 text-xs font-medium
+                rounded-lg bg-neutral-900/60 border border-neutral-800/60
+                text-neutral-400 group-hover:text-neutral-200
+                transition-colors duration-300
+              "
+            >
+              {spec}
+            </span>
+          ))}
+        </div>
+
+        <button
+          className="
+            w-full mt-4 py-4
+            text-sm font-semibold tracking-wide
+            text-neutral-200 bg-neutral-900/70 border border-neutral-800/70
+            rounded-xl hover:bg-neutral-800/90 hover:border-neutral-700/70
+            hover:text-white active:scale-[0.98]
+            transition-all duration-300
+            flex items-center justify-center gap-2.5
+          "
+        >
+          <FileText className="w-4 h-4" />
+          View Technical Documentation
+        </button>
+      </div>
+      */}
+    </motion.div>
+  );
+}
 
 export default function DevicesPage() {
-    return (
+  const devices: DeviceItem[] = [
-        <div className="relative min-h-screen">
+    {
-            <DNAHeroBackground />
+      title: "Multi-Vital Monitor",
-            <Navbar />
+      subtitle: "Temperature • SpO₂ • Blood Pressure",
+      description:
+        "Simultaneous clinical-grade measurement of core vital signs with validated algorithms and secure wireless pairing.",
+      highlights: ["±0.1 °C accuracy", "±2% SpO₂", "±3 mmHg NIBP"],
+      specs: ["Bluetooth 5.2 LE", "IEC 60601", "24 h operation", "IP54"],
+      icon: Activity,
+    },
+    {
+      title: "3-in-1 Metabolic Analyzer",
+      subtitle: "Glucose • Hemoglobin • Hematocrit",
+      description:
+        "Fast point-of-care testing from a single micro-sample with temperature compensation and result validation.",
+      highlights: ["5–10 sec result", "±5 mg/dL glucose", "Lab-comparable Hb/HCT"],
+      specs: ["Micro-volume sample", "Strip detection", "EHR integration", "Auto calibration"],
+      icon: Droplet,
+    },
+    {
+      title: "Digital Urine Analyzer",
+      subtitle: "Multi-parameter Urinalysis",
+      description:
+        "Automated reading and standardized interpretation of urine test strips with digital result storage.",
+      highlights: ["10–14 parameters", "< 60 seconds", "Trend tracking", "PDF export"],
+      specs: ["High-resolution optics", "AI strip analysis", "Bluetooth sync", "Batch processing"],
+      icon: Droplet,
+    },
+    {
+      title: "Fetal Heart Doppler",
+      subtitle: "Professional Maternity Monitoring",
+      description:
+        "High-sensitivity fetal heart rate detection with audio output, waveform display and event recording.",
+      highlights: ["50–240 bpm range", "3 MHz probe", "Water-resistant", "Extended battery"],
+      specs: ["Clinical validation", "Bluetooth audio", "Waveform visualization", "Event marking"],
+      icon: Baby,
+    },
+    {
+      title: "Clinical Precision Scale",
+      subtitle: "Weight & Body Composition",
+      description:
+        "High-accuracy weighing platform with body composition analysis suitable for clinical follow-up.",
+      highlights: ["200 kg capacity", "50 g resolution", "Fat / Muscle / Water", "Multi-user support"],
+      specs: ["Bioelectrical impedance", "Tempered glass", "Bluetooth LE", "Stable base"],
+      icon: Scale,
+    },
+  ];
 
-            <main className="relative z-10 pt-40 pb-24">
+  return (
-                <div className="container mx-auto px-6">
+    <div className="min-h-screen text-neutral-100 relative overflow-hidden bg-[#0a0e17]">
-                    <motion.div
+      {/* ====================== Bluetooth Animated Background ====================== */}
-                        initial={{ opacity: 0, y: 20 }}
+      <div className="absolute inset-0 pointer-events-none overflow-hidden">
-                        animate={{ opacity: 1, y: 0 }}
+        {/* Dark moody base gradient */}
-                        className="max-w-4xl"
+        <div className="absolute inset-0 bg-gradient-to-br from-[#0a0e17] via-[#0d1525] to-[#0a0e1a]" />
-                    >
-                        <h1 className="text-5xl md:text-8xl font-black tracking-tighter mb-8">
-                            Medical <span className="text-gradient">Hardware</span>
-                        </h1>
-                        <p className="text-xl text-foreground/60 leading-relaxed mb-12 max-w-2xl">
-                            Precision-engineered Bluetooth vitals monitors and maternity care tools. Designed for reliability, accuracy, and absolute security.
-                        </p>
-                    </motion.div>
 
-                    {/* Device Detailed Grid */}
+        {/* Pulsing Bluetooth radar-style rings */}
-                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mt-20">
+        <div className="absolute inset-0 flex items-center justify-center">
-                        {[
+          {/* Largest – slowest */}
-                            {
+          <motion.div
-                                title: "Vitals Hub X1",
+            className="absolute rounded-full border border-blue-500/8"
-                                feature: "Multi-Parameter Monitoring",
+            style={{ width: "min(140vmin, 1800px)", height: "min(140vmin, 1800px)" }}
-                                desc: "Measures Blood Pressure, Heart Rate, SpO2, and Body Temperature in one sleek device.",
+            animate={{
-                                specs: ["Bluetooth 5.2", "48h Battery", "Cloud Sync"]
+              scale: [0.65, 1.1, 0.65],
-                            },
+              opacity: [0.02, 0.09, 0.02],
-                            {
+            }}
-                                title: "Fetal Doppler Pro",
+            transition={{
-                                feature: "Maternity Care",
+              duration: 18,
-                                desc: "High-sensitivity fetal heart rate detection with ultra-sound noise reduction technology.",
+              repeat: Infinity,
-                                specs: ["OLED Display", "Built-in Speaker", "App Integration"]
+              ease: "easeInOut",
-                            }
+            }}
-                        ].map((item, i) => (
+          />
-                            <motion.div
-                                key={i}
-                                initial={{ opacity: 0, scale: 0.95 }}
-                                whileInView={{ opacity: 1, scale: 1 }}
-                                className="glass p-12 rounded-[3rem] border-white/5 space-y-8"
-                            >
-                                <div className="flex justify-between items-start">
-                                    <div className="space-y-2">
-                                        <span className="text-primary font-bold tracking-widest uppercase text-xs">{item.feature}</span>
-                                        <h2 className="text-4xl font-bold">{item.title}</h2>
-                                    </div>
-                                    <div className="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center">
-                                        <Activity className="w-8 h-8 text-primary" />
-                                    </div>
-                                </div>
-                                <p className="text-lg text-foreground/60">{item.desc}</p>
 
-                                <div className="flex flex-wrap gap-4">
+          {/* Medium */}
-                                    {item.specs.map((spec, j) => (
+          <motion.div
-                                        <span key={j} className="px-4 py-2 rounded-full bg-white/5 border border-white/5 text-sm">
+            className="absolute rounded-full border border-blue-500/10"
-                                            {spec}
+            style={{ width: "min(100vmin, 1300px)", height: "min(100vmin, 1300px)" }}
-                                        </span>
+            animate={{
-                                    ))}
+              scale: [0.7, 1.15, 0.7],
-                                </div>
+              opacity: [0.03, 0.13, 0.03],
+            }}
+            transition={{
+              duration: 14,
+              repeat: Infinity,
+              ease: "easeInOut",
+              delay: 3,
+            }}
+          />
 
-                                <button className="w-full bg-white text-black py-4 rounded-2xl font-bold hover:bg-zinc-200 transition-colors">
+          {/* Smallest + sharper */}
-                                    View Specifications
+          <motion.div
-                                </button>
+            className="absolute rounded-full border-2 border-blue-400/20"
-                            </motion.div>
+            style={{ width: "min(60vmin, 800px)", height: "min(60vmin, 800px)" }}
-                        ))}
+            animate={{
-                    </div>
+              scale: [0.85, 1.4, 0.85],
+              opacity: [0.06, 0.22, 0.06],
+            }}
+            transition={{
+              duration: 9,
+              repeat: Infinity,
+              ease: "easeOut",
+              delay: 1.5,
+            }}
+          />
 
-                    {/* Compliance Banner */}
+          {/* Very faint core glow */}
-                    <motion.div
+          <motion.div
-                        initial={{ opacity: 0 }}
+            className="absolute rounded-full bg-blue-600/5 blur-xl"
-                        whileInView={{ opacity: 1 }}
+            style={{ width: "min(20vmin, 260px)", height: "min(20vmin, 260px)" }}
-                        className="mt-32 p-12 glass rounded-[3rem] border-accent/20 flex flex-col md:flex-row items-center justify-between gap-12"
+            animate={{ scale: [1, 1.4, 1], opacity: [0.15, 0.35, 0.15] }}
-                    >
+            transition={{ duration: 7, repeat: Infinity, ease: "easeInOut" }}
-                        <div className="space-y-4">
+          />
-                            <div className="flex items-center gap-3">
-                                <ShieldCheck className="w-8 h-8 text-accent" />
-                                <h3 className="text-3xl font-bold italic">HIPAA Verified Hardware</h3>
-                            </div>
-                            <p className="text-foreground/60 max-w-xl">
-                                Every device in our ecosystem undergoes rigorous security audits. Data transmission is encrypted from the sensor to the cloud.
-                            </p>
-                        </div>
-                        <div className="flex gap-4">
-                            <div className="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center">
-                                <Bluetooth className="w-8 h-8 text-primary" />
-                            </div>
-                            <div className="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center">
-                                <Zap className="w-8 h-8 text-yellow-500" />
-                            </div>
-                        </div>
-                    </motion.div>
-                </div>
-            </main>
-
-            <Footer />
         </div>
-    );
+
-}
+        {/* Subtle rotating signal arcs */}
+        <motion.div
+          className="absolute inset-0 flex items-center justify-center"
+          animate={{ rotate: 360 }}
+          transition={{ duration: 90, repeat: Infinity, ease: "linear" }}
+        >
+          <div className="relative w-[min(80vmin,1000px)] h-[min(80vmin,1000px)]">
+            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-blue-400/8 to-transparent rotate-12 blur-md opacity-60" />
+            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-blue-500/6 to-transparent -rotate-18 blur-lg opacity-50" />
+          </div>
+        </motion.div>
+
+        {/* Floating particles */}
+        <div className="absolute inset-0">
+          {[...Array(16)].map((_, i) => (
+            <motion.div
+              key={i}
+              className="absolute w-1.5 h-1.5 md:w-2 md:h-2 bg-blue-400/40 rounded-full blur-[1px]"
+              initial={{ opacity: 0 }}
+              animate={{
+                y: [0, -180 - Math.random() * 140, -360],
+                opacity: [0, 0.7, 0],
+                x: Math.sin(i * 0.9) * 60 + Math.cos(i * 1.4) * 30,
+              }}
+              transition={{
+                duration: 12 + Math.random() * 10,
+                repeat: Infinity,
+                delay: i * 0.6 + Math.random() * 2,
+                ease: "easeOut",
+              }}
+              style={{
+                left: `${8 + ((i * 7.3) % 84)}%`,
+                top: "85%",
+              }}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* ====================== Main Content ====================== */}
+      <div className="relative z-10">
+        <Navbar />
+
+        <main className="pt-28 md:pt-40 pb-28 md:pb-40">
+          <div className="max-w-7xl mx-auto px-5 sm:px-7 lg:px-10">
+            {/* Header */}
+            <div className="text-center max-w-4xl mx-auto mb-20 md:mb-28">
+              <div className="
+                inline-flex items-center gap-3 px-6 py-3
+                rounded-full border border-neutral-800/70
+                bg-neutral-950/50 backdrop-blur-lg
+                text-neutral-300 text-sm font-medium mb-8
+              ">
+                <Bluetooth className="w-5 h-5 text-blue-400/80" />
+                Connected Clinical Peripherals
+              </div>
+
+              <h1 className="
+                text-4xl sm:text-5xl md:text-6xl lg:text-7xl
+                font-semibold tracking-tight leading-[1.05]
+                text-white
+              ">
+                Diagnostic Hardware Suite
+              </h1>
+
+              <p className="mt-6 text-lg md:text-xl text-neutral-400 leading-relaxed max-w-3xl mx-auto">
+                Reliable, standards-compliant devices designed for hospitals, clinics, telehealth and institutional care environments.
+              </p>
+            </div>
+
+            {/* Device cards grid */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7 lg:gap-9">
+              {devices.map((device, i) => (
+                <DeviceCard key={device.title} item={device} index={i} />
+              ))}
+            </div>
+
+            {/* Compliance & security block */}
+            <motion.div
+              initial={{ opacity: 0, y: 40 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 0.4 }}
+              viewport={{ once: true }}
+              className="
+                mt-24 md:mt-32 p-8 md:p-12
+                bg-neutral-950/60 backdrop-blur-xl
+                border border-neutral-800/60 rounded-2xl
+                text-center md:text-left
+                shadow-[0_16px_48px_rgba(0,0,0,0.4)]
+              "
+            >
+              <div className="flex flex-col md:flex-row items-center gap-10 md:gap-14">
+                <div className="
+                  p-6 md:p-8 rounded-2xl
+                  bg-neutral-900/70 border border-neutral-800/70
+                ">
+                  <ShieldCheck className="w-12 h-12 md:w-14 md:h-14 text-neutral-400" />
+                </div>
+
+                <div className="space-y-4">
+                  <h2 className="text-3xl md:text-4xl font-semibold text-white tracking-tight">
+                    Medical Standards & Data Security
+                  </h2>
+                  <p className="text-neutral-300 leading-relaxed text-lg max-w-3xl">
+                    Devices comply with IEC 60601, IEC 62304 and relevant regional regulations. All data transmission uses end-to-end encryption, device authentication, secure pairing and full audit logging.
+                  </p>
+                </div>
+              </div>
+            </motion.div>
+          </div>
+        </main>
+
+        <Footer />
+      </div>
+    </div>
+  );
+}

app/globals.css

@@ -1,37 +1,59 @@
 @import "tailwindcss";
 
 @theme {
-  --color-primary: #3b82f6;
+  --color-primary: #ffffff;
-  --color-secondary: #8b5cf6;
+  --color-secondary: #71717a;
-  --color-accent: #10b981;
+  --color-accent: #ffffff;
-  --color-background: #030712;
+  --color-background: #000000;
-  --color-foreground: #f3f4f6;
+  --color-foreground: #f4f4f5;
-  --color-card: rgba(17, 24, 39, 0.7);
+  --color-card: rgba(10, 10, 10, 0.7);
-  --color-border: rgba(75, 85, 99, 0.3);
+  --color-border: rgba(63, 63, 70, 0.3);
 }
 
 :root {
-  --background: #030712;
+  --background: #000000;
-  --foreground: #f3f4f6;
+  --foreground: #f4f4f5;
 }
 
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  font-family: var(--font-inter), system-ui, -apple-system, sans-serif;
   overflow-x: hidden;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-plus-jakarta), sans-serif;
+  letter-spacing: -0.04em;
+}
+
 @layer utilities {
   .glass {
-    background: rgba(17, 24, 39, 0.7);
+    background: rgba(10, 10, 10, 0.4);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+  }
+
+  .glass-dense {
+    background: rgba(5, 5, 5, 0.8);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
-    border: 1px solid rgba(75, 85, 99, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.03);
+  }
+
+  .perspective-1000 {
+    perspective: 1000px;
   }
 
   .text-gradient {
-    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #34d399 100%);
+    /* Updated to a silver/white shimmer instead of colors */
+    background: linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
@@ -40,6 +62,33 @@ body {
   .animate-pulse-slow {
     animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
+
+  .noise-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    pointer-events: none;
+    opacity: 0.03;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+  }
+
+  .reflection {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.03) 50%, transparent 55%);
+    background-size: 200% 200%;
+    animation: shine 12s infinite linear;
+  }
+}
+
+@keyframes shine {
+  0% {
+    background-position: -100% -100%;
+  }
+
+  100% {
+    background-position: 100% 100%;
+  }
 }
 
 @keyframes pulse {

app/layout.tsx

@@ -1,34 +1,35 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Plus_Jakarta_Sans, Inter } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
+const plusJakartaSans = Plus_Jakarta_Sans({
-  variable: "--font-geist-sans",
+    variable: "--font-plus-jakarta",
-  subsets: ["latin"],
+    subsets: ["latin"],
+    weight: ["400", "500", "600", "700", "800"],
 });
 
-const geistMono = Geist_Mono({
+const inter = Inter({
-  variable: "--font-geist-mono",
+    variable: "--font-inter",
-  subsets: ["latin"],
+    subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+    title: "Skyheal | A Healthcare Platform",
-  description: "Generated by create next app",
+    description: "Advanced clinical intelligence through immersive AI, precision hardware, and bio-secure automation.",
 };
 
 export default function RootLayout({
-  children,
+    children,
 }: Readonly<{
-  children: React.ReactNode;
+    children: React.ReactNode;
 }>) {
-  return (
+    return (
-    <html lang="en">
+        <html lang="en" className="dark scroll-smooth">
-      <body
+            <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+                className={`${plusJakartaSans.variable} ${inter.variable} antialiased bg-black text-white selection:bg-primary/30`}
-      >
+            >
-        {children}
+                {children}
-      </body>
+            </body>
-    </html>
+        </html>
-  );
+    );
 }

app/page.tsx

@@ -5,61 +5,105 @@ import DNAHeroBackground from "./components/canvas/DNAHeroBackground";
 import Navbar from "./components/layout/Navbar";
 import AIVoiceSoap from "./components/sections/AIVoiceSoap";
 import AIDiagnosis from "./components/sections/AIDiagnosis";
-import AIPrescription from "./components/sections/AIPrescription";
+// import AIPrescription from "./components/sections/AIPrescription";
 import DeviceShowcase from "./components/sections/DeviceShowcase";
-import TelehealthSolutions from "./components/sections/TelehealthSolutions";
+// import TelehealthSolutions from "./components/sections/TelehealthSolutions";
 import AppEcosystem from "./components/sections/AppEcosystem";
 import Footer from "./components/layout/Footer";
 import { ArrowRight, Sparkles } from "lucide-react";
 
 export default function Home() {
   return (
-    <div className="relative min-h-screen">
+    <div className="relative min-h-screen bg-black overflow-hidden isolate">
-      <DNAHeroBackground />
+      {/* DNA Background – placed first with negative z-index so it's behind everything */}
-      <Navbar />
+      <div className="absolute inset-0 z-[-1]">
+        <DNAHeroBackground />
+      </div>
 
-      <main className="relative z-10 pt-32">
+      {/* Navbar – should be above background */}
+      <div className="relative z-50">
+        <Navbar />
+      </div>
+
+      <main className="relative z-10">
         {/* Hero Section */}
-        <section className="container mx-auto px-6 py-24 min-h-[80vh] flex flex-col items-center justify-center text-center">
+        <section className="min-h-screen flex flex-col items-center justify-center text-center px-5 sm:px-8 md:px-12 lg:px-16 pt-16 sm:pt-20 md:pt-24">
           <motion.div
-            initial={{ opacity: 0, y: 20 }}
+            initial={{ opacity: 0, y: 40 }}
             animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8 }}
+            transition={{ duration: 1.1, ease: [0.22, 1, 0.36, 1] }}
-            className="space-y-8 max-w-4xl"
+            className="w-full max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 space-y-10 md:space-y-14 lg:space-y-16 xl:space-y-20 2xl:space-y-24"
           >
-            <div className="inline-flex items-center gap-2 px-6 py-3 rounded-full glass border-primary/20 text-primary-light animate-pulse-slow">
+            <h1
-              <Sparkles className="w-5 h-5" />
+              className={`
-              <span className="text-sm font-bold tracking-widest uppercase">The Future of Healthcare is Here</span>
+                text-5xl sm:text-6xl md:text-7xl lg:text-[6.5rem] xl:text-[8rem] 2xl:text-[9.5rem]
-            </div>
+                font-extrabold tracking-tighter leading-[0.85] sm:leading-[0.82] md:leading-[0.8]
-
+                text-white
-            <h1 className="text-5xl md:text-8xl font-black tracking-tighter leading-[1.1]">
+              `}
-              Reimagining Life with <br />
+            >
-              <span className="text-gradient">AI Precision</span>
+              Institutional <br className="sm:hidden" />
+              Healthcare{" "}
+              <span className="text-zinc-500 italic uppercase">AI</span>
             </h1>
 
-            <p className="text-xl text-foreground/60 leading-relaxed max-w-2xl mx-auto">
+            <p
-              Empowering healthcare providers with end-to-end AI intelligence. From voice-transcribed clinical notes to predictive diagnostics and automated prescriptions.
+              className={`
+                text-lg sm:text-xl md:text-2xl lg:text-2.5xl xl:text-3xl
+                text-zinc-400 max-w-3xl lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl
+                mx-auto leading-tight sm:leading-snug md:leading-relaxed
+                font-medium tracking-tight
+              `}
+            >
+              A zero-compromise clinical infrastructure.
+              <br className="hidden sm:inline" />
+              Precision diagnostic models, automated clinical notes, and hyper-secure data layers.
             </p>
 
-            <div className="flex flex-col sm:flex-row items-center justify-center gap-6 pt-8">
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-5 sm:gap-6 md:gap-8 pt-6 sm:pt-8 md:pt-10">
-              <button className="w-full sm:w-auto bg-primary hover:bg-primary/80 px-10 py-5 rounded-full font-bold text-lg transition-all transform hover:scale-105 shadow-[0_0_40px_rgba(59,130,246,0.4)] flex items-center justify-center gap-3">
+              <button
-                Experience Skyheal
+                className={`
-                <ArrowRight className="w-5 h-5" />
+                  group bg-white text-black 
+                  px-8 sm:px-10 md:px-12 lg:px-14 
+                  py-4 sm:py-5 md:py-6 
+                  rounded-2xl 
+                  text-base sm:text-lg md:text-xl lg:text-2xl 
+                  font-black transition-all duration-300
+                  hover:scale-105 active:scale-95 shadow-2xl
+                  flex items-center gap-3 sm:gap-4
+                  border border-white/10
+                `}
+              >
+                Book a Demo
+                <ArrowRight className="w-5 h-5 sm:w-6 sm:h-6 group-hover:translate-x-2 transition-transform duration-300" />
               </button>
-              <button className="w-full sm:w-auto glass hover:bg-white/10 px-10 py-5 rounded-full font-bold text-lg transition-all">
+
-                Watch Demo
+              <button
+                className={`
+                  px-8 sm:px-10 md:px-12 lg:px-14 
+                  py-4 sm:py-5 md:py-6 
+                  rounded-2xl 
+                  text-base sm:text-lg md:text-xl lg:text-2xl 
+                  font-black 
+                  bg-white/5 backdrop-blur-md border border-white/10
+                  hover:bg-white/10 transition-all duration-300 shadow-xl
+                `}
+              >
+                Technical Deck
               </button>
             </div>
           </motion.div>
+
+          {/* Subtle bottom fade to blend into sections */}
+          <div className="absolute bottom-0 left-0 right-0 h-48 sm:h-64 md:h-80 bg-gradient-to-t from-black to-transparent pointer-events-none z-20" />
         </section>
 
-        {/* AI Service Sections */}
+        {/* Content sections with progressive spacing */}
-        <div className="space-y-32 pb-32">
+        <div className="relative space-y-24 sm:space-y-32 md:space-y-40 lg:space-y-48 xl:space-y-56 2xl:space-y-64 pb-24 sm:pb-32 md:pb-40 lg:pb-48 xl:pb-56">
           <AIVoiceSoap />
           <DeviceShowcase />
           <AIDiagnosis />
-          <TelehealthSolutions />
+          {/* <TelehealthSolutions /> */}
-          <AIPrescription />
+          {/* <AIPrescription /> */}
           <AppEcosystem />
         </div>
 
@@ -67,4 +111,4 @@ export default function Home() {
       </main>
     </div>
   );
-}
+}

package-lock.json

@@ -17,13 +17,15 @@
         "react": "19.2.1",
         "react-dom": "19.2.1",
         "tailwind-merge": "^3.4.0",
-        "three": "^0.182.0"
+        "three": "^0.182.0",
+        "three-stdlib": "^2.36.1"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
+        "@types/three": "^0.182.0",
         "eslint": "^9",
         "eslint-config-next": "16.0.10",
         "tailwindcss": "^4",

package.json

@@ -18,13 +18,15 @@
     "react": "19.2.1",
     "react-dom": "19.2.1",
     "tailwind-merge": "^3.4.0",
-    "three": "^0.182.0"
+    "three": "^0.182.0",
+    "three-stdlib": "^2.36.1"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@types/three": "^0.182.0",
     "eslint": "^9",
     "eslint-config-next": "16.0.10",
     "tailwindcss": "^4",