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/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>
+    </>
+  );
+}