3dct-client-mirror/snapshot-2026-08-15/home-weddingcaketopper/app/page.tsx

import Link from "next/link";

export default function Home() {
  return (
    <main className="min-h-screen bg-[#fffaf7] text-[#2f2523]">
      <section className="px-6 py-8 max-w-7xl mx-auto">
        <header className="flex justify-between items-center mb-16">
          <div>
            <div className="text-2xl font-serif tracking-wide text-[#b88a44]">
              WeddingCakeTopper.nl
            </div>
            <div className="text-sm text-[#8b6f61]">
              Made for your love story
            </div>
          </div>

          <Link
            href="/ontwerp"
            className="hidden md:inline-block rounded-full bg-[#b88a44] px-6 py-3 text-white font-medium hover:bg-[#9f7435]"
          >
            Start jullie ontwerp
          </Link>
        </header>

        <section className="grid md:grid-cols-2 gap-12 items-center">
          <div>
            <p className="uppercase tracking-[0.25em] text-sm text-[#b88a44] mb-4">
              Gepersonaliseerde wedding cake toppers
            </p>

            <h1 className="text-5xl md:text-7xl font-serif leading-tight mb-6">
              Jullie liefde, vereeuwigd op de bruidstaart
            </h1>

            <p className="text-lg text-[#6f5b52] mb-8 max-w-xl">
              Upload jullie foto&apos;s, kies jullie stijl en ontvang een unieke
              3D-geprinte wedding cake topper die perfect past bij jullie grote dag.
            </p>

            <div className="flex flex-col sm:flex-row gap-4">
              <Link
                href="/ontwerp"
                className="rounded-full bg-[#b88a44] px-8 py-4 text-white text-center font-medium hover:bg-[#9f7435]"
              >
                Start jullie ontwerp
              </Link>

              <a
                href="#prijzen"
                className="rounded-full border border-[#d8bfa3] px-8 py-4 text-center font-medium text-[#6f4f36] hover:bg-[#fff3eb]"
              >
                Bekijk prijzen
              </a>
            </div>
          </div>

          <div className="rounded-[3rem] bg-white shadow-xl p-8 text-center border border-[#f1dfd2]">
            <div className="text-8xl mb-6">??????????</div>
            <h2 className="text-3xl font-serif mb-3 text-[#b88a44]">
              Made for your love story
            </h2>
            <p className="text-[#7a665e]">
              Van klassiek bruidspaar tot gezin met kinderen of huisdieren.
              Jullie verhaal, als unieke topper.
            </p>
          </div>
        </section>
      </section>

      <section className="bg-white py-20 px-6">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-4xl font-serif text-center mb-12">
            Zo werkt het
          </h2>

          <div className="grid md:grid-cols-4 gap-6">
            {[
              ["??", "Upload foto&apos;s", "Voeg foto&apos;s toe van beide partners."],
              ["??", "Kies jullie stijl", "Romantisch, modern of speelse karikatuur."],
              ["????????", "Voeg extra&apos;s toe", "Kinderen of huisdieren kunnen mee op de topper."],
              ["??", "Wij maken hem", "Ontworpen en 3D-geprint in Nederland."],
            ].map(([icon, title, text]) => (
              <div
                key={title}
                className="rounded-3xl bg-[#fffaf7] p-6 border border-[#f1dfd2]"
              >
                <div className="text-4xl mb-4">{icon}</div>
                <h3
                  className="text-xl font-semibold mb-2"
                  dangerouslySetInnerHTML={{ __html: title }}
                />
                <p
                  className="text-[#7a665e]"
                  dangerouslySetInnerHTML={{ __html: text }}
                />
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="prijzen" className="py-20 px-6 bg-[#fffaf7]">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-4xl font-serif text-center mb-4">
            Kies jullie formaat
          </h2>
          <p className="text-center text-[#7a665e] mb-12">
            Gepersonaliseerd op basis van jullie foto&apos;s.
          </p>

          <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            <div className="rounded-3xl bg-white p-8 border border-[#f1dfd2] shadow-sm">
              <h3 className="text-3xl font-serif mb-2">Kleine topper</h3>
              <p className="text-[#7a665e] mb-6">12 cm hoog</p>
              <div className="text-5xl font-serif text-[#b88a44] mb-6">
                €69
              </div>
              <p className="text-[#7a665e] mb-8">
                Perfect voor kleinere bruidstaarten of subtiele decoratie.
              </p>
              <Link
                href="/ontwerp"
                className="block rounded-full bg-[#b88a44] px-6 py-4 text-white text-center font-medium hover:bg-[#9f7435]"
              >
                Start ontwerp
              </Link>
            </div>

            <div className="rounded-3xl bg-white p-8 border-2 border-[#b88a44] shadow-xl relative">
              <div className="absolute -top-4 left-8 bg-[#b88a44] text-white px-4 py-2 rounded-full text-sm">
                Meest gekozen
              </div>
              <h3 className="text-3xl font-serif mb-2">Grote topper</h3>
              <p className="text-[#7a665e] mb-6">19 cm hoog</p>
              <div className="text-5xl font-serif text-[#b88a44] mb-6">
                €99
              </div>
              <p className="text-[#7a665e] mb-8">
                Een echte eyecatcher bovenop jullie bruidstaart.
              </p>
              <Link
                href="/ontwerp"
                className="block rounded-full bg-[#b88a44] px-6 py-4 text-white text-center font-medium hover:bg-[#9f7435]"
              >
                Start ontwerp
              </Link>
            </div>
          </div>

          <div className="mt-12 text-center text-[#7a665e]">
            Kind toevoegen + €19 per kind · Hond of kat toevoegen + €15
          </div>
        </div>
      </section>

      <section className="bg-white py-20 px-6">
        <div className="max-w-5xl mx-auto text-center">
          <h2 className="text-4xl font-serif mb-6">
            Voor ieder liefdesverhaal
          </h2>
          <p className="text-lg text-[#7a665e] mb-10">
            Bruid & bruidegom, bruid & bruid of bruidegom & bruidegom.
            Iedere liefde verdient een unieke topper.
          </p>

          <div className="flex flex-wrap justify-center gap-4 text-lg">
            <span className="rounded-full bg-[#fffaf7] px-6 py-3 border border-[#f1dfd2]">
              ????? ????? Bruid & bruidegom
            </span>
            <span className="rounded-full bg-[#fffaf7] px-6 py-3 border border-[#f1dfd2]">
              ????? ????? Bruid & bruid
            </span>
            <span className="rounded-full bg-[#fffaf7] px-6 py-3 border border-[#f1dfd2]">
              ????? ????? Bruidegom & bruidegom
            </span>
          </div>
        </div>
      </section>

      <section className="py-20 px-6 bg-[#2f2523] text-white text-center">
        <h2 className="text-4xl font-serif mb-6">
          Klaar om jullie topper te ontwerpen?
        </h2>
        <p className="text-[#e8d7c9] mb-8">
          De ontwerptool is bijna klaar. Binnenkort upload je hier jullie foto&apos;s
          en maken we direct een eerste voorbeeld.
        </p>
        <Link
          href="/ontwerp"
          className="inline-block rounded-full bg-[#b88a44] px-8 py-4 text-white font-medium hover:bg-[#9f7435]"
        >
          Start jullie ontwerp
        </Link>
      </section>
    </main>
  );
}