9cf5cea3ba
- Redesigned configurator page with split-screen interface - Left: Large visual preview with sticky positioning - Right: Premium white controls container with form steps - Added complete configurator wizard (5 steps) - Updated hero CTA to "Zelf ontwerpen" - Configured Shadcn UI with Slate theme - Added layout components (Navbar, Footer) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { Menu } from "lucide-react";
|
|
import { MobileMenu } from "./mobile-menu";
|
|
import { useState } from "react";
|
|
|
|
export function MainNav() {
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<div className="bg-white">
|
|
<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
|
|
{/* Logo */}
|
|
<Link
|
|
href="/"
|
|
className="text-2xl font-extrabold tracking-tight text-gray-900"
|
|
>
|
|
PROINN
|
|
</Link>
|
|
|
|
{/* Right side: CTA + Hamburger */}
|
|
<div className="flex items-center gap-3">
|
|
<Link
|
|
href="/offerte"
|
|
className="inline-flex items-center rounded-md bg-[#C4D668] px-5 py-2.5 text-sm font-semibold text-black transition-colors hover:bg-[#b5c75a]"
|
|
>
|
|
Vraag Offerte
|
|
</Link>
|
|
|
|
<button
|
|
onClick={() => setMenuOpen(true)}
|
|
className="inline-flex size-11 items-center justify-center rounded-md bg-gray-100 text-gray-600 transition-colors hover:bg-gray-200"
|
|
aria-label="Menu openen"
|
|
>
|
|
<Menu className="size-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<MobileMenu open={menuOpen} onOpenChange={setMenuOpen} />
|
|
</>
|
|
);
|
|
}
|