Sergio/casa-daenzo-web
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: complete v2 website relaunch (dark elegance, 50/50 hero, trattoria admin, gutschein shop, enzino bot, i18n)

Browse Source
This commit is contained in:
leonardo committed 2026-09-16 21:35:23 +00:00
1 parent a90af21a8c
commit 4758017563
27 files changed
+3958 -292
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/Header.astro
+143 -29
View File
@@ -1,35 +1,120 @@
---
interface Props {
lang?: 'de' | 'en';
}
const { lang = 'de' } = Astro.props;
const isDe = lang === 'de';
---
<header class="sticky top-0 z-50 bg-[#FAF6F0]/90 backdrop-blur-md border-b border-stone-200/60 transition-all">
<header class="sticky top-0 z-40 w-full bg-stone-900/95 backdrop-blur-md border-b border-stone-800 transition-all">
<!-- Top Utility Contact Bar -->
<div class="bg-stone-950 border-b border-stone-800/80 py-1.5 px-4 text-[11px] sm:text-xs">
<div class="max-w-7xl mx-auto flex flex-wrap items-center justify-between gap-2 text-stone-400">
<!-- Dual Contacts -->
<div class="flex flex-wrap items-center gap-4 sm:gap-6">
<!-- Apartments Phone -->
<a
href="https://wa.me/4915207483196"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center gap-1.5 text-emerald-400 hover:text-emerald-300 font-medium transition-colors"
title="Apartment Anfragen & Concierge Alja"
>
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
<span class="text-stone-300">Apartments (WhatsApp):</span>
<span class="underline font-semibold">+49 1520 7483196</span>
</a>
<!-- Trattoria Phone -->
<a
href="tel:+4915207483196"
class="inline-flex items-center gap-1.5 text-[#C85A32] hover:text-[#e2724a] font-medium transition-colors"
title="Trattoria Tischreservierung"
>
<span class="w-2 h-2 rounded-full bg-[#C85A32]"></span>
<span class="text-stone-300">Trattoria:</span>
<span class="underline font-semibold">+49 1520 7483196</span>
</a>
</div>
<!-- Right Utility Links: Eviivo & Language Switch -->
<div class="flex items-center gap-4">
<a
href="https://guest.eviivo.com/casa-daenzo"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center gap-1 text-amber-400 hover:text-white transition-colors font-medium cursor-pointer"
title="Digital Guest Directory"
>
<span>📖</span>
<span class="underline">Eviivo Guest Directory</span>
</a>
<div class="flex items-center bg-stone-900 border border-stone-800 rounded-full px-2 py-0.5 text-[11px] font-bold">
<span class="px-1.5 py-0.5 rounded-full bg-amber-500 text-stone-950">DE</span>
</div>
</div>
</div>
</div>
<!-- Main Navigation Bar -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
<!-- Brand Logo -->
<a href="/" class="flex items-center gap-3 group">
<div class="w-10 h-10 rounded-full bg-[#C85A32] text-white flex items-center justify-center font-serif text-xl font-bold shadow-sm group-hover:scale-105 transition-transform">
E
<div class="w-11 h-11 rounded-2xl bg-gradient-to-br from-[#2D5A43] via-[#D4A373] to-[#C85A32] p-0.5 shadow-lg group-hover:scale-105 transition-transform">
<div class="w-full h-full bg-stone-950 rounded-[14px] flex items-center justify-center font-serif text-xl font-bold text-amber-400">
E
</div>
</div>
<div class="flex flex-col">
<span class="font-serif text-xl tracking-wide font-bold text-stone-900 group-hover:text-[#C85A32] transition-colors">Casa da Enzo</span>
<span class="text-[10px] tracking-widest uppercase text-stone-500 font-sans -mt-1">Goslar • Altstadt</span>
<span class="font-serif text-xl tracking-wide font-bold text-white group-hover:text-amber-400 transition-colors">
Casa da Enzo
</span>
<div class="flex items-center gap-1.5 text-[10px] tracking-widest uppercase font-sans -mt-0.5">
<span class="text-emerald-400 font-semibold">Apartments</span>
<span class="text-stone-400">•</span>
<span class="text-[#C85A32] font-semibold">Trattoria</span>
</div>
</div>
</a>
<!-- Navigation -->
<nav class="hidden md:flex items-center gap-8 text-sm font-medium text-stone-700">
<a href="#apartments" class="hover:text-[#C85A32] transition-colors">Apartments & Suiten</a>
<a href="#trattoria" class="hover:text-[#C85A32] transition-colors">Trattoria da Enzo</a>
<a href="#geschichte" class="hover:text-[#C85A32] transition-colors">Unsere Geschichte</a>
<a href="#location" class="hover:text-[#C85A32] transition-colors">Lage & Anreise</a>
<a href="#faq" class="hover:text-[#C85A32] transition-colors">FAQ</a>
<!-- Desktop Navigation -->
<nav class="hidden md:flex items-center gap-6 lg:gap-8 text-sm font-medium">
<a href="/apartments" class="text-stone-200 hover:text-emerald-400 transition-colors flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
<span>Apartments & Suiten</span>
</a>
<a href="/trattoria" class="text-stone-200 hover:text-[#C85A32] transition-colors flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-[#C85A32]"></span>
<span>Trattoria da Enzo</span>
</a>
<a href="/blog" class="text-stone-200 hover:text-amber-400 transition-colors">
Blog & Magazin
</a>
<a href="/#geschichte" class="text-stone-200 hover:text-amber-400 transition-colors">
Unsere Geschichte
</a>
<a href="/#faq" class="text-stone-200 hover:text-amber-400 transition-colors">
FAQ
</a>
</nav>
<!-- CTAs -->
<div class="flex items-center gap-4">
<a href="#booking" class="hidden sm:inline-flex items-center px-5 py-2.5 rounded-full bg-[#C85A32] text-white font-medium text-sm hover:bg-[#b04d2a] shadow-md transition-all hover:shadow-lg hover:-translate-y-0.5">
Direkt buchen (Bestpreis)
<div class="flex items-center gap-3">
<a
href="/apartments#booking"
class="hidden sm:inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-[#C85A32] text-white font-medium text-xs lg:text-sm hover:bg-[#b04d2a] shadow-md transition-all hover:scale-105"
>
<span>Direkt buchen (Bestpreis)</span>
</a>
<!-- Mobile Menu Button -->
<button id="mobile-menu-btn" class="md:hidden p-2 text-stone-700 hover:text-stone-900" aria-label="Menü öffnen">
<button
id="mobile-menu-btn"
class="md:hidden p-2 text-stone-200 hover:text-amber-400 rounded-xl bg-stone-800 border border-stone-700"
aria-label="Menü öffnen"
>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
@@ -38,22 +123,51 @@
</div>
<!-- Mobile Navigation Dropdown -->
<div id="mobile-menu" class="hidden md:hidden bg-[#FAF6F0] border-b border-stone-200 px-4 py-4 space-y-3">
<a href="#apartments" class="block py-2 text-stone-800 font-medium hover:text-[#C85A32]">Apartments & Suiten</a>
<a href="#trattoria" class="block py-2 text-stone-800 font-medium hover:text-[#C85A32]">Trattoria da Enzo</a>
<a href="#geschichte" class="block py-2 text-stone-800 font-medium hover:text-[#C85A32]">Unsere Geschichte</a>
<a href="#location" class="block py-2 text-stone-800 font-medium hover:text-[#C85A32]">Lage & Anreise</a>
<a href="#faq" class="block py-2 text-stone-800 font-medium hover:text-[#C85A32]">FAQ</a>
<a href="#booking" class="block text-center py-3 rounded-xl bg-[#C85A32] text-white font-medium">Direkt buchen</a>
<div id="mobile-menu" class="hidden md:hidden bg-stone-950 border-b border-stone-800 px-4 py-6 space-y-4">
<a href="/apartments" class="block py-2 text-stone-200 font-medium hover:text-emerald-400 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
<span>Apartments & Suiten</span>
</a>
<a href="/trattoria" class="block py-2 text-stone-200 font-medium hover:text-[#C85A32] flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-[#C85A32]"></span>
<span>Trattoria da Enzo</span>
</a>
<a href="/blog" class="block py-2 text-stone-200 font-medium hover:text-amber-400">
Blog & Magazin
</a>
<a href="/#geschichte" class="block py-2 text-stone-200 font-medium hover:text-amber-400">
Unsere Geschichte
</a>
<a href="/#faq" class="block py-2 text-stone-200 font-medium hover:text-amber-400">
FAQ
</a>
<div class="pt-2 border-t border-stone-800 space-y-2">
<a href="https://wa.me/4915207483196" target="_blank" class="block py-1.5 text-xs text-emerald-400 font-semibold">
💬 Apartments WhatsApp: +49 1520 7483196
</a>
<a href="https://guest.eviivo.com/casa-daenzo" target="_blank" class="block py-1.5 text-xs text-amber-400 font-semibold">
📖 Eviivo Guest Directory
</a>
</div>
<a href="/apartments#booking" class="block text-center py-3 rounded-2xl bg-[#C85A32] text-white font-bold text-sm">
Jetzt Direkt buchen
</a>
</div>
</header>
<script>
const btn = document.getElementById('mobile-menu-btn');
const menu = document.getElementById('mobile-menu');
if (btn && menu) {
btn.addEventListener('click', () => {
menu.classList.toggle('hidden');
});
function setupHeader() {
const btn = document.getElementById('mobile-menu-btn');
const menu = document.getElementById('mobile-menu');
if (btn && menu) {
btn.addEventListener('click', () => {
menu.classList.toggle('hidden');
});
}
}
document.addEventListener('DOMContentLoaded', setupHeader);
document.addEventListener('astro:page-load', setupHeader);
</script>