Revert "feat: full responsive layout — mobile-first, lg breakpoint, fluid typography"

This reverts commit 2505a87717.

app/components/Navbar.tsx

@@ -4,7 +4,8 @@ import { useEffect, useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
 
-const SCROLL_DURATION = 800;
+const NAVBAR_HEIGHT = 100; // px — matches h-[6.25rem]
+const SCROLL_DURATION = 800; // ms
 
 function smoothScrollTo(targetY: number) {
   const startY = window.scrollY;
@@ -14,10 +15,10 @@ function smoothScrollTo(targetY: number) {
   function step(now: number) {
     const elapsed = now - startTime;
     const progress = Math.min(elapsed / SCROLL_DURATION, 1);
-    const ease =
-      progress < 0.5
-        ? 4 * progress ** 3
-        : 1 - (-2 * progress + 2) ** 3 / 2;
+    // ease-in-out cubic
+    const ease = progress < 0.5
+      ? 4 * progress ** 3
+      : 1 - (-2 * progress + 2) ** 3 / 2;
     window.scrollTo(0, startY + distance * ease);
     if (progress < 1) requestAnimationFrame(step);
   }
@@ -34,7 +35,6 @@ const navLinks = [
 
 export function Navbar() {
   const [scrolled, setScrolled] = useState(false);
-  const [menuOpen, setMenuOpen] = useState(false);
 
   useEffect(() => {
     const onScroll = () => setScrolled(window.scrollY > 8);
@@ -42,34 +42,17 @@ export function Navbar() {
     return () => window.removeEventListener("scroll", onScroll);
   }, []);
 
-  // Close mobile menu on resize to desktop
-  useEffect(() => {
-    const onResize = () => { if (window.innerWidth >= 1024) setMenuOpen(false); };
-    window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
-  }, []);
-
-  const handleAnchorClick = (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
-    e.preventDefault();
-    setMenuOpen(false);
-    const navH = window.innerWidth >= 1024 ? 100 : 80; // desktop / mobile navbar px
-    const el = document.getElementById(href.slice(1));
-    if (el) smoothScrollTo(el.getBoundingClientRect().top + window.scrollY - navH);
-    history.replaceState(null, "", href);
-  };
-
-  const blurred = scrolled || menuOpen;
-
   return (
     <header
-      className={`sticky top-0 z-50 w-full flex flex-col transition-[background-color,backdrop-filter] duration-300 ${
-        blurred ? "bg-[#f5f0e8]/90 backdrop-blur-md" : "bg-[#f5f0e8]"
+      className={`sticky top-0 z-50 w-full h-[6.25rem] flex items-center px-[2rem] transition-[background-color,backdrop-filter] duration-300 ${
+        scrolled
+          ? "bg-[#f5f0e8]/80 backdrop-blur-md"
+          : "bg-[#f5f0e8]"
       }`}
     >
-      {/* Main bar */}
-      <div className="h-20 lg:h-[6.25rem] flex items-center justify-between px-4 lg:px-8">
+      <div className="w-full flex items-center justify-between">
 
-        {/* Logo */}
+        {/* Logo — exported directly from Figma */}
         <Link href="/" className="shrink-0">
           <Image
             src="/logo.png"
@@ -77,18 +60,25 @@ export function Navbar() {
             width={181}
             height={61}
             priority
-            className="w-[130px] lg:w-[181px] h-auto"
           />
         </Link>
 
-        {/* Desktop nav */}
-        <nav className="hidden lg:flex items-center gap-[3rem]">
+        {/* Nav links */}
+        <nav className="flex items-center gap-[3rem]">
           {navLinks.map((link) =>
             link.href.startsWith("#") ? (
               <a
                 key={link.href}
                 href={link.href}
-                onClick={(e) => handleAnchorClick(e, link.href)}
+                onClick={(e) => {
+                  e.preventDefault();
+                  const el = document.getElementById(link.href.slice(1));
+                  if (el) {
+                    const top = el.getBoundingClientRect().top + window.scrollY - NAVBAR_HEIGHT;
+                    smoothScrollTo(top);
+                  }
+                  history.replaceState(null, "", link.href);
+                }}
                 className="text-[1.125rem] font-semibold text-[#222221] tracking-[0.01125rem] hover:text-[#f6a701] transition-colors cursor-pointer"
               >
                 {link.label}
@@ -105,78 +95,22 @@ export function Navbar() {
           )}
         </nav>
 
-        {/* Desktop CTAs */}
-        <div className="hidden lg:flex items-center gap-3 p-2">
+        {/* CTA buttons */}
+        <div className="flex items-center gap-[0.75rem] p-[0.5rem]">
           <Link
             href="/newsletter"
-            className="px-6 py-4 rounded-lg border border-[#868686] text-[1.125rem] font-bold text-[#222221] hover:bg-[#222221] 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-6 py-4 rounded-lg bg-[#f6a701] text-[1.125rem] font-bold text-[#222221] 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>
         </div>
 
-        {/* Mobile hamburger — animated to ✕ */}
-        <button
-          className="lg:hidden flex flex-col justify-center gap-[5px] p-2 -mr-2"
-          onClick={() => setMenuOpen((o) => !o)}
-          aria-label="Menü öffnen"
-        >
-          <span className={`block w-6 h-[2px] bg-[#222221] transition-all duration-300 origin-center ${menuOpen ? "rotate-45 translate-y-[7px]" : ""}`} />
-          <span className={`block w-6 h-[2px] bg-[#222221] transition-all duration-300 ${menuOpen ? "opacity-0" : ""}`} />
-          <span className={`block w-6 h-[2px] bg-[#222221] transition-all duration-300 origin-center ${menuOpen ? "-rotate-45 -translate-y-[7px]" : ""}`} />
-        </button>
-
-      </div>
-
-      {/* Mobile dropdown — max-h animation */}
-      <div
-        className={`lg:hidden overflow-hidden transition-all duration-300 ease-in-out ${
-          menuOpen ? "max-h-[32rem] pb-6" : "max-h-0"
-        }`}
-      >
-        <nav className="flex flex-col gap-1 px-4">
-          {navLinks.map((link) =>
-            link.href.startsWith("#") ? (
-              <a
-                key={link.href}
-                href={link.href}
-                onClick={(e) => handleAnchorClick(e, link.href)}
-                className="text-[1.125rem] font-semibold text-[#222221] hover:text-[#f6a701] transition-colors py-3 border-b border-[#e8e3db] last:border-0"
-              >
-                {link.label}
-              </a>
-            ) : (
-              <Link
-                key={link.href}
-                href={link.href}
-                onClick={() => setMenuOpen(false)}
-                className="text-[1.125rem] font-semibold text-[#222221] hover:text-[#f6a701] transition-colors py-3 border-b border-[#e8e3db] last:border-0"
-              >
-                {link.label}
-              </Link>
-            )
-          )}
-          <div className="flex flex-col gap-3 pt-4">
-            <Link
-              href="/newsletter"
-              className="text-center px-6 py-3 rounded-lg border border-[#868686] text-[1rem] font-bold text-[#222221] hover:bg-[#222221] hover:text-white transition-colors"
-            >
-              Newsletter
-            </Link>
-            <Link
-              href="/challenge"
-              className="text-center px-6 py-3 rounded-lg bg-[#f6a701] text-[1rem] font-bold text-[#222221] hover:brightness-95 transition-all"
-            >
-              7-Tage-Challenge
-            </Link>
-          </div>
-        </nav>
       </div>
     </header>
   );