Animation Added and Gif file updated

app/apps/page.tsx

@@ -3,111 +3,234 @@
 import Navbar from "../components/layout/Navbar";
 import DNAHeroBackground from "../components/canvas/DNAHeroBackground";
 import Footer from "../components/layout/Footer";
-import { motion } from "framer-motion";
+import { motion, useScroll, useTransform } from "framer-motion";
-import { Lock, Globe, MessageSquare, Bell, HeartPulse, ShieldCheck, Fingerprint, Zap } from "lucide-react";
+import { 
+  Lock, Globe, MessageSquare, Bell, HeartPulse, ShieldCheck, 
+  Fingerprint, Zap, ArrowRight, LayoutGrid 
+} from "lucide-react";
+import { useRef } from "react";
+
+// Animation Variants
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: { 
+      staggerChildren: 0.15, 
+      delayChildren: 0.2 
+    }
+  }
+};
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 30 },
+  visible: { 
+    opacity: 1, 
+    y: 0, 
+    transition: { 
+      duration: 0.8, 
+      ease: [0.2, 0.65, 0.3, 0.9] as const 
+    } 
+  }
+} satisfies import("framer-motion").Variants;
 
 export default function AppsPage() {
-    return (
+  const targetRef = useRef<HTMLDivElement>(null);
-        <div className="relative min-h-screen bg-black">
+  const { scrollYProgress } = useScroll({ 
-            <DNAHeroBackground />
+    target: targetRef, 
-            <Navbar />
+    offset: ["start end", "end start"] 
+  });
+  const y = useTransform(scrollYProgress, [0, 1], [100, -100]);
 
-            <main className="relative z-10 pt-48 pb-32">
+  return (
-                <div className="container mx-auto px-6 text-center lg:text-left">
+    <div className="relative min-h-screen bg-black text-white selection:bg-white selection:text-black overflow-x-hidden font-sans">
-                    <div className="flex flex-col lg:flex-row gap-24 items-center">
+      {/* Background Layer */}
-                        <motion.div
+      <div className="fixed inset-0 z-0">
-                            initial={{ opacity: 0, x: -30 }}
+        <DNAHeroBackground />
-                            animate={{ opacity: 1, x: 0 }}
+        <div className="absolute inset-0 bg-gradient-to-b from-black/80 via-black/40 to-black pointer-events-none" />
-                            transition={{ duration: 0.8 }}
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.05),transparent_40%)] pointer-events-none" />
-                            className="flex-1 space-y-12"
+      </div>
-                        >
-                            <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">
-                                <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-2xl md:text-3xl text-zinc-600 leading-tight max-w-3xl font-medium tracking-tight mx-auto lg:mx-0">
-                                Institutional clinical command center. Real-time bio-sync and clinical assistance designed for absolute operational security.
-                            </p>
 
-                            <div className="flex flex-wrap justify-center lg:justify-start gap-6 pt-6">
+      <Navbar />
-                                <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">
-                                    Systems Deck
-                                </button>
-                                <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">
-                                    Audit Logs
-                                </button>
-                            </div>
-                        </motion.div>
 
-                        <motion.div
+      <main className="relative z-10 pt-32 pb-20 lg:pt-48 lg:pb-32">
-                            initial={{ opacity: 0, y: 30 }}
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
-                            animate={{ opacity: 1, y: 0 }}
+          
-                            transition={{ duration: 1 }}
+          {/* --- HERO SECTION --- */}
-                            className="flex-1 relative lg:block hidden perspective-1000"
+          <div className="flex flex-col lg:flex-row gap-16 lg:gap-8 items-center lg:items-start min-h-[80vh]">
-                        >
+            
-                            <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]">
+            {/* Left: Text Content */}
-                                <div className="reflection" />
+            <motion.div
-                                <div className="w-full h-full bg-black rounded-[2.9rem] overflow-hidden p-10 space-y-12 relative flex flex-col justify-center">
+              variants={containerVariants}
-                                    <div className="flex items-center gap-4 relative z-10 border-b border-white/5 pb-8 opacity-40">
+              initial="hidden"
-                                        <div className="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center border border-white/10 shadow-none">
+              animate="visible"
-                                            <HeartPulse className="text-white w-7 h-7" />
+              className="flex-1 space-y-8 lg:space-y-10 text-center lg:text-left pt-10"
-                                        </div>
+            >
-                                        <div className="h-2 w-20 bg-white/10 rounded-full" />
+              <motion.div 
-                                    </div>
+                variants={itemVariants} 
+                className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/5 border border-white/10 backdrop-blur-md text-zinc-400 text-[10px] sm:text-xs font-bold tracking-[0.2em] uppercase mx-auto lg:mx-0"
+              >
+                <Zap className="w-3 h-3 text-white" />
+                <span>Neural Ecosystem v4.0</span>
+              </motion.div>
 
-                                    <div className="space-y-8 relative z-10 text-center">
+              <motion.h1 
-                                        <h4 className="text-[8px] font-black uppercase tracking-[0.4em] text-zinc-600 italic">Live Clinical Sync</h4>
+                variants={itemVariants} 
-                                        <div className="aspect-square glass rounded-[2.5rem] flex items-center justify-center border-white/5 shadow-none p-8 bg-white/[0.01]">
+                className="text-5xl sm:text-7xl md:text-8xl xl:text-9xl font-extrabold tracking-tighter leading-[0.9] text-white"
-                                            <motion.div
+              >
-                                                animate={{ scale: [1, 1.05, 1], opacity: [0.2, 0.4, 0.2] }}
+                Unified <br className="hidden lg:block" />
-                                                transition={{ repeat: Infinity, duration: 5 }}
+                <span className="text-transparent bg-clip-text bg-gradient-to-r from-zinc-500 via-zinc-200 to-white italic pr-2">
-                                            >
+                  Access
-                                                <HeartPulse className="w-24 h-24 text-white opacity-40 shadow-none" />
+                </span>
-                                            </motion.div>
+              </motion.h1>
-                                        </div>
+
-                                    </div>
+              <motion.p 
-                                    <div className="h-10 glass rounded-xl border-white/5 opacity-20" />
+                variants={itemVariants} 
-                                </div>
+                className="text-lg sm:text-xl md:text-2xl text-zinc-400 leading-relaxed max-w-2xl mx-auto lg:mx-0 font-light"
-                                <div className="absolute top-0 inset-x-0 h-10 flex justify-center items-center">
+              >
-                                    <div className="w-28 h-6 bg-black rounded-b-[1.5rem] border-x border-b border-white/5" />
+                The institutional clinical command center. Real-time bio-sync and clinical assistance designed for absolute operational security.
-                                </div>
+              </motion.p>
-                            </div>
+
-                        </motion.div>
+              <motion.div 
+                variants={itemVariants} 
+                className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 pt-4"
+              >
+                <button className="group relative w-full sm:w-auto px-8 py-4 bg-white text-black rounded-xl font-bold text-base uppercase tracking-wider overflow-hidden transition-transform active:scale-95 hover:shadow-[0_0_30px_rgba(255,255,255,0.3)]">
+                  <span className="relative z-10 flex items-center justify-center gap-2">
+                    Systems Deck <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
+                  </span>
+                </button>
+                <button className="w-full sm:w-auto px-8 py-4 bg-white/5 border border-white/10 text-zinc-300 rounded-xl font-bold text-base uppercase tracking-wider hover:bg-white/10 transition-colors backdrop-blur-sm">
+                  Audit Logs
+                </button>
+              </motion.div>
+            </motion.div>
+
+            {/* Right: Phone Mockup Animation */}
+            <motion.div
+              initial={{ opacity: 0, x: 50 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 1.2, ease: "easeOut" }}
+              className="flex-1 relative w-full max-w-[400px] lg:max-w-none perspective-1000 hidden md:block"
+            >
+              {/* Decorative Background Blob */}
+              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-zinc-800/20 rounded-full blur-3xl pointer-events-none" />
+
+              <motion.div 
+                animate={{ y: [-15, 15, -15] }}
+                transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
+                className="relative w-[300px] sm:w-[340px] h-[600px] sm:h-[680px] mx-auto"
+              >
+                {/* Glass Phone Frame */}
+                <div className="absolute inset-0 rounded-[3.5rem] bg-gradient-to-b from-white/10 to-white/5 border border-white/10 backdrop-blur-xl shadow-2xl overflow-hidden z-20">
+                  
+                  {/* Notch */}
+                  <div className="absolute top-0 inset-x-0 h-8 flex justify-center z-30">
+                    <div className="w-32 h-6 bg-black rounded-b-2xl border-x border-b border-white/10" />
+                  </div>
+
+                  {/* Screen Content */}
+                  <div className="w-full h-full bg-black/80 p-8 flex flex-col relative">
+                    
+                    {/* Status Header */}
+                    <div className="flex items-center justify-between mt-8 mb-12 opacity-50">
+                      <LayoutGrid className="w-6 h-6 text-white" />
+                      <div className="h-1.5 w-12 bg-white/20 rounded-full" />
                     </div>
 
-                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 mt-60">
+                    {/* Dynamic Widget */}
-                        {[
+                    <div className="space-y-6 relative z-10 flex-grow flex flex-col justify-center">
-                            { icon: Lock, title: "Zero-Trust Protocol", desc: "Institutional-grade multi-layer security for clinical data transfers." },
+                      <div className="text-center space-y-2">
-                            { icon: MessageSquare, title: "Clinical AI Bridge", desc: "Real-time verification and documentation via medical LLM layers." },
+                        <div className="inline-block p-4 rounded-full bg-white/5 border border-white/10 mb-4 animate-pulse">
-                            { icon: Bell, title: "Predictive SOS Audit", desc: "Automated institutional alerts based on verified vital trend analysis." },
+                          <HeartPulse className="w-12 h-12 text-white" />
-                            { icon: Globe, title: "Universal Sync Hub", desc: "Global access to clinical data on certified HIPAA infrastructure." },
+                        </div>
-                            { icon: Fingerprint, title: "Biometric Audit", desc: "Hardware-locked PHI access ensures zero-bias clinical security." },
+                        <h3 className="text-2xl font-bold text-white">Bio-Sync Active</h3>
-                            { icon: ShieldCheck, title: "Institutional Verified", desc: "Certified infrastructure for sovereign clinical data integrity." }
+                        <p className="text-sm text-zinc-500 font-mono">ENCRYPTED STREAM • 42ms</p>
-                        ].map((feature, i) => (
+                      </div>
-                            <motion.div
+
-                                key={i}
+                      {/* Dummy Chart Lines */}
-                                initial={{ opacity: 0, scale: 0.98 }}
+                      <div className="h-32 w-full flex items-end justify-between gap-1 px-2">
-                                whileInView={{ opacity: 1, scale: 1 }}
+                        {[40, 70, 45, 90, 60, 80, 50, 75, 60, 95].map((h, i) => (
-                                transition={{ delay: i * 0.1 }}
+                          <motion.div 
-                                whileHover={{ y: -5, borderColor: "rgba(255, 255, 255, 0.15)" }}
+                            key={i}
-                                className="glass p-12 rounded-[3rem] border-white/5 space-y-8 transition-all shadow-none overflow-hidden group bg-white/[0.01]"
+                            animate={{ height: [`${h/2}%`, `${h}%`, `${h/2}%`] }}
-                            >
+                            transition={{ duration: 2, repeat: Infinity, delay: i * 0.1 }}
-                                <div className="reflection opacity-0 group-hover:opacity-100" />
+                            className="w-full bg-zinc-700/50 rounded-t-sm"
-                                <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-2xl font-black tracking-tight text-white uppercase italic">{feature.title}</h3>
-                                <p className="text-zinc-500 text-lg font-medium leading-[1.4] tracking-tight">{feature.desc}</p>
-                            </motion.div>
                         ))}
+                      </div>
                     </div>
-                </div>
-            </main>
 
-            <Footer />
+                    {/* Bottom Actions */}
+                    <div className="h-16 w-full bg-white/5 rounded-2xl border border-white/10 mt-auto flex items-center justify-around px-4 backdrop-blur-md">
+                      {[Bell, Globe, ShieldCheck].map((Icon, i) => (
+                        <Icon key={i} className="w-6 h-6 text-zinc-400" />
+                      ))}
+                    </div>
+                  </div>
+                  
+                  {/* Reflection Gradient */}
+                  <div className="absolute inset-0 bg-gradient-to-tr from-transparent via-white/5 to-transparent pointer-events-none" />
+                </div>
+
+                {/* Shadow / Depth Layer */}
+                <div className="absolute inset-0 translate-x-4 translate-y-4 rounded-[3.5rem] bg-black/50 blur-xl -z-10" />
+              </motion.div>
+            </motion.div>
+          </div>
+
+          {/* --- FEATURE GRID --- */}
+          <div ref={targetRef} className="mt-32 lg:mt-48 relative">
+            {/* Section Header */}
+            <div className="mb-16 md:mb-24 space-y-4 max-w-2xl">
+              <h2 className="text-3xl md:text-5xl font-bold tracking-tight text-white">System Architecture</h2>
+              <p className="text-zinc-500 text-lg">Institutional-grade protocols built for the next generation of healthcare.</p>
+            </div>
+
+            <motion.div 
+              style={{ y }}
+              className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8"
+            >
+              {[
+                { icon: Lock, title: "Zero-Trust Protocol", desc: "Institutional-grade multi-layer security for clinical data transfers." },
+                { icon: MessageSquare, title: "Clinical AI Bridge", desc: "Real-time verification and documentation via medical LLM layers." },
+                { icon: Bell, title: "Predictive SOS Audit", desc: "Automated institutional alerts based on verified vital trend analysis." },
+                { icon: Globe, title: "Universal Sync Hub", desc: "Global access to clinical data on certified HIPAA infrastructure." },
+                { 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: 50 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true, margin: "-50px" }}
+                  transition={{ delay: i * 0.1, duration: 0.6 }}
+                  whileHover={{ y: -8 }}
+                  className="group relative bg-zinc-900/40 border border-white/5 p-8 sm:p-10 rounded-[2.5rem] overflow-hidden backdrop-blur-sm hover:bg-zinc-900/60 transition-colors"
+                >
+                  {/* Hover Glow */}
+                  <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                  
+                  <div className="relative z-10 space-y-6">
+                    <div className="w-14 h-14 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center group-hover:bg-white/10 group-hover:scale-110 transition-all duration-300">
+                      <feature.icon className="w-7 h-7 text-zinc-300 group-hover:text-white transition-colors" />
+                    </div>
+                    
+                    <div className="space-y-3">
+                      <h3 className="text-xl font-bold tracking-wide text-white uppercase">{feature.title}</h3>
+                      <p className="text-zinc-500 text-base leading-relaxed group-hover:text-zinc-400 transition-colors">
+                        {feature.desc}
+                      </p>
+                    </div>
+                  </div>
+                </motion.div>
+              ))}
+            </motion.div>
+          </div>
         </div>
-    );
+      </main>
-}
+
+      <Footer />
+    </div>
+  );
+}

