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-teaser.tsx

@@ -0,0 +1,52 @@
+import Link from "next/link";
+import Image from "next/image";
+import { Button } from "@/components/ui/button";
+import { ArrowRight } from "lucide-react";
+
+export function AboutTeaser() {
+  return (
+    <section className="border-t border-border bg-muted/40 py-24">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="grid items-center gap-12 lg:grid-cols-2">
+          {/* Text */}
+          <div>
+            <p className="mb-2 text-sm font-semibold uppercase tracking-widest text-brand-blue">
+              Over Proinn
+            </p>
+            <h2 className="mb-6 text-3xl font-bold tracking-tight sm:text-4xl">
+              Vakmanschap sinds de eerste las
+            </h2>
+            <p className="mb-4 leading-relaxed text-muted-foreground">
+              Bij Proinn draait alles om staal. Onze werkplaats combineert
+              traditioneel vakmanschap met moderne technieken om producten te
+              leveren die niet alleen functioneel zijn, maar ook esthetisch
+              verantwoord.
+            </p>
+            <p className="mb-8 leading-relaxed text-muted-foreground">
+              Van industriële stalen deuren tot op maat gemaakte kozijnen — wij
+              denken mee, ontwerpen en produceren alles in eigen huis.
+            </p>
+            <Button asChild variant="outline" size="lg">
+              <Link href="/contact">
+                Neem Contact Op
+                <ArrowRight className="size-4" />
+              </Link>
+            </Button>
+          </div>
+
+          {/* Image */}
+          <div className="relative aspect-[4/3] overflow-hidden rounded-lg">
+            <Image
+              src="/images/about.jpg"
+              alt="Proinn werkplaats — stalen deuren productie"
+              fill
+              className="object-cover"
+            />
+            {/* Accent corner */}
+            <div className="absolute bottom-0 left-0 h-1.5 w-24 bg-brand-orange" />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}