Marco
e4f0c66d7b
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>
74 lines
3.0 KiB
TypeScript
74 lines
3.0 KiB
TypeScript
import { Reveal } from "./Reveal";
|
|
|
|
export function Newsletter() {
|
|
return (
|
|
<section className="py-16 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, 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 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]">
|
|
<div className="-rotate-4 -scale-y-100">
|
|
<img
|
|
alt=""
|
|
src="/newsletter-icon.svg"
|
|
className="w-16 h-[3.438rem] block"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Heading + body */}
|
|
<div className="flex flex-col gap-4 flex-1 min-w-0 text-text-primary">
|
|
<p
|
|
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-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 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 — 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-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-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-label text-text-primary font-normal leading-normal">
|
|
Ich achte auf deine Daten. Kein Spam, jederzeit abbestellbar.
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</Reveal>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|