fix: use exported Figma assets for logo, hero image, avatars and icon
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marco
+42
-32
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
+17
-32
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user