Initial commit: spreewaldzeit + Dockerfile for Coolify (Next.js + Prisma/SQLite)

components/home/Location.tsx

@@ -0,0 +1,136 @@
+import Image from "next/image";
+import Link from "next/link";
+import { SpreeMap } from "./SpreeMap";
+
+const highlights = [
+  {
+    title: "Die Kähne",
+    text: "Vom Hafen Lübbenau starten täglich die traditionellen Spreewaldkähne. Drei Stunden durch das UNESCO-Biosphärenreservat — ohne Motor, mit Schilf und Stille.",
+    image: "https://images.unsplash.com/photo-1528181304800-259b08848526?auto=format&fit=crop&w=800&q=75",
+  },
+  {
+    title: "Die Wege",
+    text: "Über 400 km Radwege führen durch die Region. Unsere Fahrräder stehen für Sie bereit, Tourentipps liegen in jeder Wohnung aus.",
+    image: "https://images.unsplash.com/photo-1517649763962-0c623066013b?auto=format&fit=crop&w=800&q=75",
+  },
+  {
+    title: "Der Tisch",
+    text: "Gurken, Leinöl, frischer Fisch, sorbische Hochzeitssuppe — die Spreewaldküche ist bodenständig und überraschend. Wir haben unsere Lieblingsadressen notiert.",
+    image: "https://images.unsplash.com/photo-1476224203421-9ac39bcb3327?auto=format&fit=crop&w=800&q=75",
+  },
+];
+
+export function Location() {
+  return (
+    <section id="umgebung" className="py-20 md:py-28 border-t border-ink/10 scroll-mt-24">
+      <div className="container">
+        <div className="max-w-3xl mb-14 md:mb-20">
+          <div className="eyebrow mb-4">Die Umgebung</div>
+          <h2 className="font-display text-display-lg leading-[1.02]">
+            Zwischen Wasser,<br />
+            <span className="italic text-moss-600">Wald und Wegen.</span>
+          </h2>
+          <p className="mt-6 text-ink/70 max-w-xl leading-relaxed">
+            Der Spreewald ist ein UNESCO-Biosphärenreservat. Weniger als 90 Minuten
+            von Berlin entfernt — und doch eine andere Welt.
+          </p>
+        </div>
+
+        {/* Highlight cards */}
+        <div className="grid md:grid-cols-3 gap-6 md:gap-8">
+          {highlights.map((h) => (
+            <article
+              key={h.title}
+              className="group bg-cream/60 rounded-sm overflow-hidden"
+            >
+              <div className="relative aspect-[5/4] overflow-hidden">
+                <Image
+                  src={h.image}
+                  alt={h.title}
+                  fill
+                  sizes="(max-width: 768px) 100vw, 33vw"
+                  className="object-cover transition-transform duration-[1200ms] ease-out group-hover:scale-[1.04]"
+                />
+              </div>
+              <div className="p-6 md:p-7">
+                <h3 className="font-display text-2xl mb-3">{h.title}</h3>
+                <p className="text-sm text-ink/75 leading-relaxed">{h.text}</p>
+              </div>
+            </article>
+          ))}
+        </div>
+
+        {/* Map */}
+        <div className="mt-16 md:mt-20">
+          <div className="eyebrow mb-4">Wo wir sind</div>
+          <h3 className="font-display text-2xl md:text-3xl mb-3 leading-tight">
+            Vetschau/Spreewald —{" "}
+            <span className="italic text-moss-600">mitten im Biosphärenreservat</span>.
+          </h3>
+          <p className="text-ink/65 text-sm mb-6 max-w-xl">
+            Kraftwerkstraße 10 · 03226 Vetschau. Klicken Sie auf den Marker für
+            die Routenplanung.
+          </p>
+
+          <div className="relative overflow-hidden rounded-sm border border-ink/10 shadow-[0_1px_3px_rgba(28,38,32,0.04),0_4px_16px_rgba(28,38,32,0.05)]">
+            <SpreeMap />
+            <div className="absolute inset-0 pointer-events-none ring-1 ring-inset ring-ink/8 rounded-sm" />
+          </div>
+
+          {/* Address cards */}
+          <div className="mt-5 grid sm:grid-cols-2 gap-4">
+            <div className="flex items-start justify-between gap-4 bg-cream/60 border border-ink/10 rounded-sm px-5 py-4">
+              <div>
+                <div className="eyebrow mb-1">Spreewaldzeit</div>
+                <div className="font-display text-lg leading-tight">Kraftwerkstraße 10</div>
+                <div className="text-sm text-ink/65 mt-1">03226 Vetschau/Spreewald</div>
+              </div>
+              <a
+                href="https://www.google.com/maps/dir/?api=1&destination=51.7753,14.0966"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="shrink-0 text-xs text-moss-700 border border-moss-300 px-3 py-1.5 rounded-full hover:bg-moss-50 transition-colors mt-1"
+              >
+                Route →
+              </a>
+            </div>
+            <div className="flex items-start justify-between gap-4 bg-cream/60 border border-ink/10 rounded-sm px-5 py-4">
+              <div>
+                <div className="eyebrow mb-1">Anfahrt</div>
+                <div className="font-display text-lg leading-tight">Berlin → Vetschau</div>
+                <div className="text-sm text-ink/65 mt-1">ca. 90 Min · A13 Richtung Cottbus</div>
+              </div>
+              <a
+                href="https://www.google.com/maps/dir/?api=1&destination=51.7753,14.0966"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="shrink-0 text-xs text-moss-700 border border-moss-300 px-3 py-1.5 rounded-full hover:bg-moss-50 transition-colors mt-1"
+              >
+                Route →
+              </a>
+            </div>
+          </div>
+
+        </div>
+
+        {/* CTA */}
+        <div className="mt-16 md:mt-20 flex flex-col md:flex-row items-start md:items-center justify-between gap-6 p-8 md:p-10 bg-moss-800 text-parchment rounded-sm">
+          <div>
+            <div className="eyebrow !text-parchment/60 mb-2">Bereit?</div>
+            <h3 className="font-display text-2xl md:text-3xl leading-tight">
+              Fragen Sie unverbindlich an —<br className="hidden md:block" />
+              wir melden uns innerhalb von 24 Stunden.
+            </h3>
+          </div>
+          <Link
+            href="/anfrage"
+            className="inline-flex items-center gap-2 bg-parchment text-ink px-7 py-3.5 rounded-full text-sm hover:bg-cream transition-colors shrink-0"
+          >
+            Zur Anfrage
+            <span aria-hidden>→</span>
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}