Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(Hero): self-stretch image fills full height, icon as SVG, Playfair 600

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-06-30 20:38:18 +00:00
parent 6c295c8d8a
commit f8a5b4caab
3 changed files with 24 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Hero.tsx
+23 -25
View File
@@ -9,12 +9,11 @@ const avatars = [
export function Hero() {
return (
<section className="bg-[#f5f0e8] flex items-center h-[36.4375rem] overflow-hidden">
<section className="bg-[#f5f0e8] flex items-stretch overflow-hidden h-[36.4375rem]">
{/* Left: text content */}
<div className="flex flex-col gap-[1.75rem] pl-[5rem] pr-[2.5rem] flex-1 min-w-0">
<div className="flex-1 flex flex-col justify-center gap-[1.75rem] pl-[5rem] pr-[2.5rem] min-w-0">
{/* Heading */}
<h1
className="text-[4rem] font-semibold leading-[4.5rem] text-black"
style={{ fontFamily: "var(--font-playfair)" }}
@@ -23,40 +22,39 @@ export function Hero() {
<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>
<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"
>
Starte mit der 7-Tage-Challenge
<Image
src="/icon-check.svg"
alt=""
width={25}
height={19}
className="shrink-0"
/>
</Link>
</div>
{/* 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" }}
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" }}
>
<Image
src={avatar.src}
alt={avatar.alt}
width={45}
height={45}
className="object-cover w-full h-full"
fill
className="object-cover"
/>
</div>
))}
@@ -67,8 +65,8 @@ export function Hero() {
</div>
</div>
{/* Right: hero image */}
<div className="relative h-full w-[55.4375rem] shrink-0">
{/* Right: hero image — self-stretch fills full section height */}
<div className="relative shrink-0 self-stretch w-[55.4375rem]">
<Image
src="/hero.jpg"
alt="Notizbuch mit Tagesplan und Kaffee"