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>
This commit is contained in:
Ubuntu
@@ -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-muted text-muted-foreground"
|
||||
? "bg-[#1A2E2E] text-white"
|
||||
: "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">
|
||||
Offerte Aanvragen
|
||||
<h1 className="mb-1 text-2xl font-bold tracking-tight text-[#1A2E2E]">
|
||||
Configureer uw deur
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Configureer uw product in een paar stappen.
|
||||
<p className="text-sm text-gray-600">
|
||||
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) */}
|
||||
<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="sticky top-24 flex h-full items-center justify-center">
|
||||
<div className="relative h-full w-full overflow-hidden rounded-[2.5rem]">
|
||||
<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>
|
||||
{/* Left Column: Live Visualizer (Desktop Only) */}
|
||||
<div className="relative hidden lg:col-span-8 lg:block lg:h-[calc(100vh-150px)]">
|
||||
<div className="sticky top-24 h-full">
|
||||
<DoorVisualizer />
|
||||
</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">
|
||||
Configureer jouw product
|
||||
<h2 className="mb-6 text-2xl font-bold text-[#1A2E2E]">
|
||||
Configureer uw deur
|
||||
</h2>
|
||||
|
||||
<StepIndicator />
|
||||
|
||||
201
components/configurator/door-visualizer.tsx
Normal file
201
components/configurator/door-visualizer.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -1,68 +1,142 @@
|
||||
"use client";
|
||||
|
||||
import { useFormContext } from "@/components/offerte/form-context";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
import { glassTypes, finishTypes } from "@/lib/validators";
|
||||
import { Paintbrush, GlassWater } from "lucide-react";
|
||||
import { useConfiguratorStore, type Finish, type Handle } from "@/lib/store";
|
||||
import { Check } from "lucide-react";
|
||||
|
||||
const finishOptions: Array<{
|
||||
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>
|
||||
<h2 className="mb-2 text-xl font-semibold">Opties</h2>
|
||||
<p className="mb-6 text-sm text-muted-foreground">
|
||||
Kies de afwerking en het glastype voor uw product.
|
||||
</p>
|
||||
<div className="space-y-8">
|
||||
{/* Finish Selection */}
|
||||
<div>
|
||||
<h2 className="mb-2 text-lg font-bold text-[#1A2E2E]">Afwerking</h2>
|
||||
<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">
|
||||
{/* Glass Type */}
|
||||
<div className="space-y-4">
|
||||
<Label className="flex items-center gap-2 text-base font-semibold">
|
||||
<GlassWater className="size-4 text-brand-orange" />
|
||||
Glas Type
|
||||
</Label>
|
||||
<RadioGroup
|
||||
value={formData.glassType ?? ""}
|
||||
onValueChange={(val) => updateData({ glassType: val as typeof formData.glassType })}
|
||||
className="space-y-2"
|
||||
>
|
||||
{glassTypes.map((type) => (
|
||||
<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"
|
||||
<div className="grid gap-3">
|
||||
{finishOptions.map((option) => {
|
||||
const selected = finish === option.value;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
onClick={() => setFinish(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={`glass-${type}`} />
|
||||
<span className="text-sm font-medium">{type}</span>
|
||||
</Label>
|
||||
))}
|
||||
</RadioGroup>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex flex-1 items-center gap-4">
|
||||
{/* Color swatch */}
|
||||
<div
|
||||
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 */}
|
||||
<div className="space-y-4">
|
||||
<Label className="flex items-center gap-2 text-base font-semibold">
|
||||
<Paintbrush className="size-4 text-brand-orange" />
|
||||
Afwerking
|
||||
</Label>
|
||||
<RadioGroup
|
||||
value={formData.finish ?? ""}
|
||||
onValueChange={(val) => updateData({ finish: val as typeof formData.finish })}
|
||||
className="space-y-2"
|
||||
>
|
||||
{finishTypes.map((type) => (
|
||||
<Label
|
||||
key={type}
|
||||
htmlFor={`finish-${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"
|
||||
{/* Handle Selection */}
|
||||
<div>
|
||||
<h2 className="mb-2 text-lg font-bold text-[#1A2E2E]">Greep</h2>
|
||||
<p className="mb-4 text-sm text-gray-600">
|
||||
Selecteer het type handgreep.
|
||||
</p>
|
||||
|
||||
<div className="grid gap-3">
|
||||
{handleOptions.map((option) => {
|
||||
const selected = handle === option.value;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
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}`} />
|
||||
<span className="text-sm font-medium">{type}</span>
|
||||
</Label>
|
||||
))}
|
||||
</RadioGroup>
|
||||
<div className="flex items-start justify-between">
|
||||
<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>
|
||||
{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>
|
||||
|
||||
@@ -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 { cn } from "@/lib/utils";
|
||||
import { Check } from "lucide-react";
|
||||
|
||||
const productImages: Record<string, string> = {
|
||||
Taatsdeur: "/images/taats.jpg",
|
||||
Scharnierdeur: "/images/scharnier.jpg",
|
||||
"Vast Paneel": "/images/paneel.jpg",
|
||||
};
|
||||
const doorTypes: Array<{
|
||||
value: DoorType;
|
||||
label: string;
|
||||
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> = {
|
||||
Taatsdeur: "Pivoterende deur",
|
||||
Scharnierdeur: "Klassiek scharnier",
|
||||
"Vast Paneel": "Vast glaspaneel",
|
||||
};
|
||||
const gridTypes: Array<{
|
||||
value: "3-vlak" | "4-vlak" | "geen";
|
||||
label: string;
|
||||
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]) {
|
||||
updateData({ productType: type });
|
||||
function handleDoorTypeSelect(type: DoorType) {
|
||||
setDoorType(type);
|
||||
}
|
||||
|
||||
function handleGridTypeSelect(type: "3-vlak" | "4-vlak" | "geen") {
|
||||
setGridType(type);
|
||||
}
|
||||
|
||||
function handleContinue() {
|
||||
nextStep();
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2 className="mb-2 text-xl font-semibold">Kies uw product</h2>
|
||||
<p className="mb-6 text-sm text-muted-foreground">
|
||||
Selecteer het type stalen element dat u wilt configureren.
|
||||
</p>
|
||||
<div className="space-y-8">
|
||||
{/* Door Type Selection */}
|
||||
<div>
|
||||
<h2 className="mb-2 text-lg font-bold text-[#1A2E2E]">Kies uw deurtype</h2>
|
||||
<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">
|
||||
{productTypes.map((type) => {
|
||||
const selected = formData.productType === type;
|
||||
<div className="grid gap-3">
|
||||
{doorTypes.map((type) => {
|
||||
const selected = doorType === type.value;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={type}
|
||||
type="button"
|
||||
onClick={() => select(type)}
|
||||
className={cn(
|
||||
"group relative aspect-[3/4] overflow-hidden text-left transition-all",
|
||||
selected
|
||||
? "ring-4 ring-brand-orange ring-offset-2"
|
||||
: "ring-0 hover:ring-2 hover:ring-brand-orange/40 hover:ring-offset-1"
|
||||
)}
|
||||
>
|
||||
{/* Image fills entire card */}
|
||||
<Image
|
||||
src={productImages[type]}
|
||||
alt={type}
|
||||
fill
|
||||
className="object-cover transition-transform duration-500 group-hover:scale-105"
|
||||
/>
|
||||
|
||||
{/* Bottom gradient with label */}
|
||||
<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">
|
||||
<p className="text-xs font-medium uppercase tracking-wider text-white/60">
|
||||
{productDescriptions[type]}
|
||||
</p>
|
||||
<h3 className="mt-1 text-lg font-semibold text-white">
|
||||
{type}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Selected state overlay */}
|
||||
{selected && (
|
||||
<div className="absolute inset-0 border-4 border-brand-orange" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
return (
|
||||
<button
|
||||
key={type.value}
|
||||
type="button"
|
||||
onClick={() => handleDoorTypeSelect(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>
|
||||
|
||||
{/* 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>
|
||||
);
|
||||
}
|
||||
|
||||
36
lib/store.ts
Normal file
36
lib/store.ts
Normal file
@@ -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 }),
|
||||
}));
|
||||
32
package-lock.json
generated
32
package-lock.json
generated
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user