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,128 @@
+"use client";
+
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+import {
+  Home,
+  MapPin,
+  Mail,
+  Phone,
+  Globe,
+  Shield,
+  ArrowRight,
+} from "lucide-react";
+
+export function Footer() {
+  const t = useTranslations("footer");
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <footer className="relative bg-brand-grey-dark text-white overflow-hidden">
+      <div className="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-brand-green via-brand-green-light to-brand-green" />
+      <div className="absolute -top-24 -right-24 w-64 h-64 bg-brand-green/10 rounded-full blur-3xl" />
+      <div className="absolute -bottom-32 -left-32 w-80 h-80 bg-brand-green/10 rounded-full blur-3xl" />
+
+      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
+          <div className="space-y-4">
+            <div className="flex items-center gap-3">
+              <div className="p-2.5 bg-brand-green rounded-xl">
+                <Home className="w-6 h-6 text-white" />
+              </div>
+              <h3 className="text-xl font-bold">{t("brandTitle")}</h3>
+            </div>
+            <p className="text-brand-grey-light text-sm leading-relaxed">
+              {t("welcome")}
+            </p>
+          </div>
+
+          <div className="space-y-4">
+            <div className="flex items-center gap-2 text-brand-green-light mb-2">
+              <MapPin className="w-5 h-5" />
+              <h3 className="text-lg font-bold text-white">{t("locationsTitle")}</h3>
+            </div>
+            <div className="space-y-4 text-sm">
+              <a
+                href="https://maps.google.com/?q=Herdweg+71+Böblingen"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block text-brand-grey-light hover:text-brand-green-light transition-colors"
+              >
+                <span className="font-semibold text-white">{t("herdwegName")}</span>
+                <br />
+                {t("herdwegAddress")}
+              </a>
+              <a
+                href="https://maps.google.com/?q=Schönaicher+Straße+26+Böblingen"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block text-brand-grey-light hover:text-brand-green-light transition-colors"
+              >
+                <span className="font-semibold text-white">{t("schoenaicherName")}</span>
+                <br />
+                {t("schoenaicherAddress")}
+              </a>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <div className="flex items-center gap-2 text-brand-green-light mb-2">
+              <Phone className="w-5 h-5" />
+              <h3 className="text-lg font-bold text-white">{t("contactTitle")}</h3>
+            </div>
+            <div className="space-y-3 text-sm">
+              <a
+                href={`mailto:${t("email")}`}
+                className="flex items-center gap-2 text-brand-grey-light hover:text-brand-green-light transition-colors"
+              >
+                <Mail className="w-4 h-4 text-brand-green" />
+                {t("email")}
+              </a>
+              <a
+                href={`tel:${t("phone").replace(/\s/g, "")}`}
+                className="flex items-center gap-2 text-brand-grey-light hover:text-brand-green-light transition-colors"
+              >
+                <Phone className="w-4 h-4 text-brand-green" />
+                {t("phone")}
+              </a>
+              <a
+                href={`https://${t("web")}`}
+                className="flex items-center gap-2 text-brand-grey-light hover:text-brand-green-light transition-colors"
+              >
+                <Globe className="w-4 h-4 text-brand-green" />
+                {t("web")}
+              </a>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <div className="flex items-center gap-2 text-brand-green-light mb-2">
+              <Shield className="w-5 h-5" />
+              <h3 className="text-lg font-bold text-white">{t("legalTitle")}</h3>
+            </div>
+            <div className="flex flex-col gap-3">
+              <Link
+                href="/imprint"
+                className="flex items-center gap-2 text-brand-grey-light hover:text-brand-green-light hover:translate-x-1 transition-all text-sm"
+              >
+                <ArrowRight className="w-4 h-4 text-brand-green" />
+                {t("imprint")}
+              </Link>
+              <Link
+                href="/privacy"
+                className="flex items-center gap-2 text-brand-grey-light hover:text-brand-green-light hover:translate-x-1 transition-all text-sm"
+              >
+                <ArrowRight className="w-4 h-4 text-brand-green" />
+                {t("privacy")}
+              </Link>
+            </div>
+          </div>
+        </div>
+
+        <div className="relative mt-14 pt-8 border-t border-brand-grey/30 text-center text-brand-grey-light text-sm">
+          © {currentYear} BB-Apartment. {t("rights")}
+        </div>
+      </div>
+    </footer>
+  );
+}
@@ -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>
+  );
+}
@@ -0,0 +1,40 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { locales } from "@/i18n";
+
+export function LanguageSwitcher({
+  locale,
+  scrolled = false,
+}: {
+  locale: string;
+  scrolled?: boolean;
+}) {
+  const pathname = usePathname();
+  const strippedPath = pathname.replace(`/${locale}`, "") || "/";
+
+  return (
+    <div
+      className={`flex items-center gap-1 rounded-full p-1 transition-colors duration-300 ${
+        scrolled ? "bg-brand-grey-soft" : "bg-white/10"
+      }`}
+    >
+      {locales.map((l) => (
+        <Link
+          key={l}
+          href={`/${l}${strippedPath}`}
+          className={`px-3 py-1 rounded-full text-sm font-medium transition-colors duration-300 ${
+            l === locale
+              ? "bg-brand-green text-white"
+              : scrolled
+                ? "text-brand-grey hover:text-brand-green-dark"
+                : "text-white/80 hover:text-white"
+          }`}
+        >
+          {l.toUpperCase()}
+        </Link>
+      ))}
+    </div>
+  );
+}