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>
71 lines
2.9 KiB
TypeScript
71 lines
2.9 KiB
TypeScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
|
|
export function Hero() {
|
|
return (
|
|
<section className="bg-[#f5f0e8] flex flex-col lg:flex-row items-center justify-between w-full overflow-hidden">
|
|
|
|
{/* Left: text content */}
|
|
<div className="flex flex-col gap-6 lg:gap-[1.75rem] items-start w-full lg:flex-[1_0_0] lg:min-w-px px-4 md:px-8 lg:pl-[5rem] lg:pr-[2.5rem] pt-10 pb-8 lg:py-0">
|
|
|
|
{/* Heading — fluid size: 2rem mobile → 4rem desktop */}
|
|
<p
|
|
className="font-semibold leading-[1.1] text-black w-full [word-break:break-word]"
|
|
style={{ fontFamily: "var(--font-playfair)", fontSize: "clamp(2rem, 5vw, 4rem)" }}
|
|
>
|
|
<span>Produktivität darf sich leicht anfühlen</span>
|
|
<span style={{ color: "#fdb705" }}>.</span>
|
|
</p>
|
|
|
|
{/* Subheading — fluid: 1.125rem → 1.5rem */}
|
|
<p
|
|
className="font-semibold text-[#222221] w-full [word-break:break-word]"
|
|
style={{ fontSize: "clamp(1.125rem, 2vw, 1.5rem)", lineHeight: "1.4" }}
|
|
>
|
|
Für Menschen mit Familie, Verantwortung und zu wenig Zeit
|
|
</p>
|
|
|
|
{/* CTA */}
|
|
<Link
|
|
href="/challenge"
|
|
className="flex gap-4 items-center justify-center overflow-hidden px-6 py-3 rounded-lg shrink-0 bg-[#f6a701] hover:brightness-95 transition-all"
|
|
>
|
|
<span className="font-semibold text-[#222221] text-[1.125rem] lg:text-[1.375rem] whitespace-nowrap">
|
|
Starte mit der 7-Tage-Challenge
|
|
</span>
|
|
<div className="relative h-[1.1875rem] w-[1.5625rem] shrink-0">
|
|
<img alt="" src="/icon-check.svg" className="absolute inset-0 w-full h-full" />
|
|
</div>
|
|
</Link>
|
|
|
|
{/* Social proof */}
|
|
<div className="flex gap-3 items-center shrink-0 w-full">
|
|
<div className="flex gap-0.5 items-center shrink-0">
|
|
{["/avatar-1.jpg", "/avatar-2.jpg", "/avatar-3.jpg"].map((src, i) => (
|
|
<div key={i} className="relative w-10 h-10 lg:w-[2.8125rem] lg:h-[2.8125rem] rounded-full overflow-hidden shrink-0">
|
|
<Image src={src} alt="" fill className="object-cover" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
<p className="font-normal leading-6 text-[#222221] text-[0.9rem] lg:text-[1rem] [word-break:break-word]">
|
|
10.000+ Menschen vertrauen einfach-produktiv
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: hero image — full width on mobile, fixed column on desktop */}
|
|
<div
|
|
className="hero-mask w-full h-[260px] md:h-[340px] lg:h-[36.4375rem] lg:shrink-0 lg:w-[55.4375rem]"
|
|
style={{
|
|
backgroundImage: "url('/hero.png')",
|
|
backgroundSize: "cover",
|
|
backgroundPosition: "center",
|
|
backgroundRepeat: "no-repeat",
|
|
}}
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
</section>
|
|
);
|
|
}
|