9cf5cea3ba
- 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>
84 lines
3.0 KiB
TypeScript
84 lines
3.0 KiB
TypeScript
"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>
|
|
);
|
|
}
|