Marco
89 lines
3.7 KiB
TypeScript
89 lines
3.7 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { Reveal } from "./Reveal";
|
|
|
|
type NewsletterProps = {
|
|
title?: ReactNode;
|
|
description?: string;
|
|
};
|
|
|
|
/**
|
|
* Reused as-is (same bordered/muted panel + icon-decoration + form
|
|
* pattern) on both Home and /newsletter (the "Impulse & Tipps" page) —
|
|
* their Figma frames use the exact same newsletter-inner component
|
|
* instance, just with different copy, so title/description are props
|
|
* instead of a second near-duplicate component.
|
|
*/
|
|
export function Newsletter({
|
|
title = <>Starte mit einer Woche voller Klarheit<span className="text-brand">.</span></>,
|
|
description = "Melde dich zum Newsletter an und erhalte die 7-Tage-Challenge, mit der du durch mehr Struktur weniger Stress spürst.",
|
|
}: NewsletterProps = {}) {
|
|
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)" }}
|
|
>
|
|
{title}
|
|
</p>
|
|
<p className="font-normal text-body leading-6">
|
|
{description}
|
|
</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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-muted"
|
|
>
|
|
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>
|
|
);
|
|
}
|