90 lines
2.8 KiB
TypeScript
90 lines
2.8 KiB
TypeScript
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Menu, X, Phone } from "lucide-react";
|
|
|
|
const Navigation = () => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const navItems = [
|
|
{ name: "Home", href: "#home" },
|
|
{ name: "Services", href: "#services" },
|
|
{ name: "About", href: "#about" },
|
|
{ name: "Contact", href: "#contact" },
|
|
];
|
|
|
|
return (
|
|
<nav className="fixed top-0 w-full z-50 bg-background/95 backdrop-blur-sm border-b border-border">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between items-center h-16">
|
|
{/* Logo */}
|
|
<div className="flex-shrink-0">
|
|
<h1 className="text-2xl font-bold text-foreground">
|
|
NQS <span className="text-glow">Inspection</span>
|
|
</h1>
|
|
</div>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div className="hidden md:block">
|
|
<div className="ml-10 flex items-baseline space-x-8">
|
|
{navItems.map((item) => (
|
|
<a
|
|
key={item.name}
|
|
href={item.href}
|
|
className="text-muted-foreground hover:text-primary transition-colors duration-200 font-medium"
|
|
>
|
|
{item.name}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* CTA Button */}
|
|
<div className="hidden md:block">
|
|
<Button className="btn-orange-glow">
|
|
<Phone className="w-4 h-4 mr-2" />
|
|
Emergency Support
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Mobile menu button */}
|
|
<div className="md:hidden">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="text-foreground"
|
|
>
|
|
{isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Navigation */}
|
|
{isOpen && (
|
|
<div className="md:hidden">
|
|
<div className="px-2 pt-2 pb-3 space-y-1 border-t border-border bg-card">
|
|
{navItems.map((item) => (
|
|
<a
|
|
key={item.name}
|
|
href={item.href}
|
|
className="block px-3 py-2 text-muted-foreground hover:text-primary transition-colors duration-200"
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
{item.name}
|
|
</a>
|
|
))}
|
|
<div className="pt-2">
|
|
<Button className="btn-orange-glow w-full">
|
|
<Phone className="w-4 h-4 mr-2" />
|
|
Emergency Support
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Navigation; |