199 lines
11 KiB
Plaintext
199 lines
11 KiB
Plaintext
---
|
||
interface Props {
|
||
lang?: 'de' | 'en';
|
||
}
|
||
|
||
const { lang = 'de' } = Astro.props;
|
||
const isDe = lang === 'de';
|
||
---
|
||
|
||
<section class="relative pt-8 pb-16 lg:pt-12 lg:pb-24 overflow-hidden bg-[#1A1816]">
|
||
<!-- Subtle Background Gradients -->
|
||
<div class="absolute top-0 left-0 w-1/2 h-full bg-[#2D5A43]/10 blur-3xl pointer-events-none"></div>
|
||
<div class="absolute top-0 right-0 w-1/2 h-full bg-[#C85A32]/10 blur-3xl pointer-events-none"></div>
|
||
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 space-y-12">
|
||
<!-- Top Subtitle / Heritage Tag -->
|
||
<div class="text-center space-y-3">
|
||
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-[#24211D] border border-[#D4A373]/30 text-[#D4A373] text-xs font-semibold tracking-wider uppercase">
|
||
<span>🇮🇹 Sizilien trifft Goslar</span>
|
||
<span>•</span>
|
||
<span>Seit 1980 • Bäckerstraße 18</span>
|
||
</div>
|
||
<h1 class="font-serif text-3xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-[#E6D5C3]">
|
||
Zwei Welten. Ein unvergleichliches Haus.
|
||
</h1>
|
||
<p class="text-sm sm:text-base text-[#A3978B] max-w-2xl mx-auto leading-relaxed">
|
||
{isDe
|
||
? "Obere Etagen: 7 neu sanierte Boutique-Apartments im UNESCO-Fachwerk. Erdgeschoss: Die traditionsreiche Familien-Trattoria. Erlebe echte italienische Gastfreundschaft im Herzen von Goslar."
|
||
: "Upper floors: 7 newly renovated boutique apartments in UNESCO timber-frame heritage. Ground floor: The legendary family Trattoria. Experience authentic Italian hospitality in Goslar."}
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 50 / 50 Dual Hero Cards Grid -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-stretch">
|
||
<!-- Left Side: Apartments (Green #2D5A43) -->
|
||
<div class="relative rounded-3xl bg-[#24211D] border border-[#2D5A43]/40 p-8 sm:p-10 flex flex-col justify-between shadow-2xl hover:border-emerald-500/60 transition-all group overflow-hidden">
|
||
<div class="absolute top-0 right-0 w-32 h-32 bg-[#2D5A43]/20 rounded-full blur-2xl group-hover:bg-[#2D5A43]/30 transition-all"></div>
|
||
|
||
<div class="space-y-6 relative z-10">
|
||
<div class="flex items-center justify-between">
|
||
<span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#2D5A43]/20 border border-emerald-500/30 text-emerald-400 text-xs font-bold uppercase tracking-wider">
|
||
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
|
||
<span>{isDe ? "Boutique Apartments" : "Boutique Apartments"}</span>
|
||
</span>
|
||
<span class="text-xs font-serif text-[#D4A373]">7 Suiten • 100% Saniert</span>
|
||
</div>
|
||
|
||
<div class="space-y-3">
|
||
<h2 class="font-serif text-2xl sm:text-3xl font-bold text-[#E6D5C3] group-hover:text-emerald-300 transition-colors">
|
||
{isDe ? "Schlafen & Entspannen im Denkmal" : "Stay in UNESCO Heritage"}
|
||
</h2>
|
||
<p class="text-xs sm:text-sm text-[#A3978B] leading-relaxed">
|
||
{isDe
|
||
? "4 Premium-Komfort-Suites mit Balkon/Terrasse & Workstation sowie 3 gemütliche Klassik-Suites. Kontaktloser Nuki Smart-Lock Access ab 15:00 Uhr, Highspeed WLAN & Bestpreis-Garantie bei Direktbuchung."
|
||
: "4 Premium Suites with balcony/terrace & workspace plus 3 cozy Classic Suites. Contactless Nuki Smart Lock access from 3:00 PM, Highspeed Wi-Fi & Best Rate Guarantee."}
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Feature Bullets -->
|
||
<div class="grid grid-cols-2 gap-3 text-xs text-[#E6D5C3] pt-2 border-t border-[#D4A373]/15">
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-emerald-400 font-bold">✓</span>
|
||
<span>100% 2025er Sanierung</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-emerald-400 font-bold">✓</span>
|
||
<span>Nuki Keyless PIN Access</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-emerald-400 font-bold">✓</span>
|
||
<span>15% Direktbucher-Rabatt</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-emerald-400 font-bold">✓</span>
|
||
<span>Balkon, Terrasse & Workation</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Action Area -->
|
||
<div class="pt-8 space-y-4 relative z-10">
|
||
<div class="flex flex-col sm:flex-row gap-3">
|
||
<a
|
||
href="#apartments"
|
||
class="flex-1 py-3.5 px-6 rounded-2xl bg-[#2D5A43] hover:bg-[#386d52] text-white text-center font-bold text-xs sm:text-sm transition-all shadow-lg hover:shadow-emerald-900/30"
|
||
>
|
||
{isDe ? "Suiten entdecken & buchen" : "Explore Suites & Book"}
|
||
</a>
|
||
<a
|
||
href="https://wa.me/4915207483196"
|
||
target="_blank"
|
||
class="py-3.5 px-4 rounded-2xl bg-[#1A1816] hover:bg-[#2E2A25] text-emerald-400 border border-emerald-500/40 text-center font-semibold text-xs transition-all flex items-center justify-center gap-2"
|
||
>
|
||
<span>💬 WhatsApp Alja</span>
|
||
</a>
|
||
</div>
|
||
<p class="text-[11px] text-[#A3978B] text-center sm:text-left">
|
||
Apartment Concierge Alja: <a href="https://wa.me/4915207483196" target="_blank" class="text-emerald-400 underline font-medium">+49 1520 7483196</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Side: Trattoria (Red #C85A32) -->
|
||
<div class="relative rounded-3xl bg-[#24211D] border border-[#C85A32]/40 p-8 sm:p-10 flex flex-col justify-between shadow-2xl hover:border-[#C85A32] transition-all group overflow-hidden">
|
||
<div class="absolute top-0 right-0 w-32 h-32 bg-[#C85A32]/20 rounded-full blur-2xl group-hover:bg-[#C85A32]/30 transition-all"></div>
|
||
|
||
<div class="space-y-6 relative z-10">
|
||
<div class="flex items-center justify-between">
|
||
<span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#C85A32]/20 border border-[#C85A32]/30 text-[#C85A32] text-xs font-bold uppercase tracking-wider">
|
||
<span class="w-2 h-2 rounded-full bg-[#C85A32] animate-pulse"></span>
|
||
<span>Trattoria da Enzo</span>
|
||
</span>
|
||
<span class="text-xs font-serif text-[#D4A373]">Familientradition seit 1980</span>
|
||
</div>
|
||
|
||
<div class="space-y-3">
|
||
<h2 class="font-serif text-2xl sm:text-3xl font-bold text-[#E6D5C3] group-hover:text-[#e2724a] transition-colors">
|
||
{isDe ? "Kulinarik & Italienische Lebensfreude" : "Authentic Sicilian Dining"}
|
||
</h2>
|
||
<p class="text-xs sm:text-sm text-[#A3978B] leading-relaxed">
|
||
{isDe
|
||
? "In Alessandras Trattoria genießen Hotelgäste und Feinschmecker ehrliche sizilianische Spezialitäten, frisch gedrehte Pasta und erlesene Weine. Bevorzugte Tischreservierung für Apartment-Gäste."
|
||
: "Enjoy authentic Sicilian specialties, handmade pasta, and fine wines at Alessandra's Trattoria. Priority table reservations for apartment guests."}
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Feature Bullets -->
|
||
<div class="grid grid-cols-2 gap-3 text-xs text-[#E6D5C3] pt-2 border-t border-[#D4A373]/15">
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-[#C85A32] font-bold">✓</span>
|
||
<span>Hausgemachte Pasta & Kräuter</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-[#C85A32] font-bold">✓</span>
|
||
<span>Di–So 17:00 – 22:30 Uhr</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-[#C85A32] font-bold">✓</span>
|
||
<span>Priorisierte Gästereservierung</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-[#C85A32] font-bold">✓</span>
|
||
<span>Echte Sizilianische Rezepte</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Action Area -->
|
||
<div class="pt-8 space-y-4 relative z-10">
|
||
<div class="flex flex-col sm:flex-row gap-3">
|
||
<a
|
||
href="tel:+49532123456"
|
||
class="flex-1 py-3.5 px-6 rounded-2xl bg-[#C85A32] hover:bg-[#b04d2a] text-white text-center font-bold text-xs sm:text-sm transition-all shadow-lg hover:shadow-red-900/30"
|
||
>
|
||
{isDe ? "Tisch anrufen & reservieren" : "Call & Reserve Table"}
|
||
</a>
|
||
<a
|
||
href="#trattoria"
|
||
class="py-3.5 px-4 rounded-2xl bg-[#1A1816] hover:bg-[#2E2A25] text-[#C85A32] border border-[#C85A32]/40 text-center font-semibold text-xs transition-all flex items-center justify-center gap-2"
|
||
>
|
||
<span>🍷 Speisekarte & Info</span>
|
||
</a>
|
||
</div>
|
||
<p class="text-[11px] text-[#A3978B] text-center sm:text-left">
|
||
Trattoria Festnetz: <a href="tel:+49532123456" class="text-[#C85A32] underline font-medium">+49 5321 23456</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Trust Bar: Airbnb Superhost, 9.8 Booking.com, 100% 2025er Sanierung -->
|
||
<div class="bg-[#24211D] border border-[#D4A373]/20 rounded-2xl p-6 grid grid-cols-2 lg:grid-cols-4 gap-6 text-center shadow-xl">
|
||
<div class="space-y-1">
|
||
<div class="text-2xl">⭐</div>
|
||
<div class="font-serif font-bold text-[#E6D5C3] text-sm sm:text-base">Airbnb Superhost</div>
|
||
<div class="text-[11px] text-[#A3978B]">Höchste Gastzufriedenheit</div>
|
||
</div>
|
||
|
||
<div class="space-y-1 border-l border-[#D4A373]/10">
|
||
<div class="text-2xl">🏆</div>
|
||
<div class="font-serif font-bold text-[#E6D5C3] text-sm sm:text-base">9.8 Booking.com</div>
|
||
<div class="text-[11px] text-[#A3978B]">Spitzenbewertung 2025</div>
|
||
</div>
|
||
|
||
<div class="space-y-1 border-l border-[#D4A373]/10">
|
||
<div class="text-2xl">🛠️</div>
|
||
<div class="font-serif font-bold text-[#E6D5C3] text-sm sm:text-base">100% 2025er Sanierung</div>
|
||
<div class="text-[11px] text-[#A3978B]">Denkmal trifft Moderne</div>
|
||
</div>
|
||
|
||
<div class="space-y-1 border-l border-[#D4A373]/10">
|
||
<div class="text-2xl">🔑</div>
|
||
<div class="font-serif font-bold text-[#E6D5C3] text-sm sm:text-base">24/7 Nuki Smart Access</div>
|
||
<div class="text-[11px] text-[#A3978B]">Digitaler kontaktloser Check-in</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|