Add premium configurator with split-screen layout

- 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>

components/layout/main-nav.tsx

@@ -0,0 +1,46 @@
+"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} />
+    </>
+  );
+}