3d788740cb
Includes room interior with floor, walls, glass you can see through, and all uncommitted production changes that were running live. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
247 lines
9.0 KiB
TypeScript
247 lines
9.0 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import type { Metadata } from "next";
|
|
import {
|
|
ArrowRight,
|
|
DoorOpen,
|
|
Home,
|
|
Grid2x2,
|
|
Ruler,
|
|
Palette,
|
|
Shield,
|
|
} from "lucide-react";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Producten | PROINN Stalen Deuren",
|
|
description:
|
|
"Bekijk ons assortiment stalen deuren: binnendeuren, buitendeuren en kantoorwanden. Alles op maat, handgemaakt in Roosendaal.",
|
|
};
|
|
|
|
const products = [
|
|
{
|
|
id: "binnendeuren",
|
|
icon: DoorOpen,
|
|
title: "Stalen binnendeuren",
|
|
description:
|
|
"Onze stalen binnendeuren combineren een industrieel karakter met een strakke, moderne uitstraling. Verkrijgbaar als taatsdeur, scharnierdeur of schuifdeur, in iedere gewenste afmeting en glasverdeling.",
|
|
features: [
|
|
"Taats-, scharnier- of schuifdeur",
|
|
"Enkele of dubbele uitvoering",
|
|
"Diverse glasverdelingen (2 t/m 8 vlakken)",
|
|
"Inclusief kozijn en beglazingskit",
|
|
],
|
|
image: "/images/taats.jpg",
|
|
},
|
|
{
|
|
id: "buitendeuren",
|
|
icon: Home,
|
|
title: "Stalen buitendeuren",
|
|
description:
|
|
"Stalen buitendeuren van Proinn zijn ontworpen om jarenlang mee te gaan. Met thermisch onderbroken profielen en veiligheidsbeglazingen vormen zij een duurzame en stijlvolle entree voor uw woning of bedrijfspand.",
|
|
features: [
|
|
"Thermisch onderbroken profielen",
|
|
"HR++ of triple beglazing",
|
|
"Inbraakwerend (WK2 mogelijk)",
|
|
"Poedercoating in RAL-kleur naar keuze",
|
|
],
|
|
image: "/images/scharnier.jpg",
|
|
},
|
|
{
|
|
id: "kantoorwanden",
|
|
icon: Grid2x2,
|
|
title: "Stalen kantoorwanden",
|
|
description:
|
|
"Creeer een open en lichte werkomgeving met onze stalen kantoorwanden. De slanke staalprofielen laten maximaal licht door en zorgen tegelijkertijd voor een visuele scheiding tussen werkplekken.",
|
|
features: [
|
|
"Vaste of opendraaiende panelen",
|
|
"Akoestisch isolerend glas beschikbaar",
|
|
"Diverse afmetingen en indelingen",
|
|
"Passend in bestaande kantoorruimtes",
|
|
],
|
|
image: "/images/paneel.jpg",
|
|
},
|
|
];
|
|
|
|
const uspItems = [
|
|
{
|
|
icon: Ruler,
|
|
title: "100% maatwerk",
|
|
description: "Elke deur wordt op maat gemaakt voor een perfecte pasvorm.",
|
|
},
|
|
{
|
|
icon: Palette,
|
|
title: "Kleur naar keuze",
|
|
description:
|
|
"Standaard kleuren of het volledige RAL-palet. U kiest, wij coaten.",
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: "Duurzame kwaliteit",
|
|
description:
|
|
"Poedercoating en hoogwaardig staal voor jarenlang resultaat.",
|
|
},
|
|
];
|
|
|
|
export default function ProductenPage() {
|
|
return (
|
|
<>
|
|
{/* Hero */}
|
|
<section className="bg-[#1A2E2E] pt-32 pb-20">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-3xl">
|
|
<div className="mb-4 flex items-center gap-2">
|
|
<div className="h-4 w-1 rounded-full bg-[#C4D668]" />
|
|
<span className="text-xs font-medium tracking-widest uppercase text-[#C4D668]">
|
|
Ons assortiment
|
|
</span>
|
|
</div>
|
|
<h1 className="text-4xl font-light leading-tight text-white sm:text-5xl">
|
|
Stalen deuren &{" "}
|
|
<span className="font-semibold">wanden</span>
|
|
</h1>
|
|
<p className="mt-5 max-w-xl text-base leading-relaxed text-gray-400">
|
|
Van stijlvolle binnendeuren tot robuuste buitendeuren en
|
|
functionele kantoorwanden. Alles volledig op maat, handgemaakt
|
|
in onze werkplaats in Roosendaal.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* USP Bar */}
|
|
<section className="border-b border-gray-200 bg-white">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 divide-y divide-gray-200 sm:grid-cols-3 sm:divide-x sm:divide-y-0">
|
|
{uspItems.map((item) => {
|
|
const Icon = item.icon;
|
|
return (
|
|
<div
|
|
key={item.title}
|
|
className="flex items-center gap-4 px-6 py-8"
|
|
>
|
|
<div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-[#F5F5F3]">
|
|
<Icon className="size-5 text-[#1A2E2E]" strokeWidth={1.5} />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-semibold text-gray-900">
|
|
{item.title}
|
|
</p>
|
|
<p className="text-xs text-gray-500">{item.description}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Product Sections */}
|
|
{products.map((product, index) => {
|
|
const Icon = product.icon;
|
|
const isReversed = index % 2 !== 0;
|
|
|
|
return (
|
|
<section
|
|
key={product.id}
|
|
id={product.id}
|
|
className={index % 2 === 0 ? "bg-[#F5F5F3] py-20" : "bg-white py-20"}
|
|
>
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div
|
|
className={`grid gap-12 lg:grid-cols-2 lg:gap-16 ${
|
|
isReversed ? "lg:[direction:rtl] lg:[&>*]:[direction:ltr]" : ""
|
|
}`}
|
|
>
|
|
{/* Image */}
|
|
<div className="relative min-h-[350px] overflow-hidden rounded-2xl lg:min-h-[450px]">
|
|
<Image
|
|
src={product.image}
|
|
alt={product.title}
|
|
fill
|
|
className="object-cover"
|
|
sizes="(max-width: 1024px) 100vw, 50vw"
|
|
/>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex flex-col justify-center">
|
|
<div className="mb-4 flex items-center gap-3">
|
|
<div className="flex size-10 items-center justify-center rounded-lg bg-[#1A2E2E]">
|
|
<Icon className="size-5 text-[#C4D668]" strokeWidth={1.5} />
|
|
</div>
|
|
<h2 className="text-3xl font-light text-gray-900 lg:text-4xl">
|
|
{product.title}
|
|
</h2>
|
|
</div>
|
|
|
|
<p className="mb-6 text-sm leading-relaxed text-gray-600">
|
|
{product.description}
|
|
</p>
|
|
|
|
<ul className="mb-8 space-y-2.5">
|
|
{product.features.map((feature) => (
|
|
<li
|
|
key={feature}
|
|
className="flex items-start gap-2.5 text-sm text-gray-700"
|
|
>
|
|
<span className="mt-1.5 block size-1.5 shrink-0 rounded-full bg-[#C4D668]" />
|
|
{feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<Link
|
|
href="/offerte"
|
|
className="inline-flex w-fit items-center gap-2 rounded-md bg-[#C4D668] px-6 py-3 text-sm font-semibold text-black transition-colors hover:bg-[#b5c75a]"
|
|
>
|
|
Configureer uw deur
|
|
<ArrowRight className="size-4" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
})}
|
|
|
|
{/* Maatwerk Section */}
|
|
<section id="maatwerk" className="bg-[#1A2E2E] py-20">
|
|
<div className="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
|
|
<div className="mx-auto max-w-2xl">
|
|
<div className="mb-4 flex items-center justify-center gap-2">
|
|
<div className="h-4 w-1 rounded-full bg-[#C4D668]" />
|
|
<span className="text-xs font-medium tracking-widest uppercase text-[#C4D668]">
|
|
Maatwerk
|
|
</span>
|
|
</div>
|
|
<h2 className="mb-5 text-3xl font-bold text-white lg:text-4xl">
|
|
Iets speciaals in gedachten?
|
|
</h2>
|
|
<p className="mb-8 text-sm leading-relaxed text-gray-400">
|
|
Heeft u een uniek ontwerp in gedachten dat niet in onze standaard
|
|
configurator past? Geen probleem. Neem contact met ons op en wij
|
|
bekijken samen wat er mogelijk is. Van bijzondere glasverdelingen
|
|
tot speciale afwerkingen: als het in staal kan, maken wij het.
|
|
</p>
|
|
<div className="flex flex-col items-center justify-center gap-3 sm:flex-row">
|
|
<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]"
|
|
>
|
|
Start de configurator
|
|
<ArrowRight className="size-4" />
|
|
</Link>
|
|
<Link
|
|
href="/contact"
|
|
className="inline-flex items-center gap-2 rounded-md border border-white/20 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-white/10"
|
|
>
|
|
Neem contact op
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|