"use client"; import { useState, useEffect } from "react"; import { motion, AnimatePresence, stagger } from "framer-motion"; import { Menu, X, Activity, Brain, Mic, ShieldCheck, ChevronRight, Sparkles } from "lucide-react"; const navItems = [ { 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); useEffect(() => { const handleScroll = () => setIsScrolled(window.scrollY > 20); window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }, []); return ( <> {/* Mobile Menu – Slide from right + better visuals */} {isMobileMenuOpen && ( <> {/* Backdrop with subtle vignette */} setIsMobileMenuOpen(false)} /> {/* Side sheet style menu */}
{/* Header */}
Skyheal
{/* Menu Items */} {navItems.map((item) => ( 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" >
{item.name}
))}
{/* CTA at bottom */}
Get Started Free
)}
); }