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/offerte/step-contact.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { useFormContext } from "@/components/offerte/form-context";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { User, Mail, Phone, MessageSquare } from "lucide-react";
+
+export function StepContact() {
+  const { formData, updateData } = useFormContext();
+
+  return (
+    <div>
+      <h2 className="mb-2 text-xl font-semibold">Contactgegevens</h2>
+      <p className="mb-6 text-sm text-muted-foreground">
+        Vul uw gegevens in zodat wij u een offerte kunnen sturen.
+      </p>
+
+      <div className="grid gap-5">
+        <div className="space-y-2">
+          <Label htmlFor="name" className="flex items-center gap-2">
+            <User className="size-4 text-brand-orange" />
+            Naam
+          </Label>
+          <Input
+            id="name"
+            placeholder="Uw volledige naam"
+            value={formData.name ?? ""}
+            onChange={(e) => updateData({ name: e.target.value })}
+            className="h-11 focus-visible:ring-brand-orange"
+          />
+        </div>
+
+        <div className="grid gap-5 sm:grid-cols-2">
+          <div className="space-y-2">
+            <Label htmlFor="email" className="flex items-center gap-2">
+              <Mail className="size-4 text-brand-orange" />
+              E-mail
+            </Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="naam@bedrijf.nl"
+              value={formData.email ?? ""}
+              onChange={(e) => updateData({ email: e.target.value })}
+              className="h-11 focus-visible:ring-brand-orange"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="phone" className="flex items-center gap-2">
+              <Phone className="size-4 text-brand-orange" />
+              Telefoon
+            </Label>
+            <Input
+              id="phone"
+              type="tel"
+              placeholder="06 1234 5678"
+              value={formData.phone ?? ""}
+              onChange={(e) => updateData({ phone: e.target.value })}
+              className="h-11 focus-visible:ring-brand-orange"
+            />
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="note" className="flex items-center gap-2">
+            <MessageSquare className="size-4 text-brand-orange" />
+            Opmerking
+            <span className="text-xs font-normal text-muted-foreground">(optioneel)</span>
+          </Label>
+          <textarea
+            id="note"
+            rows={3}
+            placeholder="Bijv. specifieke wensen, RAL-kleur, plaatsing..."
+            value={formData.note ?? ""}
+            onChange={(e) => updateData({ note: e.target.value })}
+            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}