Complete configurator overhaul with premium design

Major Changes:
- Replaced static preview with dynamic SVG door visualizer
- Integrated Zustand for real-time state management
- Redesigned UI with Dark Green (#1A2E2E) and Pistachio (#C4D668) colors
- Removed all orange branding (brand-orange)
- Premium selection tiles with active/inactive states
- Live door rendering that updates instantly on selection

Features:
- Dynamic SVG draws door based on configuration
- Real-time updates: doorType, gridType, finish, handle
- Background room image with semi-transparent overlay
- Animated "Live Voorbeeld" badge with pulse effect
- Configuration info card showing current selections
- Premium typography with Inter font

Technical:
- Added Zustand state management (lib/store.ts)
- Created DoorVisualizer component with SVG logic
- Updated step-product and step-options with premium tiles
- Color swatches for finish selection
- Check icons for selected states

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

app/offerte/page.tsx

@@ -30,15 +30,15 @@ function StepIndicator() {
             <div
               className={`flex size-8 items-center justify-center rounded-full text-sm font-semibold transition-colors ${
                 i <= currentStep
-                  ? "bg-brand-orange text-white"
+                  ? "bg-[#1A2E2E] text-white"
-                  : "bg-muted text-muted-foreground"
+                  : "bg-gray-200 text-gray-500"
               }`}
             >
               {i + 1}
             </div>
             <span
               className={`hidden text-xs font-medium lg:inline ${
-                i === currentStep ? "text-foreground" : "text-muted-foreground"
+                i === currentStep ? "text-[#1A2E2E]" : "text-gray-500"
               }`}
             >
               {label}
@@ -47,7 +47,7 @@ function StepIndicator() {
           {i < totalSteps - 1 && (
             <div
               className={`h-px w-4 transition-colors lg:w-6 ${
-                i < currentStep ? "bg-brand-orange" : "bg-border"
+                i < currentStep ? "bg-[#1A2E2E]" : "bg-gray-300"
               }`}
             />
           )}
@@ -72,13 +72,17 @@ function WizardContent() {
       {/* Navigation — hidden on step 1 (auto-advances) and summary (has its own button) */}
       {!isFirstStep && !isLastStep && (
         <div className="mt-6 flex justify-between gap-4">
-          <Button variant="outline" onClick={prevStep} className="flex-1 sm:flex-none">
+          <Button
+            variant="outline"
+            onClick={prevStep}
+            className="flex-1 border-[#1A2E2E] text-[#1A2E2E] hover:bg-[#1A2E2E]/5 sm:flex-none"
+          >
             <ChevronLeft className="size-4" />
             Vorige
           </Button>
           <Button
             onClick={nextStep}
-            className="flex-1 bg-brand-orange text-white hover:bg-brand-orange/90 sm:flex-none"
+            className="flex-1 bg-[#C4D668] text-[#1A2E2E] hover:bg-[#b5c75a] sm:flex-none"
           >
             Volgende
             <ChevronRight className="size-4" />
@@ -99,44 +103,35 @@ function WizardContent() {
   );
 }
 
+import { DoorVisualizer } from "@/components/configurator/door-visualizer";
+
 export default function OffertePage() {
   return (
     <FormProvider>
       {/* Mobile Header */}
       <div className="px-4 py-6 lg:hidden">
-        <h1 className="mb-1 text-2xl font-bold tracking-tight">
+        <h1 className="mb-1 text-2xl font-bold tracking-tight text-[#1A2E2E]">
-          Offerte Aanvragen
+          Configureer uw deur
         </h1>
-        <p className="text-sm text-muted-foreground">
+        <p className="text-sm text-gray-600">
-          Configureer uw product in een paar stappen.
+          Ontwerp uw stalen deur in realtime.
         </p>
       </div>
 
       {/* Split Screen Layout */}
       <div className="grid grid-cols-1 gap-8 px-4 py-8 lg:grid-cols-12 lg:px-8 lg:py-12">
-        {/* Left Column: Visual Preview (Desktop Only) */}
+        {/* Left Column: Live Visualizer (Desktop Only) */}
-        <div className="relative hidden overflow-hidden rounded-[2.5rem] bg-gradient-to-br from-slate-100 to-slate-200 lg:col-span-8 lg:block lg:h-[calc(100vh-150px)]">
+        <div className="relative hidden lg:col-span-8 lg:block lg:h-[calc(100vh-150px)]">
-          <div className="sticky top-24 flex h-full items-center justify-center">
+          <div className="sticky top-24 h-full">
-            <div className="relative h-full w-full overflow-hidden rounded-[2.5rem]">
+            <DoorVisualizer />
-              <img
-                src="/images/hero.jpg"
-                alt="Product preview"
-                className="h-full w-full object-cover"
-              />
-              <div className="absolute left-8 top-8">
-                <div className="rounded-full bg-black/60 px-4 py-2 text-sm font-medium text-white backdrop-blur-sm">
-                  Live Voorbeeld
-                </div>
-              </div>
-            </div>
           </div>
         </div>
 
         {/* Right Column: Controls */}
         <div className="lg:col-span-4">
           <div className="rounded-3xl bg-white p-6 shadow-xl lg:p-8">
-            <h2 className="mb-6 text-2xl font-bold text-brand-dark-green">
+            <h2 className="mb-6 text-2xl font-bold text-[#1A2E2E]">
-              Configureer jouw product
+              Configureer uw deur
             </h2>
 
             <StepIndicator />

components/configurator/door-visualizer.tsx

@@ -0,0 +1,201 @@
+"use client";
+
+import { useConfiguratorStore } from "@/lib/store";
+
+export function DoorVisualizer() {
+  const { doorType, gridType, finish, handle } = useConfiguratorStore();
+
+  // Color mapping based on finish
+  const frameColor = {
+    zwart: "#1A1A1A",
+    brons: "#8B6F47",
+    grijs: "#4A5568",
+  }[finish];
+
+  const viewBoxWidth = 400;
+  const viewBoxHeight = 600;
+  const frameThickness = 20;
+  const padding = 40;
+
+  // Door dimensions within viewBox
+  const doorWidth = viewBoxWidth - padding * 2;
+  const doorHeight = viewBoxHeight - padding * 2;
+  const doorX = padding;
+  const doorY = padding;
+
+  return (
+    <div className="relative flex h-full w-full items-center justify-center overflow-hidden rounded-[2.5rem] bg-gradient-to-br from-slate-100 to-slate-200">
+      {/* Background room image with overlay */}
+      <div
+        className="absolute inset-0 bg-cover bg-center opacity-20"
+        style={{ backgroundImage: "url(/images/hero.jpg)" }}
+      />
+      <div className="absolute inset-0 bg-white/40" />
+
+      {/* Live Preview Badge */}
+      <div className="absolute left-8 top-8 z-10">
+        <div className="flex items-center gap-2 rounded-full bg-[#1A2E2E] px-4 py-2 text-sm font-semibold text-white shadow-lg">
+          <div className="size-2 animate-pulse rounded-full bg-[#C4D668]" />
+          Live Voorbeeld
+        </div>
+      </div>
+
+      {/* SVG Door */}
+      <svg
+        viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
+        className="relative z-10 h-[90%] w-auto drop-shadow-2xl"
+      >
+        {/* Outer Frame */}
+        <rect
+          x={doorX}
+          y={doorY}
+          width={doorWidth}
+          height={doorHeight}
+          fill={frameColor}
+          stroke={frameColor}
+          strokeWidth="2"
+          rx="4"
+        />
+
+        {/* Inner panel (lighter) */}
+        <rect
+          x={doorX + frameThickness}
+          y={doorY + frameThickness}
+          width={doorWidth - frameThickness * 2}
+          height={doorHeight - frameThickness * 2}
+          fill={frameColor}
+          opacity="0.7"
+          rx="2"
+        />
+
+        {/* Grid Lines based on gridType */}
+        {gridType === "3-vlak" && (
+          <>
+            <line
+              x1={doorX + frameThickness}
+              y1={doorY + doorHeight / 3}
+              x2={doorX + doorWidth - frameThickness}
+              y2={doorY + doorHeight / 3}
+              stroke={frameColor}
+              strokeWidth="8"
+            />
+            <line
+              x1={doorX + frameThickness}
+              y1={doorY + (doorHeight / 3) * 2}
+              x2={doorX + doorWidth - frameThickness}
+              y2={doorY + (doorHeight / 3) * 2}
+              stroke={frameColor}
+              strokeWidth="8"
+            />
+          </>
+        )}
+
+        {gridType === "4-vlak" && (
+          <>
+            <line
+              x1={doorX + frameThickness}
+              y1={doorY + doorHeight / 4}
+              x2={doorX + doorWidth - frameThickness}
+              y2={doorY + doorHeight / 4}
+              stroke={frameColor}
+              strokeWidth="8"
+            />
+            <line
+              x1={doorX + frameThickness}
+              y1={doorY + doorHeight / 2}
+              x2={doorX + doorWidth - frameThickness}
+              y2={doorY + doorHeight / 2}
+              stroke={frameColor}
+              strokeWidth="8"
+            />
+            <line
+              x1={doorX + frameThickness}
+              y1={doorY + (doorHeight / 4) * 3}
+              x2={doorX + doorWidth - frameThickness}
+              y2={doorY + (doorHeight / 4) * 3}
+              stroke={frameColor}
+              strokeWidth="8"
+            />
+          </>
+        )}
+
+        {/* Handle based on doorType */}
+        {doorType === "taats" && handle === "u-greep" && (
+          <rect
+            x={doorX + doorWidth / 2 - 6}
+            y={doorY + doorHeight / 2 - 80}
+            width="12"
+            height="160"
+            fill="#B8860B"
+            rx="6"
+          />
+        )}
+
+        {doorType === "scharnier" && handle === "klink" && (
+          <>
+            {/* Handle base */}
+            <rect
+              x={doorX + doorWidth - frameThickness - 50}
+              y={doorY + doorHeight / 2 - 8}
+              width="40"
+              height="16"
+              fill="#B8860B"
+              rx="8"
+            />
+            {/* Handle knob */}
+            <circle
+              cx={doorX + doorWidth - frameThickness - 30}
+              cy={doorY + doorHeight / 2}
+              r="6"
+              fill="#8B6F47"
+            />
+          </>
+        )}
+
+        {doorType === "paneel" && (
+          <>
+            {/* Central vertical line for paneel */}
+            <line
+              x1={doorX + doorWidth / 2}
+              y1={doorY + frameThickness}
+              x2={doorX + doorWidth / 2}
+              y2={doorY + doorHeight - frameThickness}
+              stroke={frameColor}
+              strokeWidth="8"
+            />
+          </>
+        )}
+      </svg>
+
+      {/* Configuration Info Card */}
+      <div className="absolute bottom-8 left-8 right-8 z-10">
+        <div className="rounded-2xl bg-white/90 p-4 shadow-lg backdrop-blur-sm">
+          <div className="grid grid-cols-2 gap-3 text-sm">
+            <div>
+              <div className="text-xs font-medium text-gray-500">Type</div>
+              <div className="font-semibold capitalize text-[#1A2E2E]">
+                {doorType}
+              </div>
+            </div>
+            <div>
+              <div className="text-xs font-medium text-gray-500">Verdeling</div>
+              <div className="font-semibold text-[#1A2E2E]">{gridType}</div>
+            </div>
+            <div>
+              <div className="text-xs font-medium text-gray-500">Afwerking</div>
+              <div className="font-semibold capitalize text-[#1A2E2E]">
+                {finish}
+              </div>
+            </div>
+            <div>
+              <div className="text-xs font-medium text-gray-500">Greep</div>
+              <div className="font-semibold capitalize text-[#1A2E2E]">
+                {handle}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/offerte/step-options.tsx

@@ -1,68 +1,142 @@
 "use client";
 
-import { useFormContext } from "@/components/offerte/form-context";
+import { useConfiguratorStore, type Finish, type Handle } from "@/lib/store";
-import { Label } from "@/components/ui/label";
+import { Check } from "lucide-react";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+
-import { glassTypes, finishTypes } from "@/lib/validators";
+const finishOptions: Array<{
-import { Paintbrush, GlassWater } from "lucide-react";
+  value: Finish;
+  label: string;
+  description: string;
+}> = [
+  { value: "zwart", label: "Mat Zwart", description: "Klassiek en tijdloos" },
+  {
+    value: "brons",
+    label: "Brons",
+    description: "Warm en industrieel",
+  },
+  { value: "grijs", label: "Antraciet", description: "Modern en neutraal" },
+];
+
+const handleOptions: Array<{
+  value: Handle;
+  label: string;
+  description: string;
+}> = [
+  {
+    value: "u-greep",
+    label: "U-Greep",
+    description: "Verticale greep voor taatsdeur",
+  },
+  { value: "klink", label: "Klink", description: "Klassieke deurklink" },
+  { value: "geen", label: "Geen greep", description: "Voor vaste panelen" },
+];
 
 export function StepOptions() {
-  const { formData, updateData } = useFormContext();
+  const { finish, handle, setFinish, setHandle } = useConfiguratorStore();
 
   return (
-    <div>
+    <div className="space-y-8">
-      <h2 className="mb-2 text-xl font-semibold">Opties</h2>
+      {/* Finish Selection */}
-      <p className="mb-6 text-sm text-muted-foreground">
+      <div>
-        Kies de afwerking en het glastype voor uw product.
+        <h2 className="mb-2 text-lg font-bold text-[#1A2E2E]">Afwerking</h2>
-      </p>
+        <p className="mb-4 text-sm text-gray-600">
+          Kies de kleur en afwerking van het staal.
+        </p>
 
-      <div className="grid gap-8 sm:grid-cols-2">
+        <div className="grid gap-3">
-        {/* Glass Type */}
+          {finishOptions.map((option) => {
-        <div className="space-y-4">
+            const selected = finish === option.value;
-          <Label className="flex items-center gap-2 text-base font-semibold">
+
-            <GlassWater className="size-4 text-brand-orange" />
+            return (
-            Glas Type
+              <button
-          </Label>
+                key={option.value}
-          <RadioGroup
+                type="button"
-            value={formData.glassType ?? ""}
+                onClick={() => setFinish(option.value)}
-            onValueChange={(val) => updateData({ glassType: val as typeof formData.glassType })}
+                className={`group relative rounded-xl border-2 p-4 text-left transition-all ${
-            className="space-y-2"
+                  selected
-          >
+                    ? "border-[#C4D668] bg-[#1A2E2E] text-white"
-            {glassTypes.map((type) => (
+                    : "border-gray-200 bg-white text-gray-900 hover:border-[#1A2E2E]/30"
-              <Label
+                }`}
-                key={type}
-                htmlFor={`glass-${type}`}
-                className="flex cursor-pointer items-center gap-3 rounded-lg border border-border p-4 transition-colors has-[[data-state=checked]]:border-brand-orange has-[[data-state=checked]]:bg-brand-orange/5"
               >
-                <RadioGroupItem value={type} id={`glass-${type}`} />
+                <div className="flex items-start justify-between">
-                <span className="text-sm font-medium">{type}</span>
+                  <div className="flex flex-1 items-center gap-4">
-              </Label>
+                    {/* Color swatch */}
-            ))}
+                    <div
-          </RadioGroup>
+                      className="size-10 rounded-lg border-2 border-white shadow-md"
+                      style={{
+                        backgroundColor:
+                          option.value === "zwart"
+                            ? "#1A1A1A"
+                            : option.value === "brons"
+                              ? "#8B6F47"
+                              : "#4A5568",
+                      }}
+                    />
+                    <div className="flex-1">
+                      <h3 className="font-bold">{option.label}</h3>
+                      <p
+                        className={`mt-1 text-sm ${
+                          selected ? "text-white/80" : "text-gray-500"
+                        }`}
+                      >
+                        {option.description}
+                      </p>
+                    </div>
+                  </div>
+                  {selected && (
+                    <div className="flex size-6 items-center justify-center rounded-full bg-[#C4D668]">
+                      <Check className="size-4 text-[#1A2E2E]" />
+                    </div>
+                  )}
+                </div>
+              </button>
+            );
+          })}
         </div>
+      </div>
 
-        {/* Finish */}
+      {/* Handle Selection */}
-        <div className="space-y-4">
+      <div>
-          <Label className="flex items-center gap-2 text-base font-semibold">
+        <h2 className="mb-2 text-lg font-bold text-[#1A2E2E]">Greep</h2>
-            <Paintbrush className="size-4 text-brand-orange" />
+        <p className="mb-4 text-sm text-gray-600">
-            Afwerking
+          Selecteer het type handgreep.
-          </Label>
+        </p>
-          <RadioGroup
+
-            value={formData.finish ?? ""}
+        <div className="grid gap-3">
-            onValueChange={(val) => updateData({ finish: val as typeof formData.finish })}
+          {handleOptions.map((option) => {
-            className="space-y-2"
+            const selected = handle === option.value;
-          >
+
-            {finishTypes.map((type) => (
+            return (
-              <Label
+              <button
-                key={type}
+                key={option.value}
-                htmlFor={`finish-${type}`}
+                type="button"
-                className="flex cursor-pointer items-center gap-3 rounded-lg border border-border p-4 transition-colors has-[[data-state=checked]]:border-brand-orange has-[[data-state=checked]]:bg-brand-orange/5"
+                onClick={() => setHandle(option.value)}
+                className={`group relative rounded-xl border-2 p-4 text-left transition-all ${
+                  selected
+                    ? "border-[#C4D668] bg-[#1A2E2E] text-white"
+                    : "border-gray-200 bg-white text-gray-900 hover:border-[#1A2E2E]/30"
+                }`}
               >
-                <RadioGroupItem value={type} id={`finish-${type}`} />
+                <div className="flex items-start justify-between">
-                <span className="text-sm font-medium">{type}</span>
+                  <div className="flex-1">
-              </Label>
+                    <h3 className="font-bold">{option.label}</h3>
-            ))}
+                    <p
-          </RadioGroup>
+                      className={`mt-1 text-sm ${
+                        selected ? "text-white/80" : "text-gray-500"
+                      }`}
+                    >
+                      {option.description}
+                    </p>
+                  </div>
+                  {selected && (
+                    <div className="flex size-6 items-center justify-center rounded-full bg-[#C4D668]">
+                      <Check className="size-4 text-[#1A2E2E]" />
+                    </div>
+                  )}
+                </div>
+              </button>
+            );
+          })}
         </div>
       </div>
     </div>

components/offerte/step-product.tsx

@@ -1,79 +1,157 @@
 "use client";
 
-import Image from "next/image";
+import { useConfiguratorStore, type DoorType } from "@/lib/store";
 import { useFormContext } from "@/components/offerte/form-context";
-import { productTypes } from "@/lib/validators";
+import { Check } from "lucide-react";
-import { cn } from "@/lib/utils";
 
-const productImages: Record<string, string> = {
+const doorTypes: Array<{
-  Taatsdeur: "/images/taats.jpg",
+  value: DoorType;
-  Scharnierdeur: "/images/scharnier.jpg",
+  label: string;
-  "Vast Paneel": "/images/paneel.jpg",
+  description: string;
-};
+}> = [
+  {
+    value: "taats",
+    label: "Taatsdeur",
+    description: "Pivoterende deur met verticaal draaimechanisme",
+  },
+  {
+    value: "scharnier",
+    label: "Scharnierdeur",
+    description: "Klassieke deur met zijscharnieren",
+  },
+  {
+    value: "paneel",
+    label: "Vast Paneel",
+    description: "Vast glaspaneel zonder bewegend mechanisme",
+  },
+];
 
-const productDescriptions: Record<string, string> = {
+const gridTypes: Array<{
-  Taatsdeur: "Pivoterende deur",
+  value: "3-vlak" | "4-vlak" | "geen";
-  Scharnierdeur: "Klassiek scharnier",
+  label: string;
-  "Vast Paneel": "Vast glaspaneel",
+  description: string;
-};
+}> = [
+  { value: "geen", label: "Geen verdeling", description: "Volledig vlak" },
+  { value: "3-vlak", label: "3-vlaks", description: "2 horizontale balken" },
+  { value: "4-vlak", label: "4-vlaks", description: "3 horizontale balken" },
+];
 
 export function StepProduct() {
-  const { formData, updateData, nextStep } = useFormContext();
+  const { nextStep } = useFormContext();
+  const { doorType, gridType, setDoorType, setGridType } =
+    useConfiguratorStore();
 
-  function select(type: (typeof productTypes)[number]) {
+  function handleDoorTypeSelect(type: DoorType) {
-    updateData({ productType: type });
+    setDoorType(type);
+  }
+
+  function handleGridTypeSelect(type: "3-vlak" | "4-vlak" | "geen") {
+    setGridType(type);
+  }
+
+  function handleContinue() {
     nextStep();
   }
 
   return (
-    <div>
+    <div className="space-y-8">
-      <h2 className="mb-2 text-xl font-semibold">Kies uw product</h2>
+      {/* Door Type Selection */}
-      <p className="mb-6 text-sm text-muted-foreground">
+      <div>
-        Selecteer het type stalen element dat u wilt configureren.
+        <h2 className="mb-2 text-lg font-bold text-[#1A2E2E]">Kies uw deurtype</h2>
-      </p>
+        <p className="mb-4 text-sm text-gray-600">
+          Selecteer het type stalen deur dat u wilt configureren.
+        </p>
 
-      <div className="grid gap-4 sm:grid-cols-3">
+        <div className="grid gap-3">
-        {productTypes.map((type) => {
+          {doorTypes.map((type) => {
-          const selected = formData.productType === type;
+            const selected = doorType === type.value;
 
-          return (
+            return (
-            <button
+              <button
-              key={type}
+                key={type.value}
-              type="button"
+                type="button"
-              onClick={() => select(type)}
+                onClick={() => handleDoorTypeSelect(type.value)}
-              className={cn(
+                className={`group relative rounded-xl border-2 p-4 text-left transition-all ${
-                "group relative aspect-[3/4] overflow-hidden text-left transition-all",
+                  selected
-                selected
+                    ? "border-[#C4D668] bg-[#1A2E2E] text-white"
-                  ? "ring-4 ring-brand-orange ring-offset-2"
+                    : "border-gray-200 bg-white text-gray-900 hover:border-[#1A2E2E]/30"
-                  : "ring-0 hover:ring-2 hover:ring-brand-orange/40 hover:ring-offset-1"
+                }`}
-              )}
+              >
-            >
+                <div className="flex items-start justify-between">
-              {/* Image fills entire card */}
+                  <div className="flex-1">
-              <Image
+                    <h3 className="font-bold">{type.label}</h3>
-                src={productImages[type]}
+                    <p
-                alt={type}
+                      className={`mt-1 text-sm ${
-                fill
+                        selected ? "text-white/80" : "text-gray-500"
-                className="object-cover transition-transform duration-500 group-hover:scale-105"
+                      }`}
-              />
+                    >
-
+                      {type.description}
-              {/* Bottom gradient with label */}
+                    </p>
-              <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent px-4 pb-5 pt-16">
+                  </div>
-                <p className="text-xs font-medium uppercase tracking-wider text-white/60">
+                  {selected && (
-                  {productDescriptions[type]}
+                    <div className="flex size-6 items-center justify-center rounded-full bg-[#C4D668]">
-                </p>
+                      <Check className="size-4 text-[#1A2E2E]" />
-                <h3 className="mt-1 text-lg font-semibold text-white">
+                    </div>
-                  {type}
+                  )}
-                </h3>
+                </div>
-              </div>
+              </button>
-
+            );
-              {/* Selected state overlay */}
+          })}
-              {selected && (
+        </div>
-                <div className="absolute inset-0 border-4 border-brand-orange" />
-              )}
-            </button>
-          );
-        })}
       </div>
+
+      {/* Grid Type Selection */}
+      <div>
+        <h2 className="mb-2 text-lg font-bold text-[#1A2E2E]">Verdeling</h2>
+        <p className="mb-4 text-sm text-gray-600">
+          Kies het aantal horizontale vlakken.
+        </p>
+
+        <div className="grid gap-3">
+          {gridTypes.map((type) => {
+            const selected = gridType === type.value;
+
+            return (
+              <button
+                key={type.value}
+                type="button"
+                onClick={() => handleGridTypeSelect(type.value)}
+                className={`group relative rounded-xl border-2 p-4 text-left transition-all ${
+                  selected
+                    ? "border-[#C4D668] bg-[#1A2E2E] text-white"
+                    : "border-gray-200 bg-white text-gray-900 hover:border-[#1A2E2E]/30"
+                }`}
+              >
+                <div className="flex items-start justify-between">
+                  <div className="flex-1">
+                    <h3 className="font-bold">{type.label}</h3>
+                    <p
+                      className={`mt-1 text-sm ${
+                        selected ? "text-white/80" : "text-gray-500"
+                      }`}
+                    >
+                      {type.description}
+                    </p>
+                  </div>
+                  {selected && (
+                    <div className="flex size-6 items-center justify-center rounded-full bg-[#C4D668]">
+                      <Check className="size-4 text-[#1A2E2E]" />
+                    </div>
+                  )}
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Continue Button */}
+      <button
+        onClick={handleContinue}
+        className="w-full rounded-xl bg-[#C4D668] py-3 font-bold text-[#1A2E2E] transition-all hover:bg-[#b5c75a]"
+      >
+        Volgende stap
+      </button>
     </div>
   );
 }

lib/store.ts

@@ -0,0 +1,36 @@
+import { create } from 'zustand';
+
+export type DoorType = 'taats' | 'scharnier' | 'paneel';
+export type GridType = '3-vlak' | '4-vlak' | 'geen';
+export type Finish = 'zwart' | 'brons' | 'grijs';
+export type Handle = 'u-greep' | 'klink' | 'geen';
+
+interface ConfiguratorState {
+  doorType: DoorType;
+  gridType: GridType;
+  finish: Finish;
+  handle: Handle;
+  width: number;
+  height: number;
+
+  setDoorType: (type: DoorType) => void;
+  setGridType: (type: GridType) => void;
+  setFinish: (finish: Finish) => void;
+  setHandle: (handle: Handle) => void;
+  setDimensions: (width: number, height: number) => void;
+}
+
+export const useConfiguratorStore = create<ConfiguratorState>((set) => ({
+  doorType: 'taats',
+  gridType: '3-vlak',
+  finish: 'zwart',
+  handle: 'u-greep',
+  width: 1000,
+  height: 2400,
+
+  setDoorType: (doorType) => set({ doorType }),
+  setGridType: (gridType) => set({ gridType }),
+  setFinish: (finish) => set({ finish }),
+  setHandle: (handle) => set({ handle }),
+  setDimensions: (width, height) => set({ width, height }),
+}));

package-lock.json

@@ -18,7 +18,8 @@
         "react-dom": "19.2.3",
         "react-hook-form": "^7.71.1",
         "tailwind-merge": "^3.4.0",
-        "zod": "^4.3.6"
+        "zod": "^4.3.6",
+        "zustand": "^5.0.11"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -12243,6 +12244,35 @@
       "peerDependencies": {
         "zod": "^3.25.0 || ^4.0.0"
       }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.11",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.11.tgz",
+      "integrity": "sha512-fdZY+dk7zn/vbWNCYmzZULHRrss0jx5pPFiOuMZ/5HJN6Yv3u+1Wswy/4MpZEkEGhtNH+pwxZB8OKgUBPzYAGg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
     }
   }
 }

package.json

@@ -19,7 +19,8 @@
     "react-dom": "19.2.3",
     "react-hook-form": "^7.71.1",
     "tailwind-merge": "^3.4.0",
-    "zod": "^4.3.6"
+    "zod": "^4.3.6",
+    "zustand": "^5.0.11"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",