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

fix: use plain <img> for hero+icon, beige body bg, image drives section height

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-06-30 20:46:15 +00:00
parent f8a5b4caab
commit 184fbcfce6
2 changed files with 13 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Hero.tsx
+10 -21
View File
@@ -9,10 +9,10 @@ const avatars = [
export function Hero() {
return (
<section className="bg-[#f5f0e8] flex items-stretch overflow-hidden h-[36.4375rem]">
<section className="bg-[#f5f0e8] flex items-center justify-between overflow-hidden">
{/* Left: text content */}
<div className="flex-1 flex flex-col justify-center gap-[1.75rem] pl-[5rem] pr-[2.5rem] min-w-0">
<div className="flex flex-col gap-[1.75rem] pl-[5rem] pr-[2.5rem] flex-[1_0_0] min-w-0 overflow-clip">
<h1
className="text-[4rem] font-semibold leading-[4.5rem] text-black"
@@ -32,13 +32,8 @@ export function Hero() {
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"
/>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src="/icon-check.svg" alt="" width={25} height={19} className="shrink-0" />
</Link>
</div>
@@ -50,12 +45,7 @@ export function Hero() {
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}
fill
className="object-cover"
/>
<Image src={avatar.src} alt={avatar.alt} fill className="object-cover" />
</div>
))}
</div>
@@ -65,14 +55,13 @@ export function Hero() {
</div>
</div>
{/* Right: hero image — self-stretch fills full section height */}
<div className="relative shrink-0 self-stretch w-[55.4375rem]">
<Image
{/* 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 */}
<img
src="/hero.jpg"
alt="Notizbuch mit Tagesplan und Kaffee"
fill
className="object-cover object-center"
priority
className="absolute inset-0 w-full h-full object-cover object-center"
/>
</div>