UI Screens updated

app/components/canvas/DNAHeroBackground.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { Canvas, useFrame } from "@react-three/fiber";
+import { useRef, useMemo } from "react";
+import * as THREE from "three";
+import { Float, PerspectiveCamera } from "@react-three/drei";
+
+function DNAParticles() {
+    const points = useMemo(() => {
+        const p = [];
+        const count = 100;
+        const radius = 2;
+        const height = 15;
+
+        for (let i = 0; i < count; i++) {
+            const angle = (i / count) * Math.PI * 4;
+            const x = Math.cos(angle) * radius;
+            const y = (i / count) * height - height / 2;
+            const z = Math.sin(angle) * radius;
+
+            // Strand 1
+            p.push(new THREE.Vector3(x, y, z));
+            // Strand 2 (180 deg offset)
+            p.push(new THREE.Vector3(-x, y, -z));
+
+            // Connecting rungs
+            if (i % 5 === 0) {
+                const rungPoints = 5;
+                for (let j = 1; j < rungPoints; j++) {
+                    const t = j / rungPoints;
+                    p.push(new THREE.Vector3(
+                        x * (1 - 2 * t),
+                        y,
+                        z * (1 - 2 * t)
+                    ));
+                }
+            }
+        }
+        return p;
+    }, []);
+
+    const groupRef = useRef<THREE.Group>(null);
+
+    useFrame((state) => {
+        if (groupRef.current) {
+            groupRef.current.rotation.y += 0.005;
+            groupRef.current.rotation.z = Math.sin(state.clock.elapsedTime * 0.5) * 0.1;
+        }
+    });
+
+    return (
+        <group ref={groupRef}>
+            {points.map((pos, i) => (
+                <mesh key={i} position={pos}>
+                    <sphereGeometry args={[0.04, 8, 8]} />
+                    <meshStandardMaterial
+                        color={i % 2 === 0 ? "#3b82f6" : "#8b5cf6"}
+                        emissive={i % 2 === 0 ? "#1e40af" : "#5b21b6"}
+                        emissiveIntensity={2}
+                    />
+                </mesh>
+            ))}
+        </group>
+    );
+}
+
+export default function DNAHeroBackground() {
+    return (
+        <div className="fixed inset-0 -z-10 bg-background">
+            <Canvas shadows dpr={[1, 2]}>
+                <PerspectiveCamera makeDefault position={[0, 0, 10]} fov={50} />
+                <ambientLight intensity={0.5} />
+                <pointLight position={[10, 10, 10]} intensity={1} color="#3b82f6" />
+                <pointLight position={[-10, -10, -10]} intensity={1} color="#8b5cf6" />
+                <spotLight position={[0, 5, 0]} angle={0.3} penumbra={1} intensity={2} castShadow />
+
+                <Float speed={2} rotationIntensity={0.5} floatIntensity={0.5}>
+                    <DNAParticles />
+                </Float>
+            </Canvas>
+            <div className="absolute inset-0 bg-gradient-to-b from-transparent via-background/50 to-background pointer-events-none" />
+        </div>
+    );
+}

