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/home/offer-section.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowRight, DoorOpen, Home, Grid2x2 } from "lucide-react";
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+
+const categories = [
+  {
+    id: "binnendeuren",
+    title: "Binnendeuren",
+    subtitle: "Stalen deuren voor binnen gebruik",
+    href: "/producten/binnendeuren",
+    icon: DoorOpen,
+  },
+  {
+    id: "buitendeuren",
+    title: "Buitendeuren",
+    subtitle: "Stalen deuren voor buiten gebruik",
+    href: "/producten/buitendeuren",
+    icon: Home,
+  },
+  {
+    id: "kantoorwanden",
+    title: "Kantoorwanden",
+    subtitle: "Glazen wanden voor kantoren",
+    href: "/producten/kantoorwanden",
+    icon: Grid2x2,
+  },
+];
+
+export function OfferSection() {
+  const [activeId, setActiveId] = useState("binnendeuren");
+
+  return (
+    <section className="bg-[#F5F5F3] py-20">
+      <div className="mx-auto grid max-w-7xl gap-12 px-4 sm:px-6 lg:grid-cols-2 lg:gap-16 lg:px-8">
+        {/* Left Column */}
+        <div className="flex flex-col justify-center">
+          {/* Label */}
+          <div className="mb-6 flex items-center gap-2">
+            <div className="h-5 w-1 rounded-full bg-[#C4D668]" />
+            <span className="text-sm font-medium tracking-wide text-gray-500">
+              Ons aanbod
+            </span>
+          </div>
+
+          {/* Heading */}
+          <h2 className="mb-5 text-4xl font-light leading-tight text-gray-900 lg:text-5xl">
+            Waar ben je
+            <br />
+            naar op zoek?
+          </h2>
+
+          {/* Description */}
+          <p className="mb-10 max-w-lg text-sm leading-relaxed text-gray-500">
+            Bij Proinn vind je deuren en wanden die passen bij iedere situatie.
+            Of je nu op zoek bent naar stijlvolle binnendeuren, sterke
+            buitendeuren of functionele kantoorwanden: wij verzorgen het
+            volledig op maat. Altijd met de kwaliteit, aandacht en service die
+            je van ons mag verwachten.
+          </p>
+
+          {/* Category Cards */}
+          <div className="space-y-3">
+            {categories.map((cat) => {
+              const isActive = activeId === cat.id;
+              const Icon = cat.icon;
+
+              return (
+                <Link
+                  key={cat.id}
+                  href={cat.href}
+                  onMouseEnter={() => setActiveId(cat.id)}
+                  className={cn(
+                    "flex items-center gap-4 rounded-xl px-5 py-4 transition-all duration-200",
+                    isActive
+                      ? "bg-[#1A2E2E] text-white shadow-lg"
+                      : "bg-white text-gray-800 shadow-sm hover:shadow-md"
+                  )}
+                >
+                  {/* Icon */}
+                  <div
+                    className={cn(
+                      "flex size-12 shrink-0 items-center justify-center rounded-lg",
+                      isActive
+                        ? "bg-white/10"
+                        : "bg-gray-50"
+                    )}
+                  >
+                    <Icon
+                      className={cn(
+                        "size-6",
+                        isActive ? "text-white" : "text-gray-600"
+                      )}
+                      strokeWidth={1.5}
+                    />
+                  </div>
+
+                  {/* Text */}
+                  <div className="flex-1">
+                    <p className="text-sm font-semibold">{cat.title}</p>
+                    <p
+                      className={cn(
+                        "text-xs",
+                        isActive ? "text-gray-300" : "text-gray-400"
+                      )}
+                    >
+                      {cat.subtitle}
+                    </p>
+                  </div>
+
+                  {/* Arrow */}
+                  <div
+                    className={cn(
+                      "flex size-10 shrink-0 items-center justify-center rounded-lg transition-colors",
+                      isActive
+                        ? "bg-white/10"
+                        : "bg-gray-100"
+                    )}
+                  >
+                    <ArrowRight
+                      className={cn(
+                        "size-4",
+                        isActive ? "text-white" : "text-gray-500"
+                      )}
+                    />
+                  </div>
+                </Link>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Right Column - Image */}
+        <div className="relative min-h-[400px] overflow-hidden rounded-[2rem] lg:min-h-[560px]">
+          <Image
+            src="/images/aanbod.jpg"
+            alt="Stalen deur in modern interieur"
+            fill
+            className="object-cover"
+            sizes="(max-width: 1024px) 100vw, 50vw"
+          />
+        </div>
+      </div>
+    </section>
+  );
+}