132 lines
4.6 KiB
TypeScript
132 lines
4.6 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { Menu, X, Glasses } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
const navLinks = [
|
|
{ label: 'Sobre', href: '#sobre' },
|
|
{ label: 'Tecnologia', href: '#tecnologia' },
|
|
{ label: 'Design', href: '#design' },
|
|
{ label: 'Funcionalidades', href: '#funcionalidades' },
|
|
{ label: 'Especificações', href: '#especificacoes' },
|
|
{ label: 'Contato', href: '#contato' },
|
|
];
|
|
|
|
export function Navigation() {
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 50);
|
|
};
|
|
|
|
window.addEventListener('scroll', handleScroll, { passive: true });
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
const scrollToSection = (href: string) => {
|
|
const element = document.querySelector(href);
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
setIsMobileMenuOpen(false);
|
|
};
|
|
|
|
return (
|
|
<header
|
|
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
|
|
isScrolled
|
|
? 'glass border-b border-slate-700/50'
|
|
: 'bg-transparent'
|
|
}`}
|
|
>
|
|
<nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between h-16 lg:h-20">
|
|
{/* Logo */}
|
|
<a
|
|
href="#"
|
|
className="flex items-center gap-2 group"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}}
|
|
>
|
|
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center group-hover:shadow-lg group-hover:shadow-orange-500/30 transition-all duration-300">
|
|
<Glasses className="w-5 h-5 text-white" />
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="font-display font-bold text-lg text-white leading-tight">
|
|
VisionRun
|
|
</span>
|
|
<span className="text-[10px] text-slate-400 leading-tight">
|
|
Smart Running Glasses
|
|
</span>
|
|
</div>
|
|
</a>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div className="hidden lg:flex items-center gap-1">
|
|
{navLinks.map((link) => (
|
|
<button
|
|
key={link.href}
|
|
onClick={() => scrollToSection(link.href)}
|
|
className="px-4 py-2 text-sm font-medium text-slate-300 hover:text-white transition-colors duration-200 relative group"
|
|
>
|
|
{link.label}
|
|
<span className="absolute bottom-0 left-1/2 -translate-x-1/2 w-0 h-0.5 bg-orange-500 group-hover:w-1/2 transition-all duration-300" />
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* CTA Button */}
|
|
<div className="hidden lg:block">
|
|
<Button
|
|
onClick={() => scrollToSection('#contato')}
|
|
className="bg-orange-500 hover:bg-orange-400 text-white font-semibold px-6 transition-all duration-300 hover:shadow-lg hover:shadow-orange-500/30"
|
|
>
|
|
Comprar Agora
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<button
|
|
className="lg:hidden p-2 text-slate-300 hover:text-white transition-colors"
|
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
|
>
|
|
{isMobileMenuOpen ? (
|
|
<X className="w-6 h-6" />
|
|
) : (
|
|
<Menu className="w-6 h-6" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
<div
|
|
className={`lg:hidden overflow-hidden transition-all duration-300 ${
|
|
isMobileMenuOpen ? 'max-h-96 pb-4' : 'max-h-0'
|
|
}`}
|
|
>
|
|
<div className="flex flex-col gap-1 pt-2 border-t border-slate-700/50">
|
|
{navLinks.map((link) => (
|
|
<button
|
|
key={link.href}
|
|
onClick={() => scrollToSection(link.href)}
|
|
className="px-4 py-3 text-left text-sm font-medium text-slate-300 hover:text-white hover:bg-slate-800/50 rounded-lg transition-all duration-200"
|
|
>
|
|
{link.label}
|
|
</button>
|
|
))}
|
|
<Button
|
|
onClick={() => scrollToSection('#contato')}
|
|
className="mt-2 bg-orange-500 hover:bg-orange-400 text-white font-semibold"
|
|
>
|
|
Comprar Agora
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
);
|
|
}
|