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,120 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import Image from "next/image";
+
+const tilePools = [
+  [
+    "/images/houses/herdweg/impressions/11.png",
+    "/images/houses/herdweg/impressions/MKE_1986.JPG",
+    "/images/houses/herdweg/impressions/MKE_2042.JPG",
+  ],
+  [
+    "/images/houses/herdweg/impressions/MKE_1974.jpg",
+    "/images/houses/herdweg/impressions/MKE_2027.jpg",
+  ],
+  [
+    "/images/houses/herdweg/impressions/MKE_2030.jpg",
+    "/images/houses/herdweg/impressions/MKE_2034.JPG",
+  ],
+  [
+    "/images/houses/herdweg/impressions/MKE_2037.jpg",
+    "/images/houses/herdweg/impressions/MKE_2038.JPG",
+  ],
+];
+
+function nextFromPool(pool: string[], exclude: string) {
+  const filtered = pool.filter((src) => src !== exclude);
+  if (filtered.length === 0) return pool[0];
+  return filtered[Math.floor(Math.random() * filtered.length)];
+}
+
+interface ImpressionsTileProps {
+  pool: string[];
+  initialSrc: string;
+  className?: string;
+}
+
+function ImpressionsTile({ pool, initialSrc, className = "" }: ImpressionsTileProps) {
+  const [current, setCurrent] = useState(initialSrc);
+  const [visible, setVisible] = useState(true);
+
+  const rotate = useCallback(() => {
+    setVisible(false);
+    setTimeout(() => {
+      setCurrent((prev) => nextFromPool(pool, prev));
+      setVisible(true);
+    }, 700);
+  }, [pool]);
+
+  useEffect(() => {
+    let timeout: NodeJS.Timeout;
+
+    const schedule = () => {
+      const delay = 6000 + Math.random() * 6000;
+      timeout = setTimeout(() => {
+        rotate();
+        schedule();
+      }, delay);
+    };
+
+    schedule();
+    return () => clearTimeout(timeout);
+  }, [rotate]);
+
+  return (
+    <div
+      className={`relative overflow-hidden rounded-2xl shadow-md hover:shadow-xl transition-shadow ${className}`}
+    >
+      <Image
+        src={current}
+        alt="Impression"
+        fill
+        className={`object-cover transition-all duration-700 ease-in-out ${
+          visible
+            ? "opacity-100 translate-x-0"
+            : "opacity-0 -translate-x-8"
+        }`}
+        sizes="(max-width: 768px) 100vw, 33vw"
+      />
+    </div>
+  );
+}
+
+interface ImpressionsProps {
+  title: string;
+  subtitle: string;
+}
+
+export function Impressions({ title, subtitle }: ImpressionsProps) {
+  return (
+    <section className="py-24 bg-brand-grey-soft/30">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center mb-16">
+          <p className="text-brand-green font-semibold mb-2 uppercase tracking-wider text-sm">
+            {subtitle}
+          </p>
+          <h2 className="text-4xl font-bold mb-4 text-brand-grey-dark">
+            {title}
+          </h2>
+          <div className="w-20 h-1 bg-brand-green mx-auto rounded-full" />
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 auto-rows-[220px]">
+          <ImpressionsTile
+            pool={tilePools[0]}
+            initialSrc={tilePools[0][0]}
+            className="md:col-span-2 md:row-span-2"
+          />
+          <ImpressionsTile pool={tilePools[1]} initialSrc={tilePools[1][0]} />
+          <ImpressionsTile pool={tilePools[2]} initialSrc={tilePools[2][0]} />
+          <ImpressionsTile
+            pool={tilePools[3]}
+            initialSrc={tilePools[3][0]}
+            className="md:col-span-3"
+          />
+        </div>
+      </div>
+    </section>
+  );
+}