UI design Updated
This commit is contained in:
@@ -1,75 +1,244 @@
|
||||
"use client";
|
||||
|
||||
import { Activity, ShieldCheck, Twitter, Linkedin } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { Activity, ShieldCheck, Twitter, Linkedin, Github, Mail, Phone, MapPin, Award, Lock, FileCheck, Heart, CheckCircle2 } from "lucide-react";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="relative z-10 glass border-t-0 mt-32 py-24">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
|
||||
<div className="space-y-6 col-span-1 md:col-span-1">
|
||||
<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>
|
||||
<p className="text-foreground/50 text-sm leading-relaxed">
|
||||
Pioneering the future of AI-driven healthcare. Precision hardware, intelligent software, and absolute security.
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
<button className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-primary/20 transition-colors">
|
||||
<Twitter className="w-4 h-4 text-foreground/60" />
|
||||
</button>
|
||||
<button className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-primary/20 transition-colors">
|
||||
<Linkedin className="w-4 h-4 text-foreground/60" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
{/* 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" />
|
||||
|
||||
<div className="space-y-6">
|
||||
<h4 className="font-bold uppercase tracking-widest text-xs text-primary">Products</h4>
|
||||
<ul className="space-y-4 text-sm text-foreground/50">
|
||||
<li><Link href="/devices" className="hover:text-primary transition-colors">Medical Devices</Link></li>
|
||||
<li><Link href="/#voice-soap" className="hover:text-primary transition-colors">AI Voice-to-SOAP</Link></li>
|
||||
<li><Link href="/#diagnosis" className="hover:text-primary transition-colors">AI Diagnosis</Link></li>
|
||||
<li><Link href="/apps" className="hover:text-primary transition-colors">Mobile Apps</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Main Footer Content */}
|
||||
<div className="pt-16 sm:pt-20 lg:pt-24 pb-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-8 lg:gap-12">
|
||||
{/* Brand Section - Takes more space */}
|
||||
<div className="lg:col-span-4 space-y-6">
|
||||
<div className="space-y-6">
|
||||
{/* Logo */}
|
||||
<a href="/" className="inline-flex items-center gap-3 group">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-blue-500/20 blur-xl rounded-full group-hover:bg-blue-500/30 transition-all" />
|
||||
<Activity className="w-9 h-9 text-white relative z-10 transition-transform group-hover:scale-110 group-hover:rotate-180 duration-500" />
|
||||
</div>
|
||||
<span className="text-2xl sm:text-3xl font-bold tracking-tight text-white">
|
||||
Skyheal
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div className="space-y-6">
|
||||
<h4 className="font-bold uppercase tracking-widest text-xs text-primary">Company</h4>
|
||||
<ul className="space-y-4 text-sm text-foreground/50">
|
||||
<li><Link href="#" className="hover:text-primary transition-colors">About Us</Link></li>
|
||||
<li><Link href="#" className="hover:text-primary transition-colors">Security</Link></li>
|
||||
<li><Link href="#" className="hover:text-primary transition-colors">Contact</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* Description */}
|
||||
<p className="text-sm sm:text-base text-zinc-400 leading-relaxed max-w-sm">
|
||||
Advanced healthcare technology platform providing AI-powered diagnostics, secure patient monitoring, and enterprise-grade clinical solutions.
|
||||
</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="p-6 glass rounded-2xl border-accent/20 bg-accent/5 space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<ShieldCheck className="w-6 h-6 text-accent" />
|
||||
<span className="font-bold text-accent">HIPAA Compliant</span>
|
||||
{/* Trust Badges */}
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs font-semibold text-zinc-500 uppercase tracking-wider">Certified & Compliant</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{[
|
||||
{ icon: ShieldCheck, text: "HIPAA" },
|
||||
{ icon: Lock, text: "SOC 2" },
|
||||
{ icon: FileCheck, text: "FDA" },
|
||||
{ icon: Award, text: "ISO 27001" }
|
||||
].map((badge, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
whileHover={{ y: -2 }}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white/[0.03] border border-white/10 hover:border-white/20 transition-all cursor-pointer"
|
||||
>
|
||||
<badge.icon className="w-3 h-3 text-green-400" />
|
||||
<span className="text-[10px] font-semibold text-zinc-400">{badge.text}</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Links */}
|
||||
<div className="flex gap-3">
|
||||
{[
|
||||
{ icon: Twitter, label: "Twitter" },
|
||||
{ icon: Linkedin, label: "LinkedIn" },
|
||||
{ icon: Github, label: "GitHub" }
|
||||
].map((social, i) => (
|
||||
<motion.button
|
||||
key={i}
|
||||
whileHover={{ y: -2 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="w-10 h-10 rounded-lg bg-white/[0.03] flex items-center justify-center hover:bg-white/[0.08] transition-colors border border-white/10 hover:border-white/20 group"
|
||||
aria-label={social.label}
|
||||
>
|
||||
<social.icon className="w-4 h-4 text-zinc-400 group-hover:text-white transition-colors" />
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Products */}
|
||||
<div className="lg:col-span-2 space-y-5">
|
||||
<h4 className="text-sm font-bold text-white uppercase tracking-wider">Products</h4>
|
||||
<ul className="space-y-3">
|
||||
{[
|
||||
{ name: "Medical Devices", href: "/devices" },
|
||||
{ name: "Voice-to-SOAP", href: "/#voice-soap" },
|
||||
{ name: "AI Diagnosis", href: "/#diagnosis" },
|
||||
{ name: "Mobile Apps", href: "/apps" },
|
||||
{ name: "Clinical Dashboard", href: "#" },
|
||||
{ name: "Analytics Platform", href: "#" }
|
||||
].map((item, i) => (
|
||||
<li key={i}>
|
||||
<a
|
||||
href={item.href}
|
||||
className="text-sm text-zinc-400 hover:text-white transition-colors flex items-center gap-2 group"
|
||||
>
|
||||
<span className="w-1 h-1 rounded-full bg-blue-400/50 group-hover:bg-blue-400 transition-colors" />
|
||||
{item.name}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Solutions */}
|
||||
<div className="lg:col-span-2 space-y-5">
|
||||
<h4 className="text-sm font-bold text-white uppercase tracking-wider">Solutions</h4>
|
||||
<ul className="space-y-3">
|
||||
{[
|
||||
"Hospital Systems",
|
||||
"Private Practices",
|
||||
"Telehealth",
|
||||
"Remote Monitoring",
|
||||
"Clinical Research",
|
||||
"Health Insurance"
|
||||
].map((item, i) => (
|
||||
<li key={i}>
|
||||
<a
|
||||
href="#"
|
||||
className="text-sm text-zinc-400 hover:text-white transition-colors flex items-center gap-2 group"
|
||||
>
|
||||
<span className="w-1 h-1 rounded-full bg-purple-400/50 group-hover:bg-purple-400 transition-colors" />
|
||||
{item}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Resources */}
|
||||
<div className="lg:col-span-2 space-y-5">
|
||||
<h4 className="text-sm font-bold text-white uppercase tracking-wider">Resources</h4>
|
||||
<ul className="space-y-3">
|
||||
{[
|
||||
"Documentation",
|
||||
"API Reference",
|
||||
"Developer Guide",
|
||||
"Security & Compliance",
|
||||
"Case Studies",
|
||||
"Support Center"
|
||||
].map((item, i) => (
|
||||
<li key={i}>
|
||||
<a
|
||||
href="#"
|
||||
className="text-sm text-zinc-400 hover:text-white transition-colors flex items-center gap-2 group"
|
||||
>
|
||||
<span className="w-1 h-1 rounded-full bg-green-400/50 group-hover:bg-green-400 transition-colors" />
|
||||
{item}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Contact Card */}
|
||||
<div className="lg:col-span-2 space-y-5">
|
||||
<h4 className="text-sm font-bold text-white uppercase tracking-wider">Contact</h4>
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{ icon: Mail, text: "support@skyheal.ai", href: "mailto:support@skyheal.ai" },
|
||||
{ icon: Phone, text: "+1 (555) 123-4567", href: "tel:+15551234567" },
|
||||
{ icon: MapPin, text: "San Francisco, CA", href: "#" }
|
||||
].map((contact, i) => (
|
||||
<a
|
||||
key={i}
|
||||
href={contact.href}
|
||||
className="flex items-center gap-3 text-sm text-zinc-400 hover:text-white transition-colors group"
|
||||
>
|
||||
<div className="w-8 h-8 rounded-lg bg-white/[0.03] border border-white/10 flex items-center justify-center group-hover:border-white/20 transition-colors">
|
||||
<contact.icon className="w-4 h-4" />
|
||||
</div>
|
||||
{contact.text}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CTA Card */}
|
||||
<div className="mt-6 p-5 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 border border-white/10 space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Heart className="w-5 h-5 text-red-400" />
|
||||
<h5 className="text-sm font-bold text-white">24/7 Support</h5>
|
||||
</div>
|
||||
{/* <p className="text-xs text-zinc-400 leading-relaxed">
|
||||
Our healthcare experts are available round the clock to assist you.
|
||||
</p> */}
|
||||
{/* <motion.button
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className="w-full px-4 py-2.5 bg-white text-black rounded-lg text-xs font-bold hover:bg-zinc-100 transition-colors"
|
||||
>
|
||||
Get Started
|
||||
</motion.button> */}
|
||||
</div>
|
||||
<p className="text-[10px] text-foreground/40 leading-tight">
|
||||
Skyheal is fully certified for PHI handling and follows rigorous HIPAA/GDPR security standards.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-6">
|
||||
<p className="text-foreground/30 text-xs">
|
||||
© 2026 Skyheal AI. Built with precision and care.
|
||||
</p>
|
||||
<div className="flex gap-8 text-foreground/30 text-xs uppercase tracking-widest">
|
||||
<Link href="#" className="hover:text-primary">Privacy Policy</Link>
|
||||
<Link href="#" className="hover:text-primary">Terms of Service</Link>
|
||||
{/* Divider */}
|
||||
<div className="border-t border-white/5" />
|
||||
|
||||
{/* Bottom Section */}
|
||||
<div className="py-8">
|
||||
<div className="flex flex-col lg:flex-row justify-between items-center gap-6">
|
||||
{/* Copyright */}
|
||||
<div className="flex flex-col sm:flex-row items-center gap-4 sm:gap-6 text-xs text-zinc-500">
|
||||
<p>© 2026 Skyheal. All rights reserved.</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-3 h-3 text-green-400" />
|
||||
<span>HIPAA Compliant Healthcare Platform</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Legal Links */}
|
||||
<div className="flex flex-wrap justify-center gap-6 text-xs">
|
||||
{[
|
||||
"Privacy Policy",
|
||||
"Terms of Service",
|
||||
"Cookie Policy",
|
||||
"Accessibility"
|
||||
].map((item, i) => (
|
||||
<a
|
||||
key={i}
|
||||
href="#"
|
||||
className="text-zinc-500 hover:text-white transition-colors"
|
||||
>
|
||||
{item}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Additional Info */}
|
||||
<div className="mt-6 pt-6 border-t border-white/5">
|
||||
<p className="text-center text-xs text-zinc-600 leading-relaxed max-w-4xl mx-auto">
|
||||
Skyheal is a healthcare technology platform designed to assist medical professionals. Our AI-powered tools are intended to support,
|
||||
not replace, the relationship between healthcare providers and patients. All medical decisions should be made by licensed healthcare professionals.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Gradient Overlay at bottom */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-blue-500/30 to-transparent" />
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,102 +1,242 @@
|
||||
"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";
|
||||
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" },
|
||||
];
|
||||
{ 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 [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);
|
||||
}, []);
|
||||
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>
|
||||
return (
|
||||
<>
|
||||
<nav
|
||||
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
|
||||
isScrolled ? "py-3" : "py-6"
|
||||
}`}
|
||||
>
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<motion.div
|
||||
initial={{ y: -100 }}
|
||||
animate={{ y: 0 }}
|
||||
transition={{ duration: 0.6, ease: "easeOut" }}
|
||||
className={`relative rounded-2xl lg:rounded-3xl px-4 sm:px-6 lg:px-8 py-3 sm:py-4 flex items-center justify-between transition-all duration-500 ${
|
||||
isScrolled
|
||||
? "bg-black/90 backdrop-blur-xl shadow-2xl border border-white/10"
|
||||
: "bg-gradient-to-r from-white/5 via-white/10 to-white/5 backdrop-blur-lg border border-white/5"
|
||||
}`}
|
||||
>
|
||||
{/* Animated background gradient (unchanged) */}
|
||||
<div className="absolute inset-0 rounded-2xl lg:rounded-3xl overflow-hidden pointer-events-none">
|
||||
<motion.div
|
||||
animate={{
|
||||
background: [
|
||||
"radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.1) 0%, transparent 50%)",
|
||||
"radial-gradient(circle at 100% 100%, rgba(139, 92, 246, 0.1) 0%, transparent 50%)",
|
||||
"radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.1) 0%, transparent 50%)",
|
||||
],
|
||||
}}
|
||||
transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
|
||||
className="absolute inset-0"
|
||||
/>
|
||||
</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>
|
||||
{/* Logo (unchanged) */}
|
||||
<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" />
|
||||
<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>
|
||||
</a>
|
||||
|
||||
{/* Desktop Menu (unchanged) */}
|
||||
<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}
|
||||
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 */}
|
||||
</motion.a>
|
||||
))}
|
||||
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
initial={{ x: "100%" }}
|
||||
whileHover={{ x: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
/>
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Toggle – bigger touch target */}
|
||||
<motion.button
|
||||
whileTap={{ scale: 0.92 }}
|
||||
className="lg:hidden relative z-10 text-white p-3 rounded-full hover:bg-white/10 transition-colors"
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
>
|
||||
<AnimatePresence mode="wait">
|
||||
{isMobileMenuOpen ? (
|
||||
<motion.div
|
||||
key="close"
|
||||
initial={{ rotate: -90, opacity: 0 }}
|
||||
animate={{ rotate: 0, opacity: 1 }}
|
||||
exit={{ rotate: 90, opacity: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<X className="w-7 h-7" />
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="menu"
|
||||
initial={{ rotate: -90, opacity: 0 }}
|
||||
animate={{ rotate: 0, opacity: 1 }}
|
||||
exit={{ rotate: 90, opacity: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<Menu className="w-7 h-7" />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
</AnimatePresence>
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Mobile Menu – Slide from right + better visuals */}
|
||||
<AnimatePresence>
|
||||
{isMobileMenuOpen && (
|
||||
<>
|
||||
{/* Backdrop with subtle vignette */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="fixed inset-0 bg-black/70 backdrop-blur-md z-40 lg:hidden"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
/>
|
||||
|
||||
{/* Side sheet style menu */}
|
||||
<motion.div
|
||||
initial={{ x: "100%" }}
|
||||
animate={{ x: 0 }}
|
||||
exit={{ x: "100%" }}
|
||||
transition={{ type: "spring", damping: 30, stiffness: 200 }}
|
||||
className="fixed top-0 right-0 bottom-0 w-4/5 max-w-sm 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">
|
||||
{/* Header */}
|
||||
<div className="p-6 border-b border-white/10 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Activity className="w-8 h-8 text-blue-400" />
|
||||
<span className="text-xl font-bold text-white tracking-tight">Skyheal</span>
|
||||
</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
|
||||
variants={containerVariants}
|
||||
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}
|
||||
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"
|
||||
>
|
||||
<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">
|
||||
<item.icon className="w-6 h-6 text-blue-400 group-hover:scale-110 transition-transform" />
|
||||
</div>
|
||||
<span className="text-lg font-medium text-white group-hover:text-blue-300 transition-colors">
|
||||
{item.name}
|
||||
</span>
|
||||
<ChevronRight className="ml-auto w-5 h-5 text-zinc-500 group-hover:text-blue-400 group-hover:translate-x-1 transition-all" />
|
||||
</motion.a>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* CTA at bottom */}
|
||||
<div className="p-6 border-t border-white/10 mt-auto">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.03 }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
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"
|
||||
>
|
||||
<span className="relative z-10 flex items-center justify-center gap-2.5">
|
||||
<Sparkles className="w-5 h-5" />
|
||||
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>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user