app/components/layout/Navbar.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Menu, X, Activity, Brain, Mic, Pill } from "lucide-react";
+import Link from "next/link";
+
+const navItems = [
+    { name: "Voice-to-SOAP", icon: Mic, href: "#voice-soap" },
+    { name: "AI Diagnosis", icon: Brain, href: "#diagnosis" },
+    { name: "AI Prescription", icon: Pill, href: "#prescription" },
+];
+
+export default function Navbar() {
+    const [isScrolled, setIsScrolled] = useState(false);
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+    useEffect(() => {
+        const handleScroll = () => {
+            setIsScrolled(window.scrollY > 20);
+        };
+        window.addEventListener("scroll", handleScroll);
+        return () => window.removeEventListener("scroll", handleScroll);
+    }, []);
+
+    return (
+        <nav
+            className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isScrolled ? "py-4" : "py-6"
+                }`}
+        >
+            <div className="container mx-auto px-6">
+                <div
+                    className={`glass rounded-2xl px-6 py-3 flex items-center justify-between transition-all duration-300 ${isScrolled ? "bg-background/80 shadow-2xl" : "bg-white/5"
+                        }`}
+                >
+                    <Link href="/" className="flex items-center gap-2 group">
+                        <Activity className="w-8 h-8 text-primary transition-transform group-hover:scale-110" />
+                        <span className="text-2xl font-bold tracking-tighter text-gradient">
+                            Skyheal
+                        </span>
+                    </Link>
+
+                    {/* Desktop Menu */}
+                    <div className="hidden md:flex items-center gap-8">
+                        {navItems.map((item) => (
+                            <Link
+                                key={item.name}
+                                href={item.href}
+                                className="text-sm font-medium text-foreground/70 hover:text-primary transition-colors flex items-center gap-2"
+                            >
+                                <item.icon className="w-4 h-4" />
+                                {item.name}
+                            </Link>
+                        ))}
+                        <button className="bg-primary hover:bg-primary/80 text-white px-6 py-2 rounded-full text-sm font-semibold transition-all hover:scale-105 active:scale-95 shadow-[0_0_20px_rgba(59,130,246,0.3)]">
+                            Get Started
+                        </button>
+                    </div>
+
+                    {/* Mobile Toggle */}
+                    <button
+                        className="md:hidden text-foreground p-2"
+                        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+                    >
+                        {isMobileMenuOpen ? <X /> : <Menu />}
+                    </button>
+                </div>
+            </div>
+
+            {/* Mobile Menu */}
+            <AnimatePresence>
+                {isMobileMenuOpen && (
+                    <motion.div
+                        initial={{ opacity: 0, y: -20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{ opacity: 0, y: -20 }}
+                        className="absolute top-full left-0 right-0 p-6 md:hidden"
+                    >
+                        <div className="glass rounded-2xl p-6 flex flex-col gap-4">
+                            {navItems.map((item) => (
+                                <Link
+                                    key={item.name}
+                                    href={item.href}
+                                    className="flex items-center gap-3 text-lg font-medium text-foreground/80 hover:text-primary"
+                                    onClick={() => setIsMobileMenuOpen(false)}
+                                >
+                                    <item.icon className="w-5 h-5" />
+                                    {item.name}
+                                </Link>
+                            ))}
+                            <hr className="border-border" />
+                            <button className="w-full bg-primary text-white py-3 rounded-xl font-bold">
+                                Get Started
+                            </button>
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </nav>
+    );
+}

app/components/sections/AIDiagnosis.tsx

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

app/components/sections/AIPrescription.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Pill, Zap, Users, ClipboardCheck } from "lucide-react";
+
+export default function AIPrescription() {
+    return (
+        <section id="prescription" className="py-24 relative">
+            <div className="container mx-auto px-6">
+                <div className="flex flex-col md:flex-row items-center gap-16">
+                    <motion.div
+                        initial={{ opacity: 0, x: -50 }}
+                        whileInView={{ opacity: 1, x: 0 }}
+                        transition={{ duration: 0.8 }}
+                        className="flex-1 space-y-8"
+                    >
+                        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/10 border border-accent/20 text-accent text-sm font-semibold">
+                            <Pill className="w-4 h-4" />
+                            <span>Smart Fulfillment</span>
+                        </div>
+
+                        <h2 className="text-4xl md:text-5xl font-bold leading-tight">
+                            End-to-End <span className="text-gradient">AI Prescription</span> Ecosystem
+                        </h2>
+
+                        <p className="text-lg text-foreground/60 leading-relaxed max-w-xl">
+                            From the doctor&apos;s desk to the patient&apos;s door. Skyheal automates the entire prescription lifecycle, ensuring safety, compliance, and convenience.
+                        </p>
+
+                        <div className="space-y-6">
+                            {[
+                                { icon: Zap, text: "Instant Pharmacy Integration", label: "Smart Link" },
+                                { icon: Users, text: "Patient Medication Management", label: "Care Portal" },
+                                { icon: ClipboardCheck, text: "Automatic Drug Interaction Checks", label: "Safety First" }
+                            ].map((item, i) => (
+                                <div key={i} className="flex items-center gap-6 p-4 rounded-2xl bg-white/5 hover:bg-white/10 transition-colors border border-white/5">
+                                    <div className="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center">
+                                        <item.icon className="w-6 h-6 text-primary" />
+                                    </div>
+                                    <div>
+                                        <span className="text-xs font-bold uppercase tracking-widest text-primary/60">{item.label}</span>
+                                        <p className="text-base font-medium text-foreground/90">{item.text}</p>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </motion.div>
+
+                    <motion.div
+                        initial={{ opacity: 0, y: 50 }}
+                        whileInView={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.8 }}
+                        className="flex-1"
+                    >
+                        <div className="glass rounded-[2.5rem] p-1 shadow-2xl overflow-hidden">
+                            <div className="bg-background/40 p-8 rounded-[2.25rem] space-y-8">
+                                <div className="flex items-center justify-between border-b border-white/5 pb-4">
+                                    <div className="flex items-center gap-3">
+                                        <div className="w-10 h-10 rounded-full bg-accent/20 flex items-center justify-center">
+                                            <Pill className="w-5 h-5 text-accent" />
+                                        </div>
+                                        <div>
+                                            <h4 className="font-bold text-sm">Prescription Portal</h4>
+                                            <p className="text-xs text-foreground/50">Active Session</p>
+                                        </div>
+                                    </div>
+                                    <div className="px-3 py-1 rounded-full bg-accent/10 text-accent text-[10px] font-bold uppercase">Verified</div>
+                                </div>
+
+                                <div className="space-y-4">
+                                    {[1, 2].map((_, i) => (
+                                        <div key={i} className="p-4 rounded-xl bg-white/5 border border-white/5 space-y-3">
+                                            <div className="flex justify-between items-start">
+                                                <div className="h-4 w-1/3 bg-white/10 rounded-md animate-pulse" />
+                                                <div className="h-4 w-20 bg-primary/20 rounded-md" />
+                                            </div>
+                                            <div className="h-2 w-full bg-white/5 rounded-full" />
+                                            <div className="h-2 w-2/3 bg-white/5 rounded-full" />
+                                        </div>
+                                    ))}
+                                </div>
+
+                                <button className="w-full bg-accent hover:bg-accent/80 text-white py-4 rounded-xl font-bold transition-all transform hover:translate-y-[-2px] shadow-lg shadow-accent/20">
+                                    Authorize Digital Delivery
+                                </button>
+                            </div>
+                        </div>
+                    </motion.div>
+                </div>
+            </div>
+        </section>
+    );
+}

app/components/sections/AIVoiceSoap.tsx

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

app/globals.css

@@ -1,26 +1,55 @@
 @import "tailwindcss";
 
+@theme {
+  --color-primary: #3b82f6;
+  --color-secondary: #8b5cf6;
+  --color-accent: #10b981;
+  --color-background: #030712;
+  --color-foreground: #f3f4f6;
+  --color-card: rgba(17, 24, 39, 0.7);
+  --color-border: rgba(75, 85, 99, 0.3);
+}
+
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+  --background: #030712;
+  --foreground: #f3f4f6;
 }
 
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  overflow-x: hidden;
 }
+
+@layer utilities {
+  .glass {
+    background: rgba(17, 24, 39, 0.7);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(75, 85, 99, 0.3);
+  }
+
+  .text-gradient {
+    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #34d399 100%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .animate-pulse-slow {
+    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+}
+
+@keyframes pulse {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}

app/page.tsx

@@ -1,64 +1,78 @@
-import Image from "next/image";
+"use client";
+
+import { motion } from "framer-motion";
+import DNAHeroBackground from "./components/canvas/DNAHeroBackground";
+import Navbar from "./components/layout/Navbar";
+import AIVoiceSoap from "./components/sections/AIVoiceSoap";
+import AIDiagnosis from "./components/sections/AIDiagnosis";
+import AIPrescription from "./components/sections/AIPrescription";
+import { ArrowRight, Sparkles } from "lucide-react";
 
 export default function Home() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
+    <div className="relative min-h-screen">
+      <DNAHeroBackground />
+      <Navbar />
+
+      <main className="relative z-10 pt-32">
+        {/* Hero Section */}
+        <section className="container mx-auto px-6 py-24 min-h-[80vh] flex flex-col items-center justify-center text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="space-y-8 max-w-4xl"
           >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
+            <div className="inline-flex items-center gap-2 px-6 py-3 rounded-full glass border-primary/20 text-primary-light animate-pulse-slow">
+              <Sparkles className="w-5 h-5" />
+              <span className="text-sm font-bold tracking-widest uppercase">The Future of Healthcare is Here</span>
+            </div>
+
+            <h1 className="text-5xl md:text-8xl font-black tracking-tighter leading-[1.1]">
+              Reimagining Life with <br />
+              <span className="text-gradient">AI Precision</span>
+            </h1>
+
+            <p className="text-xl text-foreground/60 leading-relaxed max-w-2xl mx-auto">
+              Empowering healthcare providers with end-to-end AI intelligence. From voice-transcribed clinical notes to predictive diagnostics and automated prescriptions.
+            </p>
+
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-6 pt-8">
+              <button className="w-full sm:w-auto bg-primary hover:bg-primary/80 px-10 py-5 rounded-full font-bold text-lg transition-all transform hover:scale-105 shadow-[0_0_40px_rgba(59,130,246,0.4)] flex items-center justify-center gap-3">
+                Experience Skyheal
+                <ArrowRight className="w-5 h-5" />
+              </button>
+              <button className="w-full sm:w-auto glass hover:bg-white/10 px-10 py-5 rounded-full font-bold text-lg transition-all">
+                Watch Demo
+              </button>
+            </div>
+          </motion.div>
+        </section>
+
+        {/* AI Service Sections */}
+        <div className="space-y-32 pb-32">
+          <AIVoiceSoap />
+          <AIDiagnosis />
+          <AIPrescription />
         </div>
+
+        {/* Footer */}
+        <footer className="glass border-t-0 py-16">
+          <div className="container mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-8">
+            <div className="flex items-center gap-2">
+              <div className="w-8 h-8 rounded-lg bg-primary" />
+              <span className="text-2xl font-bold tracking-tighter text-gradient">Skyheal</span>
+            </div>
+            <div className="flex gap-8 text-foreground/40 text-sm">
+              <a href="#" className="hover:text-primary transition-colors">Privacy Policy</a>
+              <a href="#" className="hover:text-primary transition-colors">Terms of Service</a>
+              <a href="#" className="hover:text-primary transition-colors">Contact</a>
+            </div>
+            <p className="text-foreground/40 text-sm">
+              © 2026 Skyheal AI. All rights reserved.
+            </p>
+          </div>
+        </footer>
       </main>
     </div>
   );