Marco
86 lines
3.9 KiB
TypeScript
86 lines
3.9 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>
|
||
<div className="h-[0.125rem] w-8 bg-brand" />
|
||
|
||
<div className="flex flex-col gap-4 text-left text-body text-text-muted max-w-[28rem] pt-2">
|
||
<p>Hallo,</p>
|
||
<p>schön, dass du da bist!</p>
|
||
<p>
|
||
Ab jetzt bekommst du wöchentlich meine Sonntags-Impulse direkt in dein Postfach –
|
||
mit kurzen Gedanken und praktischen Impulsen für mehr Klarheit im Alltag.
|
||
</p>
|
||
<p>Als kleines Dankeschön habe ich direkt etwas für dich:</p>
|
||
|
||
<div className="flex flex-col gap-3 bg-bg-muted rounded-md px-6 py-5">
|
||
<p className="font-semibold text-text-primary">Dein Klarheitskompass</p>
|
||
<p>Du erhältst ihn in einer separaten E-Mail in den nächsten Minuten – er hilft dir, kurz innezuhalten und dich zu fragen:</p>
|
||
<ul className="flex flex-col gap-1 list-disc pl-5">
|
||
<li>Was beschäftigt mich gerade?</li>
|
||
<li>Was ist wirklich wichtig?</li>
|
||
<li>Worauf möchte ich meinen Fokus legen?</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<p>Bis die erste Mail am Sonntag kommt, habe ich noch eine kleine Einladung:</p>
|
||
<p>
|
||
Beobachte in den nächsten Tagen einfach einmal, womit du deine Aufmerksamkeit
|
||
verbringst. Nicht bewerten. Nur wahrnehmen.
|
||
</p>
|
||
<p>Bis Sonntag</p>
|
||
<p className="text-text-primary font-semibold">Björn</p>
|
||
</div>
|
||
|
||
<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 />
|
||
</>
|
||
);
|
||
}
|