Marco
74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
|
|
export function Hero() {
|
|
return (
|
|
<section className="bg-[#f5f0e8] flex items-stretch min-h-[36.4375rem]">
|
|
{/* Left: text content */}
|
|
<div className="flex-1 flex flex-col justify-center gap-6 px-[5rem] py-[3.625rem]">
|
|
{/* Heading */}
|
|
<h1
|
|
className="text-[clamp(2.5rem,4.5vw,4.5rem)] font-extrabold leading-[1.08] tracking-tight text-[#1a1a1a]"
|
|
style={{ fontFamily: "var(--font-playfair)" }}
|
|
>
|
|
Produktivität
|
|
<br />
|
|
darf sich leicht
|
|
<br />
|
|
anfühlen<span className="text-[#f5c518]">.</span>
|
|
</h1>
|
|
|
|
{/* Subheading */}
|
|
<p className="text-[1.125rem] font-medium text-[#1a1a1a] leading-[1.4] max-w-[22rem]">
|
|
Für Menschen mit Familie,
|
|
<br />
|
|
Verantwortung und zu wenig Zeit
|
|
</p>
|
|
|
|
{/* CTA button */}
|
|
<Link
|
|
href="/challenge"
|
|
className="inline-flex items-center gap-3 self-start px-6 py-4 rounded-xl bg-[#f5c518] text-[1rem] font-bold text-[#1a1a1a] hover:brightness-95 transition-all"
|
|
>
|
|
Starte mit der 7-Tage-Challenge
|
|
<span className="text-[#1a1a1a]">✓</span>
|
|
</Link>
|
|
|
|
{/* Social proof */}
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex -space-x-2">
|
|
{[
|
|
{ bg: "#c8a882", label: "Person 1" },
|
|
{ bg: "#a0785a", label: "Person 2" },
|
|
{ bg: "#8b6b5a", label: "Person 3" },
|
|
].map((a) => (
|
|
<div
|
|
key={a.label}
|
|
className="w-9 h-9 rounded-full border-2 border-[#f5f0e8]"
|
|
style={{ background: a.bg }}
|
|
aria-label={a.label}
|
|
/>
|
|
))}
|
|
</div>
|
|
<p className="text-[0.875rem] text-[#3a3a3a] leading-[1.3]">
|
|
<span className="font-semibold">10.000+</span> Menschen vertrauen
|
|
<br />
|
|
einfach-produktiv
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: hero image */}
|
|
<div className="relative w-[48%] shrink-0 overflow-hidden">
|
|
<Image
|
|
src="/hero.jpg"
|
|
alt="Notizbuch mit Tagesplan und Kaffee"
|
|
fill
|
|
className="object-cover object-center"
|
|
priority
|
|
/>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|