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

@@ -0,0 +1,118 @@
+import Link from "next/link";
+import {
+  ArrowRight,
+  Check,
+  MapPin,
+  PenTool,
+} from "lucide-react";
+
+const steps = [
+  "Vrijblijvende offerte",
+  "Wensen bespreken",
+  "Meten is weten",
+  "Het definitieve plan",
+  "Jouw deur wordt gemaakt",
+  "Montage op locatie",
+];
+
+const checklistItems = [
+  "We luisteren goed naar jouw ideeën en denken mee in mogelijkheden.",
+  "Samen vertalen we jouw wensen naar een passend ontwerp.",
+  "In onze eigen fabriek maken we alles volledig op maat.",
+  "We gebruiken hoogwaardige materialen voor een duurzaam resultaat.",
+  "Tijdens het hele traject kun je rekenen op persoonlijk advies.",
+  "Ons team zorgt voor een zorgvuldige en nette montage op locatie.",
+];
+
+export function ProcessSection() {
+  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">
+              Onze werkwijze in 6 stappen
+            </span>
+          </div>
+
+          {/* Heading */}
+          <h2 className="mb-5 text-4xl font-light leading-tight text-gray-900 lg:text-5xl">
+            Van schets tot stalen
+            <br />
+            deur in je woonkamer
+          </h2>
+
+          {/* Description */}
+          <p className="mb-8 max-w-lg text-sm leading-relaxed text-gray-500">
+            Bij Proinn vinden we dat een deur of wand meer is dan alleen een
+            praktisch product. Het bepaalt de sfeer van een ruimte en moet
+            perfect aansluiten bij jouw wensen. Daarom begeleiden we je stap
+            voor stap in het proces:
+          </p>
+
+          {/* Checklist */}
+          <ul className="mb-8 space-y-3">
+            {checklistItems.map((item) => (
+              <li key={item} className="flex items-start gap-3">
+                <Check className="mt-0.5 size-4 shrink-0 text-gray-700" strokeWidth={2.5} />
+                <span className="text-sm leading-snug text-gray-600">
+                  {item}
+                </span>
+              </li>
+            ))}
+          </ul>
+
+          {/* Closing text */}
+          <p className="mb-8 max-w-lg text-sm leading-relaxed text-gray-500">
+            Zo zorgen we ervoor dat jij straks een deur of wand hebt die niet
+            alleen mooi oogt, maar ook praktisch en duurzaam is.
+          </p>
+
+          {/* Buttons */}
+          <div className="flex flex-wrap items-center gap-3">
+            <Link
+              href="/showrooms"
+              className="inline-flex items-center gap-2 rounded-md bg-[#1A2E2E] px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-[#263e3e]"
+            >
+              <MapPin className="size-4" />
+              Onze showrooms
+            </Link>
+            <Link
+              href="/offerte"
+              className="inline-flex items-center gap-2 rounded-md bg-[#C4D668] px-5 py-2.5 text-sm font-semibold text-black transition-colors hover:bg-[#b5c75a]"
+            >
+              <PenTool className="size-4" />
+              Zelf ontwerpen
+            </Link>
+          </div>
+        </div>
+
+        {/* Right Column - 6 Steps */}
+        <div className="flex flex-col justify-center space-y-3">
+          {steps.map((step, index) => (
+            <div
+              key={step}
+              className="flex items-center gap-4 rounded-xl bg-white px-5 py-4 shadow-sm"
+            >
+              {/* Number Circle */}
+              <div className="flex size-10 shrink-0 items-center justify-center rounded-full border border-gray-200 text-sm font-semibold text-gray-700">
+                {index + 1}
+              </div>
+
+              {/* Step Text */}
+              <span className="flex-1 text-sm font-semibold text-gray-800">
+                {step}
+              </span>
+
+              {/* Arrow */}
+              <ArrowRight className="size-4 shrink-0 text-gray-400" />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}