96 lines
3.1 KiB
TypeScript
96 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { Menu, X, Zap } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
const navLinks = [
|
|
{ href: "#how-it-works", label: "How It Works" },
|
|
{ href: "#services", label: "Services" },
|
|
{ href: "#impact", label: "Impact" },
|
|
{ href: "#packages", label: "Packages" },
|
|
{ href: "#faq", label: "FAQ" },
|
|
{ href: "#contact", label: "Contact" },
|
|
];
|
|
|
|
export function Navigation() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => setIsScrolled(window.scrollY > 50);
|
|
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
|
|
? "bg-bg-primary/95 backdrop-blur-md shadow-lg shadow-black/20"
|
|
: "bg-transparent"
|
|
}`}
|
|
>
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="flex h-16 items-center justify-between">
|
|
{/* Logo */}
|
|
<a href="#" className="flex items-center gap-2 group">
|
|
<Zap className="h-7 w-7 text-neon group-hover:animate-wiggle" />
|
|
<span className="text-xl font-bold text-cream">
|
|
Porta<span className="text-neon">Power</span>
|
|
</span>
|
|
</a>
|
|
|
|
{/* Desktop nav */}
|
|
<div className="hidden md:flex items-center gap-6">
|
|
{navLinks.map((link) => (
|
|
<a
|
|
key={link.href}
|
|
href={link.href}
|
|
className="text-sm font-medium text-cream-dim hover:text-neon transition-colors"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
<a href="#contact">
|
|
<Button size="sm">Get a Quote</Button>
|
|
</a>
|
|
</div>
|
|
|
|
{/* Mobile hamburger */}
|
|
<button
|
|
className="md:hidden text-cream hover:text-neon transition-colors cursor-pointer"
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
aria-label="Toggle menu"
|
|
>
|
|
{isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile menu */}
|
|
{isOpen && (
|
|
<div className="md:hidden pb-4 animate-fade-in">
|
|
<div className="flex flex-col gap-3 pt-2">
|
|
{navLinks.map((link) => (
|
|
<a
|
|
key={link.href}
|
|
href={link.href}
|
|
className="text-sm font-medium text-cream-dim hover:text-neon transition-colors py-2"
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
<a href="#contact" onClick={() => setIsOpen(false)}>
|
|
<Button size="sm" className="w-full mt-2">
|
|
Get a Quote
|
|
</Button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|