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

@@ -0,0 +1,88 @@
+import Image from "next/image";
+import Link from "next/link";
+import { MousePointerClick, FileText } from "lucide-react";
+
+export function AboutSection() {
+  return (
+    <section className="bg-[#F5F5F3] py-24">
+      <div className="mx-auto grid max-w-7xl grid-cols-1 items-stretch gap-8 px-4 sm:px-6 lg:grid-cols-12 lg:px-8">
+        {/* Left Column - Tall Image */}
+        <div className="relative min-h-[500px] overflow-hidden rounded-[2.5rem] lg:col-span-5 lg:min-h-[600px]">
+          <Image
+            src="/images/image-people1.png"
+            alt="Het team van Proinn aan het werk"
+            fill
+            className="object-cover"
+            sizes="(max-width: 1024px) 100vw, 42vw"
+          />
+        </div>
+
+        {/* Right Column - Stacked Cards */}
+        <div className="flex flex-col gap-8 lg:col-span-7">
+          {/* Card 1 - Zelf aan de slag */}
+          <div className="flex flex-1 flex-col justify-center rounded-[2.5rem] bg-[#1A2E2E] p-10 lg:p-12">
+            {/* Label */}
+            <div className="mb-6 flex items-center gap-3">
+              <div className="h-5 w-1 rounded-full bg-[#C4D668]" />
+              <span className="text-sm font-medium tracking-wide text-[#C4D668]">
+                Zelf aan de slag
+              </span>
+            </div>
+
+            {/* Heading */}
+            <h2 className="mb-4 text-3xl font-bold leading-tight text-white lg:text-4xl">
+              Ontwerp jouw deur of wand
+              <br />
+              op maat en zie direct de prijs
+            </h2>
+
+            {/* Text */}
+            <p className="mb-8 max-w-lg text-sm leading-relaxed text-gray-300">
+              Wil je zelf bepalen hoe jouw deur of wand eruitziet? Met onze
+              configurator kan dat. Jij kiest, wij maken. Selecteer stap voor
+              stap jouw favoriete uitvoering en bekijk direct het resultaat in
+              beeld en prijs.
+            </p>
+
+            {/* Button */}
+            <div>
+              <Link
+                href="/offerte"
+                className="inline-flex items-center gap-2 rounded-md bg-[#C4D668] px-6 py-3 text-sm font-semibold text-black transition-colors hover:bg-[#b5c75a]"
+              >
+                Klik hier
+                <MousePointerClick className="size-4" />
+              </Link>
+            </div>
+          </div>
+
+          {/* Card 2 - Hulp nodig */}
+          <div className="flex flex-1 flex-col justify-center rounded-[2.5rem] bg-[#1A2E2E] p-10 lg:p-12">
+            {/* Heading */}
+            <h3 className="mb-4 text-2xl font-bold text-white lg:text-3xl">
+              Heb je meer hulp nodig?
+            </h3>
+
+            {/* Text */}
+            <p className="mb-8 max-w-lg text-sm leading-relaxed text-gray-300">
+              We kunnen ons voorstellen dat je graag geholpen wordt rondom het
+              samenstellen van je deur. Hieronder kan je eenvoudig een snelle
+              offerte aanvragen waarna we contact met jou opnemen.
+            </p>
+
+            {/* Button */}
+            <div>
+              <Link
+                href="/offerte"
+                className="inline-flex items-center gap-2 rounded-md border-2 border-white px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-white hover:text-[#1A2E2E]"
+              >
+                <FileText className="size-4" />
+                Snelle offerte aanvragen
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}