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/Footer.tsx
+12 -12
View File
@@ -9,43 +9,43 @@ const links = [
export function Footer() {
return (
<footer className="bg-[#111] flex flex-col items-center justify-end w-full mt-auto">
<footer className="bg-bg-dark flex flex-col items-center justify-end w-full mt-auto">
{/* 3px top divider — #30302c, not a border */}
{/* 3px top divider — not a border */}
<div className="bg-[#30302c] h-[3px] w-full shrink-0" />
{/* Footer inner — max-width 1280px, centered */}
<div className="flex flex-col items-start w-full max-w-[1280px] py-4">
<div className="flex flex-col items-center w-full max-w-[1280px] py-8 md:py-4">
{/* Three columns: logo | @handle | links */}
<div className="flex items-center justify-between px-16 w-full">
{/* Three groups: logo | @handle | links — stacked + centered below md */}
<div className="flex flex-col md:flex-row items-center md:justify-between gap-6 md:gap-0 px-8 md:px-16 w-full">
{/* Logo: "einfach produktiv" white + "." gold */}
<div className="flex items-center p-2 shrink-0">
<span
className="font-semibold text-white text-[1.25rem] leading-normal whitespace-nowrap"
className="font-semibold text-bg-white text-h-small leading-normal whitespace-nowrap"
style={{ fontFamily: "var(--font-lora)" }}
>
einfach produktiv
<span style={{ color: "#fdb705" }}>.</span>
<span className="text-brand">.</span>
</span>
</div>
{/* Social handle — Lora Regular (weight 400), 24px */}
{/* Social handle — Lora Regular (weight 400) */}
<p
className="font-normal text-white text-[1.5rem] text-center leading-[1.2] whitespace-nowrap shrink-0"
className="font-normal text-bg-white text-h-small text-center leading-[1.2] whitespace-nowrap shrink-0"
style={{ fontFamily: "var(--font-lora)", fontWeight: 400 }}
>
@einfach.produktiv
</p>
{/* Legal links — Inter Regular 14px, gap 24px */}
<div className="flex items-start gap-6 shrink-0">
{/* Legal links — wrap + center below md instead of a rigid row */}
<div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 shrink-0">
{links.map((link) => (
<Link
key={link.label}
href={link.href}
className="font-normal text-white text-[0.875rem] leading-[1.5] whitespace-nowrap hover:text-[#f6a701] transition-colors"
className="font-normal text-bg-white text-body-sm leading-[1.5] whitespace-nowrap hover:text-brand transition-colors"
>
{link.label}
</Link>