Marco
6eb357650c
PNG has hard alpha cutoff edges — adds left (0%→14%) and top (0%→10%) linear-gradient masks via mask-composite:intersect so both edges fade simultaneously into the cream background, matching Figma's seamless look. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
82 lines
3.4 KiB
TypeScript
82 lines
3.4 KiB
TypeScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
|
|
export function Hero() {
|
|
return (
|
|
<section className="bg-[#f5f0e8] flex items-center justify-between relative w-full overflow-hidden">
|
|
|
|
{/* Left: text content */}
|
|
<div className="flex flex-[1_0_0] flex-col gap-[1.75rem] items-start min-w-px overflow-clip pl-[5rem] pr-[2.5rem] relative">
|
|
|
|
{/* Heading — w-[min-content] forces wrap at widest word ("Produktivität") */}
|
|
<p
|
|
className="font-semibold leading-[0] min-w-full shrink-0 text-[0px] text-black w-[min-content] [word-break:break-word]"
|
|
style={{ fontFamily: "var(--font-playfair)" }}
|
|
>
|
|
<span className="leading-[4.5rem] text-[4rem]">Produktivität darf sich leicht anfühlen</span>
|
|
<span className="leading-[4.5rem] text-[4rem] text-[#fdb705]">.</span>
|
|
</p>
|
|
|
|
{/* Subheading */}
|
|
<p className="font-semibold leading-[2.375rem] min-w-full shrink-0 text-[#222221] text-[1.5rem] w-[min-content] [word-break:break-word] not-italic">
|
|
Für Menschen mit Familie, Verantwortung und zu wenig Zeit
|
|
</p>
|
|
|
|
{/* CTA */}
|
|
<Link
|
|
href="/challenge"
|
|
className="flex gap-[1rem] items-center justify-center overflow-clip px-[1.5rem] py-[0.75rem] rounded-[0.5rem] shrink-0 bg-[#f6a701] hover:brightness-95 transition-all"
|
|
>
|
|
<span className="font-semibold leading-[2.375rem] text-[#222221] text-[1.375rem] whitespace-nowrap not-italic">
|
|
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-[0.75rem] items-start overflow-clip shrink-0 w-full">
|
|
{/* Avatars — gap 2px, not overlapping */}
|
|
<div className="flex gap-[0.125rem] items-center shrink-0">
|
|
{["/avatar-1.jpg", "/avatar-2.jpg", "/avatar-3.jpg"].map((src, i) => (
|
|
<div
|
|
key={i}
|
|
className="relative w-[2.8125rem] h-[2.8125rem] rounded-full overflow-hidden shrink-0"
|
|
>
|
|
<Image src={src} alt="" fill className="object-cover" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
<p className="flex-[1_0_0] font-normal leading-[1.5rem] text-[#222221] text-[1rem] [word-break:break-word]">
|
|
10.000+ Menschen vertrauen einfach-produktiv
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: hero image — gradient mask fades left + top edges into the cream background */}
|
|
<div
|
|
className="h-[36.4375rem] shrink-0 w-[55.4375rem]"
|
|
style={{
|
|
backgroundImage: "url('/hero.png')",
|
|
backgroundSize: "cover",
|
|
backgroundPosition: "center",
|
|
backgroundRepeat: "no-repeat",
|
|
WebkitMaskImage:
|
|
"linear-gradient(to right, transparent 0%, black 14%), linear-gradient(to bottom, transparent 0%, black 10%)",
|
|
WebkitMaskComposite: "destination-in",
|
|
maskImage:
|
|
"linear-gradient(to right, transparent 0%, black 14%), linear-gradient(to bottom, transparent 0%, black 10%)",
|
|
maskComposite: "intersect",
|
|
}}
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
</section>
|
|
);
|
|
}
|