77 lines
3.2 KiB
TypeScript
77 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
import { MoodToggle } from "./currency-toggle";
|
|
|
|
export function SiteHeader() {
|
|
const [scrolled, setScrolled] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setScrolled(window.scrollY > 20);
|
|
};
|
|
window.addEventListener("scroll", handleScroll);
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<header
|
|
className={`fixed left-0 right-0 top-0 z-50 transition-all duration-300 ${scrolled ? "bg-background/80 backdrop-blur-md shadow-sm py-3" : "bg-transparent py-5"
|
|
}`}
|
|
>
|
|
<div className="mx-auto flex max-w-7xl items-center justify-between px-6 lg:px-8">
|
|
<Link href="/" className="flex items-center gap-2 group">
|
|
<div className="flex h-8 w-8 items-center justify-center rounded bg-primary text-primary-foreground shadow-glow-teal transition-transform group-hover:scale-105">
|
|
<span className="font-bold text-sm">L1</span>
|
|
</div>
|
|
<span className="text-lg font-bold tracking-tight text-foreground">
|
|
LedgerOne
|
|
</span>
|
|
</Link>
|
|
|
|
<nav className="hidden items-center gap-8 md:flex">
|
|
<Link href="/" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
|
|
Home
|
|
</Link>
|
|
<Link href="/about" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
|
|
About
|
|
</Link>
|
|
<Link href="/features/cash-flow" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
|
|
Cash Flow
|
|
</Link>
|
|
<Link href="/features/reports" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
|
|
Reports
|
|
</Link>
|
|
<Link href="/compare/vs-spreadsheets" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
|
|
Compare
|
|
</Link>
|
|
<Link href="/pricing" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
|
|
Pricing
|
|
</Link>
|
|
</nav>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<MoodToggle />
|
|
<div className="hidden md:flex items-center gap-4 border-l border-border pl-4">
|
|
<Link href="/login" className="text-sm font-medium text-foreground hover:text-primary transition-colors">
|
|
Sign in
|
|
</Link>
|
|
<Link
|
|
href="/register"
|
|
className="rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground shadow-lg shadow-primary/20 transition-all hover:bg-primary/90 hover:-translate-y-0.5 active:scale-95"
|
|
>
|
|
Get Started
|
|
</Link>
|
|
</div>
|
|
<button className="md:hidden text-foreground">
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16m-7 6h7" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|