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
2026-06-30 19:18:49 +00:00
parent 601507df1d
commit 6c295c8d8a
8 changed files with 62 additions and 64 deletions
+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>