69 lines
3.1 KiB
TypeScript
69 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import Sidebar from "@/components/Sidebar";
|
|
|
|
export default function Header() {
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setIsScrolled(window.scrollY > 50);
|
|
};
|
|
|
|
window.addEventListener("scroll", handleScroll);
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<header
|
|
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isScrolled
|
|
? "bg-white/80 dark:bg-black/80 backdrop-blur-md shadow-sm py-4"
|
|
: "bg-transparent py-6"
|
|
}`}
|
|
>
|
|
<div className="max-w-7xl mx-auto px-6 flex items-center justify-between">
|
|
<Link href="/" className="flex items-center gap-3 group">
|
|
<div className="relative w-10 h-10 overflow-hidden rounded-full bg-white/10 backdrop-blur-sm border border-white/20 shadow-sm group-hover:scale-105 transition-transform">
|
|
<Image
|
|
src="/logo.png"
|
|
alt="Sky and Soil Logo"
|
|
fill
|
|
className="object-contain p-1"
|
|
/>
|
|
</div>
|
|
<span className={`text-2xl font-semibold tracking-tight group-hover:text-primary transition-colors ${isScrolled ? "text-foreground" : "text-white"
|
|
}`}>
|
|
Sky and Soil
|
|
</span>
|
|
</Link>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<Link href="/contact">
|
|
<button className="hidden md:block px-5 py-2 text-sm font-medium text-white bg-primary rounded-full hover:bg-blue-600 transition-colors shadow-sm hover:shadow-md active:scale-95 transform duration-200">
|
|
Book a Visit
|
|
</button>
|
|
</Link>
|
|
|
|
<button
|
|
className={`p-2 -mr-2 transition-colors ${isScrolled ? "text-foreground" : "text-white"
|
|
}`}
|
|
onClick={() => setIsSidebarOpen(true)}
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<Sidebar isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} />
|
|
</>
|
|
);
|
|
}
|