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>
);
}
app/components/Navbar.tsx
+17 -32
View File
@@ -1,4 +1,5 @@
import Link from "next/link";
import Image from "next/image";
const navLinks = [
{ label: "Werkzeuge", href: "/werkzeuge" },
@@ -9,43 +10,27 @@ const navLinks = [
export function Navbar() {
return (
<header className="w-full bg-[#f5f0e8] px-8 h-[6.25rem] flex items-center">
<div className="w-full flex items-center justify-between gap-8">
<header className="w-full bg-[#f5f0e8] h-[6.25rem] flex items-center px-[2rem]">
<div className="w-full flex items-center justify-between">
{/* Logo */}
<Link href="/" className="flex flex-col gap-1 shrink-0">
<span className="relative inline-block">
{/* Brush stroke SVG background */}
<svg
className="absolute inset-0 w-full h-full"
viewBox="0 0 180 36"
preserveAspectRatio="none"
aria-hidden="true"
>
<path
d="M4,8 C20,2 60,0 100,3 C130,5 165,4 176,9 C180,14 178,22 172,27 C155,34 110,36 70,35 C35,34 5,32 2,26 C-1,20 2,12 4,8 Z"
fill="#f5c518"
/>
</svg>
<span
className="relative text-[1.5rem] font-bold text-[#1a1a1a] leading-none px-3 py-1.5 block"
style={{ fontFamily: "var(--font-caveat)" }}
>
einfach produktiv
</span>
</span>
<span className="text-[0.5rem] uppercase tracking-[0.12em] text-[#6b6b6b] pl-1">
Weil du auch noch ein Leben hast
</span>
{/* Logo — exported directly from Figma */}
<Link href="/" className="shrink-0">
<Image
src="/logo.png"
alt="einfach produktiv"
width={181}
height={61}
priority
/>
</Link>
{/* Nav links */}
<nav className="flex items-center gap-10">
<nav className="flex items-center gap-[3rem]">
{navLinks.map((link) => (
<Link
key={link.href}
href={link.href}
className="text-[0.9375rem] font-medium text-[#1a1a1a] hover:text-[#f5c518] transition-colors"
className="text-[1.125rem] font-semibold text-[#222221] tracking-[0.01125rem] hover:text-[#f6a701] transition-colors"
>
{link.label}
</Link>
@@ -53,16 +38,16 @@ export function Navbar() {
</nav>
{/* CTA buttons */}
<div className="flex items-center gap-3 shrink-0">
<div className="flex items-center gap-[0.75rem] p-[0.5rem]">
<Link
href="/newsletter"
className="px-5 py-2.5 rounded-lg border border-[#1a1a1a] text-[0.9375rem] font-semibold text-[#1a1a1a] hover:bg-[#1a1a1a] hover:text-white transition-colors"
className="px-[1.5rem] py-[1rem] rounded-[0.5rem] border border-[#868686] text-[1.125rem] font-bold text-[#222221] hover:bg-[#222221] hover:text-white transition-colors"
>
Newsletter
</Link>
<Link
href="/challenge"
className="px-5 py-2.5 rounded-lg bg-[#f5c518] text-[0.9375rem] font-semibold text-[#1a1a1a] hover:brightness-95 transition-all"
className="px-[1.5rem] py-[1rem] rounded-[0.5rem] bg-[#f6a701] text-[1.125rem] font-bold text-[#222221] hover:brightness-95 transition-all"
>
7-Tage-Challenge
</Link>
public/avatar-1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 114 KiB

public/avatar-2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

public/avatar-3.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 134 KiB

public/hero.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 492 KiB

public/icon-check.png
+3
View File
@@ -0,0 +1,3 @@
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 25 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="icon-arrow" d="M0.0362033 8.87937C0.150575 7.23588 1.58631 7.28918 2.57423 8.1784C3.65308 9.1495 4.07602 11.1443 4.75472 12.4142C5.70844 14.199 5.6507 14.1648 6.99015 12.6429C8.21796 11.2479 9.61386 9.95886 11.0121 8.74582C13.6167 6.48626 16.562 4.55349 19.3701 2.56693C20.5275 1.74809 22.251 0.204931 23.7279 0.0246462C25.281 -0.164915 25.2828 0.76999 24.4261 1.76453C23.382 2.97656 21.7806 3.96298 20.572 5.00299C19.127 6.24638 17.699 7.50404 16.3109 8.81393C13.7059 11.2721 10.9738 13.6986 8.81127 16.5888C7.04164 18.9539 5.59317 20.223 3.46426 17.3263C1.99087 15.3215 -0.2581 11.49 0.0362033 8.87937C0.0580072 8.56624 -0.0552244 9.69034 0.0362033 8.87937Z" fill="var(--fill-0, #222221)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 880 B

public/logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 189 KiB