Marco
bca29ab7a3
- Newsletter card icon: fixed an aspect-ratio distortion bug (w-16 maps to this project's fluid --spacing-16, which floors to 40px below 768px, paired with a fixed 55px height — squished the icon on mobile). Same root cause existed in NewsletterModal's envelope icon; that one's now just hidden below md: instead per feedback. - Hero: subtitle sized down and CTA checkmark icon scaled to match below lg:, social proof text always wraps below the avatars there instead of only when it doesn't fit. - Werkzeuge connector arrows (todo-cards/newsletter/challenge HowItWorks): object-contain added — the SVG has preserveAspectRatio="none" and was stretching to fill the square mobile box instead of keeping its thin-arrow shape. - Challenge bottom CTA: icon now stacks above the copy, centered, below lg: to match the Home Newsletter card's pattern. - Homepage Werkzeuge icons: smaller below md: to match the (fluid-floor) text size next to them. - Blog detail "Passend dazu" card: the fixed w-[19rem] title column plus "Entdecken" sharing its row overflowed on mobile; stacked below sm: instead, with a little top margin on "Entdecken". - Todo-Karten checklist checkmarks: recolored brand-orange (icon-check .svg's fill lives in an internal CSS var that can't be overridden from outside an <img>-loaded SVG, so switched to an inline SVG) and top-aligned instead of vertically centered. - AddToCartButton: added whitespace-nowrap to the stacked-label grid (used to reserve button width across all possible label texts) — one of those labels wrapping to two lines on a narrow w-full button was inflating the row height for whichever label is actually showing, leaving a tall empty gap under "Ausverkauft".
88 lines
4.2 KiB
TypeScript
88 lines
4.2 KiB
TypeScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { Reveal, RevealGroup, RevealItem } from "./Reveal";
|
|
import { getWerkzeugeCards } from "../lib/payload";
|
|
|
|
// Content now lives in Payload (WerkzeugeCards collection). Icons use a
|
|
// uniform box here (object-contain) rather than the previous hardcoded
|
|
// per-card hand-tuned width/height/rotation — that only made sense for a
|
|
// fixed, known set of 3 SVGs authored upside-down for a specific
|
|
// hand-drawn look, which doesn't generalize to a real CMS field. The 3
|
|
// original icons were re-exported pre-flipped/rotated as PNGs so they
|
|
// still display correctly with plain object-contain.
|
|
export async function Tools() {
|
|
const tools = await getWerkzeugeCards();
|
|
if (tools.length === 0) return null;
|
|
|
|
return (
|
|
<div id="werkzeuge" className="flex flex-col gap-12 items-start pb-16 pt-8 w-full bg-bg-base">
|
|
|
|
{/* Section header */}
|
|
<Reveal className="flex flex-col gap-2 items-start px-[var(--layout-padding-x)] w-full">
|
|
<p className="font-bold text-brand text-h-small">
|
|
Meine Werkzeuge
|
|
</p>
|
|
<p
|
|
className="font-semibold text-text-primary text-h-section"
|
|
style={{ fontFamily: "var(--font-lora)" }}
|
|
>
|
|
Werkzeuge für einen leichteren Alltag.
|
|
</p>
|
|
</Reveal>
|
|
|
|
{/* Tools grid — 3 cols md+, stacked below md; internal icon+text layout
|
|
stays horizontal at every size, only the outer span changes */}
|
|
<RevealGroup className="grid grid-cols-1 md:grid-cols-12 gap-10 md:gap-[var(--layout-grid-gap)] px-[var(--layout-padding-x)] w-full">
|
|
{tools.map((tool) => (
|
|
<RevealItem
|
|
key={tool.id}
|
|
className="md:col-span-4 flex gap-8 items-start rounded-md transition-transform duration-300 hover:-translate-y-1"
|
|
>
|
|
{/* Icon — uniform box, pre-flipped/rotated source asset.
|
|
size-14 (56px) is a fixed value at every width (14 isn't
|
|
one of this project's fluid spacing-scale steps) — smaller
|
|
below md: so it doesn't dwarf the title/description text,
|
|
which does shrink toward its own fluid floor there. */}
|
|
<div className="relative flex items-center justify-center shrink-0 size-11 md:size-14">
|
|
<Image alt="" src={tool.icon} fill sizes="(min-width: 768px) 56px, 44px" className="object-contain" />
|
|
</div>
|
|
|
|
{/* Card content — self-stretch + h-full + justify-between so
|
|
the CTA always sits at the same bottom edge across all 3
|
|
cards, regardless of how many lines the description wraps
|
|
to. The parent RevealItem's items-start (needed to keep the
|
|
icon top-aligned, not stretched) otherwise stops this one
|
|
child from filling the grid-equalized row height — matches
|
|
the Figma card-content spec (h-full items-start
|
|
justify-between), which the earlier implementation had
|
|
dropped. gap-4 alongside justify-between guarantees a
|
|
minimum text→CTA gap even for the tallest card (the one
|
|
that defines the row height, and so has ~zero leftover
|
|
space for justify-between to distribute on its own). */}
|
|
<div className="flex flex-1 flex-col self-stretch h-full justify-between items-start gap-4 min-w-0 text-text-primary [word-break:break-word]">
|
|
<div className="flex flex-col gap-4 items-start w-full">
|
|
<p
|
|
className="font-semibold leading-normal text-h-section w-full"
|
|
style={{ fontFamily: "var(--font-lora)" }}
|
|
>
|
|
{tool.title}
|
|
</p>
|
|
<p className="font-normal leading-[1.5rem] text-body w-full">
|
|
{tool.description}
|
|
</p>
|
|
</div>
|
|
<Link
|
|
href={tool.ctaHref}
|
|
className="font-bold leading-normal text-body whitespace-nowrap hover:text-brand transition-colors"
|
|
>
|
|
→ {tool.ctaLabel}
|
|
</Link>
|
|
</div>
|
|
</RevealItem>
|
|
))}
|
|
</RevealGroup>
|
|
|
|
</div>
|
|
);
|
|
}
|