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,93 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+interface ImageGalleryProps {
+  images: string[];
+  alt: string;
+}
+
+export function ImageGallery({ images, alt }: ImageGalleryProps) {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const hasImages = images.length > 0;
+
+  const handlePrevious = () => {
+    setActiveIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
+  };
+
+  const handleNext = () => {
+    setActiveIndex((prev) => (prev + 1) % images.length);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="relative h-80 md:h-[500px] rounded-2xl overflow-hidden bg-brand-grey-soft">
+        {hasImages && (
+          <Image
+            src={images[activeIndex]}
+            alt={`${alt} - ${activeIndex + 1}`}
+            fill
+            className="object-cover"
+          />
+        )}
+        {images.length > 1 && (
+          <>
+            <button
+              onClick={handlePrevious}
+              className="absolute left-4 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 rounded-full hover:bg-white transition-colors"
+              aria-label="Vorheriges Bild"
+            >
+              <ChevronLeft className="w-5 h-5 text-brand-grey-dark" />
+            </button>
+            <button
+              onClick={handleNext}
+              className="absolute right-4 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 rounded-full hover:bg-white transition-colors"
+              aria-label="Nächstes Bild"
+            >
+              <ChevronRight className="w-5 h-5 text-brand-grey-dark" />
+            </button>
+            <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex gap-1.5">
+              {images.map((_, index) => (
+                <button
+                  key={index}
+                  onClick={() => setActiveIndex(index)}
+                  className={`w-2 h-2 rounded-full transition-all ${
+                    index === activeIndex
+                      ? "bg-white scale-110"
+                      : "bg-white/50 hover:bg-white/80"
+                  }`}
+                  aria-label={`Zu Bild ${index + 1} wechseln`}
+                />
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+
+      {images.length > 1 && (
+        <div className="flex gap-3 overflow-x-auto pb-2">
+          {images.map((image, index) => (
+            <button
+              key={image}
+              onClick={() => setActiveIndex(index)}
+              className={`relative w-20 h-20 flex-shrink-0 rounded-xl overflow-hidden ${
+                index === activeIndex
+                  ? "ring-2 ring-brand-green"
+                  : "ring-2 ring-transparent opacity-70 hover:opacity-100"
+              }`}
+            >
+              <Image
+                src={image}
+                alt={`${alt} - Vorschau ${index + 1}`}
+                fill
+                className="object-cover"
+              />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}