Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Align newsletter-confirmed page visually with transactional page family

Browse Source 
Adds the two-tier headline and yellow checkmark list already used on
bestellbestaetigung/PageBlocks, and matches the CTA button sizing.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01G5mssdCBir9kyXTmqBjV3h
This commit is contained in:
Marco
2026-08-28 12:53:51 +00:00
parent 98b3b3b6da
commit bd1b73e304
1 changed files with 30 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/newsletter-confirmed/page.tsx
+30 -5
View File
@@ -40,6 +40,12 @@ export default function NewsletterConfirmedPage() {
>
Bestätigt!
</p>
<p
className="font-semibold text-h3 text-text-primary"
style={{ fontFamily: "var(--font-lora)" }}
>
Deine Newsletter-Anmeldung ist eingegangen.
</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">
@@ -54,10 +60,19 @@ export default function NewsletterConfirmedPage() {
<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 className="flex flex-col gap-2">
<li className="flex items-start gap-2">
<CheckIcon />
<span>Was beschäftigt mich gerade?</span>
</li>
<li className="flex items-start gap-2">
<CheckIcon />
<span>Was ist wirklich wichtig?</span>
</li>
<li className="flex items-start gap-2">
<CheckIcon />
<span>Worauf möchte ich meinen Fokus legen?</span>
</li>
</ul>
</div>
@@ -72,7 +87,7 @@ export default function NewsletterConfirmedPage() {
<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"
className="inline-flex items-center justify-center px-7 py-4 mt-4 rounded-sm bg-brand hover:bg-brand-hover active:scale-[0.97] transition-all font-bold text-h4 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>
@@ -83,3 +98,13 @@ export default function NewsletterConfirmedPage() {
</>
);
}
// Same checkmark used by PageBlocks.tsx's checklistImage block (and
// /lebensuhr's, /7-tage-klarheits-check's own checklists).
function CheckIcon() {
return (
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" className="shrink-0 mt-1">
<path d="M3 9.5l4 4L15 4" stroke="#f6a701" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}