Marco
11b21b23cf
Cream card (bg-[#f8f3ec], rounded-xl) inside section padding of 80px. Left copy column has fixed w-[38.25rem] (612px) with icon (-rotate-4) and Lora heading; right form column is flex-1 with email input + orange submit button side by side, privacy note below. Input and button share items-stretch so they align to equal height. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
72 lines
2.8 KiB
TypeScript
72 lines
2.8 KiB
TypeScript
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">
|
|
|
|
{/* 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">
|
|
|
|
{/* 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]">
|
|
|
|
{/* 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">
|
|
<img
|
|
alt=""
|
|
src="/newsletter-icon.png"
|
|
className="w-16 h-[3.438rem] block"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Heading + body */}
|
|
<div className="flex flex-col gap-4 flex-1 min-w-0 text-[#222221]">
|
|
<p
|
|
className="font-semibold text-[1.75rem] leading-normal"
|
|
style={{ fontFamily: "var(--font-lora)" }}
|
|
>
|
|
Starte mit einer Woche voller Klarheit
|
|
</p>
|
|
<p className="font-normal text-[1rem] 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">
|
|
|
|
{/* Input + submit button side by side */}
|
|
<div className="flex 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"
|
|
/>
|
|
<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"
|
|
>
|
|
Jetzt anmelden
|
|
</button>
|
|
</div>
|
|
|
|
{/* Privacy note */}
|
|
<p className="text-[0.75rem] text-[#222221] font-normal leading-normal">
|
|
Ich achte auf deine Daten. Kein Spam, jederzeit abbestellbar.
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|