UI Screens updated

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