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

@@ -0,0 +1,84 @@
+"use client";
+
+import { useFormContext } from "@/components/offerte/form-context";
+import { Button } from "@/components/ui/button";
+import { Send, Check } from "lucide-react";
+
+const fieldLabels: Record<string, string> = {
+  productType: "Product",
+  height: "Hoogte",
+  width: "Breedte",
+  glassType: "Glas Type",
+  finish: "Afwerking",
+  name: "Naam",
+  email: "E-mail",
+  phone: "Telefoon",
+  note: "Opmerking",
+};
+
+const fieldOrder = [
+  "productType",
+  "height",
+  "width",
+  "glassType",
+  "finish",
+  "name",
+  "email",
+  "phone",
+  "note",
+];
+
+function formatValue(key: string, value: unknown): string {
+  if (value === undefined || value === null || value === "") return "—";
+  if (key === "height" || key === "width") return `${value} mm`;
+  return String(value);
+}
+
+export function StepSummary() {
+  const { formData } = useFormContext();
+
+  return (
+    <div>
+      <h2 className="mb-2 text-xl font-semibold">Overzicht</h2>
+      <p className="mb-6 text-sm text-muted-foreground">
+        Controleer uw configuratie en verstuur de aanvraag.
+      </p>
+
+      <div className="overflow-hidden rounded-lg border border-border">
+        <table className="w-full text-sm">
+          <tbody>
+            {fieldOrder.map((key, i) => {
+              const value = formData[key as keyof typeof formData];
+              return (
+                <tr
+                  key={key}
+                  className={i % 2 === 0 ? "bg-muted/30" : "bg-card"}
+                >
+                  <td className="w-1/3 px-4 py-3 font-medium text-muted-foreground">
+                    {fieldLabels[key]}
+                  </td>
+                  <td className="px-4 py-3 font-medium">
+                    <span className="flex items-center gap-2">
+                      {value !== undefined && value !== "" && (
+                        <Check className="size-3.5 text-green-600" />
+                      )}
+                      {formatValue(key, value)}
+                    </span>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+
+      <Button
+        size="lg"
+        className="mt-8 w-full bg-brand-orange text-white hover:bg-brand-orange/90"
+      >
+        <Send className="size-4" />
+        Verzend Aanvraag
+      </Button>
+    </div>
+  );
+}