feat: initial Astro base structure for Casa da Enzo website

src/pages/apartments/[slug].astro

@@ -0,0 +1,97 @@
+---
+import Layout from '../../layouts/Layout.astro';
+import EviivoWidget from '../../components/EviivoWidget.astro';
+import { getCollection } from 'astro:content';
+
+export async function getStaticPaths() {
+  const apartments = await getCollection('apartments');
+  return apartments.map((apt) => ({
+    params: { slug: apt.slug },
+    props: { apartment: apt },
+  }));
+}
+
+const { apartment } = Astro.props;
+const { Content } = await apartment.render();
+const { title, subtitle, category, guests, sizeSqm, balcony, workspace, kitchen, highlights } = apartment.data;
+---
+
+<Layout title={`${title} | Casa da Enzo Goslar`} description={subtitle}>
+  <div class="py-12 bg-[#FAF6F0]">
+    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 space-y-8">
+      
+      <!-- Back Link -->
+      <a href="/#apartments" class="inline-flex items-center gap-2 text-sm font-semibold text-[#C85A32] hover:underline">
+        ← Zurück zur Apartment-Übersicht
+      </a>
+
+      <!-- Title & Header -->
+      <div class="space-y-4">
+        <span class="px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wider bg-[#C85A32] text-white">
+          {category}
+        </span>
+        <h1 class="font-serif text-4xl sm:text-5xl font-bold text-stone-900">{title}</h1>
+        <p class="text-stone-600 text-lg leading-relaxed">{subtitle}</p>
+      </div>
+
+      <!-- Quick Specs Bar -->
+      <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 p-6 rounded-2xl bg-white border border-stone-200 shadow-sm text-center">
+        <div>
+          <span class="block text-xs uppercase tracking-wider text-stone-500 font-semibold">Kapazität</span>
+          <span class="font-serif text-xl font-bold text-stone-900 mt-1 block">👥 {guests} Gäste</span>
+        </div>
+        <div>
+          <span class="block text-xs uppercase tracking-wider text-stone-500 font-semibold">Größe</span>
+          <span class="font-serif text-xl font-bold text-stone-900 mt-1 block">📐 {sizeSqm} m²</span>
+        </div>
+        <div>
+          <span class="block text-xs uppercase tracking-wider text-stone-500 font-semibold">Balkon / Terrasse</span>
+          <span class="font-serif text-xl font-bold text-stone-900 mt-1 block">{balcony ? '🌿 Ja' : 'Nein'}</span>
+        </div>
+        <div>
+          <span class="block text-xs uppercase tracking-wider text-stone-500 font-semibold">Workspace</span>
+          <span class="font-serif text-xl font-bold text-stone-900 mt-1 block">{workspace ? '💻 Inklusive' : 'WLAN'}</span>
+        </div>
+      </div>
+
+      <!-- Image Banner Placeholder -->
+      <div class="aspect-[21/9] rounded-3xl bg-stone-300 flex items-center justify-center text-stone-500 font-serif text-lg font-medium shadow-inner">
+        {title} — High-Res Fotografie
+      </div>
+
+      <!-- Highlights & Details -->
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-8 pt-4">
+        <div class="md:col-span-2 space-y-6 bg-white p-8 rounded-3xl border border-stone-200 shadow-sm">
+          <h2 class="font-serif text-2xl font-bold text-stone-900">Beschreibung & Ausstattung</h2>
+          <div class="prose prose-stone max-w-none text-stone-700 leading-relaxed">
+            <Content />
+          </div>
+
+          <div class="pt-6 border-t border-stone-200">
+            <h3 class="font-serif text-lg font-bold text-stone-900 mb-3">Küche & Verpflegung</h3>
+            <p class="text-stone-600 text-sm">{kitchen}</p>
+          </div>
+        </div>
+
+        <!-- Sidebar / Highlights -->
+        <div class="space-y-6">
+          <div class="bg-stone-900 text-white p-6 rounded-3xl space-y-4 shadow-lg">
+            <h3 class="font-serif text-xl font-bold text-amber-400">Ausstattungs-Highlights</h3>
+            <ul class="space-y-3 text-sm text-stone-300">
+              {highlights.map((h) => (
+                <li class="flex items-start gap-3">
+                  <span class="text-amber-400 font-bold">✓</span>
+                  <span>{h}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <!-- Eviivo Booking Widget -->
+      <EviivoWidget />
+
+    </div>
+  </div>
+</Layout>