app/components/canvas/BioNeurons.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import { useMemo, useRef, useState } from "react";
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { MeshDistortMaterial, Sphere, Preload, Float } from "@react-three/drei";
+import * as THREE from "three";
+
+// --- CONFIGURATION ---
+const NEURON_COUNT = 18; // Fewer, but more detailed neurons
+const CONNECTION_DISTANCE = 5.5; // Distance to form a synapse
+const PULSE_SPEED = 2.5; // Speed of the electric signal
+
+// 1. SINGLE NEURON CELL (The Soma)
+// We use a distorted sphere to make it look like organic tissue
+function NeuronCell({ position }: { position: [number, number, number] }) {
+  const meshRef = useRef<THREE.Mesh>(null!);
+  const [hovered, setHover] = useState(false);
+
+  // Randomize size slightly for variety
+  const scale = useMemo(() => 0.6 + Math.random() * 0.4, []);
+
+  useFrame((state) => {
+    // Gentle heartbeat pulsation
+    const t = state.clock.getElapsedTime();
+    const pulse = Math.sin(t * 3) * 0.05 + 1;
+    if (meshRef.current) {
+        meshRef.current.scale.set(scale * pulse, scale * pulse, scale * pulse);
+    }
+  });
+
+  return (
+    <Float speed={2} rotationIntensity={0.5} floatIntensity={0.5}>
+      <Sphere
+        ref={meshRef}
+        args={[1, 32, 32]} // Geometry args
+        position={position}
+        onPointerOver={() => setHover(true)}
+        onPointerOut={() => setHover(false)}
+      >
+        <MeshDistortMaterial
+          color={hovered ? "#06b6d4" : "#22d3ee"} // Cyan 500 to 400
+          emissive={hovered ? "#0891b2" : "#0e7490"}
+          emissiveIntensity={0.6}
+          roughness={0.2}
+          metalness={0.1}
+          distort={0.4} // The "wobble" amount (0-1)
+          speed={2} // Speed of the wobble
+        />
+        <pointLight distance={3} intensity={2} color="#22d3ee" />
+      </Sphere>
+    </Float>
+  );
+}
+
+// 2. SYNAPSE (The Connection & The Impulse)
+// Draws a curved organic line and a traveling light pulse
+function Synapse({ start, end }: { start: THREE.Vector3; end: THREE.Vector3 }) {
+  const curve = useMemo(() => {
+    // Create a quadratic bezier curve for a natural "tendon" look
+    // Control point is midway but offset randomly to create the curve
+    const mid = new THREE.Vector3().lerpVectors(start, end, 0.5);
+    mid.x += (Math.random() - 0.5) * 2;
+    mid.y += (Math.random() - 0.5) * 2;
+    mid.z += (Math.random() - 0.5) * 2;
+    return new THREE.QuadraticBezierCurve3(start, mid, end);
+  }, [start, end]);
+
+  // Create points for the line geometry
+  const points = useMemo(() => curve.getPoints(20), [curve]);
+  
+  // The traveling impulse ref
+  const impulseRef = useRef<THREE.Mesh>(null!);
+
+  useFrame((state) => {
+    // Move the impulse along the curve
+    const t = (state.clock.getElapsedTime() * PULSE_SPEED) % 1; // 0 to 1 loop
+    if (impulseRef.current) {
+      const pos = curve.getPointAt(t);
+      impulseRef.current.position.copy(pos);
+      
+      // Scale impulse based on position (fade in/out at ends)
+      const scale = Math.sin(t * Math.PI); 
+      impulseRef.current.scale.setScalar(scale * 0.15);
+    }
+  });
+
+  return (
+    <group>
+      {/* The Axon (Line) */}
+      <line>
+        <bufferGeometry>
+          <bufferAttribute
+            attach="attributes-position"
+            count={points.length}
+            array={new Float32Array(points.flatMap((p) => [p.x, p.y, p.z]))}
+            itemSize={3}
+          />
+        </bufferGeometry>
+        <lineBasicMaterial
+          color="#155e75" // Dark Cyan
+          transparent
+          opacity={0.3}
+          linewidth={1} 
+        />
+      </line>
+
+      {/* The Electric Impulse (Glowing Dot) */}
+      <mesh ref={impulseRef}>
+        <sphereGeometry args={[1, 8, 8]} />
+        <meshBasicMaterial color="#ecfeff" toneMapped={false} />
+        <pointLight distance={2} intensity={2} color="#22d3ee" decay={2} />
+      </mesh>
+    </group>
+  );
+}
+
+// 3. MAIN SCENE CONTROLLER
+function NeuralNetworkScene() {
+  const { viewport } = useThree();
+  const mouse = useRef(new THREE.Vector2());
+
+  // Generate Neurons
+  const neurons = useMemo(() => {
+    const temp = [];
+    for (let i = 0; i < NEURON_COUNT; i++) {
+      temp.push({
+        position: new THREE.Vector3(
+          (Math.random() - 0.5) * 20,
+          (Math.random() - 0.5) * 20,
+          (Math.random() - 0.5) * 10
+        ),
+        id: i,
+      });
+    }
+    return temp;
+  }, []);
+
+  // Generate Connections (Proximity based)
+  const connections = useMemo(() => {
+    const conns = [];
+    for (let i = 0; i < neurons.length; i++) {
+      for (let j = i + 1; j < neurons.length; j++) {
+        const dist = neurons[i].position.distanceTo(neurons[j].position);
+        if (dist < CONNECTION_DISTANCE) {
+          conns.push({ start: neurons[i].position, end: neurons[j].position, key: `${i}-${j}` });
+        }
+      }
+    }
+    return conns;
+  }, [neurons]);
+
+  useFrame((state) => {
+    // Soft camera movement based on mouse
+    const x = (state.pointer.x * viewport.width) / 10;
+    const y = (state.pointer.y * viewport.height) / 10;
+    
+    state.camera.position.x = THREE.MathUtils.lerp(state.camera.position.x, x, 0.05);
+    state.camera.position.y = THREE.MathUtils.lerp(state.camera.position.y, y, 0.05);
+    state.camera.lookAt(0, 0, 0);
+  });
+
+  return (
+    <group>
+      {/* Draw Neurons */}
+      {neurons.map((n) => (
+        <NeuronCell key={n.id} position={[n.position.x, n.position.y, n.position.z]} />
+      ))}
+
+      {/* Draw Synapses */}
+      {connections.map((c) => (
+        <Synapse key={c.key} start={c.start} end={c.end} />
+      ))}
+    </group>
+  );
+}
+
+export default function BioNeurons() {
+  return (
+    <div className="absolute inset-0 z-0 h-full w-full">
+      <Canvas
+        camera={{ position: [0, 0, 14], fov: 45 }}
+        gl={{ alpha: true, antialias: true }}
+        dpr={[1, 2]}
+      >
+        <ambientLight intensity={0.2} />
+        <pointLight position={[10, 10, 10]} intensity={1} color="#06b6d4" />
+        <NeuralNetworkScene />
+        <Preload all />
+      </Canvas>
+    </div>
+  );
+}

app/components/canvas/DNAHelix.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+
+interface Props {
+  className?: string;
+}
+
+const DNAHelix: React.FC<Props> = ({ className }) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    // Dimensions based on parent container
+    let width = canvas.width = canvas.parentElement?.clientWidth || window.innerWidth;
+    let height = canvas.height = canvas.parentElement?.clientHeight || window.innerHeight;
+
+    let animationFrameId: number;
+    let time = 0;
+
+    const handleResize = () => {
+      if (canvas.parentElement) {
+        width = canvas.width = canvas.parentElement.clientWidth;
+        height = canvas.height = canvas.parentElement.clientHeight;
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    const render = () => {
+      ctx.clearRect(0, 0, width, height);
+      time += 0.02; // Rotation speed
+
+      const strandGap = 40; // Vertical distance between "base pairs"
+      const amplitude = 50; // Width of the helix
+      const frequency = 0.015; // Tightness of the loops
+      
+      // Position helix on the right side (85% of width) to keep content clear
+      const centerX = width * 0.85; 
+      
+      ctx.lineWidth = 2;
+      
+      // Calculate number of points based on container height
+      const numPoints = Math.ceil(height / strandGap) + 5;
+
+      for (let i = 0; i < numPoints; i++) {
+        // Scroll the helix slowly downward
+        const y = i * strandGap - (time * 10) % strandGap;
+        
+        // Calculate rotation phase
+        const phase = y * frequency + time;
+        
+        // Strand 1 (Cyan)
+        const x1 = centerX + Math.sin(phase) * amplitude;
+        // Strand 2 (Emerald) - Offset by PI
+        const x2 = centerX + Math.sin(phase + Math.PI) * amplitude;
+
+        // Depth calculation for 3D effect (fade when "back")
+        const depth1 = Math.cos(phase); 
+        const depth2 = Math.cos(phase + Math.PI);
+
+        // Map depth (-1 to 1) to opacity (0.2 to 0.8)
+        const alpha1 = (depth1 + 1) / 2 * 0.6 + 0.2; 
+        const alpha2 = (depth2 + 1) / 2 * 0.6 + 0.2;
+
+        // Draw Connector Line (Base Pair)
+        ctx.beginPath();
+        ctx.moveTo(x1, y);
+        ctx.lineTo(x2, y);
+        ctx.strokeStyle = `rgba(34, 211, 238, 0.05)`; // Very faint connector
+        ctx.stroke();
+
+        // Draw Strand 1 Particle
+        ctx.beginPath();
+        ctx.arc(x1, y, 4 + depth1, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(34, 211, 238, ${alpha1})`; // Cyan
+        ctx.fill();
+
+        // Draw Strand 2 Particle
+        ctx.beginPath();
+        ctx.arc(x2, y, 4 + depth2, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(52, 211, 153, ${alpha2})`; // Emerald
+        ctx.fill();
+      }
+
+      animationFrameId = requestAnimationFrame(render);
+    };
+
+    render();
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className={`block w-full h-full ${className}`}
+    />
+  );
+};
+
+export default DNAHelix;

app/components/canvas/GravityWave.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+
+interface Props {
+  className?: string;
+}
+
+const GravityWave: React.FC<Props> = ({ className }) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    // Initialize dimensions based on parent container
+    let width = canvas.width = canvas.parentElement?.clientWidth || window.innerWidth;
+    let height = canvas.height = canvas.parentElement?.clientHeight || window.innerHeight;
+
+    let animationFrameId: number;
+    let time = 0;
+
+    // Configuration
+    const gap = 50; 
+    const rows = Math.ceil(height / gap) + 4;
+    const cols = Math.ceil(width / gap) + 4;
+    
+    // Mouse state
+    const mouse = { x: -500, y: -500 };
+
+    const handleResize = () => {
+      // Resize based on parent element
+      if (canvas.parentElement) {
+        width = canvas.width = canvas.parentElement.clientWidth;
+        height = canvas.height = canvas.parentElement.clientHeight;
+      }
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const rect = canvas.getBoundingClientRect();
+      mouse.x = e.clientX - rect.left;
+      mouse.y = e.clientY - rect.top;
+    };
+
+    window.addEventListener("resize", handleResize);
+    // Attach mouse move to the specific canvas/container, not window, if you want localized interaction
+    // But keeping it on window usually feels smoother for "approaching" the section
+    window.addEventListener("mousemove", handleMouseMove);
+
+    const render = () => {
+      ctx.clearRect(0, 0, width, height);
+      time += 0.02;
+
+      ctx.shadowBlur = 4;
+      ctx.shadowColor = "rgba(34, 211, 238, 0.5)"; 
+      
+      const gradient = ctx.createLinearGradient(0, 0, width, height);
+      gradient.addColorStop(0, "rgba(34, 211, 238, 0.4)"); 
+      gradient.addColorStop(1, "rgba(52, 211, 153, 0.4)"); 
+      
+      ctx.strokeStyle = gradient;
+      ctx.lineWidth = 1.5;
+
+      // Re-calculate rows/cols in case of resize
+      const currentRows = Math.ceil(height / gap) + 4;
+      const currentCols = Math.ceil(width / gap) + 4;
+
+      for (let iy = 0; iy < currentRows; iy++) {
+        const yBase = iy * gap;
+        ctx.beginPath();
+        for (let ix = 0; ix < currentCols; ix++) {
+          const xBase = ix * gap;
+
+          const waveOffset = Math.sin(ix * 0.2 + time) * 8 + Math.cos(iy * 0.3 + time) * 8;
+          const dx = xBase - mouse.x;
+          const dy = yBase - mouse.y;
+          const dist = Math.sqrt(dx * dx + dy * dy);
+          
+          const maxDist = 400; 
+          let gravityX = 0;
+          let gravityY = 0;
+
+          if (dist < maxDist) {
+            const force = (maxDist - dist) / maxDist;
+            const power = force * 60; 
+            const angle = Math.atan2(dy, dx);
+            gravityX = Math.cos(angle) * power;
+            gravityY = Math.sin(angle) * power;
+          }
+
+          const xFinal = xBase + gravityX;
+          const yFinal = yBase + waveOffset + gravityY;
+
+          if (ix === 0) ctx.moveTo(xFinal, yFinal);
+          else ctx.lineTo(xFinal, yFinal);
+        }
+        ctx.stroke();
+      }
+      animationFrameId = requestAnimationFrame(render);
+    };
+
+    render();
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("mousemove", handleMouseMove);
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className={`block w-full h-full ${className}`}
+      style={{ touchAction: "none" }}
+    />
+  );
+};
+
+export default GravityWave;

app/components/canvas/NeuralNetwork.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useRef, useMemo } from "react";
+import { Canvas, useFrame } from "@react-three/fiber";
+import { Points, PointMaterial, Preload } from "@react-three/drei";
+import * as THREE from "three";
+
+function Particles(props: any) {
+  const ref = useRef<THREE.Points>(null!);
+  
+  // Generate 5000 random points inside a sphere
+  const sphere = useMemo(() => {
+    const coords = new Float32Array(5000 * 3);
+    for (let i = 0; i < 5000; i++) {
+      const r = 1.2 * Math.cbrt(Math.random()); // Radius
+      const theta = Math.random() * 2 * Math.PI; // Theta
+      const phi = Math.acos(2 * Math.random() - 1); // Phi
+      
+      const x = r * Math.sin(phi) * Math.cos(theta);
+      const y = r * Math.sin(phi) * Math.sin(theta);
+      const z = r * Math.cos(phi);
+      
+      coords[i * 3] = x;
+      coords[i * 3 + 1] = y;
+      coords[i * 3 + 2] = z;
+    }
+    return coords;
+  }, []);
+
+  useFrame((state, delta) => {
+    if (ref.current) {
+      // Rotate the entire cloud slowly
+      ref.current.rotation.x -= delta / 10;
+      ref.current.rotation.y -= delta / 15;
+    }
+  });
+
+  return (
+    <group rotation={[0, 0, Math.PI / 4]}>
+      <Points ref={ref} positions={sphere} stride={3} frustumCulled={false} {...props}>
+        <PointMaterial
+          transparent
+          color="#22d3ee" // Cyan-400
+          size={0.005}
+          sizeAttenuation={true}
+          depthWrite={false}
+          opacity={0.6}
+        />
+      </Points>
+    </group>
+  );
+}
+
+const NeuralNetwork = () => {
+  return (
+    <div className="absolute inset-0 z-0 h-full w-full">
+      <Canvas camera={{ position: [0, 0, 1] }}>
+        <Particles />
+        <Preload all />
+      </Canvas>
+    </div>
+  );
+};
+
+export default NeuralNetwork;

app/components/canvas/NeuronNetwork.tsx

