103 lines
4.5 KiB
TypeScript
103 lines
4.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { Menu, X, Activity, Brain, Mic, ShieldCheck } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
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" },
|
|
];
|
|
|
|
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>
|
|
);
|
|
}
|