98 lines
4.1 KiB
Plaintext
98 lines
4.1 KiB
Plaintext
---
|
|
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>
|