adminandClaude Opus 4.8
22e09d984d
Hero is now a data-native 0pt artifact (no photos, keeps grain/reveal/float); header is the 0pt wordmark with Swedish nav; layout is sv + loads JetBrains Mono + 0pt metadata; globals wires the loaded fonts. Adds CLAUDE.md + docs/01-09 as the build contract. next build green (5 routes). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
95 lines
3.3 KiB
TypeScript
95 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
|
|
const NAV = [
|
|
{ label: "Katalog", href: "/#katalog" },
|
|
{ label: "Så funkar det", href: "/#motorn" },
|
|
{ label: "Källor", href: "/#tackning" },
|
|
{ label: "Priser", href: "/#priser" },
|
|
];
|
|
|
|
function Wordmark() {
|
|
return (
|
|
<Link href="/" className="flex items-center gap-2">
|
|
<span className="text-xl font-semibold tracking-[-0.02em]">0pt</span>
|
|
<span className="inline-block h-1 w-1" style={{ backgroundColor: "var(--accent-red)" }} />
|
|
<span className="font-mono text-[10px] uppercase tracking-[0.18em] text-muted-foreground">your data</span>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
export function Header() {
|
|
const [scrolled, setScrolled] = useState(false);
|
|
const [open, setOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const onScroll = () => setScrolled(window.scrollY > 40);
|
|
window.addEventListener("scroll", onScroll, { passive: true });
|
|
onScroll();
|
|
return () => window.removeEventListener("scroll", onScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<header
|
|
className="sticky top-0 z-50 border-b border-border transition-colors"
|
|
style={{
|
|
backgroundColor: scrolled ? "rgba(255,255,255,0.82)" : "var(--background)",
|
|
backdropFilter: scrolled ? "blur(8px)" : "none",
|
|
}}
|
|
>
|
|
<div className="mx-auto flex h-16 max-w-[80rem] items-center justify-between px-6">
|
|
<Wordmark />
|
|
|
|
<nav className="hidden items-center gap-7 md:flex">
|
|
{NAV.map((n) => (
|
|
<Link
|
|
key={n.label}
|
|
href={n.href}
|
|
className="font-mono text-[12px] uppercase tracking-[0.1em] text-muted-foreground transition-colors hover:text-foreground"
|
|
>
|
|
{n.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="hidden items-center gap-5 md:flex">
|
|
<Link href="/bestall" className="font-mono text-[12px] uppercase tracking-[0.1em] text-muted-foreground transition-colors hover:text-foreground">
|
|
Logga in
|
|
</Link>
|
|
<Link
|
|
href="/bestall"
|
|
className="bg-foreground px-5 py-2.5 font-mono text-[12px] uppercase tracking-[0.1em] text-background transition-colors hover:bg-[var(--accent-red)]"
|
|
>
|
|
Starta beställning
|
|
</Link>
|
|
</div>
|
|
|
|
<button
|
|
aria-label="Meny"
|
|
onClick={() => setOpen((v) => !v)}
|
|
className="flex h-9 w-9 items-center justify-center border border-border md:hidden"
|
|
>
|
|
<span className="font-mono text-sm">{open ? "✕" : "≡"}</span>
|
|
</button>
|
|
</div>
|
|
|
|
{open ? (
|
|
<div className="border-t border-border bg-background md:hidden">
|
|
<div className="flex flex-col gap-1 px-6 py-4">
|
|
{NAV.map((n) => (
|
|
<Link key={n.label} href={n.href} onClick={() => setOpen(false)} className="py-2 font-mono text-[12px] uppercase tracking-[0.1em] text-muted-foreground">
|
|
{n.label}
|
|
</Link>
|
|
))}
|
|
<Link href="/bestall" onClick={() => setOpen(false)} className="mt-2 bg-foreground px-5 py-3 text-center font-mono text-[12px] uppercase tracking-[0.1em] text-background">
|
|
Starta beställning
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</header>
|
|
);
|
|
}
|