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

Revert "feat: full responsive layout — mobile-first, lg breakpoint, fluid typography"

Browse Source 
This reverts commit 2505a87717.
This commit is contained in:
Marco
2026-06-30 22:07:51 +00:00
parent 2505a87717
commit b946697b12
9 changed files with 172 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Hero.tsx
+32 -21
View File
@@ -3,64 +3,75 @@ import Image from "next/image";
export function Hero() {
return (
<section className="bg-[#f5f0e8] flex flex-col lg:flex-row items-center justify-between w-full 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-6 lg:gap-[1.75rem] items-start w-full lg:flex-[1_0_0] lg:min-w-px px-4 md:px-8 lg:pl-[5rem] lg:pr-[2.5rem] pt-10 pb-8 lg:py-0">
<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">
{/* Heading — fluid size: 2rem mobile → 4rem desktop */}
{/* Heading — w-[min-content] forces wrap at widest word ("Produktivität") */}
<p
className="font-semibold leading-[1.1] text-black w-full [word-break:break-word]"
style={{ fontFamily: "var(--font-playfair)", fontSize: "clamp(2rem, 5vw, 4rem)" }}
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)" }}
>
<span>Produktivität darf sich leicht anfühlen</span>
<span style={{ color: "#fdb705" }}>.</span>
<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>
{/* Subheading — fluid: 1.125rem → 1.5rem */}
<p
className="font-semibold text-[#222221] w-full [word-break:break-word]"
style={{ fontSize: "clamp(1.125rem, 2vw, 1.5rem)", lineHeight: "1.4" }}
>
{/* 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>
{/* CTA */}
<Link
href="/challenge"
className="flex gap-4 items-center justify-center overflow-hidden px-6 py-3 rounded-lg shrink-0 bg-[#f6a701] hover:brightness-95 transition-all"
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 text-[#222221] text-[1.125rem] lg:text-[1.375rem] whitespace-nowrap">
<span className="font-semibold leading-[2.375rem] text-[#222221] text-[1.375rem] whitespace-nowrap not-italic">
Starte mit der 7-Tage-Challenge
</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" />
<img
alt=""
src="/icon-check.svg"
className="absolute inset-0 w-full h-full"
/>
</div>
</Link>
{/* Social proof */}
<div className="flex gap-3 items-center shrink-0 w-full">
<div className="flex gap-0.5 items-center shrink-0">
<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={i} className="relative w-10 h-10 lg:w-[2.8125rem] lg:h-[2.8125rem] rounded-full overflow-hidden shrink-0">
<div
key={i}
className="relative w-[2.8125rem] h-[2.8125rem] rounded-full overflow-hidden shrink-0"
>
<Image src={src} alt="" fill className="object-cover" />
</div>
))}
</div>
<p className="font-normal leading-6 text-[#222221] text-[0.9rem] lg:text-[1rem] [word-break:break-word]">
<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 — full width on mobile, fixed column on desktop */}
{/* Right: hero image — gradient mask fades left + top edges into the cream background */}
<div
className="hero-mask w-full h-[260px] md:h-[340px] lg:h-[36.4375rem] lg:shrink-0 lg:w-[55.4375rem]"
className="h-[36.4375rem] shrink-0 w-[55.4375rem]"
style={{
backgroundImage: "url('/hero.png')",
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
WebkitMaskImage:
"linear-gradient(to right, transparent 0%, black 14%), linear-gradient(to bottom, transparent 0%, black 10%)",
WebkitMaskComposite: "destination-in",
maskImage:
"linear-gradient(to right, transparent 0%, black 14%), linear-gradient(to bottom, transparent 0%, black 10%)",
maskComposite: "intersect",
}}
aria-hidden="true"
/>