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/Newsletter.tsx
+20 -18
View File
@@ -1,15 +1,17 @@
import { Reveal } from "./Reveal";
export function Newsletter() {
return (
<section className="py-16 w-full">
{/* Outer section padding — same 80px horizontal as all other sections */}
<div className="px-[5rem] w-full">
{/* Outer section padding — same fluid horizontal padding as all other sections */}
<div className="px-[var(--layout-padding-x)] w-full">
{/* Rounded card: cream bg, 32px inner padding, 56px gap between copy and form */}
<div className="bg-[#f8f3ec] flex gap-[3.5rem] items-center px-8 rounded-xl w-full">
{/* Rounded card: cream bg, stacks below md */}
<Reveal className="bg-bg-muted flex flex-col md:flex-row gap-8 md:gap-12 items-center px-8 py-8 md:py-0 rounded-md w-full">
{/* Left: copy — fixed width 612px so form always gets the remaining flex-1 */}
<div className="flex gap-8 items-start py-4 shrink-0 w-[38.25rem]">
{/* Left: copy — fixed width from md+ so the form always gets the remaining space */}
<div className="flex gap-8 items-start w-full md:w-[var(--newsletter-copy-width)] md:py-4 md:shrink-0">
{/* Decorative envelope icon, tilted -4° as per design */}
<div className="flex items-center justify-center shrink-0 w-[4.23rem] h-[3.71rem]">
@@ -23,48 +25,48 @@ export function Newsletter() {
</div>
{/* Heading + body */}
<div className="flex flex-col gap-4 flex-1 min-w-0 text-[#222221]">
<div className="flex flex-col gap-4 flex-1 min-w-0 text-text-primary">
<p
className="font-semibold text-[1.75rem] leading-normal"
className="font-semibold text-h-section leading-normal"
style={{ fontFamily: "var(--font-lora)" }}
>
Starte mit einer Woche voller Klarheit
</p>
<p className="font-normal text-[1rem] leading-6">
<p className="font-normal text-body leading-6">
Melde dich zum Newsletter an und erhalte die 7-Tage-Challenge,
mit der du durch mehr Struktur weniger Stress spürst.
</p>
</div>
</div>
{/* Right: form — takes remaining space, centered vertically */}
<div className="flex flex-1 items-center self-stretch min-w-0">
<div className="flex flex-1 flex-col gap-4 min-w-0">
{/* Right: form — takes remaining space, centered vertically from md+ */}
<div className="flex w-full md:flex-1 items-center md:self-stretch min-w-0">
<div className="flex flex-1 flex-col gap-4 min-w-0 w-full">
{/* Input + submit button side by side */}
<div className="flex gap-4 items-stretch w-full">
{/* Input + submit button — stacked below md, side by side from md+ */}
<div className="flex flex-col md:flex-row gap-4 items-stretch w-full">
<input
type="email"
placeholder="Deine E-Mail-Adresse"
className="flex-1 min-w-0 bg-white border border-[#d9d9d9] rounded-lg px-6 py-3 text-[1rem] text-[#868686] font-normal outline-none focus:border-[#f6a701] transition-colors"
className="flex-1 min-w-0 bg-bg-white border border-border rounded-sm px-6 py-3 text-body text-text-muted font-normal outline-none focus:border-brand transition-colors"
/>
<button
type="submit"
className="shrink-0 bg-[#f6a701] rounded-lg px-5 py-3 font-bold text-[1.125rem] text-[#222221] tracking-[0.18px] whitespace-nowrap hover:brightness-95 transition-all"
className="shrink-0 bg-brand rounded-sm px-5 py-3 font-bold text-h4 text-text-primary tracking-[0.18px] whitespace-nowrap hover:brightness-95 active:scale-[0.97] transition-all"
>
Jetzt anmelden
</button>
</div>
{/* Privacy note */}
<p className="text-[0.75rem] text-[#222221] font-normal leading-normal">
<p className="text-label text-text-primary font-normal leading-normal">
Ich achte auf deine Daten. Kein Spam, jederzeit abbestellbar.
</p>
</div>
</div>
</div>
</Reveal>
</div>
</section>
);