From 2b3868b605316954fdef09ef70a9d10df100f39e Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Sun, 30 Aug 2026 00:20:14 +0000
Subject: [PATCH] PDP hero: plain checkmarks for usps; spotlight image now
 links to PDP
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- product.usps rendered via STEP_ICONS[usp.icon] (checkCircle — a
  circled glyph), inconsistent with the plain checkmark every other
  feature-bullet list on the site uses (der-eine's own original
  Hero.tsx, RichText/PageBlocks' own checklists). Reused PageBlocks'
  CheckIcon (now exported) instead — usp.icon stays stored, just
  unused for this particular list (reported 2026-08-30).
- ProductSpotlight's image had no link at all — every other product
  card (ProductGrid, RelatedProducts, MerklisteGrid, via ProductCard)
  already makes its image clickable. Same Link-wraps-only-the-image
  pattern as ProductCard.tsx (WishlistButton stays an unnested sibling).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013Eg6h91yngXmSnM51wxXM8
---
 app/components/PageBlocks.tsx       |  2 +-
 app/components/ProductBlocks.tsx    | 23 +++++++++++----------
 app/components/ProductSpotlight.tsx | 31 ++++++++++++++++++++++-------
 3 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/app/components/PageBlocks.tsx b/app/components/PageBlocks.tsx
index d67d6cf..c7433d3 100644
--- a/app/components/PageBlocks.tsx
+++ b/app/components/PageBlocks.tsx
@@ -274,7 +274,7 @@ export function renderPageBlockSync(block: PageBlock): React.ReactNode {
 
 // Same checkmark used by /lebensuhr's and /7-tage-klarheits-check's own
 // checklists.
-function CheckIcon() {
+export 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" />
diff --git a/app/components/ProductBlocks.tsx b/app/components/ProductBlocks.tsx
index 6b6b089..dd226e8 100644
--- a/app/components/ProductBlocks.tsx
+++ b/app/components/ProductBlocks.tsx
@@ -17,7 +17,7 @@ import { Reveal } from "./Reveal";
 import { ProductGallery } from "./ProductGallery";
 import { ProductBadge } from "./ProductBadge";
 import { STEP_ICONS } from "./icons/StepIcons";
-import { renderPageBlockSync } from "./PageBlocks";
+import { renderPageBlockSync, CheckIcon } from "./PageBlocks";
 import { TestimonialsGrid } from "./TestimonialsGrid";
 
 // Renders a Payload Products document's `layout` blocks field — same
@@ -260,17 +260,20 @@ function ProductHero({ product, shipping, taxRate, kleinunternehmer, body }: Pro
 
             {body ? <RichText content={body} /> : null}
 
+            {/* Plain checkmark, not usp.icon's own STEP_ICONS lookup — a
+                circled checkCircle glyph didn't match the plain checkmark
+                every other feature-bullet list on the site uses (der-eine's
+                original Hero.tsx, RichText.tsx's/PageBlocks.tsx's own
+                checklists) — reported 2026-08-30. usp.icon is still stored
+                (may be used elsewhere later), just not used for this list. */}
             {product.usps.length > 0 && (
               <ul className="flex flex-col gap-2 w-full">
-                {product.usps.map((usp, i) => {
-                  const Icon = STEP_ICONS[usp.icon];
-                  return (
-                    <li key={i} className="flex items-center gap-3">
-                      {Icon && <span className="flex items-center justify-center size-6 shrink-0 text-brand">{Icon()}</span>}
-                      <p className="text-body-sm text-text-body">{usp.text}</p>
-                    </li>
-                  );
-                })}
+                {product.usps.map((usp, i) => (
+                  <li key={i} className="flex items-start gap-[0.625rem]">
+                    <CheckIcon />
+                    <p className="flex-1 text-body-sm text-text-body">{usp.text}</p>
+                  </li>
+                ))}
               </ul>
             )}
 
diff --git a/app/components/ProductSpotlight.tsx b/app/components/ProductSpotlight.tsx
index d8d8b14..921853c 100644
--- a/app/components/ProductSpotlight.tsx
+++ b/app/components/ProductSpotlight.tsx
@@ -104,13 +104,30 @@ export async function ProductSpotlight() {
           already narrow there. */}
       <Reveal className="max-w-[75rem] sm:max-w-[32rem] lg:max-w-[75rem] mx-auto rounded-md flex flex-col lg:flex-row gap-8 lg:gap-12 items-center p-6 sm:p-10">
         <div className="group relative w-full lg:w-[23.75rem] lg:shrink-0 aspect-[410/227] rounded-sm overflow-hidden">
-          <Image
-            src={image}
-            alt={product.name}
-            fill
-            sizes="(min-width: 1024px) 380px, (min-width: 640px) 512px, 100vw"
-            className="object-cover transition-transform duration-500 group-hover:scale-105"
-          />
+          {/* Link wraps only the image, not the whole card — WishlistButton
+              below is its own interactive element and stays a sibling, same
+              "no nested interactive elements" reasoning as ProductCard.tsx's
+              own image link (reported 2026-08-30: spotlight's image wasn't
+              clickable at all before this, unlike every product-grid card). */}
+          {product.href ? (
+            <Link href={product.href} aria-label={product.name} className="absolute inset-0 z-0">
+              <Image
+                src={image}
+                alt={product.name}
+                fill
+                sizes="(min-width: 1024px) 380px, (min-width: 640px) 512px, 100vw"
+                className="object-cover transition-transform duration-500 group-hover:scale-105"
+              />
+            </Link>
+          ) : (
+            <Image
+              src={image}
+              alt={product.name}
+              fill
+              sizes="(min-width: 1024px) 380px, (min-width: 640px) 512px, 100vw"
+              className="object-cover transition-transform duration-500 group-hover:scale-105"
+            />
+          )}
           <div className="absolute top-3 left-3">
             <ProductBadge product={product} />
           </div>