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>

app/contact/page.tsx

@@ -0,0 +1,218 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { Mail, Phone, MapPin, Clock, ArrowRight } from "lucide-react";
+
+export const metadata: Metadata = {
+  title: "Contact | PROINN Stalen Deuren",
+  description:
+    "Neem contact op met Proinn voor vragen over stalen deuren, offertes of advies. Bel 0165 311 490 of mail info@proinn.nl.",
+};
+
+const contactMethods = [
+  {
+    icon: Phone,
+    title: "Bel ons",
+    value: "0165 311 490",
+    href: "tel:0165311490",
+    description: "Ma t/m vr: 08:00 - 17:00",
+  },
+  {
+    icon: Mail,
+    title: "E-mail",
+    value: "info@proinn.nl",
+    href: "mailto:info@proinn.nl",
+    description: "Reactie binnen 24 uur",
+  },
+  {
+    icon: MapPin,
+    title: "Bezoekadres",
+    value: "Schotsbossenstraat 2",
+    href: "https://maps.google.com/?q=Schotsbossenstraat+2+4705AG+Roosendaal",
+    description: "4705AG Roosendaal",
+  },
+  {
+    icon: Clock,
+    title: "Openingstijden",
+    value: "Ma t/m vr: 08:00 - 17:00",
+    href: undefined,
+    description: "Weekend op afspraak",
+  },
+];
+
+const faqItems = [
+  {
+    question: "Hoe lang duurt de levertijd?",
+    answer:
+      "De gemiddelde levertijd bedraagt 4 tot 6 weken na goedkeuring van de offerte. Dit kan vari\u00ebren afhankelijk van de complexiteit van het project en de drukte in onze werkplaats.",
+  },
+  {
+    question: "Verzorgen jullie ook de montage?",
+    answer:
+      "Ja, wij bieden een complete service van ontwerp tot montage. Onze eigen monteurs installeren uw deur vakkundig op locatie. U kunt er ook voor kiezen de deur zelf te (laten) plaatsen.",
+  },
+  {
+    question: "Kan ik een showroom bezoeken?",
+    answer:
+      "U bent van harte welkom in onze werkplaats in Roosendaal om onze producten in het echt te bekijken. Neem vooraf contact op zodat wij u de aandacht kunnen geven die u verdient.",
+  },
+  {
+    question: "Wat kost een stalen deur?",
+    answer:
+      "De prijs is afhankelijk van de afmetingen, het type deur, de glassoort en de gewenste afwerking. Gebruik onze online configurator voor een directe indicatieprijs, of vraag een offerte op maat aan.",
+  },
+  {
+    question: "Welke kleuren zijn beschikbaar?",
+    answer:
+      "Onze standaard kleuren zijn Zwart (RAL 9005), Antraciet, Brons, Goud en Beige. Daarnaast kunt u kiezen uit het volledige RAL-kleurenpalet voor een kleur die precies aansluit bij uw interieur.",
+  },
+  {
+    question: "Leveren jullie door heel Nederland?",
+    answer:
+      "Ja, wij leveren en monteren door heel Nederland en Belgi\u00eb. Onze monteurs komen bij u op locatie voor een perfecte installatie.",
+  },
+];
+
+export default function ContactPage() {
+  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]">
+                Contact
+              </span>
+            </div>
+            <h1 className="text-4xl font-light leading-tight text-white sm:text-5xl">
+              Neem <span className="font-semibold">contact</span> op
+            </h1>
+            <p className="mt-5 max-w-xl text-base leading-relaxed text-gray-400">
+              Heeft u vragen over onze stalen deuren, wilt u advies of bent u
+              klaar om een offerte aan te vragen? Wij staan voor u klaar.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Contact Methods */}
+      <section className="bg-white py-20">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+            {contactMethods.map((method) => {
+              const Icon = method.icon;
+              const content = (
+                <>
+                  <div className="mb-4 flex size-12 items-center justify-center rounded-xl bg-[#1A2E2E] transition-colors group-hover:bg-[#C4D668]">
+                    <Icon
+                      className="size-5 text-[#C4D668] transition-colors group-hover:text-black"
+                      strokeWidth={1.5}
+                    />
+                  </div>
+                  <p className="text-xs font-medium uppercase tracking-wider text-gray-400 transition-colors group-hover:text-gray-400">
+                    {method.title}
+                  </p>
+                  <p className="mt-1 text-lg font-semibold text-gray-900 transition-colors group-hover:text-white">
+                    {method.value}
+                  </p>
+                  <p className="mt-1 text-sm text-gray-500 transition-colors group-hover:text-gray-400">
+                    {method.description}
+                  </p>
+                </>
+              );
+
+              const className =
+                "group rounded-2xl bg-[#F5F5F3] p-8 transition-colors hover:bg-[#1A2E2E]";
+
+              if (method.href) {
+                return (
+                  <a
+                    key={method.title}
+                    href={method.href}
+                    target={
+                      method.href.startsWith("http") ? "_blank" : undefined
+                    }
+                    rel={
+                      method.href.startsWith("http")
+                        ? "noopener noreferrer"
+                        : undefined
+                    }
+                    className={className}
+                  >
+                    {content}
+                  </a>
+                );
+              }
+
+              return (
+                <div key={method.title} className={className}>
+                  {content}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ */}
+      <section className="bg-[#F5F5F3] py-20">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="mx-auto max-w-3xl">
+            <div className="mb-10 text-center">
+              <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-gray-500">
+                  Veelgestelde vragen
+                </span>
+              </div>
+              <h2 className="text-3xl font-light text-gray-900 lg:text-4xl">
+                Alles wat u wilt <span className="font-semibold">weten</span>
+              </h2>
+            </div>
+            <div className="space-y-4">
+              {faqItems.map((item) => (
+                <details
+                  key={item.question}
+                  className="group rounded-xl bg-white shadow-sm"
+                >
+                  <summary className="flex cursor-pointer items-center justify-between px-6 py-5 text-sm font-semibold text-gray-900 [&::-webkit-details-marker]:hidden">
+                    {item.question}
+                    <span className="ml-4 flex size-6 shrink-0 items-center justify-center rounded-full bg-gray-100 text-xs text-gray-500 transition-transform group-open:rotate-45">
+                      +
+                    </span>
+                  </summary>
+                  <div className="px-6 pb-5">
+                    <p className="text-sm leading-relaxed text-gray-600">
+                      {item.answer}
+                    </p>
+                  </div>
+                </details>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="bg-[#1A2E2E] py-16">
+        <div className="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
+          <h2 className="mb-4 text-3xl font-bold text-white">
+            Liever direct aan de slag?
+          </h2>
+          <p className="mx-auto mb-8 max-w-md text-sm text-gray-400">
+            Ontwerp uw stalen deur stap voor stap in onze online configurator
+            en ontvang direct een indicatieprijs.
+          </p>
+          <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>
+        </div>
+      </section>
+    </>
+  );
+}

app/offerte/page.tsx

@@ -4,35 +4,43 @@ import { FormProvider, useFormContext } from "@/components/offerte/form-context"
 import { StepProduct } from "@/components/offerte/step-product";
 import { StepDimensions } from "@/components/offerte/step-dimensions";
 import { StepOptions } from "@/components/offerte/step-options";
+import { StepExtras } from "@/components/offerte/step-extras";
 import { StepContact } from "@/components/offerte/step-contact";
 import { StepSummary } from "@/components/offerte/step-summary";
 import { Button } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DoorVisualizer } from "@/components/configurator/door-visualizer";
 
-const stepLabels = ["Product", "Afmetingen", "Opties", "Contact", "Overzicht"];
+const stepLabels = ["Product", "Afmetingen", "Opties", "Extra", "Contact", "Overzicht"];
 
 const stepComponents = [
   StepProduct,
   StepDimensions,
   StepOptions,
+  StepExtras,
   StepContact,
   StepSummary,
 ];
 
 function StepIndicator() {
-  const { currentStep, totalSteps } = useFormContext();
+  const { currentStep, totalSteps, goToStep } = useFormContext();
 
   return (
-    <div className="mb-8 flex items-center gap-2">
+    <div className="mb-8 flex items-center gap-1.5">
       {stepLabels.map((label, i) => (
-        <div key={label} className="flex items-center gap-2">
-          <div className="flex flex-col items-center gap-1">
+        <div key={label} className="flex items-center gap-1.5">
+          <button
+            type="button"
+            onClick={() => i < currentStep && goToStep(i)}
+            className="flex flex-col items-center gap-1"
+            disabled={i > currentStep}
+          >
             <div
               className={`flex size-8 items-center justify-center rounded-full text-sm font-semibold transition-colors ${
                 i <= currentStep
                   ? "bg-[#1A2E2E] text-white"
                   : "bg-gray-200 text-gray-500"
-              }`}
+              } ${i < currentStep ? "cursor-pointer hover:bg-[#1A2E2E]/80" : ""}`}
             >
               {i + 1}
             </div>
@@ -43,10 +51,10 @@ function StepIndicator() {
             >
               {label}
             </span>
-          </div>
+          </button>
           {i < totalSteps - 1 && (
             <div
-              className={`h-px w-4 transition-colors lg:w-6 ${
+              className={`h-px w-3 transition-colors lg:w-4 ${
                 i < currentStep ? "bg-[#1A2E2E]" : "bg-gray-300"
               }`}
             />
@@ -69,7 +77,7 @@ function WizardContent() {
         <CurrentStepComponent />
       </div>
 
-      {/* Navigation — hidden on step 1 (auto-advances) and summary (has its own button) */}
+      {/* Navigation -- hidden on step 1 (auto-advances) and summary (has its own button) */}
       {!isFirstStep && !isLastStep && (
         <div className="mt-6 flex justify-between gap-4">
           <Button
@@ -103,8 +111,6 @@ function WizardContent() {
   );
 }
 
-import { DoorVisualizer } from "@/components/configurator/door-visualizer";
-
 export default function OffertePage() {
   return (
     <FormProvider>

app/over-ons/page.tsx

@@ -0,0 +1,212 @@
+import Image from "next/image";
+import Link from "next/link";
+import type { Metadata } from "next";
+import { ArrowRight, Factory, Ruler, Shield, Users } from "lucide-react";
+
+export const metadata: Metadata = {
+  title: "Over Ons | PROINN Stalen Deuren",
+  description:
+    "Leer meer over Proinn. Handgemaakte stalen deuren, op maat geleverd en geinstalleerd vanuit onze werkplaats in Roosendaal.",
+};
+
+const values = [
+  {
+    icon: Factory,
+    title: "Eigen productie",
+    description:
+      "Alle deuren worden volledig in onze eigen werkplaats in Roosendaal geproduceerd. Zo houden wij controle over ieder detail.",
+  },
+  {
+    icon: Ruler,
+    title: "100% maatwerk",
+    description:
+      "Geen deur is hetzelfde. Wij produceren uitsluitend op maat, afgestemd op uw specifieke wensen en afmetingen.",
+  },
+  {
+    icon: Shield,
+    title: "Kwaliteitsgarantie",
+    description:
+      "Wij werken met hoogwaardige staalprofielen en duurzame poedercoating voor een resultaat dat jarenlang meegaat.",
+  },
+  {
+    icon: Users,
+    title: "Persoonlijk advies",
+    description:
+      "Van het eerste contact tot de oplevering: u heeft altijd een vast aanspreekpunt dat met u meedenkt.",
+  },
+];
+
+const stats = [
+  { value: "500+", label: "Deuren geleverd" },
+  { value: "100%", label: "Op maat gemaakt" },
+  { value: "4.8/5", label: "Klantwaardering" },
+  { value: "Roosendaal", label: "Eigen werkplaats" },
+];
+
+export default function OverOnsPage() {
+  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]">
+                Over Proinn
+              </span>
+            </div>
+            <h1 className="text-4xl font-light leading-tight text-white sm:text-5xl">
+              Vakmanschap in{" "}
+              <span className="font-semibold">staal</span>
+            </h1>
+            <p className="mt-5 max-w-xl text-base leading-relaxed text-gray-400">
+              Proinn is gespecialiseerd in het ontwerpen en produceren van
+              handgemaakte stalen deuren, kozijnen en wanden. Vanuit onze
+              werkplaats in Roosendaal combineren wij ambachtelijke technieken
+              met moderne technologie.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Stats */}
+      <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-2 divide-x divide-gray-200 lg:grid-cols-4">
+            {stats.map((stat) => (
+              <div key={stat.label} className="px-6 py-10 text-center">
+                <p className="text-3xl font-bold text-gray-900">{stat.value}</p>
+                <p className="mt-1 text-sm text-gray-500">{stat.label}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Story */}
+      <section className="bg-[#F5F5F3] py-20">
+        <div className="mx-auto grid max-w-7xl gap-12 px-4 sm:px-6 lg:grid-cols-2 lg:gap-16 lg:px-8">
+          <div className="relative min-h-[400px] overflow-hidden rounded-2xl lg:min-h-[500px]">
+            <Image
+              src="/images/proinn-spuiten.png"
+              alt="Proinn werkplaats - poedercoating"
+              fill
+              className="object-cover"
+              sizes="(max-width: 1024px) 100vw, 50vw"
+            />
+          </div>
+          <div className="flex flex-col justify-center">
+            <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-gray-500">
+                Ons verhaal
+              </span>
+            </div>
+            <h2 className="mb-5 text-3xl font-light leading-tight text-gray-900 lg:text-4xl">
+              Van ontwerp tot
+              <br />
+              <span className="font-semibold">montage op locatie</span>
+            </h2>
+            <p className="mb-4 text-sm leading-relaxed text-gray-600">
+              Bij Proinn geloven wij dat een stalen deur meer is dan een
+              functioneel element. Het is een statement dat de sfeer van uw
+              ruimte bepaalt. Daarom besteden wij aan ieder project dezelfde
+              aandacht en toewijding, of het nu gaat om een enkele binnendeur
+              of een complete kantoorindeling.
+            </p>
+            <p className="mb-4 text-sm leading-relaxed text-gray-600">
+              Ons team van vakmensen beheerst het volledige traject: van het
+              eerste adviesgesprek en het technisch ontwerp, tot de productie
+              in onze eigen werkplaats en de zorgvuldige montage bij u op
+              locatie.
+            </p>
+            <p className="text-sm leading-relaxed text-gray-600">
+              Alle deuren worden geproduceerd met hoogwaardige staalprofielen en
+              afgewerkt met een duurzame poedercoating in de kleur van uw keuze.
+              Het resultaat: een product dat niet alleen mooi oogt, maar ook
+              jarenlang meegaat.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Values */}
+      <section className="bg-white py-20">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="mb-12 max-w-xl">
+            <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-gray-500">
+                Waar wij voor staan
+              </span>
+            </div>
+            <h2 className="text-3xl font-light text-gray-900 lg:text-4xl">
+              Kwaliteit in elk <span className="font-semibold">detail</span>
+            </h2>
+          </div>
+          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
+            {values.map((item) => {
+              const Icon = item.icon;
+              return (
+                <div key={item.title} className="rounded-2xl bg-[#F5F5F3] p-8">
+                  <div className="mb-4 flex size-12 items-center justify-center rounded-xl bg-[#1A2E2E]">
+                    <Icon className="size-6 text-[#C4D668]" strokeWidth={1.5} />
+                  </div>
+                  <h3 className="mb-2 text-base font-semibold text-gray-900">
+                    {item.title}
+                  </h3>
+                  <p className="text-sm leading-relaxed text-gray-500">
+                    {item.description}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+
+      {/* Team Image + CTA */}
+      <section className="bg-[#1A2E2E] py-20">
+        <div className="mx-auto grid max-w-7xl gap-12 px-4 sm:px-6 lg:grid-cols-2 lg:gap-16 lg:px-8">
+          <div className="flex flex-col justify-center">
+            <h2 className="mb-5 text-3xl font-bold leading-tight text-white lg:text-4xl">
+              Samen uw ideale
+              <br />
+              deur realiseren?
+            </h2>
+            <p className="mb-8 max-w-md text-sm leading-relaxed text-gray-300">
+              Neem vrijblijvend contact met ons op of ontwerp direct uw eigen
+              stalen deur via onze online configurator. Wij denken graag met
+              u mee.
+            </p>
+            <div className="flex flex-wrap gap-3">
+              <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]"
+              >
+                Configureer uw deur
+                <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 className="relative min-h-[350px] overflow-hidden rounded-2xl lg:min-h-[420px]">
+            <Image
+              src="/images/image-people1.png"
+              alt="Het Proinn team"
+              fill
+              className="object-cover"
+              sizes="(max-width: 1024px) 100vw, 50vw"
+            />
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

app/privacy/page.tsx

@@ -0,0 +1,135 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Privacybeleid | PROINN",
+  description: "Privacybeleid van Proinn - hoe wij omgaan met uw persoonsgegevens.",
+};
+
+export default function PrivacyPage() {
+  return (
+    <>
+      <section className="bg-[#1A2E2E] pt-32 pb-16">
+        <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
+          <h1 className="text-3xl font-light text-white sm:text-4xl">
+            Privacybeleid
+          </h1>
+          <p className="mt-3 text-sm text-gray-400">
+            Laatst bijgewerkt: februari 2025
+          </p>
+        </div>
+      </section>
+
+      <section className="bg-white py-16">
+        <div className="prose prose-sm prose-gray mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
+          <div className="space-y-8 text-sm leading-relaxed text-gray-600">
+            <div>
+              <h2 className="mb-3 text-lg font-semibold text-gray-900">
+                1. Wie zijn wij?
+              </h2>
+              <p>
+                Proinn is gevestigd aan de Schotsbossenstraat 2, 4705AG
+                Roosendaal en ingeschreven bij de Kamer van Koophandel onder
+                nummer 85086991. Wij zijn verantwoordelijk voor de verwerking
+                van uw persoonsgegevens zoals beschreven in dit privacybeleid.
+              </p>
+            </div>
+
+            <div>
+              <h2 className="mb-3 text-lg font-semibold text-gray-900">
+                2. Welke gegevens verzamelen wij?
+              </h2>
+              <p className="mb-2">
+                Wanneer u contact met ons opneemt of een offerte aanvraagt via
+                onze website, kunnen wij de volgende gegevens verwerken:
+              </p>
+              <ul className="ml-4 list-disc space-y-1 text-gray-600">
+                <li>Naam</li>
+                <li>E-mailadres</li>
+                <li>Telefoonnummer</li>
+                <li>De configuratie van uw gewenste product</li>
+                <li>Eventuele opmerkingen die u bij uw aanvraag plaatst</li>
+              </ul>
+            </div>
+
+            <div>
+              <h2 className="mb-3 text-lg font-semibold text-gray-900">
+                3. Waarvoor gebruiken wij uw gegevens?
+              </h2>
+              <p className="mb-2">Wij verwerken uw persoonsgegevens voor de volgende doeleinden:</p>
+              <ul className="ml-4 list-disc space-y-1 text-gray-600">
+                <li>Het verwerken en opvolgen van uw offerteaanvraag</li>
+                <li>Het beantwoorden van uw vragen via e-mail of telefoon</li>
+                <li>Het verbeteren van onze dienstverlening en website</li>
+              </ul>
+            </div>
+
+            <div>
+              <h2 className="mb-3 text-lg font-semibold text-gray-900">
+                4. Hoe lang bewaren wij uw gegevens?
+              </h2>
+              <p>
+                Wij bewaren uw persoonsgegevens niet langer dan strikt
+                noodzakelijk is voor de doeleinden waarvoor zij worden
+                verzameld. In de regel hanteren wij een bewaartermijn van
+                maximaal 2 jaar na het laatste contact, tenzij wettelijke
+                verplichtingen een langere bewaartermijn vereisen.
+              </p>
+            </div>
+
+            <div>
+              <h2 className="mb-3 text-lg font-semibold text-gray-900">
+                5. Delen wij uw gegevens?
+              </h2>
+              <p>
+                Wij delen uw persoonsgegevens niet met derden, tenzij dit
+                noodzakelijk is voor de uitvoering van onze dienstverlening
+                (bijvoorbeeld een monteur die bij u op locatie komt) of
+                wanneer wij hiertoe wettelijk verplicht zijn.
+              </p>
+            </div>
+
+            <div>
+              <h2 className="mb-3 text-lg font-semibold text-gray-900">
+                6. Cookies
+              </h2>
+              <p>
+                Onze website maakt gebruik van technisch noodzakelijke cookies
+                om de website goed te laten functioneren. Wij plaatsen geen
+                tracking- of marketingcookies.
+              </p>
+            </div>
+
+            <div>
+              <h2 className="mb-3 text-lg font-semibold text-gray-900">
+                7. Uw rechten
+              </h2>
+              <p className="mb-2">
+                U heeft het recht om uw persoonsgegevens in te zien, te
+                corrigeren of te verwijderen. Daarnaast heeft u het recht om
+                bezwaar te maken tegen de verwerking van uw gegevens. U kunt
+                een verzoek indienen via:
+              </p>
+              <p className="font-medium text-gray-900">
+                E-mail: info@proinn.nl
+                <br />
+                Telefoon: 0165 311 490
+              </p>
+            </div>
+
+            <div>
+              <h2 className="mb-3 text-lg font-semibold text-gray-900">
+                8. Klachten
+              </h2>
+              <p>
+                Mocht u een klacht hebben over de verwerking van uw
+                persoonsgegevens, dan kunt u contact met ons opnemen. U heeft
+                daarnaast altijd het recht een klacht in te dienen bij de
+                Autoriteit Persoonsgegevens (autoriteitpersoonsgegevens.nl).
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

app/producten/page.tsx

@@ -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 &amp;{" "}
+              <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>
+    </>
+  );
+}

app/voorwaarden/page.tsx

@@ -0,0 +1,217 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Algemene Voorwaarden | PROINN",
+  description:
+    "Algemene voorwaarden van Proinn voor de levering van stalen deuren en aanverwante producten.",
+};
+
+export default function VoorwaardenPage() {
+  return (
+    <>
+      <section className="bg-[#1A2E2E] pt-32 pb-16">
+        <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
+          <h1 className="text-3xl font-light text-white sm:text-4xl">
+            Algemene Voorwaarden
+          </h1>
+          <p className="mt-3 text-sm text-gray-400">
+            Laatst bijgewerkt: februari 2025
+          </p>
+        </div>
+      </section>
+
+      <section className="bg-white py-16">
+        <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
+          <div className="space-y-8 text-sm leading-relaxed text-gray-600">
+            <div>
+              <h2 className="mb-3 text-lg font-semibold text-gray-900">
+                Artikel 1 - Definities
+              </h2>
+              <ol className="ml-4 list-decimal space-y-1">
+                <li>
+                  <strong>Proinn:</strong> gevestigd te Schotsbossenstraat 2,
+                  4705AG Roosendaal, ingeschreven bij de KvK onder nummer
+                  85086991.
+                </li>
+                <li>
+                  <strong>Opdrachtgever:</strong> de natuurlijke of
+                  rechtspersoon die met Proinn een overeenkomst aangaat.
+                </li>
+                <li>
+                  <strong>Overeenkomst:</strong> iedere afspraak of
+                  overeenkomst tussen Proinn en Opdrachtgever waarvan deze
+                  algemene voorwaarden integraal onderdeel uitmaken.
+                </li>
+                <li>
+                  <strong>Product:</strong> stalen deuren, kozijnen, wanden
+                  en aanverwante producten die door Proinn worden vervaardigd
+                  en geleverd.
+                </li>
+              </ol>
+            </div>
+
+            <div>
+              <h2 className="mb-3 text-lg font-semibold text-gray-900">
+                Artikel 2 - Toepasselijkheid
+              </h2>
+              <ol className="ml-4 list-decimal space-y-1">
+                <li>
+                  Deze algemene voorwaarden zijn van toepassing op alle
+                  aanbiedingen, offertes en overeenkomsten van Proinn.
+                </li>
+                <li>
+                  Afwijkingen van deze voorwaarden zijn uitsluitend geldig
+                  indien schriftelijk overeengekomen.
+                </li>
+                <li>
+                  Eventuele voorwaarden van de Opdrachtgever worden uitdrukkelijk
+                  van de hand gewezen.
+                </li>
+              </ol>
+            </div>
+
+            <div>
+              <h2 className="mb-3 text-lg font-semibold text-gray-900">
+                Artikel 3 - Offertes en aanbiedingen
+              </h2>
+              <ol className="ml-4 list-decimal space-y-1">
+                <li>
+                  Alle offertes van Proinn zijn vrijblijvend en hebben een
+                  geldigheid van 30 dagen, tenzij anders vermeld.
+                </li>
+                <li>
+                  Prijzen in offertes zijn inclusief BTW, tenzij anders
+                  aangegeven.
+                </li>
+                <li>
+                  Een overeenkomst komt tot stand na schriftelijke bevestiging
+                  door Proinn of na aanvang van de werkzaamheden.
+                </li>
+              </ol>
+            </div>
+
+            <div>
+              <h2 className="mb-3 text-lg font-semibold text-gray-900">
+                Artikel 4 - Levering en montage
+              </h2>
+              <ol className="ml-4 list-decimal space-y-1">
+                <li>
+                  Levertijden worden bij benadering opgegeven en zijn nimmer
+                  te beschouwen als fatale termijnen.
+                </li>
+                <li>
+                  Levering geschiedt op het door Opdrachtgever opgegeven adres.
+                  De Opdrachtgever dient ervoor te zorgen dat de locatie
+                  bereikbaar en geschikt is voor montage.
+                </li>
+                <li>
+                  Het risico van de producten gaat over op de Opdrachtgever
+                  op het moment van levering.
+                </li>
+              </ol>
+            </div>
+
+            <div>
+              <h2 className="mb-3 text-lg font-semibold text-gray-900">
+                Artikel 5 - Betaling
+              </h2>
+              <ol className="ml-4 list-decimal space-y-1">
+                <li>
+                  Betaling dient te geschieden binnen 14 dagen na
+                  factuurdatum, tenzij anders overeengekomen.
+                </li>
+                <li>
+                  Bij maatwerk producten kan Proinn een aanbetaling van 50%
+                  verlangen voorafgaand aan de productie.
+                </li>
+                <li>
+                  Bij niet-tijdige betaling is de Opdrachtgever van
+                  rechtswege in verzuim en is Proinn gerechtigd de wettelijke
+                  rente en incassokosten in rekening te brengen.
+                </li>
+              </ol>
+            </div>
+
+            <div>
+              <h2 className="mb-3 text-lg font-semibold text-gray-900">
+                Artikel 6 - Garantie
+              </h2>
+              <ol className="ml-4 list-decimal space-y-1">
+                <li>
+                  Proinn garandeert dat de geleverde producten voldoen aan de
+                  in de overeenkomst vastgelegde specificaties.
+                </li>
+                <li>
+                  Op de constructie van de stalen deuren geldt een garantie
+                  van 5 jaar. Op de poedercoating geldt een garantie van 2
+                  jaar bij normaal gebruik.
+                </li>
+                <li>
+                  Garantie vervalt bij onjuist gebruik, gebrekkig onderhoud
+                  of wijzigingen aan het product door derden.
+                </li>
+              </ol>
+            </div>
+
+            <div>
+              <h2 className="mb-3 text-lg font-semibold text-gray-900">
+                Artikel 7 - Annulering
+              </h2>
+              <ol className="ml-4 list-decimal space-y-1">
+                <li>
+                  Bij annulering na akkoord op de offerte is Proinn gerechtigd
+                  de reeds gemaakte kosten en een redelijke vergoeding voor
+                  gederfde winst in rekening te brengen.
+                </li>
+                <li>
+                  Maatwerk producten die reeds in productie zijn genomen
+                  kunnen niet worden geannuleerd.
+                </li>
+              </ol>
+            </div>
+
+            <div>
+              <h2 className="mb-3 text-lg font-semibold text-gray-900">
+                Artikel 8 - Aansprakelijkheid
+              </h2>
+              <ol className="ml-4 list-decimal space-y-1">
+                <li>
+                  De aansprakelijkheid van Proinn is beperkt tot het bedrag
+                  dat in het betreffende geval onder de
+                  aansprakelijkheidsverzekering wordt uitbetaald.
+                </li>
+                <li>
+                  Proinn is niet aansprakelijk voor indirecte schade,
+                  gevolgschade of gederfde winst.
+                </li>
+              </ol>
+            </div>
+
+            <div>
+              <h2 className="mb-3 text-lg font-semibold text-gray-900">
+                Artikel 9 - Toepasselijk recht
+              </h2>
+              <p>
+                Op alle overeenkomsten tussen Proinn en de Opdrachtgever is
+                Nederlands recht van toepassing. Geschillen worden voorgelegd
+                aan de bevoegde rechter in het arrondissement Zeeland-West-Brabant.
+              </p>
+            </div>
+
+            <div className="rounded-xl bg-[#F5F5F3] p-6">
+              <p className="text-sm text-gray-600">
+                <strong className="text-gray-900">Proinn</strong>
+                <br />
+                Schotsbossenstraat 2, 4705AG Roosendaal
+                <br />
+                KVK: 85086991 | BTW: NL863503330.B01
+                <br />
+                Tel: 0165 311 490 | E-mail: info@proinn.nl
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}