Marco
84 lines
2.6 KiB
TypeScript
84 lines
2.6 KiB
TypeScript
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 h-[36.4375rem] overflow-hidden">
|
|
|
|
{/* Left: text content */}
|
|
<div className="flex flex-col gap-[1.75rem] pl-[5rem] pr-[2.5rem] flex-1 min-w-0">
|
|
|
|
{/* Heading */}
|
|
<h1
|
|
className="text-[4rem] font-semibold leading-[4.5rem] text-black"
|
|
style={{ fontFamily: "var(--font-playfair)" }}
|
|
>
|
|
Produktivität darf sich leicht anfühlen
|
|
<span className="text-[#fdb705]">.</span>
|
|
</h1>
|
|
|
|
{/* Subheading */}
|
|
<p className="text-[1.5rem] font-semibold text-[#222221] leading-[2.375rem]">
|
|
Für Menschen mit Familie, Verantwortung und zu wenig Zeit
|
|
</p>
|
|
|
|
{/* CTA */}
|
|
<Link
|
|
href="/challenge"
|
|
className="inline-flex items-center gap-[1rem] self-start px-[1.5rem] py-[0.75rem] rounded-[0.5rem] bg-[#f6a701] text-[1.375rem] font-semibold text-[#222221] hover:brightness-95 transition-all"
|
|
>
|
|
Starte mit der 7-Tage-Challenge
|
|
<Image
|
|
src="/icon-check.png"
|
|
alt=""
|
|
width={25}
|
|
height={19}
|
|
/>
|
|
</Link>
|
|
|
|
{/* Social proof */}
|
|
<div className="flex items-center gap-[0.75rem]">
|
|
<div className="flex items-center">
|
|
{avatars.map((avatar, i) => (
|
|
<div
|
|
key={avatar.src}
|
|
className="w-[2.8125rem] h-[2.8125rem] rounded-full overflow-hidden border-2 border-[#f5f0e8]"
|
|
style={{ marginLeft: i === 0 ? 0 : "-0.5rem" }}
|
|
>
|
|
<Image
|
|
src={avatar.src}
|
|
alt={avatar.alt}
|
|
width={45}
|
|
height={45}
|
|
className="object-cover w-full h-full"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<p className="text-[1rem] text-[#222221] leading-[1.5rem]">
|
|
<span className="font-semibold">10.000+</span> Menschen vertrauen einfach-produktiv
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: hero image */}
|
|
<div className="relative h-full w-[55.4375rem] shrink-0">
|
|
<Image
|
|
src="/hero.jpg"
|
|
alt="Notizbuch mit Tagesplan und Kaffee"
|
|
fill
|
|
className="object-cover object-center"
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
</section>
|
|
);
|
|
}
|