@@ -0,0 +1,81 @@
+// src/components/canvas/NeuronNetwork.tsx
+"use client";
+
+import { useRef, useMemo } from "react";
+import { Canvas, useFrame } from "@react-three/fiber";
+import { Points, PointMaterial } from "@react-three/drei";
+import * as THREE from "three";
+
+function NeuronParticles({ count = 200 }) {
+  // Create a ref for the points to animate them
+  const points = useRef<THREE.Points>(null!);
+
+  // Generate random positions for the neurons
+  const positions = useMemo(() => {
+    const pos = new Float32Array(count * 3);
+    for (let i = 0; i < count; i++) {
+      // Spread particles across a wide area (x, y, z)
+      pos[i * 3] = (Math.random() - 0.5) * 25;     // x
+      pos[i * 3 + 1] = (Math.random() - 0.5) * 25; // y
+      pos[i * 3 + 2] = (Math.random() - 0.5) * 10; // z
+    }
+    return pos;
+  }, [count]);
+
+  useFrame((state, delta) => {
+    if (points.current) {
+      // subtle rotation of the entire system
+      points.current.rotation.x -= delta / 50;
+      points.current.rotation.y -= delta / 60;
+      
+      // Optional: Gentle wave motion could be added here
+    }
+  });
+
+  return (
+    <group rotation={[0, 0, Math.PI / 4]}>
+      <Points
+        ref={points}
+        positions={positions}
+        stride={3}
+        frustumCulled={false}
+      >
+        <PointMaterial
+          transparent
+          color="#22d3ee" // Cyan-400
+          size={0.08}
+          sizeAttenuation={true}
+          depthWrite={false}
+          opacity={0.6}
+        />
+      </Points>
+      {/* For true "connections" (lines), calculating distance between 200 points 
+        every frame is heavy. A visual trick is to render a second layer 
+        of slightly larger, fainter particles or use a custom shader.
+        
+        However, for a clean "Neuron" look, we often just need the floating nodes 
+        and a faint fog, or we can use the <Line> component from drei 
+        if the count is low (<50). 
+      */}
+    </group>
+  );
+}
+
+// A wrapper to handle the Canvas settings
+export default function NeuronNetwork() {
+  return (
+    <div className="absolute inset-0 z-0">
+      <Canvas
+        camera={{ position: [0, 0, 10], fov: 60 }}
+        gl={{ alpha: true, antialias: true }}
+        dpr={[1, 2]} // Handle high-res screens
+      >
+        <color attach="background" args={["transparent"]} />
+        <ambientLight intensity={0.5} />
+        <NeuronParticles count={300} />
+        {/* Fog creates depth, fading distant neurons */}
+        <fog attach="fog" args={['#030712', 5, 20]} /> 
+      </Canvas>
+    </div>
+  );
+}

app/components/canvas/NeuronsGravity.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import { useMemo, useRef } from "react";
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import * as THREE from "three";
+import { Preload } from "@react-three/drei";
+
+// CONFIGURATION
+const PARTICLE_COUNT = 80;
+const CONNECT_DISTANCE = 3.5;
+const MOUSE_INFLUENCE_RADIUS = 6; // Radius of the mouse wave
+const WAVE_AMPLITUDE = 1.5; // How high the wave ripples (Z-axis)
+
+function NeuralMesh() {
+  const groupRef = useRef<THREE.Group>(null);
+  const particlesRef = useRef<THREE.Points>(null);
+  const linesRef = useRef<THREE.LineSegments>(null);
+  
+  // Get viewport to map mouse coordinates correctly to world space
+  const { viewport } = useThree();
+
+  // 1. Generate Initial Random Positions & Velocities
+  // We store "original positions" to calculate the wave offset from
+  const [positions, velocities, originalPositions] = useMemo(() => {
+    const pos = new Float32Array(PARTICLE_COUNT * 3);
+    const origPos = new Float32Array(PARTICLE_COUNT * 3);
+    const vel = [];
+    
+    for (let i = 0; i < PARTICLE_COUNT; i++) {
+      const x = (Math.random() - 0.5) * 18;
+      const y = (Math.random() - 0.5) * 18;
+      const z = (Math.random() - 0.5) * 10;
+
+      pos[i * 3] = x;
+      pos[i * 3 + 1] = y;
+      pos[i * 3 + 2] = z;
+
+      origPos[i * 3] = x;
+      origPos[i * 3 + 1] = y;
+      origPos[i * 3 + 2] = z;
+
+      vel.push({
+        x: (Math.random() - 0.5) * 0.05, // Slower natural drift
+        y: (Math.random() - 0.5) * 0.05,
+        z: (Math.random() - 0.5) * 0.05,
+      });
+    }
+    return [pos, vel, origPos];
+  }, []);
+
+  useFrame((state, delta) => {
+    // 2. Map Mouse to World Coordinates
+    // state.pointer is normalized (-1 to 1). Convert to world units using viewport.
+    const mouseX = (state.pointer.x * viewport.width) / 2;
+    const mouseY = (state.pointer.y * viewport.height) / 2;
+
+    if (particlesRef.current && linesRef.current) {
+      const positionsAttr = particlesRef.current.geometry.attributes.position;
+      const currentPositions = positionsAttr.array as Float32Array;
+
+      // 3. Update Particles
+      for (let i = 0; i < PARTICLE_COUNT; i++) {
+        const i3 = i * 3;
+
+        // A. Natural Drift (Gravity)
+        // We use the "original" position as an anchor to prevent them from flying away too far
+        // but we add the velocity to keep them moving organically.
+        originalPositions[i3]     += velocities[i].x * delta * 2;
+        originalPositions[i3 + 1] += velocities[i].y * delta * 2;
+        
+        // Bounce logic for the anchor points
+        if (Math.abs(originalPositions[i3]) > 10) velocities[i].x *= -1;
+        if (Math.abs(originalPositions[i3 + 1]) > 10) velocities[i].y *= -1;
+
+        // B. Mouse Interaction (The Wave)
+        // Calculate distance from particle to mouse
+        const dx = mouseX - originalPositions[i3];
+        const dy = mouseY - originalPositions[i3 + 1];
+        const dist = Math.sqrt(dx * dx + dy * dy);
+
+        // Apply Wave Effect
+        // If the mouse is close, we disturb the position
+        let xOffset = 0;
+        let yOffset = 0;
+        let zOffset = 0;
+
+        if (dist < MOUSE_INFLUENCE_RADIUS) {
+          // 1. Repulsion force (XY Plane) - pushes them slightly aside
+          const force = (MOUSE_INFLUENCE_RADIUS - dist) / MOUSE_INFLUENCE_RADIUS;
+          const angle = Math.atan2(dy, dx);
+          
+          xOffset = -Math.cos(angle) * force * 2; // Push away X
+          yOffset = -Math.sin(angle) * force * 2; // Push away Y
+          
+          // 2. Wave Ripple (Z Plane) - Sine wave based on distance and time
+          // This creates the "water ripple" effect in 3D depth
+          zOffset = Math.sin(dist * 1.5 - state.clock.elapsedTime * 3) * WAVE_AMPLITUDE * force;
+        }
+
+        // Apply calculated positions
+        currentPositions[i3]     = originalPositions[i3] + xOffset;
+        currentPositions[i3 + 1] = originalPositions[i3 + 1] + yOffset;
+        currentPositions[i3 + 2] = originalPositions[i3 + 2] + zOffset;
+      }
+      positionsAttr.needsUpdate = true;
+
+      // 4. Update Connections (Plexus)
+      // Re-calculate lines based on the NEW modified positions
+      const linePositions: number[] = [];
+      
+      for (let i = 0; i < PARTICLE_COUNT; i++) {
+        for (let j = i + 1; j < PARTICLE_COUNT; j++) {
+          const x1 = currentPositions[i * 3];
+          const y1 = currentPositions[i * 3 + 1];
+          const z1 = currentPositions[i * 3 + 2];
+
+          const x2 = currentPositions[j * 3];
+          const y2 = currentPositions[j * 3 + 1];
+          const z2 = currentPositions[j * 3 + 2];
+
+          const dist = Math.sqrt(
+            Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2) + Math.pow(z2 - z1, 2)
+          );
+
+          if (dist < CONNECT_DISTANCE) {
+            linePositions.push(x1, y1, z1, x2, y2, z2);
+          }
+        }
+      }
+
+      linesRef.current.geometry.setAttribute(
+        "position",
+        new THREE.Float32BufferAttribute(linePositions, 3)
+      );
+    }
+  });
+
+  return (
+    <group ref={groupRef}>
+      <points ref={particlesRef}>
+        <bufferGeometry>
+          <bufferAttribute
+            attach="attributes-position"
+            count={PARTICLE_COUNT}
+            array={positions}
+            itemSize={3}
+          />
+        </bufferGeometry>
+        <pointsMaterial
+          size={0.15}
+          color="#22d3ee" // Cyan
+          sizeAttenuation={true}
+          transparent
+          opacity={0.8}
+        />
+      </points>
+
+      <lineSegments ref={linesRef}>
+        <bufferGeometry />
+        <lineBasicMaterial
+          color="#0891b2" // Cyan-600
+          transparent
+          opacity={0.15}
+        />
+      </lineSegments>
+    </group>
+  );
+}
+
+export default function NeuronsGravity() {
+  return (
+    <div className="absolute inset-0 z-0 h-full w-full">
+      <Canvas
+        camera={{ position: [0, 0, 12], fov: 50 }}
+        gl={{ alpha: true, antialias: true }}
+        dpr={[1, 2]}
+      >
+        <NeuralMesh />
+        <Preload all />
+      </Canvas>
+    </div>
+  );
+}

app/components/canvas/RealisticNeeurons.tsx

@@ -0,0 +1,259 @@
+"use client";
+
+import { useMemo, useRef } from "react";
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import { MeshDistortMaterial, Sphere, Preload, Float } from "@react-three/drei";
+import { EffectComposer, Bloom, Vignette } from "@react-three/postprocessing";
+import * as THREE from "three";
+
+// --- CONFIGURATION ---
+const NEURON_COUNT = 15; // Keep low for high-quality geometry
+const CONNECTION_DISTANCE = 6.5; 
+const PULSE_SPEED = 1.8;
+
+// 1. REALISTIC CELL (Soma + Nucleus)
+function NeuronCell({ position }: { position: [number, number, number] }) {
+  const membraneRef = useRef<THREE.Mesh>(null!);
+  const nucleusRef = useRef<THREE.Mesh>(null!);
+
+  // Randomize biology
+  const size = useMemo(() => 0.5 + Math.random() * 0.3, []);
+  
+  useFrame((state) => {
+    const t = state.clock.getElapsedTime();
+    
+    // Biological breathing/pulsing
+    if (membraneRef.current) {
+      const scale = size + Math.sin(t * 2 + position[0]) * 0.05;
+      membraneRef.current.scale.setScalar(scale);
+    }
+    
+    // Nucleus gentle pulse (faster)
+    if (nucleusRef.current) {
+      const nScale = (size * 0.4) + Math.sin(t * 4) * 0.02;
+      nucleusRef.current.scale.setScalar(nScale);
+    }
+  });
+
+  return (
+    <Float speed={1.5} rotationIntensity={0.6} floatIntensity={0.8}>
+      <group position={position}>
+        
+        {/* A. The Membrane (Outer Shell) */}
+        <Sphere ref={membraneRef} args={[1, 64, 64]}>
+          <MeshDistortMaterial
+            color="#083344" // Deep blue-black (organic tissue)
+            emissive="#155e75" // Cyan glow from within
+            emissiveIntensity={0.2}
+            roughness={0.1}
+            metalness={0.8}
+            distort={0.5} // High distortion for "blobby" look
+            speed={2}
+            transparent
+            opacity={0.7}
+          />
+        </Sphere>
+
+        {/* B. The Nucleus (Inner Core) */}
+        <Sphere ref={nucleusRef} args={[1, 32, 32]}>
+          <meshStandardMaterial
+            color="#a5f3fc" // Bright Cyan
+            emissive="#22d3ee" // Strong Glow
+            emissiveIntensity={2} // Push this high for Bloom to pick it up
+            toneMapped={false}
+          />
+          <pointLight distance={4} intensity={2} color="#22d3ee" decay={2} />
+        </Sphere>
+
+      </group>
+    </Float>
+  );
+}
+
+// 2. SYNAPSE (Axon + Electric Pulse)
+function Synapse({ start, end }: { start: THREE.Vector3; end: THREE.Vector3 }) {
+  const curve = useMemo(() => {
+    // Create organic curve
+    const mid = new THREE.Vector3().lerpVectors(start, end, 0.5);
+    // Randomize control point for "tendon" shape
+    mid.add(new THREE.Vector3(
+      (Math.random() - 0.5) * 3,
+      (Math.random() - 0.5) * 3,
+      (Math.random() - 0.5) * 3
+    ));
+    return new THREE.QuadraticBezierCurve3(start, mid, end);
+  }, [start, end]);
+
+  const points = useMemo(() => curve.getPoints(30), [curve]);
+  const impulseRef = useRef<THREE.Mesh>(null!);
+
+  useFrame((state) => {
+    // Move electric pulse
+    const t = (state.clock.getElapsedTime() * PULSE_SPEED) % 1; 
+    if (impulseRef.current) {
+      const pos = curve.getPointAt(t);
+      impulseRef.current.position.copy(pos);
+      
+      // Stretch effect for speed illusion
+      const tangent = curve.getTangent(t).normalize();
+      impulseRef.current.lookAt(pos.clone().add(tangent));
+      impulseRef.current.scale.set(0.6, 0.6, 2.5); // Stretch Z
+    }
+  });
+
+  return (
+    <group>
+      {/* The physical connection (Axon) */}
+      <line>
+        <bufferGeometry>
+          <bufferAttribute
+            attach="attributes-position"
+            count={points.length}
+            array={new Float32Array(points.flatMap(p => [p.x, p.y, p.z]))}
+            itemSize={3}
+          />
+        </bufferGeometry>
+        <lineBasicMaterial color="#0e7490" transparent opacity={0.15} />
+      </line>
+
+      {/* The Traveling Spark (Electricity) */}
+      <mesh ref={impulseRef}>
+        <sphereGeometry args={[0.08, 8, 8]} />
+        <meshBasicMaterial color="#ccfbf1" />
+        <pointLight distance={3} intensity={3} color="#22d3ee" decay={2} />
+      </mesh>
+    </group>
+  );
+}
+
+// 3. BACKGROUND PARTICLES (Neurotransmitters)
+function NeuroDust() {
+  const count = 200;
+  const mesh = useRef<THREE.InstancedMesh>(null!);
+  
+  const particles = useMemo(() => {
+    const temp = [];
+    for(let i=0; i<count; i++) {
+      const t = Math.random() * 100;
+      const factor = 20 + Math.random() * 10;
+      const speed = 0.01 + Math.random() / 200;
+      const x = (Math.random() - 0.5) * 30;
+      const y = (Math.random() - 0.5) * 30;
+      const z = (Math.random() - 0.5) * 15;
+      temp.push({ t, factor, speed, x, y, z, mx: 0, my: 0 });
+    }
+    return temp;
+  }, []);
+
+  const dummy = useMemo(() => new THREE.Object3D(), []);
+
+  useFrame((state) => {
+    particles.forEach((particle, i) => {
+      let { t, factor, speed, x, y, z } = particle;
+      t = particle.t += speed / 2;
+      const a = Math.cos(t) + Math.sin(t * 1) / 10;
+      const b = Math.sin(t) + Math.cos(t * 2) / 10;
+      const s = Math.cos(t);
+      
+      dummy.position.set(
+        x + Math.cos(t) + Math.sin(t) * 2,
+        y + Math.sin(t) + Math.cos(t) * 2,
+        z + Math.cos(t)
+      );
+      dummy.scale.setScalar(s * 0.03); // Tiny dust
+      dummy.rotation.set(s * 5, s * 5, s * 5);
+      dummy.updateMatrix();
+      
+      if (mesh.current) mesh.current.setMatrixAt(i, dummy.matrix);
+    });
+    if (mesh.current) mesh.current.instanceMatrix.needsUpdate = true;
+  });
+
+  return (
+    <instancedMesh ref={mesh} args={[undefined, undefined, count]}>
+      <dodecahedronGeometry args={[0.2, 0]} />
+      <meshPhongMaterial color="#0891b2" emissive="#06b6d4" transparent opacity={0.4} />
+    </instancedMesh>
+  );
+}
+
+// 4. MAIN SCENE
+function Scene() {
+  const { viewport } = useThree();
+  
+  // Generate random positions for neurons
+  const neurons = useMemo(() => {
+    const temp = [];
+    for (let i = 0; i < NEURON_COUNT; i++) {
+      temp.push({
+        position: new THREE.Vector3(
+          (Math.random() - 0.5) * 22,
+          (Math.random() - 0.5) * 22,
+          (Math.random() - 0.5) * 10
+        ),
+        id: i
+      });
+    }
+    return temp;
+  }, []);
+
+  // Connect them
+  const connections = useMemo(() => {
+    const conns = [];
+    for(let i=0; i<neurons.length; i++) {
+      for(let j=i+1; j<neurons.length; j++) {
+        if(neurons[i].position.distanceTo(neurons[j].position) < CONNECTION_DISTANCE) {
+          conns.push({ start: neurons[i].position, end: neurons[j].position, key: `${i}-${j}` });
+        }
+      }
+    }
+    return conns;
+  }, [neurons]);
+
+  useFrame((state) => {
+    // Subtle Camera Parallax based on Mouse
+    const x = (state.pointer.x * viewport.width) / 12;
+    const y = (state.pointer.y * viewport.height) / 12;
+    state.camera.position.x = THREE.MathUtils.lerp(state.camera.position.x, x, 0.02);
+    state.camera.position.y = THREE.MathUtils.lerp(state.camera.position.y, y, 0.02);
+    state.camera.lookAt(0,0,0);
+  });
+
+  return (
+    <>
+      <color attach="background" args={["#020617"]} /> {/* Match gray-950 */}
+      <ambientLight intensity={0.2} />
+      <pointLight position={[10, 10, 10]} intensity={1} color="#22d3ee" />
+      
+      {neurons.map(n => <NeuronCell key={n.id} position={[n.position.x, n.position.y, n.position.z]} />)}
+      {connections.map(c => <Synapse key={c.key} start={c.start} end={c.end} />)}
+      <NeuroDust />
+
+      {/* POST PROCESSING - The Secret Sauce for Realism */}
+      <EffectComposer disableNormalPass>
+        <Bloom 
+          luminanceThreshold={1} // Only very bright things glow
+          mipmapBlur 
+          intensity={1.5} // Strength of the glow
+          radius={0.6}
+        />
+        <Vignette eskil={false} offset={0.1} darkness={1.1} />
+      </EffectComposer>
+    </>
+  );
+}
+
+export default function RealisticNeurons() {
+  return (
+    <div className="absolute inset-0 z-0 h-full w-full">
+      <Canvas
+        camera={{ position: [0, 0, 16], fov: 40 }}
+        gl={{ alpha: false, antialias: false, toneMapping: THREE.ReinhardToneMapping }}
+        dpr={[1, 1.5]} // Limit DPR for performance with post-processing
+      >
+        <Scene />
+        <Preload all />
+      </Canvas>
+    </div>
+  );
+}

