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>
89 lines
3.4 KiB
TypeScript
89 lines
3.4 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { MousePointerClick, FileText } from "lucide-react";
|
|
|
|
export function AboutSection() {
|
|
return (
|
|
<section className="bg-[#F5F5F3] py-24">
|
|
<div className="mx-auto grid max-w-7xl grid-cols-1 items-stretch gap-8 px-4 sm:px-6 lg:grid-cols-12 lg:px-8">
|
|
{/* Left Column - Tall Image */}
|
|
<div className="relative min-h-[500px] overflow-hidden rounded-[2.5rem] lg:col-span-5 lg:min-h-[600px]">
|
|
<Image
|
|
src="/images/image-people1.png"
|
|
alt="Het team van Proinn aan het werk"
|
|
fill
|
|
className="object-cover"
|
|
sizes="(max-width: 1024px) 100vw, 42vw"
|
|
/>
|
|
</div>
|
|
|
|
{/* Right Column - Stacked Cards */}
|
|
<div className="flex flex-col gap-8 lg:col-span-7">
|
|
{/* Card 1 - Zelf aan de slag */}
|
|
<div className="flex flex-1 flex-col justify-center rounded-[2.5rem] bg-[#1A2E2E] p-10 lg:p-12">
|
|
{/* Label */}
|
|
<div className="mb-6 flex items-center gap-3">
|
|
<div className="h-5 w-1 rounded-full bg-[#C4D668]" />
|
|
<span className="text-sm font-medium tracking-wide text-[#C4D668]">
|
|
Zelf aan de slag
|
|
</span>
|
|
</div>
|
|
|
|
{/* Heading */}
|
|
<h2 className="mb-4 text-3xl font-bold leading-tight text-white lg:text-4xl">
|
|
Ontwerp jouw deur of wand
|
|
<br />
|
|
op maat en zie direct de prijs
|
|
</h2>
|
|
|
|
{/* Text */}
|
|
<p className="mb-8 max-w-lg text-sm leading-relaxed text-gray-300">
|
|
Wil je zelf bepalen hoe jouw deur of wand eruitziet? Met onze
|
|
configurator kan dat. Jij kiest, wij maken. Selecteer stap voor
|
|
stap jouw favoriete uitvoering en bekijk direct het resultaat in
|
|
beeld en prijs.
|
|
</p>
|
|
|
|
{/* Button */}
|
|
<div>
|
|
<Link
|
|
href="/offerte"
|
|
className="inline-flex items-center gap-2 rounded-md bg-[#C4D668] px-6 py-3 text-sm font-semibold text-black transition-colors hover:bg-[#b5c75a]"
|
|
>
|
|
Klik hier
|
|
<MousePointerClick className="size-4" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Card 2 - Hulp nodig */}
|
|
<div className="flex flex-1 flex-col justify-center rounded-[2.5rem] bg-[#1A2E2E] p-10 lg:p-12">
|
|
{/* Heading */}
|
|
<h3 className="mb-4 text-2xl font-bold text-white lg:text-3xl">
|
|
Heb je meer hulp nodig?
|
|
</h3>
|
|
|
|
{/* Text */}
|
|
<p className="mb-8 max-w-lg text-sm leading-relaxed text-gray-300">
|
|
We kunnen ons voorstellen dat je graag geholpen wordt rondom het
|
|
samenstellen van je deur. Hieronder kan je eenvoudig een snelle
|
|
offerte aanvragen waarna we contact met jou opnemen.
|
|
</p>
|
|
|
|
{/* Button */}
|
|
<div>
|
|
<Link
|
|
href="/offerte"
|
|
className="inline-flex items-center gap-2 rounded-md border-2 border-white px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-white hover:text-[#1A2E2E]"
|
|
>
|
|
<FileText className="size-4" />
|
|
Snelle offerte aanvragen
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|