125 lines
4.5 KiB
TypeScript
125 lines
4.5 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import Link from "next/link"
|
|
import { Menu, X, Cloud } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
export function Header() {
|
|
const [isScrolled, setIsScrolled] = useState(false)
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 50)
|
|
}
|
|
window.addEventListener("scroll", handleScroll)
|
|
return () => window.removeEventListener("scroll", handleScroll)
|
|
}, [])
|
|
|
|
const navLinks = [
|
|
{ href: "#services", label: "Services" },
|
|
{ href: "#features", label: "Why Us" },
|
|
{ href: "#process", label: "Process" },
|
|
{ href: "#contact", label: "Contact" },
|
|
]
|
|
|
|
return (
|
|
<header
|
|
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
|
|
isScrolled
|
|
? "bg-background/80 backdrop-blur-xl border-b border-border/50"
|
|
: "bg-transparent"
|
|
}`}
|
|
>
|
|
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<nav className="flex items-center justify-between h-20">
|
|
{/* Logo */}
|
|
<Link href="/" className="flex items-center gap-2 group">
|
|
<div className="relative">
|
|
<Cloud className="w-8 h-8 text-primary transition-transform duration-300 group-hover:scale-110" />
|
|
<div className="absolute inset-0 bg-primary/30 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
|
</div>
|
|
<span className="text-xl font-bold tracking-tight">
|
|
Cloud<span className="text-primary">rite</span>
|
|
</span>
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div className="hidden md:flex items-center gap-8">
|
|
{navLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className="relative text-sm font-medium text-muted-foreground hover:text-foreground transition-colors duration-300 group"
|
|
>
|
|
{link.label}
|
|
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full" />
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* CTA Button */}
|
|
<div className="hidden md:block">
|
|
<Button
|
|
asChild
|
|
className="bg-primary text-primary-foreground hover:bg-primary/90 transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-primary/25"
|
|
>
|
|
<Link href="#contact">Get in Touch</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<button
|
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
|
className="md:hidden relative w-10 h-10 flex items-center justify-center"
|
|
aria-label="Toggle menu"
|
|
>
|
|
<div className="relative w-6 h-6">
|
|
<Menu
|
|
className={`absolute inset-0 w-6 h-6 transition-all duration-300 ${
|
|
isMobileMenuOpen ? "opacity-0 rotate-90" : "opacity-100 rotate-0"
|
|
}`}
|
|
/>
|
|
<X
|
|
className={`absolute inset-0 w-6 h-6 transition-all duration-300 ${
|
|
isMobileMenuOpen ? "opacity-100 rotate-0" : "opacity-0 -rotate-90"
|
|
}`}
|
|
/>
|
|
</div>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
<div
|
|
className={`md:hidden absolute top-full left-0 right-0 bg-background/95 backdrop-blur-xl border-b border-border overflow-hidden transition-all duration-500 ${
|
|
isMobileMenuOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
|
|
}`}
|
|
>
|
|
<div className="px-6 py-6 space-y-4">
|
|
{navLinks.map((link, index) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
className="block text-lg font-medium text-muted-foreground hover:text-foreground transition-all duration-300"
|
|
style={{ transitionDelay: `${index * 50}ms` }}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
<Button
|
|
asChild
|
|
className="w-full mt-4 bg-primary text-primary-foreground hover:bg-primary/90"
|
|
>
|
|
<Link href="#contact" onClick={() => setIsMobileMenuOpen(false)}>
|
|
Get in Touch
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|