Marco
2505a87717
Strategy: one layout breakpoint at lg (1024px), clamp() for fluid type. Navbar: hamburger menu (animated ✕) with max-h dropdown, resize-close, h-20 mobile / h-[6.25rem] desktop, blur triggers on scroll or menu-open. Hero: flex-col→lg:flex-row, clamp(2rem,5vw,4rem) heading, background-image scales responsively, gradient mask via .hero-mask only at lg+ in CSS. Divider: flex-wrap + gap-y for smaller screens. Tools: grid-cols-1→md:2→lg:3, removed fixed height and per-card paddingRight. Blog: featured flex-col→lg:flex-row, secondary flex-col→md:flex-row, excerpt hidden on mobile secondary cards to save space. About: flex-col→lg:flex-row, clamp on quote size, min-h-[18rem] for photo. Newsletter: flex-col→lg:flex-row, input+button stack on xs / row on sm+. Footer: flex-col→lg:flex-row, flex-wrap on legal links. globals.css: scroll-padding-top 5rem mobile / 6.25rem desktop. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
57 lines
2.6 KiB
TypeScript
57 lines
2.6 KiB
TypeScript
export function Newsletter() {
|
|
return (
|
|
<section className="py-10 lg:py-16 w-full">
|
|
<div className="px-4 md:px-8 lg:px-[5rem] w-full">
|
|
|
|
{/* Card: stacked on mobile, side-by-side on lg+ */}
|
|
<div className="bg-[#f8f3ec] flex flex-col lg:flex-row gap-8 lg:gap-[3.5rem] items-start lg:items-center px-6 lg:px-8 py-8 lg:py-0 rounded-xl w-full">
|
|
|
|
{/* Left: copy — full width mobile, fixed 612px desktop */}
|
|
<div className="flex gap-6 lg:gap-8 items-start w-full lg:w-[38.25rem] lg:shrink-0 lg:py-4">
|
|
<div className="flex items-center justify-center shrink-0 w-[3.5rem] h-[3.5rem] lg:w-[4.23rem] lg:h-[3.71rem]">
|
|
<div className="-rotate-4 -scale-y-100">
|
|
<img alt="" src="/newsletter-icon.svg" className="w-12 lg:w-16 h-auto block" />
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-3 lg:gap-4 flex-1 min-w-0 text-[#222221]">
|
|
<p
|
|
className="font-semibold leading-normal"
|
|
style={{ fontFamily: "var(--font-lora)", fontSize: "clamp(1.25rem, 2.5vw, 1.75rem)" }}
|
|
>
|
|
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 — full width on mobile */}
|
|
<div className="flex flex-1 items-center lg:self-stretch w-full min-w-0">
|
|
<div className="flex flex-1 flex-col gap-4 min-w-0 w-full">
|
|
<div className="flex flex-col sm:flex-row gap-3 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-5 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>
|
|
<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>
|
|
);
|
|
}
|