app/components/layout/Footer.tsx

@@ -5,7 +5,7 @@ import { motion } from "framer-motion";
 
 export default function Footer() {
     return (
-        <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">
+        <footer className="relative z-10 mt-20 sm:mt-32 border-t border-white/5">
             {/* Top decorative line */}
             <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-blue-500/50 to-transparent" />
 

app/components/layout/Navbar.tsx

@@ -1,37 +1,27 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { motion, AnimatePresence, stagger } from "framer-motion";
+import { motion, AnimatePresence } from "framer-motion";
-import { Menu, X, Activity, Brain, Mic, ShieldCheck, ChevronRight, Sparkles } from "lucide-react";
+import { Menu, X, Activity, Home,Brain, Mic, ShieldCheck, ChevronDown, Sparkles } from "lucide-react";
 
 const navItems = [
+    { name: "Home", icon: Home, href: "/" },
   { name: "Devices", icon: Activity, href: "/devices" },
   { name: "Voice-to-SOAP", icon: Mic, href: "/#voice-soap" },
   { name: "AI Diagnosis", icon: Brain, href: "/#diagnosis" },
   { 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 [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState<number | null>(null);
 
   useEffect(() => {
-    const handleScroll = () => setIsScrolled(window.scrollY > 20);
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 20);
+    };
+
     window.addEventListener("scroll", handleScroll);
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
@@ -54,7 +44,7 @@ export default function Navbar() {
                 : "bg-gradient-to-r from-white/5 via-white/10 to-white/5 backdrop-blur-lg border border-white/5"
             }`}
           >
-            {/* Animated background gradient (unchanged) */}
+            {/* Animated background gradient */}
             <div className="absolute inset-0 rounded-2xl lg:rounded-3xl overflow-hidden pointer-events-none">
               <motion.div
                 animate={{
@@ -69,45 +59,55 @@ export default function Navbar() {
               />
             </div>
 
-            {/* Logo (unchanged) */}
+            {/* Logo */}
             <a href="/" className="flex items-center gap-2 sm:gap-3 group relative z-10">
               <div className="relative">
-                <div className="absolute inset-0 bg-blue-500/20 blur-xl rounded-full group-hover:bg-blue-500/30 transition-all" />
+                <div className="absolute inset-0 bg-cyan-500/20 blur-xl rounded-full group-hover:bg-cyan-500/30 transition-all" />
                 <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" />
               </div>
               <span className="text-xl sm:text-2xl lg:text-3xl font-bold tracking-tight text-white relative">
                 Skyheal
-                <span className="absolute -top-1 -right-6 text-[8px] text-blue-400 font-semibold">AI</span>
+                <span className="absolute -top-1 -right-6 text-[8px] text-cyan-400 font-semibold">AI</span>
               </span>
             </a>
 
-            {/* Desktop Menu (unchanged) */}
+            {/* Desktop Menu */}
             <div className="hidden lg:flex items-center gap-1 xl:gap-2 relative z-10">
               {navItems.map((item, index) => (
                 <motion.a
                   key={item.name}
                   href={item.href}
+                  onHoverStart={() => setActiveItem(index)}
+                  onHoverEnd={() => setActiveItem(null)}
                   className="relative px-4 py-2.5 rounded-xl text-sm font-semibold text-zinc-300 hover:text-white transition-colors group"
                 >
                   <span className="relative z-10 flex items-center gap-2">
                     <item.icon className="w-4 h-4 transition-transform group-hover:scale-110" />
                     {item.name}
                   </span>
-                  {/* You can keep or remove the active indicator if not needed */}
+
+                  {activeItem === index && (
+                    <motion.div
+                      layoutId="navbar-indicator"
+                      className="absolute inset-0 bg-white/10 backdrop-blur-sm rounded-xl border border-white/20 pointer-events-none"
+                      transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
+                    />
+                  )}
                 </motion.a>
               ))}
 
+              {/* CTA Button */}
               <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"
+                className="ml-4 relative group overflow-hidden bg-gradient-to-r from-cyan-600 to-cyan-200 text-white px-6 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-cyan-500/25 hover:shadow-cyan-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"
+                  className="absolute inset-0 bg-gradient-to-r from-cyan-200 to-cyan-600"
                   initial={{ x: "100%" }}
                   whileHover={{ x: 0 }}
                   transition={{ duration: 0.3 }}
@@ -115,10 +115,10 @@ export default function Navbar() {
               </motion.button>
             </div>
 
-            {/* Mobile Toggle – bigger touch target */}
+            {/* Mobile Toggle */}
             <motion.button
-              whileTap={{ scale: 0.92 }}
+              whileTap={{ scale: 0.9 }}
-              className="lg:hidden relative z-10 text-white p-3 rounded-full hover:bg-white/10 transition-colors"
+              className="lg:hidden relative z-10 text-white p-2 rounded-lg hover:bg-white/10 transition-colors"
               onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
             >
               <AnimatePresence mode="wait">
@@ -128,19 +128,19 @@ export default function Navbar() {
                     initial={{ rotate: -90, opacity: 0 }}
                     animate={{ rotate: 0, opacity: 1 }}
                     exit={{ rotate: 90, opacity: 0 }}
-                    transition={{ duration: 0.25 }}
+                    transition={{ duration: 0.2 }}
                   >
-                    <X className="w-7 h-7" />
+                    <X className="w-6 h-6" />
                   </motion.div>
                 ) : (
                   <motion.div
                     key="menu"
-                    initial={{ rotate: -90, opacity: 0 }}
+                    initial={{ rotate: 90, opacity: 0 }}
                     animate={{ rotate: 0, opacity: 1 }}
-                    exit={{ rotate: 90, opacity: 0 }}
+                    exit={{ rotate: -90, opacity: 0 }}
-                    transition={{ duration: 0.25 }}
+                    transition={{ duration: 0.2 }}
                   >
-                    <Menu className="w-7 h-7" />
+                    <Menu className="w-6 h-6" />
                   </motion.div>
                 )}
               </AnimatePresence>
@@ -149,87 +149,72 @@ export default function Navbar() {
         </div>
       </nav>
 
-      {/* Mobile Menu – Slide from right + better visuals */}
+      {/* Mobile Menu Overlay */}
       <AnimatePresence>
         {isMobileMenuOpen && (
           <>
-            {/* Backdrop with subtle vignette */}
+            {/* Backdrop */}
             <motion.div
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
-              transition={{ duration: 0.4 }}
+              transition={{ duration: 0.3 }}
-              className="fixed inset-0 bg-black/70 backdrop-blur-md z-40 lg:hidden"
+              className="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 lg:hidden"
               onClick={() => setIsMobileMenuOpen(false)}
             />
 
-            {/* Side sheet style menu */}
+            {/* Mobile Menu Content */}
             <motion.div
-              initial={{ x: "100%" }}
+              initial={{ opacity: 0, y: -20, scale: 0.95 }}
-              animate={{ x: 0 }}
+              animate={{ opacity: 1, y: 0, scale: 1 }}
-              exit={{ x: "100%" }}
+              exit={{ opacity: 0, y: -20, scale: 0.95 }}
-              transition={{ type: "spring", damping: 30, stiffness: 200 }}
+              transition={{ duration: 0.3, ease: "easeOut" }}
-              className="fixed top-0 right-0 bottom-0 w-4/5 max-w-sm z-50 lg:hidden"
+              className="fixed top-20 sm:top-24 left-4 right-4 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">
+              <div className="bg-black/95 backdrop-blur-2xl rounded-2xl border border-white/10 shadow-2xl overflow-hidden">
-                {/* Header */}
+                {/* Menu Header */}
-                <div className="p-6 border-b border-white/10 flex items-center justify-between">
+                <div className="p-6 border-b border-white/10 bg-gradient-to-r from-cyan-500/10 to-purple-500/10">
-                  <div className="flex items-center gap-3">
+                  <h3 className="text-sm font-semibold text-zinc-400 uppercase tracking-wider">
-                    <Activity className="w-8 h-8 text-blue-400" />
+                    Navigation
-                    <span className="text-xl font-bold text-white tracking-tight">Skyheal</span>
+                  </h3>
-                  </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
+                <div className="p-4">
-                  variants={containerVariants}
+                  {navItems.map((item, index) => (
-                  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}
+                      initial={{ opacity: 0, x: -20 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      transition={{ delay: index * 0.1 }}
                       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"
+                      className="flex items-center gap-4 p-4 rounded-xl hover:bg-white/5 transition-all group mb-2"
                     >
-                      <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">
+                      <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-white/10 to-white/5 flex items-center justify-center border border-white/10 group-hover:border-white/20 transition-all">
-                        <item.icon className="w-6 h-6 text-blue-400 group-hover:scale-110 transition-transform" />
+                        <item.icon className="w-5 h-5 text-white group-hover:scale-110 transition-transform" />
                       </div>
-                      <span className="text-lg font-medium text-white group-hover:text-blue-300 transition-colors">
+                      <div className="flex-1">
-                        {item.name}
+                        <span className="text-base font-semibold text-white group-hover:text-cyan-400 transition-colors">
-                      </span>
+                          {item.name}
-                      <ChevronRight className="ml-auto w-5 h-5 text-zinc-500 group-hover:text-blue-400 group-hover:translate-x-1 transition-all" />
+                        </span>
+                      </div>
+                      <ChevronDown className="w-4 h-4 text-zinc-500 -rotate-90 group-hover:translate-x-1 transition-transform" />
                     </motion.a>
                   ))}
-                </motion.div>
+                </div>
 
-                {/* CTA at bottom */}
+                {/* Mobile CTA */}
-                <div className="p-6 border-t border-white/10 mt-auto">
+                <div className="p-4 border-t border-white/10">
                   <motion.button
-                    whileHover={{ scale: 1.03 }}
+                    initial={{ opacity: 0, y: 20 }}
-                    whileTap={{ scale: 0.97 }}
+                    animate={{ opacity: 1, y: 0 }}
-                    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"
+                    transition={{ delay: 0.4 }}
+                    whileTap={{ scale: 0.98 }}
+                    className="w-full bg-gradient-to-r from-cyan-600 to-cyan-200 text-white py-4 rounded-xl font-bold text-base shadow-lg shadow-cyan-500/25 flex items-center justify-center gap-2 hover:shadow-cyan-500/40 transition-all"
                   >
-                    <span className="relative z-10 flex items-center justify-center gap-2.5">
+                    <Sparkles className="w-5 h-5" />
-                      <Sparkles className="w-5 h-5" />
+                    Get Started Free
-                      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>

app/components/sections/AIDiagnosis.tsx

@@ -17,6 +17,7 @@ import { useRef, useEffect, useState } from "react";
 
 export default function AIDiagnosis() {
   const containerRef = useRef<HTMLDivElement>(null);
+  const canvasContainerRef = useRef<HTMLDivElement>(null); // Ref for the wrapper of the canvas
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [modelLoaded, setModelLoaded] = useState(false);
   const [scanProgress, setScanProgress] = useState(0);
@@ -28,7 +29,7 @@ export default function AIDiagnosis() {
 
   const y = useTransform(scrollYProgress, [0, 0.5], [100, 0]);
   const opacity = useTransform(scrollYProgress, [0, 0.3], [0, 1]);
-  const scale = useTransform(scrollYProgress, [0, 0.5], [0.9, 1]);
+  const scale = useTransform(scrollYProgress, [0, 0.5], [0.95, 1]); // Subtle scale
 
   // Simulate scan progress
   useEffect(() => {
@@ -40,7 +41,7 @@ export default function AIDiagnosis() {
 
   // Three.js setup
   useEffect(() => {
-    if (typeof window === "undefined" || !canvasRef.current) return;
+    if (typeof window === "undefined" || !canvasRef.current || !canvasContainerRef.current) return;
 
     let animationId: number | undefined;
     let scene: any;
@@ -53,8 +54,12 @@ export default function AIDiagnosis() {
       const THREE = await import("three");
       const { GLTFLoader, OrbitControls } = await import("three-stdlib");
 
+      // Get initial dimensions from the parent container
+      const width = canvasContainerRef.current?.clientWidth || 500;
+      const height = canvasContainerRef.current?.clientHeight || 500;
+
       scene = new THREE.Scene();
-      camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);
+      camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
       camera.position.set(0, 0, 5);
 
       renderer = new THREE.WebGLRenderer({
@@ -62,17 +67,15 @@ export default function AIDiagnosis() {
         alpha: true,
         antialias: true,
       });
-      renderer.setSize(500, 500);
+      renderer.setSize(width, height);
       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);
@@ -85,6 +88,21 @@ export default function AIDiagnosis() {
       controls.autoRotate = true;
       controls.autoRotateSpeed = 1.5;
 
+      // Handle Resize - Critical for responsiveness
+      const handleResize = () => {
+        if (!canvasContainerRef.current || !camera || !renderer) return;
+        const newWidth = canvasContainerRef.current.clientWidth;
+        const newHeight = canvasContainerRef.current.clientHeight;
+        
+        camera.aspect = newWidth / newHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(newWidth, newHeight);
+      };
+
+      // Use ResizeObserver for robust sizing (handles container changes, not just window)
+      const resizeObserver = new ResizeObserver(() => handleResize());
+      resizeObserver.observe(canvasContainerRef.current!);
+
       // Model loading
       const loader = new GLTFLoader();
       const modelURL = "/human_body.glb";
@@ -103,7 +121,6 @@ export default function AIDiagnosis() {
         model.scale.setScalar(scaleFactor);
         model.position.sub(center.multiplyScalar(scaleFactor));
 
-        // Performance: disable shadows
         model.traverse((child: any) => {
           if (child.isMesh) {
             child.castShadow = false;
@@ -114,8 +131,7 @@ export default function AIDiagnosis() {
         scene.add(model);
         setModelLoaded(true);
       } catch (error) {
-        console.error("Failed to load GLB model → using fallback", error);
+        console.warn("Using fallback geometry");
-
         const geometry = new THREE.IcosahedronGeometry(1.5, 2);
         const material = new THREE.MeshStandardMaterial({
           color: 0x6366f1,
@@ -123,6 +139,7 @@ export default function AIDiagnosis() {
           metalness: 0.7,
           emissive: 0x3b82f6,
           emissiveIntensity: 0.2,
+          wireframe: true, // Added wireframe for a more "tech" fallback look
         });
         model = new THREE.Mesh(geometry, material);
         scene.add(model);
@@ -138,29 +155,22 @@ export default function AIDiagnosis() {
       };
 
       animate();
+
+      // Clean up specifically for this closure
+      return () => {
+        resizeObserver.disconnect();
+      };
     };
 
-    initThreeJS();
+    const cleanupPromise = initThreeJS();
 
-    // Cleanup
     return () => {
-      if (animationId !== undefined) {
+      cleanupPromise.then((cleanup) => cleanup && cleanup());
-        cancelAnimationFrame(animationId);
+      if (animationId !== undefined) cancelAnimationFrame(animationId);
-      }
       if (controls) controls.dispose();
       if (renderer) renderer.dispose();
-      if (scene) {
+      // Simplified scene disposal
-        scene.traverse((obj: any) => {
+      if (scene) scene.clear();
-          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();
-            }
-          }
-        });
-      }
     };
   }, []);
 
@@ -168,11 +178,11 @@ export default function AIDiagnosis() {
     <section
       ref={containerRef}
       id="diagnosis"
-      className="relative py-20 md:py-32 lg:py-40 overflow-hidden"
+      className="relative py-16 sm:py-20 md:py-32 lg:py-40 2xl:py-48 overflow-hidden w-full"
     >
-      {/* Ambient glows */}
+      {/* Ambient glows - Optimized for mobile by reducing blur radius slightly */}
-      <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 top-1/4 left-0 w-[300px] sm:w-[500px] lg:w-[700px] h-[300px] sm:h-[500px] lg:h-[700px] bg-cyan-500/10 rounded-full blur-[80px] sm:blur-[150px] animate-pulse" />
-      <div className="absolute bottom-1/4 right-0 w-[600px] h-[600px] bg-purple-500/10 rounded-full blur-[120px]" />
+      <div className="absolute bottom-1/4 right-0 w-[250px] sm:w-[400px] lg:w-[600px] h-[250px] sm:h-[400px] lg:h-[600px] bg-purple-500/10 rounded-full blur-[60px] sm:blur-[120px]" /> */}
 
       {/* Subtle grid */}
       <div
@@ -184,159 +194,157 @@ export default function AIDiagnosis() {
         }}
       />
 
-      <div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
+      <div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl 2xl:max-w-[1600px]">
-        <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 xl:gap-24 items-center">
+        <div className="grid lg:grid-cols-2 gap-10 sm:gap-12 lg:gap-16 xl:gap-24 2xl:gap-32 items-center">
-          {/* 3D Viewer Column */}
+          
+          {/* --- 3D Viewer Column --- */}
+          {/* Order-2 on mobile ensures text comes first if desired, but default is fine */}
           <motion.div
             initial={{ opacity: 0, x: -50 }}
             whileInView={{ opacity: 1, x: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 1 }}
-            className="relative"
+            className="relative w-full max-w-[500px] lg:max-w-none mx-auto"
           >
-            <div className="absolute inset-0 rounded-[3rem] blur-3xl opacity-60" />
+            {/* Background Blur blob */}
+            <div className="absolute inset-0 rounded-[3rem] blur-3xl opacity-60 bg-gradient-to-tr from-cyan-900/20 to-purple-900/20" />
 
-            <div className="relative rounded-3xl backdrop-blur-2xl shadow-2xl overflow-hidden">
+            <div className="relative rounded-3xl backdrop-blur-2xl bg-black/40 border border-white/10 shadow-2xl overflow-hidden">
-              {/* Header */}
+              {/* Card Header */}
-              <div className="relative p-6 border-b border-white/5">
+              <div className="relative p-4 sm: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">
+                      <div className="w-10 h-10 rounded-xl bg-white/5 flex items-center justify-center">
-                        <Brain className="w-5 h-5 text-blue-400" />
+                        <Brain className="w-5 h-5 text-cyan-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 className="absolute -top-1 -right-1 w-2.5 h-2.5 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>
+                      <h3 className="text-sm font-bold text-white">Neural Engine</h3>
-                      <p className="text-xs text-zinc-500">Real-time Analysis Active</p>
+                      <p className="text-[10px] sm:text-xs text-zinc-500">Analysis Active</p>
                     </div>
                   </div>
-                  <div className="px-3 py-1 rounded-full bg-green-500/10 border border-green-500/20">
+                  <div className="hidden xs:flex 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>
+                    <span className="text-[10px] sm:text-xs font-semibold text-green-400">Live Feed</span>
                   </div>
                 </div>
               </div>
 
-              {/* Canvas area */}
+              {/* Canvas Container - Responsive Aspect Ratio */}
-              <div className="relative p-6 sm:p-8">
+              <div className="relative p-4 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" />
+                {/* Decorative corners */}
-                <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 top-4 sm:top-8 left-4 sm:left-8 w-12 sm:w-16 h-12 sm:h-16 border-l-2 border-t-2 border-cyan-400/30 rounded-tl-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 top-4 sm:top-8 right-4 sm:right-8 w-12 sm:w-16 h-12 sm:h-16 border-r-2 border-t-2 border-purple-400/30 rounded-tr-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="absolute bottom-4 sm:bottom-8 left-4 sm:left-8 w-12 sm:w-16 h-12 sm:h-16 border-l-2 border-b-2 border-pink-400/30 rounded-bl-2xl" />
+                <div className="absolute bottom-4 sm:bottom-8 right-4 sm:right-8 w-12 sm:w-16 h-12 sm: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">
+                {/* The actual canvas wrapper */}
+                <div 
+                  ref={canvasContainerRef}
+                  className="relative w-full aspect-square max-h-[400px] lg:max-h-[500px] flex items-center justify-center mx-auto"
+                >
                   <canvas
                     ref={canvasRef}
-                    className="w-full h-full max-w-[500px] max-h-[500px] relative z-10"
+                    className="w-full h-full relative z-10 block"
                   />
 
+                  {/* Loading State */}
                   {!modelLoaded && (
-                    <div className="absolute inset-0 flex items-center justify-center">
+                    <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
                       <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" />
+                          <Brain className="w-12 h-12 sm:w-16 sm:h-16 text-cyan-400 mx-auto" />
                         </motion.div>
-                        <p className="text-sm text-zinc-400 font-semibold">
+                        <p className="text-xs sm:text-sm text-zinc-400 font-semibold">
-                          Initializing Neural Network...
+                          Initializing Network...
                         </p>
                       </div>
                     </div>
                   )}
 
+                  {/* Scanning Animation Overlay */}
                   {modelLoaded && (
-                    <>
+                    <div className="absolute inset-0 pointer-events-none overflow-hidden rounded-xl">
                       <motion.div
-                        animate={{ y: [-250, 250] }}
+                        animate={{ top: ["0%", "100%", "0%"] }}
                         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"
+                        className="absolute left-0 right-0 h-px bg-gradient-to-r from-transparent via-cyan-400 to-transparent opacity-50 shadow-[0_0_15px_rgba(34,211,238,0.5)]"
                       />
-                      <motion.div
+                    </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="p-4 sm: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>
+                    <span className="text-cyan-400 font-bold">{scanProgress}%</span>
                   </div>
-                  <div className="h-2 bg-white/5 rounded-full overflow-hidden">
+                  <div className="h-1.5 sm: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"
+                      className="h-full bg-gradient-to-r from-cyan-500 via-purple-500 to-pink-500"
                     />
                   </div>
                 </div>
 
-                <div className="grid grid-cols-3 gap-3">
+                <div className="grid grid-cols-3 gap-2 sm:gap-3">
                   {[
-                    { icon: Cpu, label: "Processing", value: "98.4%", color: "text-blue-400" },
+                    { icon: Cpu, label: "CPU Load", value: "98%", color: "text-cyan-400" },
-                    { icon: Network, label: "Neural Load", value: "76.2%", color: "text-purple-400" },
+                    { icon: Network, label: "Net Load", value: "76%", color: "text-purple-400" },
-                    { icon: Activity, label: "Accuracy", value: "99.8%", color: "text-green-400" },
+                    { icon: Activity, label: "Accuracy", value: "99%", color: "text-green-400" },
                   ].map((stat, idx) => (
-                    <motion.div
+                    <div
                       key={idx}
-                      initial={{ opacity: 0, y: 10 }}
+                      className="p-2 sm:p-3 rounded-xl bg-white/[0.03] border border-white/5 text-center sm:text-left"
-                      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`} />
+                      <stat.icon className={`w-3 h-3 sm:w-4 sm:h-4 ${stat.color} mb-1 sm:mb-2 mx-auto sm:mx-0`} />
-                      <p className="text-xs text-zinc-500 mb-1">{stat.label}</p>
+                      <p className="hidden sm:block text-[10px] text-zinc-500 mb-0.5">{stat.label}</p>
-                      <p className="text-sm font-bold text-white">{stat.value}</p>
+                      <p className="text-xs sm:text-sm font-bold text-white">{stat.value}</p>
-                    </motion.div>
+                    </div>
                   ))}
                 </div>
               </div>
-
+              
-              <div className="px-6 pb-6">
+              <div className="pb-4 sm:pb-6 text-center">
-                <p className="text-center text-xs text-zinc-600 font-medium flex items-center justify-center gap-2">
+                 <p className="text-[10px] text-zinc-600 font-medium">Interactive 3D Visualization</p>
-                  <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>
           </motion.div>
 
-          {/* Text / Features Column */}
+          {/* --- Text / Features Column --- */}
           <motion.div
             style={{ y, opacity, scale }}
-            className="space-y-10 lg:space-y-12"
+            className="space-y-8 sm:space-y-10 lg:space-y-12 text-center lg:text-left"
           >
             <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"
+              className="space-y-4 sm: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">
+              <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl 2xl: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">
+                <span className="bg-gradient-to-r from-purple-400 via-pink-400 to-cyan-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">
+              <p className="text-sm sm:text-base md:text-lg lg:text-xl text-zinc-400 leading-relaxed max-w-2xl mx-auto lg:mx-0">
                 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.
+                <span className="text-white font-semibold">sub-second latency</span>.
               </p>
             </motion.div>
 
-            {/* Feature Cards */}
+            {/* Feature Cards - Stack on mobile, grid on tablet+ */}
             <motion.div
               initial={{ opacity: 0, y: 30 }}
               whileInView={{ opacity: 1, y: 0 }}
@@ -349,8 +357,8 @@ export default function AIDiagnosis() {
                   icon: Search,
                   title: "Pattern Recognition",
                   text: "AI-powered clinical marker identification with zero-bias analysis technology.",
-                  color: "from-blue-500 to-cyan-500",
+                  color: "from-cyan-500 to-cyan-500",
-                  iconColor: "text-blue-400",
+                  iconColor: "text-cyan-400",
                 },
                 {
                   icon: Database,
@@ -362,58 +370,49 @@ export default function AIDiagnosis() {
               ].map((item, i) => (
                 <motion.div
                   key={i}
-                  initial={{ opacity: 0, y: 20 }}
+                  whileHover={{ y: -4, transition: { duration: 0.2 }}}
-                  whileInView={{ opacity: 1, y: 0 }}
+                  className="group p-5 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 text-left"
-                  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="flex sm:block items-start gap-4">
-                    <div className="relative inline-block">
+                    <div className="relative shrink-0">
-                      <div
+                      <div className={`absolute inset-0 bg-gradient-to-br ${item.color} rounded-xl blur-lg opacity-0 group-hover:opacity-50 transition-opacity`} />
-                        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-10 h-10 sm:w-12 sm: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-5 h-5 sm:w-6 sm:h-6 ${item.iconColor}`} />
-                      <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">
+                    <div className="space-y-1 sm:space-y-2 sm:mt-4">
-                      <h3 className="text-lg font-bold text-white group-hover:text-white/90 transition-colors">
+                      <h3 className="text-base sm: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>
+                      <p className="text-xs sm:text-sm text-zinc-400 leading-relaxed">{item.text}</p>
                     </div>
                   </div>
                 </motion.div>
               ))}
             </motion.div>
 
-            {/* Stats */}
+            {/* Stats - Grid adjustments */}
             <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"
+              className="grid grid-cols-3 gap-2 sm:gap-6 pt-4 sm:pt-6 border-t border-white/5 lg:border-none"
             >
               {[
                 { 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 key={i} className="text-center space-y-1 sm:space-y-2">
                   <div className="flex justify-center">
-                    <div className="p-2 rounded-lg bg-white/5 border border-white/10">
+                    <div className="p-1.5 sm: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" />
+                      <stat.icon className="w-3.5 h-3.5 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-lg sm:text-xl md:text-2xl font-bold text-white">{stat.value}</p>
-                  <p className="text-[10px] sm:text-xs text-zinc-500 font-semibold uppercase tracking-wider">
+                  <p className="text-[9px] sm:text-xs text-zinc-500 font-semibold uppercase tracking-wider">
                     {stat.label}
                   </p>
                 </div>
@@ -426,12 +425,12 @@ export default function AIDiagnosis() {
               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"
+              className="flex flex-wrap justify-center lg:justify-start gap-2 sm:gap-4 pt-2"
             >
               {["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"
+                  className="flex items-center gap-1.5 sm:gap-2 px-3 py-1.5 sm:px-4 sm: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>

app/components/sections/AIVoiceSoap.tsx

@@ -1,173 +1,172 @@
 "use client";
 
 import { motion, useScroll, useTransform } from "framer-motion";
-import { Mic, CheckCircle2, Brain, Zap, Lock, Sparkles } from "lucide-react";
+import { Mic, Brain, Zap, Lock, Sparkles, AudioWaveform } from "lucide-react";
 import { useRef } from "react";
 
 export default function AIVoiceSoap() {
-    const containerRef = useRef(null);
+  const containerRef = useRef(null);
-    const { scrollYProgress } = useScroll({
+  const { scrollYProgress } = useScroll({
-        target: containerRef,
+    target: containerRef,
-        offset: ["start end", "end start"],
+    offset: ["start end", "end start"],
-    });
+  });
 
-    const scale = useTransform(scrollYProgress, [0, 0.5], [0.95, 1]);
+  const scale = useTransform(scrollYProgress, [0, 0.5], [0.95, 1]);
-    const opacity = useTransform(scrollYProgress, [0, 0.4], [0.6, 1]);
+  const opacity = useTransform(scrollYProgress, [0, 0.4], [0.6, 1]);
-    const y = useTransform(scrollYProgress, [0, 0.5], [40, 0]);
+  const y = useTransform(scrollYProgress, [0, 0.5], [40, 0]);
 
-    const bars = Array.from({ length: 24 }, (_, i) => ({
+  // Dynamic bar animation for visualizer
-        height: [20, 45 + Math.sin(i * 0.8) * 30, 20],
+  const bars = Array.from({ length: 24 }, (_, i) => ({
-        duration: 2 + (i % 8) * 0.25,
+    height: [20, 45 + Math.sin(i * 0.8) * 30, 20],
-        delay: i * 0.03,
+    duration: 2 + (i % 8) * 0.25,
-    }));
+    delay: i * 0.03,
+  }));
 
-    return (
+  return (
-        <section
+    <section
-            ref={containerRef}
+      ref={containerRef}
-            id="voice-soap"
+      id="voice-soap"
-            className="relative py-20 md:py-32 lg:py-40 text-white overflow-hidden"
+      className="relative py-16 sm:py-20 md:py-32 lg:py-40 2xl:py-48 text-white overflow-hidden bg-transparent"
-        >
+    >
-            <div className="absolute inset-0 bg-gradient-to-b from-zinc-950 via-zinc-900/50 to-zinc-950" />
+      <div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-12 max-w-7xl 2xl:max-w-[1600px]">
-            <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="grid lg:grid-cols-2 gap-12 lg:gap-24 xl:gap-32 items-center">
+          <motion.div
+            style={{ scale, opacity, y }}
+            className="space-y-10 lg:space-y-14 order-2 lg:order-1"
+          >
+            <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-2 sm:gap-3 px-4 py-2 rounded-full bg-cyan-950/30 border border-cyan-500/20 text-cyan-400 text-[10px] sm:text-xs font-semibold tracking-wide uppercase backdrop-blur-md"
+            >
+              <Mic className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+              Ambient Clinical Intelligence
+            </motion.div>
 
-            <div className="container relative z-10 mx-auto px-5 md:px-8 lg:px-12 max-w-7xl">
+            <div className="space-y-4 sm:space-y-6">
-                <div className="grid lg:grid-cols-2 gap-16 lg:gap-24 xl:gap-32 items-center">
+              <h2 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl 2xl:text-8xl font-bold tracking-tight leading-[1.1]">
-                    <motion.div
+                Autonomous{" "}
-                        style={{ scale, opacity, y }}
+                <span className="text-cyan-400 block sm:inline">Voice-to-SOAP</span>
-                        className="space-y-10 lg:space-y-14"
+              </h2>
-                    >
+              <p className="text-lg sm:text-xl md:text-2xl 2xl:text-3xl text-zinc-400 leading-relaxed max-w-3xl font-light">
-                        <motion.div
+                Transform ambient conversations into structured, accurate{" "}
-                            initial={{ opacity: 0, y: 20 }}
+                <span className="text-white font-medium">SOAP notes</span> in real-time — with enterprise-grade security.
-                            whileInView={{ opacity: 1, y: 0 }}
+              </p>
-                            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" />
-                            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>
-
-                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 pt-6">
-                            {[
-                                { icon: Brain, title: "Neural Context Understanding", desc: "Advanced NLP for medical terminology and context" },
-                                { icon: Zap, title: "Instant SOAP Generation", desc: "Zero-latency transcription to structured notes" },
-                                { icon: Lock, title: "End-to-End PHI Security", desc: "AES-256 encryption & HIPAA/GDPR compliant" },
-                                { icon: Sparkles, title: "Auto-Suggest & Edit", desc: "AI-powered refinements & clinician review" },
-                            ].map((item, i) => (
-                                <motion.div
-                                    key={i}
-                                    initial={{ opacity: 0, y: 15 }}
-                                    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.96 }}
-                        whileInView={{ opacity: 1, scale: 1 }}
-                        transition={{ duration: 0.8, delay: 0.2 }}
-                        viewport={{ once: true }}
-                        className="relative w-full max-w-lg mx-auto lg:mx-0"
-                    >
-                        <div className="relative rounded-3xl backdrop-blur-xl shadow-2xl overflow-hidden">
-                            <div className="absolute inset-0  pointer-events-none" />
-
-                            <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="relative">
-                                        <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 items-end gap-1.5 h-32 md:h-6 px-4">
-                                    {bars.map((bar, i) => (
-                                        <motion.div
-                                            key={i}
-                                            animate={{ height: bar.height }}
-                                            transition={{
-                                                repeat: Infinity,
-                                                duration: bar.duration,
-                                                ease: "easeInOut",
-                                                delay: bar.delay,
-                                            }}
-                                            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>
-
-                                <motion.div
-                                    initial={{ opacity: 0, y: 20 }}
-                                    whileInView={{ opacity: 1, y: 0 }}
-                                    transition={{ duration: 0.7, delay: 0.4 }}
-                                    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>
-                </div>
             </div>
-        </section>
+
-    );
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 pt-2 sm:pt-6">
+              {[
+                { icon: Brain, title: "Neural Context", desc: "Advanced NLP for medical terminology" },
+                { icon: Zap, title: "Instant Generation", desc: "Zero-latency transcription to notes" },
+                { icon: Lock, title: "PHI Security", desc: "AES-256 encryption & HIPAA compliant" },
+                { icon: Sparkles, title: "Auto-Refinement", desc: "AI-powered suggestions & review" },
+              ].map((item, i) => (
+                <motion.div
+                  key={i}
+                  initial={{ opacity: 0, y: 15 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.5, delay: 0.15 * i }}
+                  viewport={{ once: true }}
+                  whileHover={{ scale: 1.02, backgroundColor: "rgba(255,255,255,0.08)" }}
+                  className="flex gap-4 p-4 sm:p-5 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-sm hover:border-cyan-500/30 transition-all cursor-default"
+                >
+                  <div className="w-10 h-10 rounded-lg bg-cyan-500/10 border border-cyan-500/20 flex items-center justify-center flex-shrink-0">
+                    <item.icon className="w-5 h-5 text-cyan-400" />
+                  </div>
+                  <div>
+                    <h4 className="text-sm sm:text-base font-bold text-white mb-1">{item.title}</h4>
+                    <p className="text-xs text-zinc-400 leading-relaxed">{item.desc}</p>
+                  </div>
+                </motion.div>
+              ))}
+            </div>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, scale: 0.96 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            viewport={{ once: true }}
+            className="relative w-full max-w-lg 2xl:max-w-xl mx-auto lg:mx-0 order-1 lg:order-2"
+          >
+            <div className="relative rounded-[2rem] sm:rounded-[2.5rem] backdrop-blur-xl shadow-2xl overflow-hidden">
+              {/* Inner Content Padding */}
+              <div className="p-6 sm:p-10 lg:p-12 2xl:p-16 space-y-8 sm:space-y-10 lg:space-y-12 relative z-10">
+                {/* Microphone Animation */}
+                <div className="flex justify-center">
+                  <div className="relative">
+                    <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-cyan-500/20 blur-2xl"
+                    />
+                    <div className="relative w-20 h-20 sm:w-28 sm:h-28 2xl:w-36 2xl:h-36 rounded-full bg-gradient-to-b from-zinc-800 to-zinc-900 border border-zinc-700 flex items-center justify-center shadow-[0_8px_32px_rgba(0,0,0,0.5)]">
+                      <Mic className="w-8 h-8 sm:w-12 sm:h-12 2xl:w-16 2xl:h-16 text-cyan-400 drop-shadow-lg" />
+                    </div>
+                  </div>
+                </div>
+
+                {/* Audio Waveform Bars - Responsive height/gap */}
+                <div className="flex justify-center items-end gap-1 sm:gap-1.5 h-12 sm:h-16 px-2 sm:px-4">
+                  {bars.map((bar, i) => (
+                    <motion.div
+                      key={i}
+                      animate={{ height: bar.height }}
+                      transition={{
+                        repeat: Infinity,
+                        duration: bar.duration,
+                        ease: "easeInOut",
+                        delay: bar.delay,
+                      }}
+                      className="w-1 sm:w-1.5 md:w-2 rounded-full bg-cyan-500"
+                      style={{ opacity: 0.3 + (i % 8) * 0.1 }}
+                    />
+                  ))}
+                </div>
+
+                {/* Processing Status Box */}
+                <motion.div
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.7, delay: 0.4 }}
+                  viewport={{ once: true }}
+                  className="relative rounded-2xl bg-black/20 border border-white/5 p-4 sm:p-6 backdrop-blur-md"
+                >
+                  {/* Scan Line Animation */}
+                  <motion.div
+                    animate={{ x: ["-100%", "200%"] }}
+                    transition={{ duration: 3, repeat: Infinity, ease: "linear", repeatDelay: 2 }}
+                    className="absolute inset-0 bg-gradient-to-r from-transparent via-cyan-400/10 to-transparent pointer-events-none"
+                  />
+
+                  {/* Abstract Data Lines */}
+                  <div className="space-y-3">
+                    <div className="flex items-center gap-3">
+                      <div className="w-2 h-2 rounded-full bg-cyan-500 shadow-[0_0_10px_rgba(6,182,212,0.5)]" />
+                      <div className="h-1.5 sm:h-2 bg-white/10 rounded-full flex-1 w-full" />
+                    </div>
+                    <div className="h-1.5 sm:h-2 bg-white/10 rounded-full ml-5 w-3/4" />
+                    <div className="h-1.5 sm:h-2 bg-white/10 rounded-full ml-5 w-5/6" />
+                  </div>
+
+                  <div className="mt-4 sm:mt-5 flex items-center justify-between text-[10px] sm:text-xs text-zinc-400 font-mono">
+                    <div className="flex items-center gap-2">
+                      <span className="relative flex h-2 w-2">
+                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+                        <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
+                      </span>
+                      <span>Processing...</span>
+                    </div>
+                    <div className="text-emerald-400">Encrypted</div>
+                  </div>
+                </motion.div>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
 }

app/components/sections/AppEcosystem.tsx

@@ -40,8 +40,8 @@ export default function AIVoiceSoap() {
       icon: Activity,
       title: "Context-Aware Intelligence",
       desc: "Understands medical terminology, patient history context & follow-up questions.",
-      color: "text-blue-400",
+      color: "text-cyan-400",
-      bg: "from-blue-600/15 to-blue-800/5",
+      bg: "from-cyan-600/15 to-cyan-800/5",
     },
     {
       icon: Zap,

app/components/sections/DeviceShowcase.tsx

@@ -142,10 +142,10 @@ function TechCard({ tech, i }: { tech: Technology; i: number }) {
                 <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="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> */}
             </div>
           </motion.div>
 
@@ -230,7 +230,7 @@ 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 top-1/3 left-0 w-[500px] h-[500px] bg-cyan-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 */}

app/devices/page.tsx

@@ -4,15 +4,16 @@ import Navbar from "../components/layout/Navbar";
 import Footer from "../components/layout/Footer";
 import { motion } from "framer-motion";
 import {
-  Thermometer,
   Activity,
-  HeartPulse,
   Droplet,
   Baby,
   Scale,
   Bluetooth,
   ShieldCheck,
-  FileText,
+  Cpu,
+  Zap,
+  CheckCircle2,
+  ArrowUpRight,
 } from "lucide-react";
 
 interface DeviceItem {
@@ -27,329 +28,296 @@ interface DeviceItem {
 function DeviceCard({ item, index }: { item: DeviceItem; index: number }) {
   return (
     <motion.div
-      initial={{ opacity: 0, y: 40 }}
+      initial={{ opacity: 0, y: 30 }}
       whileInView={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.7, delay: index * 0.12, ease: "easeOut" }}
+      transition={{ duration: 0.6, delay: index * 0.1, ease: "easeOut" }}
-      viewport={{ once: true, margin: "-100px" }}
+      viewport={{ once: true, margin: "-50px" }}
-      whileHover={{ y: -8, scale: 1.015 }}
+      className="group relative h-full"
-      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 */}
+      {/* Card Container */}
-      <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 h-full flex flex-col
+        bg-zinc-950/40 backdrop-blur-md
+        border border-white/5 rounded-3xl
+        overflow-hidden
+        transition-all duration-500
+        hover:border-cyan-500/30 hover:bg-zinc-900/60
+        hover:shadow-[0_0_40px_-10px_rgba(6,182,212,0.15)]
+      ">
+        
+        {/* Hover Gradient Overlay */}
+        <div className="absolute inset-0 bg-gradient-to-b from-cyan-500/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 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">
+        {/* Content Wrapper */}
-        <div className="flex items-center gap-5">
+        <div className="p-6 sm:p-8 flex flex-col h-full relative z-10">
-          <div className="
+          
-            p-4 rounded-xl
+          {/* Header Section */}
-            bg-neutral-900/80 border border-neutral-800/70
+          <div className="flex items-start justify-between mb-6">
-            group-hover:border-blue-800/50 group-hover:bg-blue-950/20
+            <div className="
-            transition-all duration-300
+              w-12 h-12 sm:w-14 sm:h-14 rounded-2xl
-          ">
+              bg-zinc-900/80 border border-white/10
-            <item.icon className="
+              flex items-center justify-center
-              w-8 h-8 text-neutral-400
+              group-hover:scale-110 group-hover:border-cyan-500/30 group-hover:bg-cyan-950/30
-              group-hover:text-blue-400/90
+              transition-all duration-500
-              transition-colors duration-300
+            ">
-            " />
+              <item.icon className="w-6 h-6 sm:w-7 sm:h-7 text-zinc-400 group-hover:text-cyan-400 transition-colors duration-300" />
+            </div>
+            
+            {/* Corner Action Icon */}
+            <div className="opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300">
+               <ArrowUpRight className="w-5 h-5 text-zinc-500 group-hover:text-cyan-400" />
+            </div>
           </div>
 
-          <div>
+          <div className="mb-4">
-            <h3 className="text-2xl font-semibold text-white tracking-tight leading-tight">
+            <h3 className="text-xl sm:text-2xl font-bold text-white tracking-tight mb-1 group-hover:text-cyan-100 transition-colors">
               {item.title}
             </h3>
-            <p className="text-sm text-neutral-500 mt-1 font-medium">
+            <p className="text-xs sm:text-sm font-medium text-cyan-600/80 uppercase tracking-wider">
               {item.subtitle}
             </p>
           </div>
-        </div>
-      </div>
 
-      {/* Uncomment this block if you want to bring back the card details */}
+          <p className="text-sm sm:text-base text-zinc-400 leading-relaxed mb-6 flex-grow">
-      {/* 
+            {item.description}
-      <div className="p-7 space-y-7">
+          </p>
-        <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">
+          {/* Divider */}
-          {item.highlights.map((highlight, i) => (
+          <div className="h-px w-full bg-white/5 mb-6 group-hover:bg-cyan-500/20 transition-colors duration-500" />
-            <div key={i} className="flex items-center gap-2.5">
+
-              <div className="
+          {/* Specs Grid (Compact) */}
-                w-1.5 h-1.5 rounded-full
+          <div className="space-y-4">
-                bg-neutral-600 group-hover:bg-blue-500/70
+            <div className="grid grid-cols-2 gap-3">
-                transition-colors duration-300
+               {item.highlights.slice(0, 4).map((highlight, i) => ( // Show first 4
-              " />
+                 <div key={i} className="flex items-start gap-2">
-              <span className="text-neutral-200 font-medium">{highlight}</span>
+                    <CheckCircle2 className="w-3.5 h-3.5 text-cyan-500/70 mt-0.5 shrink-0" />
+                    <span className="text-xs text-zinc-300 font-medium">{highlight}</span>
+                 </div>
+               ))}
             </div>
-          ))}
-        </div>
 
-        <div className="flex flex-wrap gap-2.5">
+            {/* Technical Chips */}
-          {item.specs.map((spec, i) => (
+            <div className="flex flex-wrap gap-2 pt-2">
-            <span
+              {item.specs.slice(0, 3).map((spec, i) => (
-              key={i}
+                <span key={i} className="
-              className="
+                  px-2.5 py-1 rounded-md text-[10px] uppercase tracking-wide font-bold
-                px-4 py-1.5 text-xs font-medium
+                  bg-white/5 border border-white/5 text-zinc-500
-                rounded-lg bg-neutral-900/60 border border-neutral-800/60
+                  group-hover:border-cyan-500/20 group-hover:text-cyan-400/80 group-hover:bg-cyan-950/20
-                text-neutral-400 group-hover:text-neutral-200
+                  transition-all duration-300
-                transition-colors duration-300
+                ">
-              "
+                  {spec}
-            >
+                </span>
-              {spec}
+              ))}
-            </span>
+            </div>
-          ))}
+          </div>
-        </div>
 
-        <button
+        </div>
-          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() {
+export default function DeviceShowcase() {
   const devices: DeviceItem[] = [
     {
       title: "Multi-Vital Monitor",
-      subtitle: "Temperature • SpO₂ • Blood Pressure",
+      subtitle: "Hemodynamics",
-      description:
+      description: "Clinical-grade core vital signs measurement with validated algorithms and secure wireless pairing.",
-        "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", "Resp. Rate"],
-      highlights: ["±0.1 °C accuracy", "±2% SpO₂", "±3 mmHg NIBP"],
+      specs: ["BT 5.2 LE", "IEC 60601", "IP54"],
-      specs: ["Bluetooth 5.2 LE", "IEC 60601", "24 h operation", "IP54"],
       icon: Activity,
     },
     {
-      title: "3-in-1 Metabolic Analyzer",
+      title: "Metabolic Analyzer",
-      subtitle: "Glucose • Hemoglobin • Hematocrit",
+      subtitle: "Blood Chemistry",
-      description:
+      description: "Fast point-of-care testing from a single micro-sample with temperature compensation.",
-        "Fast point-of-care testing from a single micro-sample with temperature compensation and result validation.",
+      highlights: ["5s Result", "±5 mg/dL Glu", "HCT Corrected", "Ketone Check"],
-      highlights: ["5–10 sec result", "±5 mg/dL glucose", "Lab-comparable Hb/HCT"],
+      specs: ["Micro-fluidic", "NFC Sync", "Auto-Cal"],
-      specs: ["Micro-volume sample", "Strip detection", "EHR integration", "Auto calibration"],
       icon: Droplet,
     },
     {
-      title: "Digital Urine Analyzer",
+      title: "Fetal Doppler",
-      subtitle: "Multi-parameter Urinalysis",
+      subtitle: "Maternity Care",
-      description:
+      description: "High-sensitivity fetal heart rate detection with audio output and waveform recording.",
-        "Automated reading and standardized interpretation of urine test strips with digital result storage.",
+      highlights: ["50–240 BPM", "3 MHz Probe", "Auto-Record", "Noise Cancel"],
-      highlights: ["10–14 parameters", "< 60 seconds", "Trend tracking", "PDF export"],
+      specs: ["Ultrasonic", "FDA Cleared", "Type-C"],
-      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",
+      title: "Precision Scale",
-      subtitle: "Weight & Body Composition",
+      subtitle: "Biometrics",
-      description:
+      description: "High-accuracy weighing platform with body composition analysis for clinical follow-up.",
-        "High-accuracy weighing platform with body composition analysis suitable for clinical follow-up.",
+      highlights: ["50g Resolution", "Bio-Impedance", "Muscle/Fat %", "Water Mass"],
-      highlights: ["200 kg capacity", "50 g resolution", "Fat / Muscle / Water", "Multi-user support"],
+      specs: ["Tempered Glass", "Strain Gauge", "WiFi"],
-      specs: ["Bioelectrical impedance", "Tempered glass", "Bluetooth LE", "Stable base"],
       icon: Scale,
     },
+    {
+        title: "Digital Otoscope",
+        subtitle: "ENT Imaging",
+        description: "HD video capture of the ear canal and tympanic membrane with AI diagnostic support.",
+        highlights: ["1080p Video", "100x Zoom", "Auto-Focus", "LED Ring"],
+        specs: ["WiFi Direct", "Macro Lens", "IP67"],
+        icon: Zap, // Using Zap as placeholder for Otoscope/Light
+      },
+      {
+        title: "ECG Patch",
+        subtitle: "Cardiology",
+        description: "Wearable continuous heart monitoring with arrhythmia detection and cloud sync.",
+        highlights: ["7-Day Battery", "Lead II", "Afib Alert", "Waterproof"],
+        specs: ["Bluetooth 5.0", "Medical Adhesive", "24/7"],
+        icon: Cpu,
+      },
   ];
 
   return (
-    <div className="min-h-screen text-neutral-100 relative overflow-hidden bg-[#0a0e17]">
+    <div className="min-h-screen text-zinc-100 relative bg-[#05080f] font-sans selection:bg-cyan-500/30">
-      {/* ====================== Bluetooth Animated Background ====================== */}
+      
-      <div className="absolute inset-0 pointer-events-none overflow-hidden">
+      {/* ====================== Animated Background Layers ====================== */}
-        {/* Dark moody base gradient */}
+      <div className="fixed inset-0 pointer-events-none overflow-hidden z-0">
-        <div className="absolute inset-0 bg-gradient-to-br from-[#0a0e17] via-[#0d1525] to-[#0a0e1a]" />
+        {/* Base Gradient */}
+        <div className="absolute inset-0 bg-gradient-to-b from-[#05080f] via-[#090c15] to-[#05080f]" />
+        
+        {/* Radial Center Glow */}
+        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[800px] bg-[radial-gradient(circle_at_center,rgba(6,182,212,0.08),transparent_60%)]" />
 
-        {/* Pulsing Bluetooth radar-style rings */}
+        {/* Animated Rings (Responsive Sizes) */}
-        <div className="absolute inset-0 flex items-center justify-center">
+        <div className="absolute inset-0 flex items-center justify-center opacity-30">
-          {/* Largest – slowest */}
+             <motion.div 
-          <motion.div
+                animate={{ rotate: 360 }}
-            className="absolute rounded-full border border-blue-500/8"
+                transition={{ duration: 120, repeat: Infinity, ease: "linear" }}
-            style={{ width: "min(140vmin, 1800px)", height: "min(140vmin, 1800px)" }}
+                className="w-[800px] h-[800px] border border-cyan-900/20 rounded-full border-dashed"
-            animate={{
+             />
-              scale: [0.65, 1.1, 0.65],
+             <motion.div 
-              opacity: [0.02, 0.09, 0.02],
+                animate={{ rotate: -360 }}
-            }}
+                transition={{ duration: 80, repeat: Infinity, ease: "linear" }}
-            transition={{
+                className="absolute w-[600px] h-[600px] border border-cyan-500/5 rounded-full"
-              duration: 18,
+             />
-              repeat: Infinity,
+             <motion.div 
-              ease: "easeInOut",
+                 animate={{ scale: [1, 1.1, 1], opacity: [0.1, 0.3, 0.1] }}
-            }}
+                 transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
-          />
+                 className="absolute w-[400px] h-[400px] bg-cyan-500/5 rounded-full blur-3xl"
-
+             />
-          {/* Medium */}
-          <motion.div
-            className="absolute rounded-full border border-blue-500/10"
-            style={{ width: "min(100vmin, 1300px)", height: "min(100vmin, 1300px)" }}
-            animate={{
-              scale: [0.7, 1.15, 0.7],
-              opacity: [0.03, 0.13, 0.03],
-            }}
-            transition={{
-              duration: 14,
-              repeat: Infinity,
-              ease: "easeInOut",
-              delay: 3,
-            }}
-          />
-
-          {/* Smallest + sharper */}
-          <motion.div
-            className="absolute rounded-full border-2 border-blue-400/20"
-            style={{ width: "min(60vmin, 800px)", height: "min(60vmin, 800px)" }}
-            animate={{
-              scale: [0.85, 1.4, 0.85],
-              opacity: [0.06, 0.22, 0.06],
-            }}
-            transition={{
-              duration: 9,
-              repeat: Infinity,
-              ease: "easeOut",
-              delay: 1.5,
-            }}
-          />
-
-          {/* Very faint core glow */}
-          <motion.div
-            className="absolute rounded-full bg-blue-600/5 blur-xl"
-            style={{ width: "min(20vmin, 260px)", height: "min(20vmin, 260px)" }}
-            animate={{ scale: [1, 1.4, 1], opacity: [0.15, 0.35, 0.15] }}
-            transition={{ duration: 7, repeat: Infinity, ease: "easeInOut" }}
-          />
         </div>
 
-        {/* Subtle rotating signal arcs */}
+        {/* Floating Particles */}
-        <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) => (
+             {[...Array(12)].map((_, i) => (
-            <motion.div
+                <motion.div
-              key={i}
+                    key={i}
-              className="absolute w-1.5 h-1.5 md:w-2 md:h-2 bg-blue-400/40 rounded-full blur-[1px]"
+                    className="absolute w-1 h-1 bg-cyan-400/40 rounded-full"
-              initial={{ opacity: 0 }}
+                    style={{
-              animate={{
+                        top: `${Math.random() * 100}%`,
-                y: [0, -180 - Math.random() * 140, -360],
+                        left: `${Math.random() * 100}%`,
-                opacity: [0, 0.7, 0],
+                    }}
-                x: Math.sin(i * 0.9) * 60 + Math.cos(i * 1.4) * 30,
+                    animate={{
-              }}
+                        y: [0, -100],
-              transition={{
+                        opacity: [0, 1, 0],
-                duration: 12 + Math.random() * 10,
+                        scale: [0, 1.5, 0]
-                repeat: Infinity,
+                    }}
-                delay: i * 0.6 + Math.random() * 2,
+                    transition={{
-                ease: "easeOut",
+                        duration: Math.random() * 5 + 5,
-              }}
+                        repeat: Infinity,
-              style={{
+                        delay: Math.random() * 5,
-                left: `${8 + ((i * 7.3) % 84)}%`,
+                        ease: "linear"
-                top: "85%",
+                    }}
-              }}
+                />
-            />
+             ))}
-          ))}
         </div>
       </div>
 
       {/* ====================== Main Content ====================== */}
-      <div className="relative z-10">
+      <div className="relative z-10 flex flex-col min-h-screen">
         <Navbar />
 
-        <main className="pt-28 md:pt-40 pb-28 md:pb-40">
+        <main className="flex-grow pt-32 pb-32 sm:pt-40 sm:pb-40">
-          <div className="max-w-7xl mx-auto px-5 sm:px-7 lg:px-10">
+          {/* Container limits width, scales for 4K */}
-            {/* Header */}
+          <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl 2xl:max-w-[1800px]">
-            <div className="text-center max-w-4xl mx-auto mb-20 md:mb-28">
+            
-              <div className="
+            {/* --- Hero Header --- */}
-                inline-flex items-center gap-3 px-6 py-3
+            <div className="flex flex-col items-center text-center max-w-4xl 2xl:max-w-5xl mx-auto mb-20 lg:mb-28">
-                rounded-full border border-neutral-800/70
+              
-                bg-neutral-950/50 backdrop-blur-lg
+              {/* Badge */}
-                text-neutral-300 text-sm font-medium mb-8
+              <motion.div 
-              ">
+                initial={{ opacity: 0, y: 20 }}
-                <Bluetooth className="w-5 h-5 text-blue-400/80" />
+                whileInView={{ opacity: 1, y: 0 }}
-                Connected Clinical Peripherals
+                viewport={{ once: true }}
-              </div>
+                className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-cyan-500/20 bg-cyan-950/10 backdrop-blur-md text-cyan-400 text-xs font-bold tracking-wider uppercase mb-8 shadow-[0_0_20px_-5px_rgba(6,182,212,0.3)]"
+              >
+                <Bluetooth className="w-4 h-4" />
+                <span>IoT Ecosystem</span>
+              </motion.div>
 
-              <h1 className="
+              {/* Title */}
-                text-4xl sm:text-5xl md:text-6xl lg:text-7xl
+              <motion.h1 
-                font-semibold tracking-tight leading-[1.05]
+                initial={{ opacity: 0, y: 20 }}
-                text-white
+                whileInView={{ opacity: 1, y: 0 }}
-              ">
+                viewport={{ once: true }}
-                Diagnostic Hardware Suite
+                transition={{ delay: 0.1 }}
-              </h1>
+                className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl 2xl:text-8xl font-bold tracking-tight text-white leading-[1.1] mb-6"
+              >
+                Clinical <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-600">Hardware</span> Suite
+              </motion.h1>
 
-              <p className="mt-6 text-lg md:text-xl text-neutral-400 leading-relaxed max-w-3xl mx-auto">
+              {/* Subtitle */}
-                Reliable, standards-compliant devices designed for hospitals, clinics, telehealth and institutional care environments.
+              <motion.p 
-              </p>
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ delay: 0.2 }}
+                className="text-lg sm:text-xl 2xl:text-2xl text-zinc-400 max-w-2xl 2xl:max-w-3xl leading-relaxed"
+              >
+                Seamlessly connected diagnostic devices designed for accuracy, speed, and institutional interoperability.
+              </motion.p>
             </div>
 
-            {/* Device cards grid */}
+            {/* --- Devices Grid --- */}
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7 lg:gap-9">
+            {/* 1 col mobile, 2 col tablet, 3 col laptop, 4 col ultra-wide */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6 lg:gap-8 2xl:gap-10">
               {devices.map((device, i) => (
                 <DeviceCard key={device.title} item={device} index={i} />
               ))}
             </div>
 
-            {/* Compliance & security block */}
+            {/* --- Bottom Feature: Security --- */}
             <motion.div
               initial={{ opacity: 0, y: 40 }}
               whileInView={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.8, delay: 0.4 }}
               viewport={{ once: true }}
-              className="
+              className="mt-32 2xl:mt-48"
-                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="
+                relative overflow-hidden rounded-3xl
+                bg-gradient-to-br from-zinc-900/80 to-zinc-950/80 backdrop-blur-xl
+                border border-white/5
+                p-8 md:p-12 lg:p-16
+                flex flex-col lg:flex-row items-center gap-10 lg:gap-16
+              ">
+                {/* Decoration */}
+                <div className="absolute top-0 right-0 w-64 h-64 bg-cyan-500/10 blur-[100px] pointer-events-none" />
+
                 <div className="
-                  p-6 md:p-8 rounded-2xl
+                  shrink-0 w-20 h-20 sm:w-24 sm:h-24 rounded-3xl
-                  bg-neutral-900/70 border border-neutral-800/70
+                  bg-gradient-to-br from-cyan-500/10 to-blue-500/10
+                  border border-cyan-500/20
+                  flex items-center justify-center
+                  shadow-[0_0_40px_-10px_rgba(6,182,212,0.2)]
                 ">
-                  <ShieldCheck className="w-12 h-12 md:w-14 md:h-14 text-neutral-400" />
+                  <ShieldCheck className="w-10 h-10 sm:w-12 sm:h-12 text-cyan-400" />
                 </div>
 
-                <div className="space-y-4">
+                <div className="text-center lg:text-left space-y-4 max-w-4xl">
-                  <h2 className="text-3xl md:text-4xl font-semibold text-white tracking-tight">
+                  <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-white tracking-tight">
-                    Medical Standards & Data Security
+                    Enterprise-Grade Compliance
                   </h2>
-                  <p className="text-neutral-300 leading-relaxed text-lg max-w-3xl">
+                  <p className="text-base sm:text-lg text-zinc-400 leading-relaxed">
-                    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.
+                    Built for the modern hospital. Our devices comply with <span className="text-cyan-200">IEC 60601</span> and <span className="text-cyan-200">HIPAA</span> standards. 
+                    End-to-end encryption ensures patient data remains secure from the sensor to the cloud.
                   </p>
                 </div>
               </div>
             </motion.div>
+
           </div>
         </main>
 

app/globals.css

@@ -52,7 +52,6 @@ h6 {
   }
 
   .text-gradient {
-    /* Updated to a silver/white shimmer instead of colors */
     background: linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%);
     background-clip: text;
     -webkit-background-clip: text;
@@ -101,4 +100,14 @@ h6 {
   50% {
     opacity: 0.5;
   }
+}
+@layer utilities {
+  .scrollbar-none {
+    -ms-overflow-style: none;        
+    scrollbar-width: none;            
+  }
+
+  .scrollbar-none::-webkit-scrollbar {
+    display: none;                    
+  }
 }

app/page.tsx

@@ -1,110 +1,177 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { motion, type Variants } from "framer-motion";
-import DNAHeroBackground from "./components/canvas/DNAHeroBackground";
+import { ArrowRight, Activity, ShieldCheck, Zap } from "lucide-react";
+import GravityWave from "./components/canvas/GravityWave"; 
 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 DeviceShowcase from "./components/sections/DeviceShowcase";
-// import TelehealthSolutions from "./components/sections/TelehealthSolutions";
 import AppEcosystem from "./components/sections/AppEcosystem";
 import Footer from "./components/layout/Footer";
-import { ArrowRight, Sparkles } from "lucide-react";
+
+const fadeInUp: Variants = {
+  hidden: { opacity: 0, y: 30 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { 
+      duration: 0.8, 
+      ease: "easeOut" as const 
+    }
+  }
+};
+
+const staggerContainer: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: { 
+      staggerChildren: 0.2, 
+      delayChildren: 0.1 
+    }
+  }
+};
 
 export default function Home() {
   return (
-    <div className="relative min-h-screen bg-black overflow-hidden isolate">
+    <div className="relative min-h-screen bg-gray-950 text-white selection:bg-cyan-500/30 selection:text-cyan-200 overflow-x-hidden font-sans">
-      {/* DNA Background – placed first with negative z-index so it's behind everything */}
+      
-      <div className="absolute inset-0 z-[-1]">
+      <div className="fixed top-0 left-0 right-0 z-50 px-4 pt-4 flex justify-center">
-        <DNAHeroBackground />
+        <div className="w-full max-w-7xl">
+          <Navbar />
+        </div>
       </div>
 
-      {/* Navbar – should be above background */}
+      <main className="relative z-10 flex flex-col items-center w-full">
-      <div className="relative z-50">
-        <Navbar />
-      </div>
 
-      <main className="relative z-10">
+        {/* HERO SECTION */}
-        {/* Hero Section */}
+        <section className="relative min-h-screen w-full flex flex-col items-center justify-center pt-20 px-6 overflow-hidden">
-        <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
+          <div className="absolute inset-0 z-0">
-            initial={{ opacity: 0, y: 40 }}
+            <div className="hidden md:block absolute inset-0">
-            animate={{ opacity: 1, y: 0 }}
+              <GravityWave />
-            transition={{ duration: 1.1, ease: [0.22, 1, 0.36, 1] }}
-            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"
-          >
-            <h1
-              className={`
-                text-5xl sm:text-6xl md:text-7xl lg:text-[6.5rem] xl:text-[8rem] 2xl:text-[9.5rem]
-                font-extrabold tracking-tighter leading-[0.85] sm:leading-[0.82] md:leading-[0.8]
-                text-white
-              `}
-            >
-              Institutional <br className="sm:hidden" />
-              Healthcare{" "}
-              <span className="text-zinc-500 italic uppercase">AI</span>
-            </h1>
-
-            <p
-              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-5 sm:gap-6 md:gap-8 pt-6 sm:pt-8 md:pt-10">
-              <button
-                className={`
-                  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={`
-                  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>
+            <div className="absolute inset-0 bg-gradient-to-b from-gray-950/50 via-transparent to-gray-950 pointer-events-none" />
+            <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-cyan-900/10 via-gray-950/60 to-gray-950 pointer-events-none" />
+          </div>
 
-          {/* Subtle bottom fade to blend into sections */}
+          <motion.div
-          <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" />
+            variants={staggerContainer}
+            initial="hidden"
+            animate="visible"
+            className="relative z-10 w-full max-w-6xl mx-auto text-center flex flex-col items-center gap-8"
+          >
+            <motion.h1 variants={fadeInUp} className="max-w-5xl mx-auto">
+              <span className="block text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight text-white mb-2">
+                Skyheal redefines
+              </span>
+              <span className="block text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-extrabold tracking-tight bg-gradient-to-r from-cyan-200 via-cyan-400 to-emerald-400 text-transparent bg-clip-text drop-shadow-2xl">
+                Healthcare
+              </span>
+            </motion.h1>
+
+            <motion.p variants={fadeInUp} className="text-lg sm:text-xl md:text-2xl text-gray-300/90 max-w-3xl leading-relaxed font-light">
+              Enterprise-grade AI clinical infrastructure — built for absolute{" "}
+              <span className="text-white font-medium">accuracy</span>,{" "}
+              <span className="text-white font-medium">security</span>, and{" "}
+              <span className="text-white font-medium">human-centered care</span>.
+            </motion.p>
+
+            <motion.div variants={fadeInUp} className="flex flex-col sm:flex-row items-center gap-4 mt-4 w-full justify-center">
+              <button className="group relative px-8 py-4 rounded-full bg-cyan-500 text-white font-semibold text-lg overflow-hidden transition-all duration-300 hover:scale-105 hover:shadow-[0_0_40px_-10px_rgba(20,184,166,0.5)]">
+                <div className="absolute inset-0 bg-white/20 group-hover:translate-x-full transition-transform duration-500 ease-out -skew-x-12" />
+                <span className="relative flex items-center gap-2">
+                  Book a Demo
+                  <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+                </span>
+              </button>
+
+              <button className="px-8 py-4 rounded-full bg-white/5 border border-white/10 text-white font-medium text-lg backdrop-blur-sm transition-all duration-300 hover:bg-white/10 hover:border-white/20 hover:scale-105">
+                View Technical Deck
+              </button>
+            </motion.div>
+
+            <motion.div variants={fadeInUp} className="pt-12 flex flex-wrap justify-center gap-8 md:gap-16 opacity-80">
+              <div className="flex items-center gap-2 text-sm font-medium text-cyan-100/60">
+                <ShieldCheck className="w-5 h-5" /> HIPAA Compliant
+              </div>
+              <div className="flex items-center gap-2 text-sm font-medium text-cyan-100/60">
+                <Activity className="w-5 h-5" /> 99.9% Uptime
+              </div>
+              <div className="flex items-center gap-2 text-sm font-medium text-cyan-100/60">
+                <Zap className="w-5 h-5" /> &lt; 50ms Latency
+              </div>
+            </motion.div>
+          </motion.div>
         </section>
 
-        {/* Content sections with progressive spacing */}
+        {/* CONTENT SECTIONS CONTAINER */}
-        <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">
+        <div className="w-full relative bg-gray-950">
-          <AIVoiceSoap />
+          
-          <DeviceShowcase />
+          <div className="relative z-30 space-y-32 py-24">
-          <AIDiagnosis />
+            
-          {/* <TelehealthSolutions /> */}
+            {/* === 1. AI VOICE SOAP SECTION === */}
-          {/* <AIPrescription /> */}
+            <section className="relative w-full overflow-hidden">
-          <AppEcosystem />
+              <div className="absolute inset-0 z-0">
+                <img 
+                  src="/neurons3.gif"
+                  alt="Voice Soap Animation"
+                  className="w-full h-full object-cover object-center opacity-30" 
+                />
+                <div className="absolute inset-0 bg-gradient-to-b from-gray-950 via-gray-950/40 to-gray-950 pointer-events-none" />
+              </div>
+              <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+                 <AIVoiceSoap />
+              </div>
+            </section>
+
+            {/* === 2. DEVICE SHOWCASE SECTION (Modified) === */}
+            <section className="relative w-full overflow-hidden">
+              <div className="absolute inset-0 z-0">
+                <img 
+                  src="/dna.gif"
+                  alt="Device Animation"
+                  className="hidden md:block w-full h-full object-cover object-center opacity-70"
+                />
+                <div className="absolute inset-0 bg-gradient-to-b from-gray-950 via-gray-950/40 to-gray-950 pointer-events-none" />
+              </div>
+              <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+                <DeviceShowcase />
+              </div>
+            </section>
+            
+            {/* === 3. AI DIAGNOSIS SECTION === */}
+            <section className="relative w-full overflow-hidden">
+              <div className="absolute inset-0 z-0">
+                <img 
+                  src="/diagnosis-bg.gif"
+                  alt="Diagnosis Animation"
+                  className="w-full h-full object-cover object-center opacity-30"
+                />
+                <div className="absolute inset-0 bg-gradient-to-b from-gray-950 via-gray-950/40 to-gray-950 pointer-events-none" />
+              </div>
+              <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+                <AIDiagnosis />
+              </div>
+            </section>
+            
+            {/* === 4. APP ECOSYSTEM SECTION === */}
+            <section className="relative w-full overflow-hidden">
+              <div className="absolute inset-0 z-0">
+                <img 
+                  src="/ecosystem-bg.gif"
+                  alt="Ecosystem Animation"
+                  className="w-full h-full object-cover object-center opacity-30"
+                />
+                <div className="absolute inset-0 bg-gradient-to-b from-gray-950 via-gray-950/40 to-gray-950 pointer-events-none" />
+              </div>
+              <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+                <AppEcosystem />
+              </div>
+            </section>
+
+          </div>
         </div>
 
         <Footer />

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@react-three/drei": "^10.7.7",
         "@react-three/fiber": "^9.5.0",
+        "@react-three/postprocessing": "^3.0.4",
         "clsx": "^2.1.1",
         "framer-motion": "^12.28.1",
         "lucide-react": "^0.562.0",
@@ -1356,6 +1357,32 @@
         }
       }
     },
+    "node_modules/@react-three/postprocessing": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@react-three/postprocessing/-/postprocessing-3.0.4.tgz",
+      "integrity": "sha512-e4+F5xtudDYvhxx3y0NtWXpZbwvQ0x1zdOXWTbXMK6fFLVDd4qucN90YaaStanZGS4Bd5siQm0lGL/5ogf8iDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "maath": "^0.6.0",
+        "n8ao": "^1.9.4",
+        "postprocessing": "^6.36.6"
+      },
+      "peerDependencies": {
+        "@react-three/fiber": "^9.0.0",
+        "react": "^19.0",
+        "three": ">= 0.156.0"
+      }
+    },
+    "node_modules/@react-three/postprocessing/node_modules/maath": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/maath/-/maath-0.6.0.tgz",
+      "integrity": "sha512-dSb2xQuP7vDnaYqfoKzlApeRcR2xtN8/f7WV/TMAkBC8552TwTLtOO0JTcSygkYMjNDPoo6V01jTw/aPi4JrMw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/three": ">=0.144.0",
+        "three": ">=0.144.0"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -5367,6 +5394,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/n8ao": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/n8ao/-/n8ao-1.10.1.tgz",
+      "integrity": "sha512-hhI1pC+BfOZBV1KMwynBrVlIm8wqLxj/abAWhF2nZ0qQKyzTSQa1QtLVS2veRiuoBQXojxobcnp0oe+PUoxf/w==",
+      "license": "ISC",
+      "peerDependencies": {
+        "postprocessing": ">=6.30.0",
+        "three": ">=0.137"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -5783,6 +5820,15 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postprocessing": {
+      "version": "6.38.2",
+      "resolved": "https://registry.npmjs.org/postprocessing/-/postprocessing-6.38.2.tgz",
+      "integrity": "sha512-7DwuT7Tkst41ZjSj287g7C9c5/D3Xx5rMgBosg0dadbUPoZD2HNzkadKPol1d2PJAoI9f+Jeh1/v9YfLzpFGVw==",
+      "license": "Zlib",
+      "peerDependencies": {
+        "three": ">= 0.157.0 < 0.183.0"
+      }
+    },
     "node_modules/potpack": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.5.0",
+    "@react-three/postprocessing": "^3.0.4",
     "clsx": "^2.1.1",
     "framer-motion": "^12.28.1",
     "lucide-react": "^0.562.0",