feat: add desktop navigation matching Figma design

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-30 19:12:14 +00:00
parent 3b7905c7ac
commit de924cae2d
2 changed files with 68 additions and 1 deletions
@@ -0,0 +1,63 @@
+import Link from "next/link";
+
+const navLinks = [
+  { label: "Werkzeuge", href: "/werkzeuge" },
+  { label: "Blog", href: "/blog" },
+  { label: "Über Björn", href: "/ueber-bjoern" },
+  { label: "Shop", href: "/shop" },
+];
+
+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">
+
+        {/* Logo */}
+        <Link href="/" className="flex flex-col gap-0.5 shrink-0">
+          <span className="relative inline-block px-2 py-0.5">
+            <span
+              className="absolute inset-0 rounded-sm -skew-x-2"
+              style={{ background: "#f5c518", opacity: 0.85 }}
+            />
+            <span className="relative font-bold text-[1.375rem] text-[#1a1a1a] leading-tight tracking-tight italic">
+              einfach produktiv
+            </span>
+          </span>
+          <span className="text-[0.5rem] uppercase tracking-[0.15em] text-[#6b6b6b] pl-2">
+            Weil du auch noch ein Leben hast
+          </span>
+        </Link>
+
+        {/* Nav links */}
+        <nav className="flex items-center gap-10">
+          {navLinks.map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              className="text-[0.9375rem] font-medium text-[#1a1a1a] hover:text-[#f5c518] transition-colors"
+            >
+              {link.label}
+            </Link>
+          ))}
+        </nav>
+
+        {/* CTA buttons */}
+        <div className="flex items-center gap-3 shrink-0">
+          <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"
+          >
+            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"
+          >
+            7-Tage-Challenge
+          </Link>
+        </div>
+
+      </div>
+    </header>
+  );
+}
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { Navbar } from "./components/Navbar";

 const geistSans = Geist({
  variable: "--font-geist-sans",
@@ -27,7 +28,10 @@ export default function RootLayout({
      lang="en"
      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
    >
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body className="min-h-full flex flex-col">
+          <Navbar />
+          {children}
+        </body>
    </html>
  );
 }