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>
64 lines
2.4 KiB
TypeScript
64 lines
2.4 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { ArrowRight } from "lucide-react";
|
|
|
|
export function CraftsmanshipSection() {
|
|
return (
|
|
<section className="relative bg-white">
|
|
<div className="mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2">
|
|
{/* Left Column - Image */}
|
|
<div className="relative z-10 min-h-[450px] overflow-hidden rounded-r-[2.5rem] lg:min-h-[560px]">
|
|
<Image
|
|
src="/images/proinn-spuiten.png"
|
|
alt="Vakmanschap bij Proinn - spuitwerk in de fabriek"
|
|
fill
|
|
className="object-cover"
|
|
sizes="(max-width: 1024px) 100vw, 50vw"
|
|
/>
|
|
</div>
|
|
|
|
{/* Right Column - Dark Content */}
|
|
<div className="flex flex-col justify-center bg-[#1A2E2E] px-8 py-16 lg:px-16 lg:py-20">
|
|
{/* 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]">
|
|
Waarom Proinn
|
|
</span>
|
|
</div>
|
|
|
|
{/* Heading */}
|
|
<h2 className="mb-5 text-3xl font-bold leading-tight text-white lg:text-4xl">
|
|
Vakmanschap op
|
|
<br />
|
|
ieder niveau
|
|
</h2>
|
|
|
|
{/* Text */}
|
|
<p className="mb-10 max-w-md text-sm leading-relaxed text-gray-300">
|
|
Bij Proinn draait alles om kwaliteit en vakmanschap. Van het eerste
|
|
ontwerp tot de laatste afwerking — elk detail wordt met zorg
|
|
behandeld in onze eigen fabriek. Wij combineren ambachtelijke
|
|
technieken met moderne technologie om stalen deuren en wanden te
|
|
maken die perfect passen bij jouw ruimte.
|
|
</p>
|
|
|
|
{/* Input Group */}
|
|
<div className="flex max-w-md items-center gap-3">
|
|
<div className="flex-1 rounded-md bg-[#263e3e] px-4 py-3 text-sm text-gray-400">
|
|
Meer weten?
|
|
</div>
|
|
<Link
|
|
href="/over-ons"
|
|
className="inline-flex items-center gap-2 rounded-md bg-[#C4D668] px-5 py-3 text-sm font-semibold text-black transition-colors hover:bg-[#b5c75a]"
|
|
>
|
|
Over ons
|
|
<ArrowRight className="size-4" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|