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

Add ToDo-Karten product page, fluid design tokens, and Navbar/Hero fixes

Browse Source 
New /todo-cards page (Hero, How-it-works, Focus, Testimonials, Pricing)
built with the fluid clamp() token system (app/lib/fluid.ts) and
scroll-reveal animations (app/components/Reveal.tsx), matching styling
consistency with /challenge's testimonial section.

Navbar: page-aware active state and anchor-link navigation from any
route (not just "/"), fixed logo click to actually navigate instead of
silently rewriting the URL, fluid nav text size, custom hash-scroll
handling for cross-page anchor links.

Hero: responsive breakpoint fix for the text/image split at Tablet
widths, entrance animation for the brand's orange dot, removed a red
dot artifact from hero.png.

Also includes prior uncommitted work on About/Blog/Newsletter/Footer
and the cart lib (app/lib/cart.ts).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-07-19 11:34:52 +00:00
parent 35670126ca
commit e4f0c66d7b
42 changed files with 1635 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Tools.tsx
+31 -24
View File
@@ -1,23 +1,21 @@
import Link from "next/link";
import { Reveal, RevealGroup, RevealItem } from "./Reveal";
const tools = [
{
icon: { src: "/icon-rocket.svg", w: "3.375rem", h: "4.122rem", transform: "-scale-y-100" },
pr: "3.375rem",
title: "Mini-Challenge",
description: "In 7 Tagen zu mehr Klarheit. Kleine Gewohnheiten, die Großes bewirken.",
cta: { label: "Starten", href: "/challenge" },
},
{
icon: { src: "/icon-todo.svg", w: "3rem", h: "3.879rem", transform: "-scale-y-100" },
pr: "2rem",
title: "ToDo-Karten",
description: "Das Werkzeug für Fokus im Alltag. bringe Struktur in deine Aufgaben und gewinne Zeit zurück.",
cta: { label: "Entdecken", href: "/werkzeuge" },
cta: { label: "Entdecken", href: "/todo-cards" },
},
{
icon: { src: "/icon-newsletter.svg", w: "3rem", h: "2.579rem", transform: "-rotate-4 -scale-y-100" },
pr: "2rem",
title: "Impulse & Tipps",
description: "Wöchentliche Impulse mit konkreten Ideen und erprobten Tipps für weniger Reibung und mehr Leichtigkeit.",
cta: { label: "Anmelden", href: "/newsletter" },
@@ -26,28 +24,28 @@ const tools = [
export function Tools() {
return (
<div id="werkzeuge" className="flex flex-col gap-[3rem] items-start pb-[4rem] pt-[2rem] w-full bg-[#f5f0e8]">
<div id="werkzeuge" className="flex flex-col gap-12 items-start pb-16 pt-8 w-full bg-bg-base">
{/* Section header */}
<div className="flex flex-col gap-[0.5rem] items-start px-[5rem] w-full whitespace-nowrap overflow-clip">
<p className="font-bold text-[#f6a701] text-[1.25rem]">
<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-[#222221] text-[1.75rem]"
className="font-semibold text-text-primary text-h-section"
style={{ fontFamily: "var(--font-lora)" }}
>
Werkzeuge für einen leichteren Alltag.
</p>
</div>
</Reveal>
{/* Tools grid */}
<div className="flex gap-[2.5rem] h-[12.5rem] items-center overflow-clip px-[5rem] w-full">
{/* 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) => (
<div
<RevealItem
key={tool.title}
className="flex flex-[1_0_0] gap-[2rem] h-full items-start min-w-px overflow-clip relative"
style={{ paddingRight: tool.pr }}
className="md:col-span-4 flex gap-8 items-start rounded-md transition-transform duration-300 hover:-translate-y-1"
>
{/* Icon */}
<div className="flex items-center justify-center shrink-0">
@@ -62,31 +60,40 @@ export function Tools() {
</div>
</div>
{/* Card content */}
<div
className="flex flex-[1_0_0] flex-col h-full items-start justify-between min-w-px overflow-clip p-[0.5rem] text-[#222221] [word-break:break-word]"
>
<div className="flex flex-col gap-[1rem] items-start w-full">
{/* 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-[1.75rem] w-full"
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-[1rem] w-full">
<p className="font-normal leading-[1.5rem] text-body w-full">
{tool.description}
</p>
</div>
<Link
href={tool.cta.href}
className="font-bold leading-normal text-[1rem] whitespace-nowrap hover:text-[#f6a701] transition-colors"
className="font-bold leading-normal text-body whitespace-nowrap hover:text-brand transition-colors"
>
→ {tool.cta.label}
</Link>
</div>
</div>
</RevealItem>
))}
</div>
</RevealGroup>
</div>
);