feat: complete v2 website relaunch (dark elegance, 50/50 hero, trattoria admin, gutschein shop, enzino bot, i18n)
This commit is contained in:
leonardo committed
1 parent
a90af21a8c
commit
4758017563
27 files changed
+3958
-292
No files matched your search
@@ -0,0 +1,177 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
import ApartmentCard from '../../components/ApartmentCard.astro';
|
||||
import EviivoWidget from '../../components/EviivoWidget.astro';
|
||||
import { getCollection } from 'astro:content';
|
||||
|
||||
const apartments = await getCollection('apartments');
|
||||
const sortedApartments = apartments.sort((a, b) => a.data.featuredOrder - b.data.featuredOrder);
|
||||
---
|
||||
|
||||
<Layout
|
||||
title="Boutique Apartments & Suiten in Goslar | Casa da Enzo"
|
||||
description="Alle 7 Ferienwohnungen & Suiten der Casa da Enzo in Goslar: Von der Luxus-Komfortsuite mit Balkon bis zum romantischen Altstadt-Studio. Jetzt direkt 15% günstiger buchen."
|
||||
>
|
||||
<!-- Header / Hero Section -->
|
||||
<section class="bg-stone-900 text-white py-16 sm:py-20 border-b border-stone-800">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center max-w-3xl mx-auto space-y-4">
|
||||
<span class="px-4 py-1.5 rounded-full bg-amber-500/20 text-amber-400 text-xs font-semibold uppercase tracking-wider border border-amber-500/30">
|
||||
Übersicht aller Wohneinheiten
|
||||
</span>
|
||||
<h1 class="font-serif text-4xl sm:text-5xl font-bold tracking-tight text-stone-100">
|
||||
Unsere 7 Boutique-Apartments in Goslar
|
||||
</h1>
|
||||
<p class="text-stone-300 text-base sm:text-lg leading-relaxed">
|
||||
Historisches Fachwerk aus dem 16. Jahrhundert, nachhaltiger Wohnkomfort mit Lehmputz, modernste Küchen und smarte Nuki-Keyless-Anreise.
|
||||
</p>
|
||||
|
||||
<!-- Ratings & Guest Directory Badges -->
|
||||
<div class="pt-6 flex flex-wrap items-center justify-center gap-4 text-xs font-medium text-stone-200">
|
||||
<!-- Airbnb Superhost -->
|
||||
<div class="flex items-center gap-2 px-4 py-2 rounded-xl bg-stone-800/80 border border-stone-700 shadow-sm">
|
||||
<span class="text-rose-400 text-base">★</span>
|
||||
<span class="font-bold">4.98</span>
|
||||
<span class="text-stone-400">|</span>
|
||||
<span class="text-amber-300 font-semibold">Airbnb Superhost</span>
|
||||
</div>
|
||||
|
||||
<!-- Booking.com Top Rating -->
|
||||
<div class="flex items-center gap-2 px-4 py-2 rounded-xl bg-stone-800/80 border border-stone-700 shadow-sm">
|
||||
<span class="px-2 py-0.5 rounded bg-blue-600 text-white font-bold text-xs">9.4</span>
|
||||
<span class="font-semibold text-stone-200">Booking.com Hervorragend</span>
|
||||
</div>
|
||||
|
||||
<!-- Eviivo Digital Guest Directory Link -->
|
||||
<a
|
||||
href="https://guest.eviivo.com/casa-daenzo"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center gap-2 px-4 py-2 rounded-xl bg-emerald-900/60 border border-emerald-600/50 text-emerald-300 hover:bg-emerald-900/90 transition-all"
|
||||
>
|
||||
<span class="text-base">📱</span>
|
||||
<span class="font-semibold">Eviivo Digital Guest Directory</span>
|
||||
<span class="text-xs text-emerald-400">↗</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Filter & Catalog Grid -->
|
||||
<section class="py-16 bg-[#FAF6F0]">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
|
||||
<!-- Category Filter Tabs -->
|
||||
<div class="flex flex-wrap items-center justify-center gap-2 sm:gap-3 mb-12">
|
||||
<button
|
||||
class="filter-btn active px-6 py-2.5 rounded-full text-sm font-semibold transition-all shadow-sm bg-[#C85A32] text-white"
|
||||
data-category="all"
|
||||
>
|
||||
Alle Apartments (7)
|
||||
</button>
|
||||
<button
|
||||
class="filter-btn px-6 py-2.5 rounded-full text-sm font-semibold transition-all shadow-sm bg-white text-stone-700 hover:bg-stone-100 border border-stone-200"
|
||||
data-category="suite"
|
||||
>
|
||||
Komfort-Suiten (4)
|
||||
</button>
|
||||
<button
|
||||
class="filter-btn px-6 py-2.5 rounded-full text-sm font-semibold transition-all shadow-sm bg-white text-stone-700 hover:bg-stone-100 border border-stone-200"
|
||||
data-category="romantik"
|
||||
>
|
||||
Romantik-Apartments (2)
|
||||
</button>
|
||||
<button
|
||||
class="filter-btn px-6 py-2.5 rounded-full text-sm font-semibold transition-all shadow-sm bg-white text-stone-700 hover:bg-stone-100 border border-stone-200"
|
||||
data-category="studio"
|
||||
>
|
||||
Boutique Studio (1)
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Apartments Grid -->
|
||||
<div id="apartments-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{sortedApartments.map((apt) => (
|
||||
<div class="apartment-item" data-type={apt.data.type}>
|
||||
<ApartmentCard
|
||||
title={apt.data.title}
|
||||
subtitle={apt.data.subtitle}
|
||||
category={apt.data.category}
|
||||
guests={apt.data.guests}
|
||||
sizeSqm={apt.data.sizeSqm}
|
||||
balcony={apt.data.balcony}
|
||||
workspace={apt.data.workspace}
|
||||
kitchen={apt.data.kitchen}
|
||||
highlights={apt.data.highlights}
|
||||
image={apt.data.image}
|
||||
slug={apt.slug}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<!-- Guest Directory Callout Banner -->
|
||||
<div class="mt-16 p-8 rounded-3xl bg-amber-50 border border-amber-200/80 shadow-sm flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
<div class="space-y-2 text-center md:text-left">
|
||||
<span class="px-3 py-1 rounded-full bg-amber-200 text-[#C85A32] text-xs font-bold uppercase tracking-wider">
|
||||
Eviivo Gästemappe
|
||||
</span>
|
||||
<h3 class="font-serif text-2xl font-bold text-stone-900">
|
||||
Digitaler Gästeführer & Hausordnung
|
||||
</h3>
|
||||
<p class="text-stone-600 text-sm max-w-2xl">
|
||||
Über den Eviivo Guest Directory Link findest du jederzeit alle Details zu deinem Aufenthalt, WLAN-Zugangsdaten, Empfehlungen für Restaurants und Harzer Ausflugsziele.
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
href="https://guest.eviivo.com/casa-daenzo"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="shrink-0 px-6 py-3.5 rounded-2xl bg-[#C85A32] text-white font-bold text-sm hover:bg-[#b04d2a] shadow-md transition-all flex items-center gap-2"
|
||||
>
|
||||
<span>📱 Gästemappe öffnen</span>
|
||||
<span>↗</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Eviivo Direct Booking Widget Integration -->
|
||||
<section id="booking" class="py-12 bg-stone-100 border-t border-stone-200 px-4">
|
||||
<EviivoWidget />
|
||||
</section>
|
||||
</Layout>
|
||||
|
||||
<script>
|
||||
// Client-side Category Filter Logic
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const filterBtns = document.querySelectorAll<HTMLButtonElement>('.filter-btn');
|
||||
const items = document.querySelectorAll<HTMLElement>('.apartment-item');
|
||||
|
||||
filterBtns.forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
const category = btn.getAttribute('data-category');
|
||||
|
||||
// Update button styles
|
||||
filterBtns.forEach((b) => {
|
||||
b.classList.remove('bg-[#C85A32]', 'text-white', 'active');
|
||||
b.classList.add('bg-white', 'text-stone-700', 'border', 'border-stone-200');
|
||||
});
|
||||
btn.classList.remove('bg-white', 'text-stone-700', 'border', 'border-stone-200');
|
||||
btn.classList.add('bg-[#C85A32]', 'text-white', 'active');
|
||||
|
||||
// Show/Hide items
|
||||
items.forEach((item) => {
|
||||
const itemType = item.getAttribute('data-type');
|
||||
if (category === 'all' || itemType === category) {
|
||||
item.style.display = 'block';
|
||||
} else {
|
||||
item.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Reference in new issue
Block a user