fix(Hero): exact Figma structure — w-[min-content] heading, 2px avatar gap, correct spans
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marco
+39
-37
@@ -1,67 +1,69 @@
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
const avatars = [
|
||||
{ src: "/avatar-1.jpg", alt: "Nutzer 1" },
|
||||
{ src: "/avatar-2.jpg", alt: "Nutzer 2" },
|
||||
{ src: "/avatar-3.jpg", alt: "Nutzer 3" },
|
||||
];
|
||||
|
||||
export function Hero() {
|
||||
return (
|
||||
<section className="bg-[#f5f0e8] flex items-center justify-between overflow-hidden">
|
||||
<section className="bg-[#f5f0e8] flex items-center justify-between relative w-full overflow-hidden">
|
||||
|
||||
{/* Left: text content */}
|
||||
<div className="flex flex-col gap-[1.75rem] pl-[5rem] pr-[2.5rem] flex-[1_0_0] min-w-0 overflow-clip">
|
||||
<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">
|
||||
|
||||
<h1
|
||||
className="text-[4rem] font-semibold leading-[4.5rem] text-black"
|
||||
{/* 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)" }}
|
||||
>
|
||||
Produktivität darf sich leicht anfühlen
|
||||
<span className="text-[#fdb705]">.</span>
|
||||
</h1>
|
||||
<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>
|
||||
|
||||
<p className="text-[1.5rem] font-semibold text-[#222221] leading-[2.375rem]">
|
||||
{/* 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>
|
||||
|
||||
<div>
|
||||
<Link
|
||||
href="/challenge"
|
||||
className="inline-flex items-center gap-[1rem] px-[1.5rem] py-[0.75rem] rounded-[0.5rem] bg-[#f6a701] text-[1.375rem] font-semibold text-[#222221] hover:brightness-95 transition-all"
|
||||
>
|
||||
{/* 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
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src="/icon-check.svg" alt="" width={25} height={19} className="shrink-0" />
|
||||
</Link>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<div className="flex items-center gap-[0.75rem]">
|
||||
<div className="flex items-center">
|
||||
{avatars.map((avatar, i) => (
|
||||
{/* 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={avatar.src}
|
||||
className="relative w-[2.8125rem] h-[2.8125rem] rounded-full overflow-hidden border-2 border-[#f5f0e8] shrink-0"
|
||||
style={{ marginLeft: i === 0 ? 0 : "-0.625rem" }}
|
||||
key={i}
|
||||
className="relative w-[2.8125rem] h-[2.8125rem] rounded-full overflow-hidden shrink-0"
|
||||
>
|
||||
<Image src={avatar.src} alt={avatar.alt} fill className="object-cover" />
|
||||
<Image src={src} alt="" fill className="object-cover" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-[1rem] text-[#222221] leading-[1.5rem]">
|
||||
<span className="font-semibold">10.000+</span> Menschen vertrauen einfach-produktiv
|
||||
<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 — fixed Figma dimensions, drives section height */}
|
||||
<div className="relative shrink-0 w-[55.4375rem] h-[36.4375rem]">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
{/* Right: hero image — fixed Figma dimensions drive section height */}
|
||||
<div className="h-[36.4375rem] relative shrink-0 w-[55.4375rem]">
|
||||
<img
|
||||
src="/hero.jpg"
|
||||
alt="Notizbuch mit Tagesplan und Kaffee"
|
||||
className="absolute inset-0 w-full h-full object-cover object-center"
|
||||
src="/hero.jpg"
|
||||
className="absolute inset-0 max-w-none object-cover w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user