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

Add product image gallery, harden Klaro border reset, remove attribution link

Browse Source 
ProductGallery.tsx (main image + thumbnail strip) wired into
TodoKartenHero.tsx, only replacing the static hero photo once a
product actually has extra gallery photos — no visual change
otherwise. Backend field: Products.gallery (see payload repo).

Klaro's hard black border was still showing after the previous
color-only pass — the targeted border:none rule wasn't enough, so
this blanket-resets border/outline on every .klaro descendant and
re-adds only the shadow this theme actually wants. Also disables the
"Realisiert mit Klaro!" attribution link (BSD-3-Clause has no
on-page-attribution requirement, Klaro's own disablePoweredBy flag
covers this cleanly).

Updates the frontend README with the gallery + Klaro fixes.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-08-01 21:41:23 +00:00
parent f6b001dd11
commit 417bbd430e
7 changed files with 151 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/todo-cards/components/TodoKartenHero.tsx
+27 -14
View File
@@ -1,6 +1,7 @@
import Link from "next/link";
import Image from "next/image";
import { AddToCartButton } from "../../components/AddToCartButton";
import { ProductGallery } from "../../components/ProductGallery";
import { Reveal } from "../../components/Reveal";
import { getProductBySlug, getShippingSettings, getDefaultTaxRatePercent, getKleinunternehmer } from "../../lib/payload";
import { formatPrice, discountPercent } from "../../lib/format";
@@ -163,20 +164,32 @@ export async function TodoKartenHero() {
(not the image) keeps the zoom from spilling past the rounded
corners. delay={0.15} matches the Home Hero's text→image
stagger — both fire ~immediately since Hero is already in the
initial viewport, so this doubles as the page's entrance. */}
<Reveal
className="order-2 lg:order-none lg:col-span-7 group relative w-full aspect-[3/2] rounded-md overflow-hidden"
delay={0.15}
>
<Image
src="/hero-todo-karten.png"
alt="ToDo-Karten in Anwendung, mit Notizbuch und Kaffee"
fill
priority
sizes="(min-width: 1024px) 58vw, 100vw"
className="object-cover transition-transform duration-500 group-hover:scale-105"
/>
</Reveal>
initial viewport, so this doubles as the page's entrance.
Falls back to the curated static hero photo (a lifestyle shot,
"in Anwendung, mit Notizbuch und Kaffee" — deliberately not
just the plain catalog image) whenever this product has no
`gallery` entries — the common case, and zero visual change
from before ProductGallery existed. Only switches to the
gallery once someone actually adds extra photos in the admin. */}
{product && product.gallery.length > 0 ? (
<Reveal className="order-2 lg:order-none lg:col-span-7" delay={0.15}>
<ProductGallery image={product.image} gallery={product.gallery} alt={product.name} />
</Reveal>
) : (
<Reveal
className="order-2 lg:order-none lg:col-span-7 group relative w-full aspect-[3/2] rounded-md overflow-hidden"
delay={0.15}
>
<Image
src="/hero-todo-karten.png"
alt="ToDo-Karten in Anwendung, mit Notizbuch und Kaffee"
fill
priority
sizes="(min-width: 1024px) 58vw, 100vw"
className="object-cover transition-transform duration-500 group-hover:scale-105"
/>
</Reveal>
)}
</div>
</section>
);