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

fix: use exported Figma assets for logo, hero image, avatars and icon

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-06-30 19:18:49 +00:00
parent 601507df1d
commit 6c295c8d8a
8 changed files with 62 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Hero.tsx
+42 -32
View File
@@ -1,65 +1,74 @@
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-stretch min-h-[36.4375rem]">
<section className="bg-[#f5f0e8] flex items-center h-[36.4375rem] overflow-hidden">
{/* Left: text content */}
<div className="flex-1 flex flex-col justify-center gap-6 px-[5rem] py-[3.625rem]">
<div className="flex flex-col gap-[1.75rem] pl-[5rem] pr-[2.5rem] flex-1 min-w-0">
{/* Heading */}
<h1
className="text-[clamp(2.5rem,4.5vw,4.5rem)] font-extrabold leading-[1.08] tracking-tight text-[#1a1a1a]"
className="text-[4rem] font-semibold leading-[4.5rem] text-black"
style={{ fontFamily: "var(--font-playfair)" }}
>
Produktivität
<br />
darf sich leicht
<br />
anfühlen<span className="text-[#f5c518]">.</span>
Produktivität darf sich leicht anfühlen
<span className="text-[#fdb705]">.</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 className="text-[1.5rem] font-semibold text-[#222221] leading-[2.375rem]">
Für Menschen mit Familie, Verantwortung und zu wenig Zeit
</p>
{/* CTA button */}
{/* CTA */}
<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"
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
<span className="text-[#1a1a1a]">✓</span>
<Image
src="/icon-check.png"
alt=""
width={25}
height={19}
/>
</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 className="flex items-center gap-[0.75rem]">
<div className="flex items-center">
{avatars.map((avatar, i) => (
<div
key={a.label}
className="w-9 h-9 rounded-full border-2 border-[#f5f0e8]"
style={{ background: a.bg }}
aria-label={a.label}
/>
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-[0.875rem] text-[#3a3a3a] leading-[1.3]">
<span className="font-semibold">10.000+</span> Menschen vertrauen
<br />
einfach-produktiv
<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 w-[48%] shrink-0 overflow-hidden">
<div className="relative h-full w-[55.4375rem] shrink-0">
<Image
src="/hero.jpg"
alt="Notizbuch mit Tagesplan und Kaffee"
@@ -68,6 +77,7 @@ export function Hero() {
priority
/>
</div>
</section>
);
}