feat: Latest production version with interior scene and glass
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>
This commit is contained in:
Ubuntu
246
app/producten/page.tsx
Normal file
246
app/producten/page.tsx
Normal file
@@ -0,0 +1,246 @@
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user