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>
+  );
+}