Files
einfach-produktiv/app/newsletter-confirmed/page.tsx
T
Marco 3328f30a06 Add /newsletter-confirmed double-opt-in confirmation page
Brevo's redirectionUrl now points here instead of the homepage — a
static page matching /bestellbestaetigung's visual language (brand-
tinted checkmark circle, serif display heading, thin brand divider).
No query params to read; Brevo's confirmation redirect carries nothing
this page needs.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-25 14:08:52 +00:00

67 lines
3.0 KiB
TypeScript

import type { Metadata } from "next";
import Link from "next/link";
import { Reveal } from "../components/Reveal";
import { Footer } from "../components/Footer";
import { TrustRow } from "../components/TrustRow";
// robots: noindex — transactional landing page (Brevo's double opt-in
// redirectionUrl target, see app/lib/brevo.ts's BREVO_DOI_REDIRECT_URL),
// same reasoning as /bestellbestaetigung and /checkout: nothing here is
// meant to be found via search, only reached via the confirmation link.
export const metadata: Metadata = {
title: "Newsletter bestätigt",
description: "Deine Newsletter-Anmeldung bei einfach produktiv ist bestätigt.",
robots: {
index: false,
follow: true,
},
};
// Static — Brevo's confirmation click lands here with no query params to
// read, so unlike /bestellbestaetigung (which hydrates a sessionStorage
// order snapshot) or /checkout/verarbeitung (which polls payment status),
// this page has nothing to fetch or wait on. Same visual language as
// those two: warm bg-bg-base, brand-tinted circular icon, serif display
// heading, thin brand divider — see BestellbestaetigungContent.tsx for
// the pattern this mirrors.
export default function NewsletterConfirmedPage() {
return (
<>
<main className="flex flex-col flex-1 bg-bg-base">
<Reveal className="flex flex-col gap-4 items-center text-center pt-24 pb-16 px-[var(--layout-padding-x)] w-full">
<div className="flex items-center justify-center size-14 rounded-full bg-brand/10 text-brand shrink-0">
<svg viewBox="0 0 24 24" className="size-6" fill="none" aria-hidden="true">
<path d="M5 13.5 9.5 18 19 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
<p
className="font-semibold text-display text-text-primary"
style={{ fontFamily: "var(--font-playfair)" }}
>
Bestätigt!
</p>
<p
className="font-semibold text-h3 text-text-primary"
style={{ fontFamily: "var(--font-lora)" }}
>
Du bist jetzt Teil unseres Newsletters.
</p>
<div className="h-[0.125rem] w-8 bg-brand" />
<p className="text-body text-text-muted max-w-[28rem] pt-2">
Schön, dass du dabei bist! Ab jetzt bekommst du hin und wieder Impulse, neue Produkte
und kleine Erinnerungen von uns, damit dein Alltag ein bisschen leichter wird.
</p>
<Link
href="/shop"
className="inline-flex items-center justify-center py-4 px-8 mt-4 rounded-sm bg-brand hover:bg-brand-hover active:scale-[0.97] transition-all font-bold text-body text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base"
>
Jetzt stöbern
</Link>
</Reveal>
<TrustRow />
</main>
<Footer />
</>
);
}