Initial upload of BB-Apartment 2026 website.

Adds the complete Next.js website including i18n routing, house and apartment pages, Beds24 v2 integration for live availability/pricing, Stripe checkout, contact forms, Docker setup and deployment docs. Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
2026-08-19 22:54:49 +02:00
parent 232770afe7
commit 2b24334bfa
153 changed files with 5621 additions and 176 deletions
@@ -0,0 +1,144 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { useTranslations } from "next-intl";
+import { usePathname } from "next/navigation";
+import { LanguageSwitcher } from "./LanguageSwitcher";
+import { Menu, X } from "lucide-react";
+import { useState, useEffect } from "react";
+
+export function Header({ locale }: { locale: string }) {
+  const t = useTranslations("navigation");
+  const pathname = usePathname();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+  const isHome = pathname === `/${locale}` || pathname === `/${locale}/`;
+  const showSolid = !isHome || scrolled;
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 20);
+    };
+
+    handleScroll();
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const navLinks = [
+    { href: `/${locale}`, label: t("home") },
+    { href: `/${locale}/houses`, label: t("houses") },
+    { href: `/${locale}/contact`, label: t("contact") },
+  ];
+
+  return (
+    <header
+      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 border-b ${
+        showSolid
+          ? "bg-white/95 backdrop-blur-md border-brand-grey-soft shadow-sm"
+          : "bg-transparent border-transparent"
+      }`}
+    >
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div
+          className={`flex items-center justify-between transition-all duration-300 ${
+            showSolid ? "h-20" : "h-28"
+          }`}
+        >
+          <Link href={`/${locale}`} className="flex items-center gap-3">
+            <div
+              className={`relative overflow-hidden rounded-lg transition-all duration-300 ${
+                showSolid ? "w-12 h-12" : "w-24 h-24"
+              }`}
+            >
+              <Image
+                src="/images/logo.jpg"
+                alt="BB-Apartment"
+                fill
+                className="object-cover"
+              />
+            </div>
+            <span
+              className={`text-xl font-bold transition-colors duration-300 ${
+                showSolid ? "text-brand-grey-dark" : "text-white"
+              }`}
+            >
+              BB-Apartment
+            </span>
+          </Link>
+
+          <nav className="hidden md:flex items-center gap-8">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={`font-medium transition-colors duration-300 ${
+                  showSolid
+                    ? "text-brand-grey hover:text-brand-green"
+                    : "text-white/90 hover:text-white"
+                }`}
+              >
+                {link.label}
+              </Link>
+            ))}
+            <LanguageSwitcher locale={locale} scrolled={showSolid} />
+            <Link
+              href={`/${locale}/houses`}
+              className={`font-semibold px-5 py-2.5 rounded-xl transition-all duration-300 ${
+                showSolid
+                  ? "bg-brand-green text-white hover:bg-brand-green-dark shadow-sm"
+                  : "bg-white text-brand-green-dark hover:bg-brand-grey-soft"
+              }`}
+            >
+              {t("bookNow")}
+            </Link>
+          </nav>
+
+          <div className="md:hidden flex items-center gap-4">
+            <LanguageSwitcher locale={locale} scrolled={showSolid} />
+            <Link
+              href={`/${locale}/houses`}
+              className="hidden sm:inline-flex font-semibold px-4 py-2 rounded-xl bg-brand-green text-white hover:bg-brand-green-dark transition-colors text-sm"
+            >
+              {t("bookNow")}
+            </Link>
+            <button
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              className={`p-2 transition-colors duration-300 ${
+                showSolid ? "text-brand-grey-dark" : "text-white"
+              }`}
+              aria-label="Toggle menu"
+            >
+              {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {mobileMenuOpen && (
+        <div className="md:hidden bg-white border-t border-brand-grey-soft">
+          <nav className="flex flex-col px-4 py-4 gap-4">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                onClick={() => setMobileMenuOpen(false)}
+                className="text-brand-grey hover:text-brand-green font-medium transition-colors"
+              >
+                {link.label}
+              </Link>
+            ))}
+            <Link
+              href={`/${locale}/houses`}
+              onClick={() => setMobileMenuOpen(false)}
+              className="inline-flex items-center justify-center gap-2 bg-brand-green text-white font-semibold px-4 py-3 rounded-xl hover:bg-brand-green-dark transition-colors"
+            >
+              {t("bookNow")}
+            </Link>
+          </nav>
+        </div>
+      )}
+    </header>
+  );
+}