From bd1b73e304790ab0d920ff70caf353875251d687 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Fri, 28 Aug 2026 12:53:51 +0000
Subject: [PATCH] Align newsletter-confirmed page visually with transactional
 page family

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
---
 app/newsletter-confirmed/page.tsx | 35 ++++++++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/app/newsletter-confirmed/page.tsx b/app/newsletter-confirmed/page.tsx
index deff97a..32548b1 100644
--- a/app/newsletter-confirmed/page.tsx
+++ b/app/newsletter-confirmed/page.tsx
@@ -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>
+  );
+}