From f973eccca6a902b5f1eb223091c1040f2c4ad286 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Sun, 19 Jul 2026 23:37:32 +0000
Subject: [PATCH] feat(todo-cards): show price next to the hero CTA
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The hero's "ToDo-Karten bestellen" button had no price anywhere near
it — a shopper had to scroll past the whole page to the Pricing
panel to find out what it costs. Adds a compact price line above
the button (same strikethrough+price style as ProductSpotlight),
fetched from the same "todo-karten" product Pricing.tsx already
reads further down.
---
 app/todo-cards/components/TodoKartenHero.tsx | 21 +++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/app/todo-cards/components/TodoKartenHero.tsx b/app/todo-cards/components/TodoKartenHero.tsx
index 5ad5f4b..1faba69 100644
--- a/app/todo-cards/components/TodoKartenHero.tsx
+++ b/app/todo-cards/components/TodoKartenHero.tsx
@@ -2,6 +2,8 @@ import Link from "next/link";
 import Image from "next/image";
 import { AddToCartButton } from "../../components/AddToCartButton";
 import { Reveal } from "../../components/Reveal";
+import { getProductBySlug } from "../../lib/payload";
+import { formatPrice, discountPercent } from "../../lib/format";
 
 const checklist = [
   "Klarer Fokus auf das, was wirklich zählt",
@@ -9,7 +11,14 @@ const checklist = [
   "Minimalistisch, analog, effektiv",
 ];
 
-export function TodoKartenHero() {
+// Same "todo-karten" product Pricing.tsx reads further down the page —
+// this is just a compact early teaser so the hero's CTA isn't asking for
+// a click without saying what it costs; the full price/VAT/shipping-time
+// detail still lives only in Pricing.tsx, not duplicated here.
+export async function TodoKartenHero() {
+  const product = await getProductBySlug("todo-karten");
+  const discount = product ? discountPercent(product.price, product.compareAtPrice) : null;
+
   return (
     <section className="bg-bg-base w-full overflow-hidden">
       {/* Same lg:-only structural exception as the Home Hero (see
@@ -81,6 +90,16 @@ export function TodoKartenHero() {
               ))}
             </ul>
 
+            {product && (
+              <div className="flex gap-2 items-baseline">
+                {discount !== null && (
+                  <p className="text-body text-text-muted line-through">{formatPrice(product.compareAtPrice!)}</p>
+                )}
+                <p className="font-bold text-h3 text-text-primary">{formatPrice(product.price)}</p>
+                <p className="text-label text-text-muted">inkl. MwSt.</p>
+              </div>
+            )}
+
             <AddToCartButton label="ToDo-Karten bestellen" />
           </div>
         </Reveal>