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

feat: initial Astro base structure for Casa da Enzo website

Browse Source
This commit is contained in:
leonardo committed 2026-09-15 20:20:21 +00:00
commit a90af21a8c
25 files changed
+7233
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/Header.astro
+59
View File
@@ -0,0 +1,59 @@
---
---
<header class="sticky top-0 z-50 bg-[#FAF6F0]/90 backdrop-blur-md border-b border-stone-200/60 transition-all">
<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>
<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>
</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>
</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)
</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">
<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>
</button>
</div>
</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>
</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');
});
}
</script>