fberger/brabetz-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrate to Astro and split components

Browse Source
This commit is contained in:
Felix Brabetz
2026-05-16 01:46:08 +02:00
parent a4b1ba7d79
commit 35fc67cd6e
19 changed files with 953 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Biodiversity.astro
+46
View File
@@ -0,0 +1,46 @@
---
// src/components/Biodiversity.astro
---
<!-- Biodiversity & Quality Section -->
<section id="biodiversity" class="py-32 bg-stone-900/50 border-y border-stone-800/50">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
<div class="lg:col-span-6">
<span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Zukunftssicher & Lebendig</span>
<h2 class="text-3xl sm:text-4xl font-luxury font-bold text-white mb-6">Biodiversität trifft Premium-Qualität</h2>
<div class="w-16 h-1 bg-gradient-to-r from-emerald-500 to-amber-500 mb-6"></div>
<p class="text-stone-400 text-lg leading-relaxed font-light mb-6">
Ein Garten ist mehr als nur eine optische Kulisse. Wir schaffen lebendige Ökosysteme, die Generationen überdauern. Unser Fokus liegt auf der perfekten Symbiose aus exklusivem Design, höchster baulicher Qualität und ökologischer Verantwortung.
</p>
<p class="text-stone-400 text-lg leading-relaxed font-light mb-6">
In enger Kooperation mit <a href="https://plantlix.de" target="_blank" class="text-amber-400 hover:underline">Plantlix.de</a> nutzen wir modernste, datengestützte Pflanzenanalysen. So stellen wir sicher, dass jede Pflanze optimal zum Standort passt, die Biodiversität fördert und klimaresistent ist.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-8">
<div class="flex items-start gap-3">
<div class="text-emerald-500 mt-1"><i class="fa-solid fa-leaf"></i></div>
<div>
<h4 class="font-bold text-white text-sm">Native Flora</h4>
<p class="text-stone-500 text-xs mt-1">Gezielter Einsatz heimischer Pflanzen zur Förderung von Insekten und Vögeln.</p>
</div>
</div>
<div class="flex items-start gap-3">
<div class="text-emerald-500 mt-1"><i class="fa-solid fa-seedling"></i></div>
<div>
<h4 class="font-bold text-white text-sm">Bodenbiologie</h4>
<p class="text-stone-500 text-xs mt-1">Nachhaltiger Aufbau der Bodenschichten nach DIN-Vorgaben für langlebiges Grün.</p>
</div>
</div>
</div>
</div>
<div class="lg:col-span-6">
<div class="relative rounded-2xl overflow-hidden shadow-2xl border border-white/5">
<img src="https://images.unsplash.com/photo-1466692442299-3581ffda9327?auto=format&fit=crop&w=800&q=80" alt="Biodiverser Garten" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-stone-950/50 to-transparent"></div>
<div class="absolute bottom-6 left-6 right-6 glass p-4 rounded-xl">
<p class="text-xs text-stone-300 font-light">"Wir schaffen Oasen, die nicht nur schön anzusehen sind, sondern aktiv zum Erhalt unserer Artenvielfalt beitragen."</p>
</div>
</div>
</div>
</div>
</div>
</section>
src/components/Events.astro
+42
View File
@@ -0,0 +1,42 @@
---
// src/components/Events.astro
---
<!-- Events Section -->
<section id="events" class="py-32 bg-stone-900/50 border-y border-stone-800/50">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="mb-20 text-center">
<span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Exklusive Gartenevents</span>
<h2 class="text-3xl sm:text-5xl font-luxury font-bold text-white mb-4">Das Komplettpaket für Ihr Event</h2>
<p class="text-stone-500 max-w-2xl mx-auto font-light">Wir gestalten nicht nur Ihren Garten, wir füllen ihn auch mit Leben. Unser exklusives Netzwerk für unvergessliche Momente.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Leihköche -->
<div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group">
<div class="w-12 h-12 bg-emerald-900/50 rounded-lg flex items-center justify-center text-amber-400 text-xl border border-amber-500/20 mb-6 group-hover:border-amber-500/50 transition-all">
<i class="fa-solid fa-utensils"></i>
</div>
<h3 class="text-xl font-luxury font-bold text-white mb-3">Beste Leihköche</h3>
<p class="text-stone-400 text-sm font-light leading-relaxed">Kulinarische Meisterwerke direkt in Ihrem Garten. Von Live-Cooking bis zum exklusiven Mehr-Gänge-Menü.</p>
</div>
<!-- DJs -->
<div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group">
<div class="w-12 h-12 bg-emerald-900/50 rounded-lg flex items-center justify-center text-amber-400 text-xl border border-amber-500/20 mb-6 group-hover:border-amber-500/50 transition-all">
<i class="fa-solid fa-compact-disc"></i>
</div>
<h3 class="text-xl font-luxury font-bold text-white mb-3">Top DJs</h3>
<p class="text-stone-400 text-sm font-light leading-relaxed">Die perfekte Soundkulisse für Ihre Sommernacht. Professionelle DJs mit High-End Equipment.</p>
</div>
<!-- Eventmanager -->
<div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group">
<div class="w-12 h-12 bg-emerald-900/50 rounded-lg flex items-center justify-center text-amber-400 text-xl border border-amber-500/20 mb-6 group-hover:border-amber-500/50 transition-all">
<i class="fa-solid fa-calendar-check"></i>
</div>
<h3 class="text-xl font-luxury font-bold text-white mb-3">Eventmanager</h3>
<p class="text-stone-400 text-sm font-light leading-relaxed">Stressfreie Planung von A bis Z. Wir kümmern uns um Logistik, Deko und Ablauf, damit Sie Gast sein können.</p>
</div>
</div>
</div>
</section>
src/components/FAQ.astro
+25
View File
@@ -0,0 +1,25 @@
---
// src/components/FAQ.astro
---
<!-- FAQ Section -->
<section id="faq" class="py-32 bg-stone-900/30 border-y border-stone-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="text-center mb-16">
<span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Klartext</span>
<h2 class="text-3xl font-luxury font-bold text-white">Häufige Fragen im Vorfeld</h2>
</div>
<div class="space-y-4">
<!-- FAQ 1 -->
<div class="glass rounded-xl overflow-hidden cursor-pointer group" @click="faqOpen = (faqOpen === 1 ? null : 1)">
<div class="flex justify-between items-center p-6 select-none">
<h3 class="font-bold text-white text-base sm:text-lg group-hover:text-amber-400 transition-colors">Was unterscheidet euch von günstigen Kolonnen?</h3>
<i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180 text-amber-400': faqOpen === 1 }"></i>
</div>
<div class="px-6 pb-6 text-stone-400 text-sm leading-relaxed" x-show="faqOpen === 1" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
Ganz einfach: Gewährleistung und Substanz. Wenn Billigbetriebe fertig sind, wächst der Rasen drei Monate schön – und im ersten Winter sacken die Pflastersteine ab, weil am Unterbau gespart wurde. Wir verdichten Tragschichten mit Prüfprotokoll und betonieren Fundamente präzise aus. Bei uns altert die Anlage in Würde, statt zu verfallen.
</div>
</div>
</div>
</div>
</section>
src/components/Footer.astro
+13
View File
@@ -0,0 +1,13 @@
---
// src/components/Footer.astro
---
<!-- Footer -->
<footer class="bg-stone-950 py-16 text-stone-500 border-t border-stone-900 text-sm text-center">
<div class="max-w-7xl mx-auto px-6">
<p class="font-luxury text-white mb-2 tracking-wider">Gebrüder Brabetz GmbH &copy; 2026</p>
<p class="text-xs text-stone-600 mb-6">Meisterbetrieb für Garten- & Landschaftsbau // Rheingau-Taunus-Kreis</p>
<button @click="currentPage = 'page-contact'" class="text-amber-500 hover:text-amber-400 underline text-xs font-semibold uppercase tracking-wider transition-colors">
Direktlink zur Bauleitung
</button>
</div>
</footer>
src/components/Hero.astro
+34
View File
@@ -0,0 +1,34 @@
---
// src/components/Hero.astro
---
<!-- Hero Section -->
<header class="relative min-h-screen flex items-center justify-center overflow-hidden">
<div class="absolute inset-0 z-0">
<img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=1920&q=80" alt="Exklusive Außenanlage" class="w-full h-full object-cover opacity-20 scale-105 transform transition-transform duration-10000 hover:scale-100">
<div class="absolute inset-0 bg-gradient-to-b from-stone-950 via-stone-950/80 to-stone-950"></div>
</div>
<div class="relative max-w-5xl mx-auto px-6 text-center z-10 pt-20">
<span class="text-xs font-bold tracking-[0.4em] text-amber-500 uppercase bg-emerald-950/80 px-6 py-2.5 rounded-full border border-amber-500/20 backdrop-blur-sm inline-block mb-8">
Null Pfusch. Maximale Gewährleistung.
</span>
<h1 class="text-4xl sm:text-6xl lg:text-7xl font-luxury font-bold tracking-wide leading-tight mb-6">
Wer billig baut,<br>baut dreimal.
</h1>
<p class="text-xl text-stone-400 max-w-3xl mx-auto font-light leading-relaxed mb-12">
Wir bauen für Generationen. Die Gebrüder Brabetz GmbH steht für kompromisslose bautechnische Präzision und messbare VOB-Transparenz im Rheingau-Taunus-Kreis.
</p>
<div class="flex flex-wrap justify-center gap-6">
<a href="#projects" class="px-8 py-3.5 bg-white/5 hover:bg-white/10 text-white font-semibold rounded-lg border border-white/10 transition-all backdrop-blur-sm text-xs uppercase tracking-widest">
Fallstudien ansehen
</a>
<button @click="currentPage = 'page-contact'" class="px-8 py-3.5 bg-amber-500 hover:bg-amber-600 text-stone-950 font-bold rounded-lg shadow-xl shadow-amber-500/10 text-xs uppercase tracking-widest transition-all hover:scale-[1.02]">
Direkt zur Bauleitung
</button>
</div>
</div>
<div class="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce opacity-50">
<i class="fa-solid fa-chevron-down text-xl text-stone-500"></i>
</div>
</header>
src/components/Nav.astro
+28
View File
@@ -0,0 +1,28 @@
---
// src/components/Nav.astro
---
<!-- Navigation -->
<nav class="fixed w-full z-50 transition-all duration-300 border-b border-white/5 bg-stone-950/80 backdrop-blur-md">
<div class="max-w-7xl mx-auto px-6 lg:px-8 h-20 flex items-center justify-between">
<a href="#" @click.prevent="currentPage = 'main'" class="flex items-center gap-3 group">
<div class="w-10 h-10 bg-emerald-900/50 rounded-lg flex items-center justify-center text-amber-400 text-lg border border-amber-500/20 group-hover:border-amber-500/50 transition-all shadow-glow">
<i class="fa-solid fa-compass-drafting"></i>
</div>
<div class="flex flex-col">
<span class="text-lg font-luxury font-bold tracking-wider text-white">Gebrüder Brabetz</span>
<span class="text-[9px] font-bold text-amber-500 uppercase tracking-[0.3em] -mt-0.5">Garten- & Landschaftsbau</span>
</div>
</a>
<div class="hidden lg:flex items-center gap-10 text-xs font-semibold uppercase tracking-widest text-stone-400">
<a href="#standards" class="hover:text-amber-400 transition-colors">Regelwerk</a>
<a href="#projects" class="hover:text-amber-400 transition-colors">Projekte</a>
<a href="#events" class="hover:text-amber-400 transition-colors">Events</a>
<a href="#biodiversity" class="hover:text-amber-400 transition-colors">Natur</a>
<a href="#faq" class="hover:text-amber-400 transition-colors">FAQ</a>
<button @click="currentPage = 'page-contact'" class="bg-emerald-800 hover:bg-emerald-700 text-white px-5 py-2.5 rounded-lg transition-all shadow-lg text-xs uppercase tracking-wider font-bold border border-emerald-700 hover:border-emerald-600">
Projekt starten
</button>
</div>
</div>
</nav>
src/components/Projects.astro
+51
View File
@@ -0,0 +1,51 @@
---
// src/components/Projects.astro
---
<!-- Projects Section -->
<section id="projects" class="py-32">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="mb-20 text-center">
<span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Ausgeführte Großprojekte</span>
<h2 class="text-3xl sm:text-5xl font-luxury font-bold text-white mb-4">Harte Fakten statt schöner Renderings</h2>
<p class="text-stone-500 max-w-2xl mx-auto font-light">Echte Baustellen, echte Massen, echte Qualität.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<!-- Project 1 -->
<div class="glass rounded-2xl overflow-hidden group hover:border-amber-500/20 transition-all duration-500 flex flex-col h-full">
<div class="relative h-64 overflow-hidden">
<img src="https://images.unsplash.com/photo-1604014237800-1c9102c219da?auto=format&fit=crop&w=800&q=80" alt="Mauerbau" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80">
<div class="absolute inset-0 bg-gradient-to-t from-stone-900 to-transparent"></div>
<span class="absolute top-4 left-4 text-[10px] font-mono text-emerald-400 bg-stone-900/80 px-3 py-1 rounded border border-emerald-500/20 uppercase tracking-widest">Case Study I</span>
</div>
<div class="p-8 flex flex-col flex-grow justify-between">
<div>
<h3 class="text-2xl font-luxury font-bold text-white mb-3">Monumentale Hangterrassierung</h3>
<p class="text-stone-400 text-sm leading-relaxed font-light mb-6">Bau einer zweihäuptigen Muschelkalk-Trockenmauer gegen enormen Erddruck. Statische Meisterleistung nach DIN 18300.</p>
</div>
<button @click="currentPage = 'page-mauer'" class="w-full text-center px-6 py-3.5 bg-stone-800 hover:bg-emerald-800 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all border border-stone-700 hover:border-emerald-600">
Technische Detailseite öffnen
</button>
</div>
</div>
<!-- Project 2 -->
<div class="glass rounded-2xl overflow-hidden group hover:border-amber-500/20 transition-all duration-500 flex flex-col h-full">
<div class="relative h-64 overflow-hidden">
<img src="https://images.unsplash.com/photo-1547005327-ef75a6961556?auto=format&fit=crop&w=800&q=80" alt="Gewerbebau" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80">
<div class="absolute inset-0 bg-gradient-to-t from-stone-900 to-transparent"></div>
<span class="absolute top-4 left-4 text-[10px] font-mono text-emerald-400 bg-stone-900/80 px-3 py-1 rounded border border-emerald-500/20 uppercase tracking-widest">Case Study II</span>
</div>
<div class="p-8 flex flex-col flex-grow justify-between">
<div>
<h3 class="text-2xl font-luxury font-bold text-white mb-3">Großflächen-Wegebau & Rigolensystem</h3>
<p class="text-stone-400 text-sm leading-relaxed font-light mb-6">650 m² Pflasterdecke für extreme Achslasten (Ev2 ≥ 45 MPa) inklusive sensorgesteuerter Entwässerung.</p>
</div>
<button @click="currentPage = 'page-gewerbe'" class="w-full text-center px-6 py-3.5 bg-stone-800 hover:bg-emerald-800 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all border border-stone-700 hover:border-emerald-600">
Technische Detailseite öffnen
</button>
</div>
</div>
</div>
</div>
</section>
src/components/Standards.astro
+20
View File
@@ -0,0 +1,20 @@
---
// src/components/Standards.astro
---
<!-- Standards Section -->
<section id="standards" class="py-32 bg-stone-900/50 border-y border-stone-800/50">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
<div class="lg:col-span-5">
<span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Keine Ausreden</span>
<h2 class="text-3xl sm:text-4xl font-luxury font-bold text-white mb-6">Warum wir nach DIN und VOB abrechnen</h2>
<div class="w-16 h-1 bg-gradient-to-r from-amber-500 to-emerald-800 mb-6"></div>
</div>
<div class="lg:col-span-7">
<p class="text-stone-400 text-lg leading-relaxed font-light">
Viele Betriebe „schätzen“ pauschal aus dem Bauch heraus. Wir hassen Intransparenz. Jedes Bauvorhaben wird zentimetergenau erfasst, nach <strong class="text-white font-semibold">VOB/C</strong> aufgemessen und nach den anerkannten Regeln der Technik ausgeführt. Sie bezahlen exakt das Volumen, das unsere Facharbeiter fehlerfrei verbaut haben.
</p>
</div>
</div>
</div>
</section>
src/components/SubpageContact.astro
+74
View File
@@ -0,0 +1,74 @@
---
// src/components/SubpageContact.astro
---
<!-- Subpage: Kontakt -->
<div x-show="currentPage === 'page-contact'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8">
<div class="max-w-6xl mx-auto space-y-12">
<button @click="currentPage = 'main'" class="text-stone-400 hover:text-white transition-colors font-semibold text-xs uppercase tracking-wider flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-stone-700">
<i class="fa-solid fa-arrow-left"></i> Zurück zur Übersicht
</button>
<div class="border-b border-stone-800 pb-6">
<span class="text-xs text-amber-500 font-mono uppercase tracking-widest block mb-2">Bauleitung & Vergabe</span>
<h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white">Projekt zünden.</h1>
<p class="text-stone-400 mt-4 max-w-2xl font-light">Unsere Kapazitäten für anspruchsvolle Außenanlagen im aktuellen Quartal sind streng limitiert. Wer zuerst kommt, baut zuerst.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
<div class="lg:col-span-7 glass p-8 rounded-2xl" x-data="{ submitted: false }">
<form @submit.prevent="submitted = true; setTimeout(() => submitted = false, 5000)" class="space-y-6" x-show="!submitted">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div>
<label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Auftraggeber / Firma *</label>
<input type="text" required class="w-full bg-stone-900/50 border border-stone-800 rounded-lg px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition-colors">
</div>
<div>
<label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Direkte E-Mail *</label>
<input type="email" required class="w-full bg-stone-900/50 border border-stone-800 rounded-lg px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition-colors">
</div>
</div>
<div>
<label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Gewerk / Projektart</label>
<select class="w-full bg-stone-900/50 border border-stone-800 rounded-lg px-4 py-3 text-sm text-stone-300 focus:outline-none focus:border-amber-500 transition-colors">
<option>Ausschreibung nach VOB (Kommunal/Gewerblich)</option>
<option>Exklusive Neuanlage (Privatgarten Premium)</option>
<option>Naturstein- & Ingenieurbau (Schwerlast/Statik)</option>
</select>
</div>
<div>
<label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Projektdaten (Maße, Fakten)</label>
<textarea rows="4" placeholder="Zahlen, Maße und Fakten..." class="w-full bg-stone-900/50 border border-stone-800 rounded-lg px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition-colors"></textarea>
</div>
<button type="submit" class="w-full py-4 bg-emerald-800 hover:bg-emerald-700 text-white font-bold rounded-lg text-xs uppercase tracking-widest transition-all shadow-lg border border-emerald-700 hover:border-emerald-600">
Daten zur Prüfung einreichen
</button>
</form>
<div x-show="submitted" x-cloak class="p-6 bg-emerald-950/50 border border-emerald-800 rounded-lg text-emerald-400 text-sm text-center font-medium font-mono" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100">
✔ Datensatz erfolgreich an die Bauleitung übermittelt. Wir prüfen Ihre Angaben.
</div>
</div>
<div class="lg:col-span-5 space-y-6">
<div class="glass p-8 rounded-2xl flex flex-col items-center text-center">
<div class="badge bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-3 py-1 rounded text-[10px] uppercase font-mono mb-6 tracking-widest">Digitale Visitenkarte</div>
<div class="p-4 bg-white rounded-xl border border-stone-800">
<img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&color=064e3b&data=https://galabau.brabros.de" alt="QR Code Gebrüder Brabetz" class="w-40 h-40">
</div>
<p class="text-xs text-stone-500 font-mono mt-6 leading-relaxed">
<strong>Direkt-Scan fürs Smartphone:</strong> Kamera draufhalten, Link öffnen und Kontakt speichern.
</p>
</div>
<div class="glass p-8 rounded-2xl font-mono text-xs text-stone-400 space-y-4">
<div class="text-amber-500 font-bold uppercase border-b border-stone-800 pb-2 tracking-widest">Die Zentrale</div>
<p><i class="fa-solid fa-phone text-amber-500 mr-2"></i> 06124 / 4654</p>
<p><i class="fa-solid fa-envelope text-amber-500 mr-2"></i> info@gebrueder-brabetz.de</p>
<p><i class="fa-solid fa-user-group text-emerald-500 mr-2"></i> Caspar, Jakob & Felix Brabetz</p>
</div>
</div>
</div>
</div>
</div>
src/components/SubpageGewerbe.astro
+16
View File
@@ -0,0 +1,16 @@
---
// src/components/SubpageGewerbe.astro
---
<!-- Subpage: Gewerbe -->
<div x-show="currentPage === 'page-gewerbe'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8">
<div class="max-w-6xl mx-auto space-y-12">
<button @click="currentPage = 'main'" class="text-stone-400 hover:text-white transition-colors font-semibold text-xs uppercase tracking-wider flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-stone-700">
<i class="fa-solid fa-arrow-left"></i> Zurück zur Übersicht
</button>
<div class="border-b border-stone-800 pb-6">
<span class="text-xs text-amber-500 font-mono uppercase tracking-widest block mb-2">Projekt-Analyse // ID: RT-2026-03</span>
<h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white">Das Logistik-Plateau</h1>
</div>
<div class="glass p-8 rounded-2xl"><div class="relative w-full h-[320px]"><canvas id="subChartGantt"></canvas></div></div>
</div>
</div>
src/components/SubpageMauer.astro
+19
View File
@@ -0,0 +1,19 @@
---
// src/components/SubpageMauer.astro
---
<!-- Subpage: Mauer -->
<div x-show="currentPage === 'page-mauer'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8">
<div class="max-w-6xl mx-auto space-y-12">
<button @click="currentPage = 'main'" class="text-stone-400 hover:text-white transition-colors font-semibold text-xs uppercase tracking-wider flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-stone-700">
<i class="fa-solid fa-arrow-left"></i> Zurück zur Übersicht
</button>
<div class="border-b border-stone-800 pb-6">
<span class="text-xs text-amber-500 font-mono uppercase tracking-widest block mb-2">Projekt-Analyse // ID: RT-2025-09</span>
<h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white">Die Festung im Rheingau</h1>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<div class="glass p-8 rounded-2xl"><div class="relative w-full h-[280px] flex justify-center"><canvas id="subChartMassen"></canvas></div></div>
<div class="glass p-8 rounded-2xl"><div class="relative w-full h-[280px] flex justify-center"><canvas id="subChartBoden"></canvas></div></div>
</div>
</div>
</div>
src/images/biodiversity.png
View File
src/index.html
+368 -194
View File
@@ -3,112 +3,181 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gebrüder Brabetz GmbH - Kontakt & Bauleitung</title>
<title>Gebrüder Brabetz GmbH - Premium GaLaBau</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Alpine.js -->
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
emerald: {
950: '#022c22',
900: '#064e3b',
800: '#065f46',
},
amber: {
400: '#fbbf24',
500: '#f59e0b',
600: '#d97706',
},
stone: {
950: '#0c0a09',
900: '#1c1917',
800: '#292524',
}
},
fontFamily: {
luxury: ['Cinzel', 'serif'],
sans: ['Plus Jakarta Sans', 'sans-serif'],
}
}
}
}
</script>
<style>
.font-luxury { font-family: 'Cinzel', serif; }
.font-sans { font-family: 'Plus Jakarta Sans', sans-serif; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.faq-active .faq-answer { max-height: 500px; }
.faq-active .faq-icon { transform: rotate(180deg); }
.subpage { display: none; }
.subpage.active { display: block; animation: fadeIn 0.4s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
[x-cloak] { display: none !important; }
.glass { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); }
.glass-dark { background: rgba(12, 10, 9, 0.6); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); }
.text-gradient { background: linear-gradient(to right, #ffffff, #d6d3d1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.text-gradient-gold { background: linear-gradient(to right, #fbbf24, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
</style>
</head>
<body class="bg-stone-900 text-stone-100 font-sans antialiased selection:bg-amber-600 selection:text-stone-950">
<body class="bg-stone-950 text-stone-200 font-sans antialiased" x-data="{ currentPage: 'main', faqOpen: null }">
<div id="main-page" class="bg-stone-50 text-stone-900 min-h-screen">
<nav class="fixed w-full bg-stone-50/90 backdrop-blur-md z-50 shadow-sm border-b border-stone-200/60">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-24 flex items-center justify-between">
<a href="#" onclick="switchPage('main-page')" class="flex items-center gap-4 group">
<div class="w-12 h-12 bg-emerald-900 rounded-xl flex items-center justify-center text-amber-400 text-xl shadow-md group-hover:scale-105 transition-transform">
<i class="fa-solid fa-compass-drafting"></i>
</div>
<div class="flex flex-col">
<span class="text-xl font-luxury font-bold text-emerald-950 tracking-wider">Gebrüder Brabetz</span>
<span class="text-[10px] font-bold text-amber-700 uppercase tracking-[0.25em] -mt-1">Garten- & Landschaftsbau GmbH</span>
</div>
</a>
<div class="hidden lg:flex items-center gap-8 text-sm font-semibold text-stone-800 tracking-wide">
<a href="#standards" class="hover:text-emerald-800 transition">Das Regelwerk</a>
<a href="#services" class="hover:text-emerald-800 transition">Kompetenzen</a>
<a href="#projects" class="hover:text-emerald-800 transition">Masse & Beweise</a>
<a href="#faq" class="hover:text-emerald-800 transition">Klartext</a>
<button onclick="switchPage('page-contact')" class="bg-emerald-900 hover:bg-emerald-800 text-white px-6 py-3 rounded-xl transition shadow-lg text-xs uppercase tracking-wider">Projekt zünden</button>
<!-- Navigation -->
<nav class="fixed w-full z-50 transition-all duration-300 border-b border-white/5 bg-stone-950/80 backdrop-blur-md">
<div class="max-w-7xl mx-auto px-6 lg:px-8 h-20 flex items-center justify-between">
<a href="#" @click.prevent="currentPage = 'main'" class="flex items-center gap-3 group">
<div class="w-10 h-10 bg-emerald-900/50 rounded-lg flex items-center justify-center text-amber-400 text-lg border border-amber-500/20 group-hover:border-amber-500/50 transition-all shadow-glow">
<i class="fa-solid fa-compass-drafting"></i>
</div>
<div class="flex flex-col">
<span class="text-lg font-luxury font-bold tracking-wider text-white">Gebrüder Brabetz</span>
<span class="text-[9px] font-bold text-amber-500 uppercase tracking-[0.3em] -mt-0.5">Garten- & Landschaftsbau</span>
</div>
</a>
<div class="hidden lg:flex items-center gap-10 text-xs font-semibold uppercase tracking-widest text-stone-400">
<a href="#standards" class="hover:text-amber-400 transition-colors">Regelwerk</a>
<a href="#projects" class="hover:text-amber-400 transition-colors">Projekte</a>
<a href="#events" class="hover:text-amber-400 transition-colors">Events</a>
<a href="#biodiversity" class="hover:text-amber-400 transition-colors">Natur</a>
<a href="#faq" class="hover:text-amber-400 transition-colors">FAQ</a>
<button @click="currentPage = 'page-contact'" class="bg-emerald-800 hover:bg-emerald-700 text-white px-5 py-2.5 rounded-lg transition-all shadow-lg text-xs uppercase tracking-wider font-bold border border-emerald-700 hover:border-emerald-600">
Projekt starten
</button>
</div>
</div>
</nav>
<!-- Main Page Content -->
<div x-show="currentPage === 'main'" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="space-y-0">
<!-- Hero Section -->
<header class="relative min-h-screen flex items-center justify-center overflow-hidden">
<div class="absolute inset-0 z-0">
<img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=1920&q=80" alt="Exklusive Außenanlage" class="w-full h-full object-cover opacity-20 scale-105 transform transition-transform duration-10000 hover:scale-100">
<div class="absolute inset-0 bg-gradient-to-b from-stone-950 via-stone-950/80 to-stone-950"></div>
</div>
<div class="relative max-w-5xl mx-auto px-6 text-center z-10 pt-20">
<span class="text-xs font-bold tracking-[0.4em] text-amber-500 uppercase bg-emerald-950/80 px-6 py-2.5 rounded-full border border-amber-500/20 backdrop-blur-sm inline-block mb-8">
Null Pfusch. Maximale Gewährleistung.
</span>
<h1 class="text-4xl sm:text-6xl lg:text-7xl font-luxury font-bold tracking-wide leading-tight mb-6">
Wer billig baut,<br>baut dreimal.
</h1>
<p class="text-xl text-stone-400 max-w-3xl mx-auto font-light leading-relaxed mb-12">
Wir bauen für Generationen. Die Gebrüder Brabetz GmbH steht für kompromisslose bautechnische Präzision und messbare VOB-Transparenz im Rheingau-Taunus-Kreis.
</p>
<div class="flex flex-wrap justify-center gap-6">
<a href="#projects" class="px-8 py-3.5 bg-white/5 hover:bg-white/10 text-white font-semibold rounded-lg border border-white/10 transition-all backdrop-blur-sm text-xs uppercase tracking-widest">
Fallstudien ansehen
</a>
<button @click="currentPage = 'page-contact'" class="px-8 py-3.5 bg-amber-500 hover:bg-amber-600 text-stone-950 font-bold rounded-lg shadow-xl shadow-amber-500/10 text-xs uppercase tracking-widest transition-all hover:scale-[1.02]">
Direkt zur Bauleitung
</button>
</div>
</div>
</nav>
<header class="relative min-h-screen flex items-center justify-center pt-24 overflow-hidden bg-emerald-950">
<img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=1920&q=80" alt="Exklusive Außenanlage" class="absolute inset-0 w-full h-full object-cover opacity-30 scale-105">
<div class="absolute inset-0 bg-gradient-to-b from-emerald-950/40 via-emerald-950/70 to-stone-50"></div>
<div class="relative max-w-5xl mx-auto px-6 text-center z-10">
<span class="text-xs font-bold tracking-[0.3em] text-amber-400 uppercase bg-emerald-900/60 px-5 py-2 rounded-full border border-amber-500/30 backdrop-blur-md">Null Pfusch. Maximale Gewährleistung.</span>
<h1 class="mt-8 text-4xl sm:text-6xl lg:text-7xl font-luxury font-bold tracking-wide text-white leading-[1.15]">
Wer billig baut, baut dreimal.<br>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-300 to-amber-300">Wir bauen für Generationen.</span>
</h1>
<p class="mt-8 text-lg sm:text-xl text-stone-200 max-w-3xl mx-auto font-light leading-relaxed">
Wir überlassen im Rheingau-Taunus-Kreis nichts dem Zufall. Die Gebrüder Brabetz GmbH steht für kompromisslose bautechnische Präzision, exzellente Facharbeiter-Struktur und messbare VOB-Transparenz.
</p>
<div class="mt-12 flex flex-wrap justify-center gap-4">
<a href="#projects" class="px-8 py-4 bg-white/10 hover:bg-white/20 text-white font-semibold rounded-xl border border-white/20 transition-all backdrop-blur-md text-sm uppercase tracking-wider">Fallstudien ansehen</a>
<button onclick="switchPage('page-contact')" class="px-8 py-4 bg-amber-600 hover:bg-amber-500 text-emerald-950 font-bold rounded-xl shadow-lg text-sm uppercase tracking-wider transition-all">Direkt zur Bauleitung</button>
</div>
<div class="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce opacity-50">
<i class="fa-solid fa-chevron-down text-xl text-stone-500"></i>
</div>
</header>
<section id="standards" class="py-28 bg-white border-b border-stone-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mb-12">
<span class="text-xs font-bold tracking-widest text-amber-700 uppercase">Keine Ausreden</span>
<h2 class="text-3xl sm:text-4xl font-luxury font-bold text-emerald-950 mt-2">Warum wir nach DIN und VOB abrechnen</h2>
<!-- Standards Section -->
<section id="standards" class="py-32 bg-stone-900/50 border-y border-stone-800/50">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
<div class="lg:col-span-5">
<span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Keine Ausreden</span>
<h2 class="text-3xl sm:text-4xl font-luxury font-bold text-white mb-6">Warum wir nach DIN und VOB abrechnen</h2>
<div class="w-16 h-1 bg-gradient-to-r from-amber-500 to-emerald-800 mb-6"></div>
</div>
<div class="lg:col-span-7">
<p class="text-stone-400 text-lg leading-relaxed font-light">
Viele Betriebe „schätzen“ pauschal aus dem Bauch heraus. Wir hassen Intransparenz. Jedes Bauvorhaben wird zentimetergenau erfasst, nach <strong class="text-white font-semibold">VOB/C</strong> aufgemessen und nach den anerkannten Regeln der Technik ausgeführt. Sie bezahlen exakt das Volumen, das unsere Facharbeiter fehlerfrei verbaut haben.
</p>
</div>
</div>
<p class="text-stone-600 leading-relaxed max-w-4xl">
Viele Betriebe „schätzen“ pauschal aus dem Bauch heraus. Wir hassen Intransparenz. Jedes Bauvorhaben wird zentimetergenau erfasst, nach **VOB/C** aufgemessen und nach den anerkannten Regeln der Technik ausgeführt. Sie bezahlen exakt das Volumen, das unsere Facharbeiter fehlerfrei verbaut haben.
</p>
</div>
</section>
<section id="projects" class="py-28 bg-emerald-950 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="mb-16">
<span class="text-xs font-bold tracking-widest text-amber-400 uppercase">Ausgeführte Großprojekte</span>
<h2 class="text-3xl sm:text-5xl font-luxury font-bold mt-2">Harte Fakten statt schöner Renderings</h2>
<div class="w-12 h-1 bg-amber-500 mt-4"></div>
<!-- Projects Section -->
<section id="projects" class="py-32">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="mb-20 text-center">
<span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Ausgeführte Großprojekte</span>
<h2 class="text-3xl sm:text-5xl font-luxury font-bold text-white mb-4">Harte Fakten statt schöner Renderings</h2>
<p class="text-stone-500 max-w-2xl mx-auto font-light">Echte Baustellen, echte Massen, echte Qualität.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="bg-stone-900/60 border border-emerald-800 rounded-3xl overflow-hidden shadow-xl flex flex-col justify-between">
<img src="https://images.unsplash.com/photo-1604014237800-1c9102c219da?auto=format&fit=crop&w=800&q=80" alt="Mauerbau" class="w-full h-56 object-cover">
<div class="p-8 space-y-4 flex-grow flex flex-col justify-between">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<!-- Project 1 -->
<div class="glass rounded-2xl overflow-hidden group hover:border-amber-500/20 transition-all duration-500 flex flex-col h-full">
<div class="relative h-64 overflow-hidden">
<img src="https://images.unsplash.com/photo-1604014237800-1c9102c219da?auto=format&fit=crop&w=800&q=80" alt="Mauerbau" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80">
<div class="absolute inset-0 bg-gradient-to-t from-stone-900 to-transparent"></div>
<span class="absolute top-4 left-4 text-[10px] font-mono text-emerald-400 bg-stone-900/80 px-3 py-1 rounded border border-emerald-500/20 uppercase tracking-widest">Case Study I</span>
</div>
<div class="p-8 flex flex-col flex-grow justify-between">
<div>
<span class="text-xs font-mono text-emerald-400 uppercase tracking-wider">Fallstudie I // Massenaufmaß</span>
<h3 class="text-2xl font-luxury font-bold mt-1 text-white">Monumentale Hangterrassierung</h3>
<p class="text-stone-300 text-sm mt-2 leading-relaxed">Bau einer zweihäuptigen Muschelkalk-Trockenmauer gegen enormen Erddruck. Statische Meisterleistung nach DIN 18300.</p>
<h3 class="text-2xl font-luxury font-bold text-white mb-3">Monumentale Hangterrassierung</h3>
<p class="text-stone-400 text-sm leading-relaxed font-light mb-6">Bau einer zweihäuptigen Muschelkalk-Trockenmauer gegen enormen Erddruck. Statische Meisterleistung nach DIN 18300.</p>
</div>
<button onclick="switchPage('page-mauer')" class="w-full text-center px-6 py-4 bg-amber-600 hover:bg-amber-500 text-emerald-950 font-bold rounded-xl text-xs uppercase tracking-wider transition-all mt-6">
<i class="fa-solid fa-arrow-up-right-from-square mr-2"></i> Technische Detailseite öffnen
<button @click="currentPage = 'page-mauer'" class="w-full text-center px-6 py-3.5 bg-stone-800 hover:bg-emerald-800 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all border border-stone-700 hover:border-emerald-600">
Technische Detailseite öffnen
</button>
</div>
</div>
<div class="bg-stone-900/60 border border-emerald-800 rounded-3xl overflow-hidden shadow-xl flex flex-col justify-between">
<img src="https://images.unsplash.com/photo-1547005327-ef75a6961556?auto=format&fit=crop&w=800&q=80" alt="Gewerbebau" class="w-full h-56 object-cover">
<div class="p-8 space-y-4 flex-grow flex flex-col justify-between">
<!-- Project 2 -->
<div class="glass rounded-2xl overflow-hidden group hover:border-amber-500/20 transition-all duration-500 flex flex-col h-full">
<div class="relative h-64 overflow-hidden">
<img src="https://images.unsplash.com/photo-1547005327-ef75a6961556?auto=format&fit=crop&w=800&q=80" alt="Gewerbebau" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80">
<div class="absolute inset-0 bg-gradient-to-t from-stone-900 to-transparent"></div>
<span class="absolute top-4 left-4 text-[10px] font-mono text-emerald-400 bg-stone-900/80 px-3 py-1 rounded border border-emerald-500/20 uppercase tracking-widest">Case Study II</span>
</div>
<div class="p-8 flex flex-col flex-grow justify-between">
<div>
<span class="text-xs font-mono text-emerald-400 uppercase tracking-wider">Fallstudie II // Ablauf & Taktung</span>
<h3 class="text-2xl font-luxury font-bold mt-1 text-white">Großflächen-Wegebau & Rigolensystem</h3>
<p class="text-stone-300 text-sm mt-2 leading-relaxed">650 m² Pflasterdecke für extreme Achslasten (Ev2 ≥ 45 MPa) inklusive sensorgesteuerer Entwässerung.</p>
<h3 class="text-2xl font-luxury font-bold text-white mb-3">Großflächen-Wegebau & Rigolensystem</h3>
<p class="text-stone-400 text-sm leading-relaxed font-light mb-6">650 m² Pflasterdecke für extreme Achslasten (Ev2 ≥ 45 MPa) inklusive sensorgesteuerter Entwässerung.</p>
</div>
<button onclick="switchPage('page-gewerbe')" class="w-full text-center px-6 py-4 bg-amber-600 hover:bg-amber-500 text-emerald-950 font-bold rounded-xl text-xs uppercase tracking-wider transition-all mt-6">
<i class="fa-solid fa-arrow-up-right-from-square mr-2"></i> Technische Detailseite öffnen
<button @click="currentPage = 'page-gewerbe'" class="w-full text-center px-6 py-3.5 bg-stone-800 hover:bg-emerald-800 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all border border-stone-700 hover:border-emerald-600">
Technische Detailseite öffnen
</button>
</div>
</div>
@@ -116,201 +185,306 @@
</div>
</section>
<section id="faq" class="py-28 max-w-4xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl font-luxury font-bold text-emerald-950">Klartext im Vorfeld</h2>
<div class="w-12 h-1 bg-amber-600 mx-auto mt-4"></div>
</div>
<div class="space-y-4">
<div class="bg-white border border-stone-200 rounded-2xl p-6 cursor-pointer" onclick="toggleFaq(this)">
<div class="flex justify-between items-center select-none">
<h3 class="font-bold text-emerald-950 text-base sm:text-lg">Was unterscheidet euch von günstigen Kolonnen?</h3>
<i class="fa-solid fa-chevron-down faq-icon text-stone-400 transition-transform"></i>
<!-- Events Section -->
<section id="events" class="py-32 bg-stone-900/50 border-y border-stone-800/50">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="mb-20 text-center">
<span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Exklusive Gartenevents</span>
<h2 class="text-3xl sm:text-5xl font-luxury font-bold text-white mb-4">Das Komplettpaket für Ihr Event</h2>
<p class="text-stone-500 max-w-2xl mx-auto font-light">Wir gestalten nicht nur Ihren Garten, wir füllen ihn auch mit Leben. Unser exklusives Netzwerk für unvergessliche Momente.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Leihköche -->
<div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group">
<div class="w-12 h-12 bg-emerald-900/50 rounded-lg flex items-center justify-center text-amber-400 text-xl border border-amber-500/20 mb-6 group-hover:border-amber-500/50 transition-all">
<i class="fa-solid fa-utensils"></i>
</div>
<h3 class="text-xl font-luxury font-bold text-white mb-3">Beste Leihköche</h3>
<p class="text-stone-400 text-sm font-light leading-relaxed">Kulinarische Meisterwerke direkt in Ihrem Garten. Von Live-Cooking bis zum exklusiven Mehr-Gänge-Menü.</p>
</div>
<div class="faq-answer mt-3 text-stone-600 text-sm leading-relaxed">
Ganz einfach: Gewährleistung und Substanz. Wenn Billigbetriebe fertig sind, wächst der Rasen drei Monate schön – und im ersten Winter sacken die Pflastersteine ab, weil am Unterbau gespart wurde. Wir verdichten Tragschichten mit Prüfprotokoll und betonieren Fundamente präzise aus. Bei uns altert die Anlage in Würde, statt zu verfallen.
<!-- DJs -->
<div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group">
<div class="w-12 h-12 bg-emerald-900/50 rounded-lg flex items-center justify-center text-amber-400 text-xl border border-amber-500/20 mb-6 group-hover:border-amber-500/50 transition-all">
<i class="fa-solid fa-compact-disc"></i>
</div>
<h3 class="text-xl font-luxury font-bold text-white mb-3">Top DJs</h3>
<p class="text-stone-400 text-sm font-light leading-relaxed">Die perfekte Soundkulisse für Ihre Sommernacht. Professionelle DJs mit High-End Equipment.</p>
</div>
<!-- Eventmanager -->
<div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group">
<div class="w-12 h-12 bg-emerald-900/50 rounded-lg flex items-center justify-center text-amber-400 text-xl border border-amber-500/20 mb-6 group-hover:border-amber-500/50 transition-all">
<i class="fa-solid fa-calendar-check"></i>
</div>
<h3 class="text-xl font-luxury font-bold text-white mb-3">Eventmanager</h3>
<p class="text-stone-400 text-sm font-light leading-relaxed">Stressfreie Planung von A bis Z. Wir kümmern uns um Logistik, Deko und Ablauf, damit Sie Gast sein können.</p>
</div>
</div>
</div>
</section>
<footer class="bg-stone-900 py-12 text-stone-400 border-t border-stone-950 text-sm text-center">
<p class="font-luxury text-white">Gebrüder Brabetz GmbH &copy; 2026 // Rheingau-Taunus-Kreis</p>
<button onclick="switchPage('page-contact')" class="text-amber-400 hover:underline mt-2 block mx-auto text-xs font-mono">Direktlink zur Bauleitung & QR-Code</button>
<!-- Biodiversity & Quality Section -->
<section id="biodiversity" class="py-32 bg-stone-900/50 border-y border-stone-800/50">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
<div class="lg:col-span-6">
<span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Zukunftssicher & Lebendig</span>
<h2 class="text-3xl sm:text-4xl font-luxury font-bold text-white mb-6">Biodiversität trifft Premium-Qualität</h2>
<div class="w-16 h-1 bg-gradient-to-r from-emerald-500 to-amber-500 mb-6"></div>
<p class="text-stone-400 text-lg leading-relaxed font-light mb-6">
Ein Garten ist mehr als nur eine optische Kulisse. Wir schaffen lebendige Ökosysteme, die Generationen überdauern. Unser Fokus liegt auf der perfekten Symbiose aus exklusivem Design, höchster baulicher Qualität und ökologischer Verantwortung.
</p>
<p class="text-stone-400 text-lg leading-relaxed font-light mb-6">
In enger Kooperation mit <a href="https://plantlix.de" target="_blank" class="text-amber-400 hover:underline">Plantlix.de</a> nutzen wir modernste, datengestützte Pflanzenanalysen. So stellen wir sicher, dass jede Pflanze optimal zum Standort passt, die Biodiversität fördert und klimaresistent ist.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-8">
<div class="flex items-start gap-3">
<div class="text-emerald-500 mt-1"><i class="fa-solid fa-leaf"></i></div>
<div>
<h4 class="font-bold text-white text-sm">Native Flora</h4>
<p class="text-stone-500 text-xs mt-1">Gezielter Einsatz heimischer Pflanzen zur Förderung von Insekten und Vögeln.</p>
</div>
</div>
<div class="flex items-start gap-3">
<div class="text-emerald-500 mt-1"><i class="fa-solid fa-seedling"></i></div>
<div>
<h4 class="font-bold text-white text-sm">Bodenbiologie</h4>
<p class="text-stone-500 text-xs mt-1">Nachhaltiger Aufbau der Bodenschichten nach DIN-Vorgaben für langlebiges Grün.</p>
</div>
</div>
</div>
</div>
<div class="lg:col-span-6">
<div class="relative rounded-2xl overflow-hidden shadow-2xl border border-white/5">
<img src="https://images.unsplash.com/photo-1466692442299-3581ffda9327?auto=format&fit=crop&w=800&q=80" alt="Biodiverser Garten" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-stone-950/50 to-transparent"></div>
<div class="absolute bottom-6 left-6 right-6 glass p-4 rounded-xl">
<p class="text-xs text-stone-300 font-light">"Wir schaffen Oasen, die nicht nur schön anzusehen sind, sondern aktiv zum Erhalt unserer Artenvielfalt beitragen."</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section id="faq" class="py-32 bg-stone-900/30 border-y border-stone-800/50">
<div class="max-w-4xl mx-auto px-6">
<div class="text-center mb-16">
<span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Klartext</span>
<h2 class="text-3xl font-luxury font-bold text-white">Häufige Fragen im Vorfeld</h2>
</div>
<div class="space-y-4">
<!-- FAQ 1 -->
<div class="glass rounded-xl overflow-hidden cursor-pointer group" @click="faqOpen = (faqOpen === 1 ? null : 1)">
<div class="flex justify-between items-center p-6 select-none">
<h3 class="font-bold text-white text-base sm:text-lg group-hover:text-amber-400 transition-colors">Was unterscheidet euch von günstigen Kolonnen?</h3>
<i class="fa-solid fa-chevron-down text-stone-500 transition-transform duration-300" :class="{ 'rotate-180 text-amber-400': faqOpen === 1 }"></i>
</div>
<div class="px-6 pb-6 text-stone-400 text-sm leading-relaxed" x-show="faqOpen === 1" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
Ganz einfach: Gewährleistung und Substanz. Wenn Billigbetriebe fertig sind, wächst der Rasen drei Monate schön – und im ersten Winter sacken die Pflastersteine ab, weil am Unterbau gespart wurde. Wir verdichten Tragschichten mit Prüfprotokoll und betonieren Fundamente präzise aus. Bei uns altert die Anlage in Würde, statt zu verfallen.
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-stone-950 py-16 text-stone-500 border-t border-stone-900 text-sm text-center">
<div class="max-w-7xl mx-auto px-6">
<p class="font-luxury text-white mb-2 tracking-wider">Gebrüder Brabetz GmbH &copy; 2026</p>
<p class="text-xs text-stone-600 mb-6">Meisterbetrieb für Garten- & Landschaftsbau // Rheingau-Taunus-Kreis</p>
<button @click="currentPage = 'page-contact'" class="text-amber-500 hover:text-amber-400 underline text-xs font-semibold uppercase tracking-wider transition-colors">
Direktlink zur Bauleitung
</button>
</div>
</footer>
</div>
<div id="page-mauer" class="subpage min-h-screen bg-stone-950 text-white pt-12 pb-24 px-4 sm:px-6 lg:px-8">
<!-- Subpage: Mauer -->
<div x-show="currentPage === 'page-mauer'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8">
<div class="max-w-6xl mx-auto space-y-12">
<button onclick="switchPage('main-page')" class="text-stone-400 hover:text-white transition font-semibold text-sm flex items-center gap-2 bg-stone-900 px-4 py-2 rounded-xl border border-stone-800">
<i class="fa-solid fa-arrow-left"></i> Zurück zur Hauptseite
<button @click="currentPage = 'main'" class="text-stone-400 hover:text-white transition-colors font-semibold text-xs uppercase tracking-wider flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-stone-700">
<i class="fa-solid fa-arrow-left"></i> Zurück zur Übersicht
</button>
<div class="border-b border-stone-800 pb-6">
<span class="text-xs text-amber-400 font-mono uppercase tracking-widest">PROJEKT-ANALYSE // ID: RT-2025-09</span>
<h1 class="text-4xl sm:text-6xl font-luxury font-bold mt-2 text-white">Die Festung im Rheingau</h1>
<span class="text-xs text-amber-500 font-mono uppercase tracking-widest block mb-2">Projekt-Analyse // ID: RT-2025-09</span>
<h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white">Die Festung im Rheingau</h1>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="bg-stone-900 border border-stone-800 p-6 rounded-3xl shadow-xl"><div class="relative w-full h-[280px] flex justify-center"><canvas id="subChartMassen"></canvas></div></div>
<div class="bg-stone-900 border border-stone-800 p-6 rounded-3xl shadow-xl"><div class="relative w-full h-[280px] flex justify-center"><canvas id="subChartBoden"></canvas></div></div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<div class="glass p-8 rounded-2xl"><div class="relative w-full h-[280px] flex justify-center"><canvas id="subChartMassen"></canvas></div></div>
<div class="glass p-8 rounded-2xl"><div class="relative w-full h-[280px] flex justify-center"><canvas id="subChartBoden"></canvas></div></div>
</div>
</div>
</div>
<div id="page-gewerbe" class="subpage min-h-screen bg-stone-950 text-white pt-12 pb-24 px-4 sm:px-6 lg:px-8">
<!-- Subpage: Gewerbe -->
<div x-show="currentPage === 'page-gewerbe'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8">
<div class="max-w-6xl mx-auto space-y-12">
<button onclick="switchPage('main-page')" class="text-stone-400 hover:text-white transition font-semibold text-sm flex items-center gap-2 bg-stone-900 px-4 py-2 rounded-xl border border-stone-800">
<i class="fa-solid fa-arrow-left"></i> Zurück zur Hauptseite
<button @click="currentPage = 'main'" class="text-stone-400 hover:text-white transition-colors font-semibold text-xs uppercase tracking-wider flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-stone-700">
<i class="fa-solid fa-arrow-left"></i> Zurück zur Übersicht
</button>
<div class="border-b border-stone-800 pb-6">
<span class="text-xs text-amber-400 font-mono uppercase tracking-widest">PROJEKT-ANALYSE // ID: RT-2026-03</span>
<h1 class="text-4xl sm:text-6xl font-luxury font-bold mt-2 text-white">Das Logistik-Plateau</h1>
<span class="text-xs text-amber-500 font-mono uppercase tracking-widest block mb-2">Projekt-Analyse // ID: RT-2026-03</span>
<h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white">Das Logistik-Plateau</h1>
</div>
<div class="bg-stone-900 border border-stone-800 p-6 rounded-3xl shadow-xl"><div class="relative w-full h-[320px]"><canvas id="subChartGantt"></canvas></div></div>
<div class="glass p-8 rounded-2xl"><div class="relative w-full h-[320px]"><canvas id="subChartGantt"></canvas></div></div>
</div>
</div>
<div id="page-contact" class="subpage min-h-screen bg-stone-950 text-white pt-12 pb-24 px-4 sm:px-6 lg:px-8">
<!-- Subpage: Kontakt -->
<div x-show="currentPage === 'page-contact'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8">
<div class="max-w-6xl mx-auto space-y-12">
<button onclick="switchPage('main-page')" class="text-stone-400 hover:text-white transition font-semibold text-sm flex items-center gap-2 bg-stone-900 px-4 py-2 rounded-xl border border-stone-800">
<i class="fa-solid fa-arrow-left"></i> Zurück zur Hauptseite
<button @click="currentPage = 'main'" class="text-stone-400 hover:text-white transition-colors font-semibold text-xs uppercase tracking-wider flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-stone-700">
<i class="fa-solid fa-arrow-left"></i> Zurück zur Übersicht
</button>
<div class="border-b border-stone-800 pb-6">
<span class="text-xs text-amber-400 font-mono uppercase tracking-widest">Bauleitung & Vergabe // Direkter Draht</span>
<h1 class="text-4xl sm:text-6xl font-luxury font-bold mt-2 text-white">Projekt zünden.</h1>
<p class="text-stone-400 mt-4 max-w-2xl text-base">Unsere Kapazitäten für anspruchsvolle Außenanlagen im aktuellen Quartal sind streng limitiert. Wer zuerst kommt, baut zuerst. Reichen Sie Ihre Pläne ein.</p>
<span class="text-xs text-amber-500 font-mono uppercase tracking-widest block mb-2">Bauleitung & Vergabe</span>
<h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white">Projekt zünden.</h1>
<p class="text-stone-400 mt-4 max-w-2xl font-light">Unsere Kapazitäten für anspruchsvolle Außenanlagen im aktuellen Quartal sind streng limitiert. Wer zuerst kommt, baut zuerst.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
<div class="lg:col-span-7 bg-stone-900 border border-stone-800 p-8 rounded-3xl shadow-xl">
<form onsubmit="handleFormSubmit(event)" class="space-y-4">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
<div class="lg:col-span-7 glass p-8 rounded-2xl" x-data="{ submitted: false }">
<form @submit.prevent="submitted = true; setTimeout(() => submitted = false, 5000)" class="space-y-6" x-show="!submitted">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div>
<label class="block text-[10px] font-mono text-stone-400 uppercase mb-1">Auftraggeber / Firma *</label>
<input type="text" required class="w-full bg-stone-950 border border-stone-800 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500">
<label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Auftraggeber / Firma *</label>
<input type="text" required class="w-full bg-stone-900/50 border border-stone-800 rounded-lg px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition-colors">
</div>
<div>
<label class="block text-[10px] font-mono text-stone-400 uppercase mb-1">Direkte E-Mail *</label>
<input type="email" required class="w-full bg-stone-950 border border-stone-800 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500">
<label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Direkte E-Mail *</label>
<input type="email" required class="w-full bg-stone-900/50 border border-stone-800 rounded-lg px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition-colors">
</div>
</div>
<div>
<label class="block text-[10px] font-mono text-stone-400 uppercase mb-1">Gewerk / Projektart</label>
<select class="w-full bg-stone-950 border border-stone-800 rounded-xl px-4 py-3 text-sm text-stone-300 focus:outline-none focus:border-amber-500">
<label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Gewerk / Projektart</label>
<select class="w-full bg-stone-900/50 border border-stone-800 rounded-lg px-4 py-3 text-sm text-stone-300 focus:outline-none focus:border-amber-500 transition-colors">
<option>Ausschreibung nach VOB (Kommunal/Gewerblich)</option>
<option>Exklusive Neuanlage (Privatgarten Premium)</option>
<option>Naturstein- & Ingenieurbau (Schwerlast/Statik)</option>
</select>
</div>
<div>
<label class="block text-[10px] font-mono text-stone-400 uppercase mb-1">Harte Projektdaten (m², geplante Massen, Wünsche)</label>
<textarea rows="4" placeholder="Keine Romane. Nur Zahlen, Maße und Fakten..." class="w-full bg-stone-950 border border-stone-800 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500"></textarea>
<label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Projektdaten (Maße, Fakten)</label>
<textarea rows="4" placeholder="Zahlen, Maße und Fakten..." class="w-full bg-stone-900/50 border border-stone-800 rounded-lg px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition-colors"></textarea>
</div>
<button type="submit" class="w-full py-4 bg-emerald-800 hover:bg-emerald-700 text-white font-bold rounded-xl text-xs uppercase tracking-widest transition shadow-lg">Daten zur technischen Prüfung einreichen</button>
<button type="submit" class="w-full py-4 bg-emerald-800 hover:bg-emerald-700 text-white font-bold rounded-lg text-xs uppercase tracking-widest transition-all shadow-lg border border-emerald-700 hover:border-emerald-600">
Daten zur Prüfung einreichen
</button>
</form>
<div id="form-success-sub" class="hidden mt-4 p-4 bg-emerald-950/60 border border-emerald-800 rounded-xl text-emerald-300 text-sm text-center font-medium font-mono">
✔ Datensatz erfolgreich auf lokalem Docker-Node (brabetz-node) verbucht. Die Bauleitung initiiert die Prüfung.
<div x-show="submitted" x-cloak class="p-6 bg-emerald-950/50 border border-emerald-800 rounded-lg text-emerald-400 text-sm text-center font-medium font-mono" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100">
✔ Datensatz erfolgreich an die Bauleitung übermittelt. Wir prüfen Ihre Angaben.
</div>
</div>
<div class="lg:col-span-5 space-y-6">
<div class="bg-stone-900 border border-stone-800 p-6 rounded-3xl shadow-xl flex flex-col items-center text-center">
<div class="badge bg-emerald-500/10 text-emerald-400 border border-emerald-500/30 px-3 py-1 rounded-md text-[10px] uppercase font-mono mb-4">Digitale Visitenkarte</div>
<div class="glass p-8 rounded-2xl flex flex-col items-center text-center">
<div class="badge bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-3 py-1 rounded text-[10px] uppercase font-mono mb-6 tracking-widest">Digitale Visitenkarte</div>
<div class="p-4 bg-white rounded-2xl shadow-inner border border-stone-700">
<img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&color=064e3b&data=https://galabau.brabros.de" alt="QR Code Gebrüder Brabetz" class="w-48 h-48">
<div class="p-4 bg-white rounded-xl border border-stone-800">
<img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&color=064e3b&data=https://galabau.brabros.de" alt="QR Code Gebrüder Brabetz" class="w-40 h-40">
</div>
<p class="text-xs text-stone-400 font-mono mt-4 leading-relaxed px-4">
<strong>Direkt-Scan fürs Smartphone:</strong> Kamera draufhalten, Link öffnen und die Bauleitung fehlerfrei ohne Tippfehler im System hinterlegen.
<p class="text-xs text-stone-500 font-mono mt-6 leading-relaxed">
<strong>Direkt-Scan fürs Smartphone:</strong> Kamera draufhalten, Link öffnen und Kontakt speichern.
</p>
</div>
<div class="bg-stone-900 border border-stone-800 p-6 rounded-3xl shadow-xl font-mono text-xs text-stone-400 space-y-4">
<div class="text-amber-400 font-bold uppercase border-b border-stone-800 pb-2">Die Zentrale</div>
<p><i class="fa-solid fa-phone text-amber-500 mr-2"></i> <strong>Telefon:</strong> 06124 / 4654</p>
<p><i class="fa-solid fa-envelope text-amber-500 mr-2"></i> <strong>E-Mail:</strong> info@gebrueder-brabetz.de</p>
<p><i class="fa-solid fa-user-group text-emerald-500 mr-2"></i> <strong>Leitung:</strong> Caspar, Jakob & Felix Brabetz</p>
<div class="glass p-8 rounded-2xl font-mono text-xs text-stone-400 space-y-4">
<div class="text-amber-500 font-bold uppercase border-b border-stone-800 pb-2 tracking-widest">Die Zentrale</div>
<p><i class="fa-solid fa-phone text-amber-500 mr-2"></i> 06124 / 4654</p>
<p><i class="fa-solid fa-envelope text-amber-500 mr-2"></i> info@gebrueder-brabetz.de</p>
<p><i class="fa-solid fa-user-group text-emerald-500 mr-2"></i> Caspar, Jakob & Felix Brabetz</p>
</div>
</div>
</div>
</div>
</div>
<!-- CHARTS INIT -->
<script>
// SPA Page-Switcher Framework
function switchPage(pageId) {
document.getElementById('main-page').classList.add('hidden');
document.getElementById('page-mauer').classList.add('hidden');
document.getElementById('page-gewerbe').classList.add('hidden');
document.getElementById('page-contact').classList.add('hidden');
const target = document.getElementById(pageId);
target.classList.remove('hidden');
target.classList.add('active');
// Charts verzögert zünden
if(pageId === 'page-mauer') setTimeout(triggerMauerCharts, 50);
if(pageId === 'page-gewerbe') setTimeout(triggerGewerbeCharts, 50);
window.scrollTo(0, 0);
}
// FAQ Toggle
function toggleFaq(element) { element.classList.toggle('faq-active'); }
// Formular Absendung (SPA Sub)
function handleFormSubmit(event) {
event.preventDefault();
const successDiv = document.getElementById('form-success-sub');
successDiv.classList.remove('hidden');
event.target.reset();
setTimeout(() => successDiv.classList.add('hidden'), 7000);
}
// --- CHARTS ENGINE ---
let initializedCharts = {};
function triggerMauerCharts() {
if (initializedCharts['mauer']) return;
document.addEventListener('DOMContentLoaded', () => {
// Chart 1: Massen
new Chart(document.getElementById('subChartMassen').getContext('2d'), {
type: 'pie',
data: {
labels: ['Erdaushub (m³)', 'Muschelkalk-Quader (t)', 'Filterschotter (m³)', 'Oberboden (m³)'],
datasets: [{ data: [140, 65, 38, 25], backgroundColor: ['#b45309', '#78716c', '#475569', '#15803d'], borderWidth: 0 }]
labels: ['Erdaushub (m³)', 'Muschelkalk (t)', 'Filterschotter (m³)', 'Oberboden (m³)'],
datasets: [{
data: [140, 65, 38, 25],
backgroundColor: ['#d97706', '#065f46', '#292524', '#047857'],
borderWidth: 1,
borderColor: '#0c0a09'
}]
},
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { labels: { color: '#d6d3d1' } } } }
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
labels: { color: '#d6d3d1', font: { family: 'Plus Jakarta Sans', size: 10 } }
}
}
}
});
// Chart 2: Boden
new Chart(document.getElementById('subChartBoden').getContext('2d'), {
type: 'bar',
data: {
labels: ['Ist-Profil Baugrube'],
labels: ['Bodenprofil'],
datasets: [
{ label: 'Mutterboden reaktiviert (20cm)', data: [20], backgroundColor: '#166534' },
{ label: 'Filterschicht / Drainage (40cm)', data: [40], backgroundColor: '#a16207' },
{ label: 'Baugrund stabilisiert (Klasse 4)', data: [80], backgroundColor: '#44403c' }
{ label: 'Mutterboden (20cm)', data: [20], backgroundColor: '#047857', borderWidth: 0 },
{ label: 'Drainage (40cm)', data: [40], backgroundColor: '#d97706', borderWidth: 0 },
{ label: 'Baugrund (80cm)', data: [80], backgroundColor: '#292524', borderWidth: 0 }
]
},
options: { responsive: true, maintainAspectRatio: false, scales: { x: { stacked: true, ticks: { color: '#d6d3d1' } }, y: { stacked: true, ticks: { color: '#d6d3d1' } } }, plugins: { legend: { labels: { color: '#d6d3d1' } } } }
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: { stacked: true, display: false },
y: { stacked: true, display: false }
},
plugins: {
legend: {
position: 'bottom',
labels: { color: '#d6d3d1', font: { family: 'Plus Jakarta Sans', size: 10 } }
}
}
}
});
initializedCharts['mauer'] = true;
}
function triggerGewerbeCharts() {
if (initializedCharts['gewerbe']) return;
// Chart 3: Gantt
new Chart(document.getElementById('subChartGantt').getContext('2d'), {
type: 'bar',
data: {
labels: ['1. Erdbau & Rigolenbettung', '2. Tragschichtherstellung', '3. Betonsteinpflasterdecke', '4. Großbaumpflanzung (DIN)'],
datasets: [{ data: [[1, 3], [2.5, 5], [4, 7], [6.5, 8]], backgroundColor: '#047857', borderRadius: 6 }]
labels: ['1. Erdbau', '2. Tragschicht', '3. Pflaster', '4. Pflanzung'],
datasets: [{
data: [[1, 3], [2.5, 5], [4, 7], [6.5, 8]],
backgroundColor: '#065f46',
borderRadius: 4,
borderWidth: 0
}]
},
options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, scales: { x: { min: 1, max: 9, ticks: { color: '#d6d3d1', callback: v => 'Woche ' + v } }, y: { ticks: { color: '#d6d3d1' } } }, plugins: { legend: { display: false } } }
options: {
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
scales: {
x: { min: 1, max: 9, ticks: { color: '#78716c', font: { size: 10 }, callback: v => 'W.' + v } },
y: { ticks: { color: '#d6d3d1', font: { family: 'Plus Jakarta Sans', size: 11 } } }
},
plugins: { legend: { display: false } }
}
});
initializedCharts['gewerbe'] = true;
}
});
</script>
</body>
</html>
src/layouts/Layout.astro
+69
View File
@@ -0,0 +1,69 @@
---
// src/layouts/Layout.astro
interface Props {
title: string;
}
const { title } = Astro.props;
---
<!DOCTYPE html>
<html lang="de" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{title}</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Alpine.js -->
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
emerald: {
950: '#022c22',
900: '#064e3b',
800: '#065f46',
},
amber: {
400: '#fbbf24',
500: '#f59e0b',
600: '#d97706',
},
stone: {
950: '#0c0a09',
900: '#1c1917',
800: '#292524',
}
},
fontFamily: {
luxury: ['Cinzel', 'serif'],
sans: ['Plus Jakarta Sans', 'sans-serif'],
}
}
}
}
</script>
<style>
[x-cloak] { display: none !important; }
.glass { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); }
.glass-dark { background: rgba(12, 10, 9, 0.6); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); }
.text-gradient { background: linear-gradient(to right, #ffffff, #d6d3d1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.text-gradient-gold { background: linear-gradient(to right, #fbbf24, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
</style>
</head>
<body class="bg-stone-950 text-stone-200 font-sans antialiased" x-data="{ currentPage: 'main', faqOpen: null }">
<slot />
</body>
</html>
src/pages/index.astro
+115
View File
@@ -0,0 +1,115 @@
---
// src/pages/index.astro
import Layout from '../layouts/Layout.astro';
import Nav from '../components/Nav.astro';
import Hero from '../components/Hero.astro';
import Standards from '../components/Standards.astro';
import Projects from '../components/Projects.astro';
import Events from '../components/Events.astro';
import Biodiversity from '../components/Biodiversity.astro';
import FAQ from '../components/FAQ.astro';
import Footer from '../components/Footer.astro';
import SubpageMauer from '../components/SubpageMauer.astro';
import SubpageGewerbe from '../components/SubpageGewerbe.astro';
import SubpageContact from '../components/SubpageContact.astro';
---
<Layout title="Gebrüder Brabetz GmbH - Premium GaLaBau">
<Nav />
<!-- Main Page Content -->
<div x-show="currentPage === 'main'" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="space-y-0">
<Hero />
<Standards />
<Projects />
<Events />
<Biodiversity />
<FAQ />
<Footer />
</div>
<!-- Subpages -->
<SubpageMauer />
<SubpageGewerbe />
<SubpageContact />
<!-- CHARTS INIT -->
<script is:inline>
document.addEventListener('DOMContentLoaded', () => {
// Chart 1: Massen
new Chart(document.getElementById('subChartMassen').getContext('2d'), {
type: 'pie',
data: {
labels: ['Erdaushub (m³)', 'Muschelkalk (t)', 'Filterschotter (m³)', 'Oberboden (m³)'],
datasets: [{
data: [140, 65, 38, 25],
backgroundColor: ['#d97706', '#065f46', '#292524', '#047857'],
borderWidth: 1,
borderColor: '#0c0a09'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
labels: { color: '#d6d3d1', font: { family: 'Plus Jakarta Sans', size: 10 } }
}
}
}
});
// Chart 2: Boden
new Chart(document.getElementById('subChartBoden').getContext('2d'), {
type: 'bar',
data: {
labels: ['Bodenprofil'],
datasets: [
{ label: 'Mutterboden (20cm)', data: [20], backgroundColor: '#047857', borderWidth: 0 },
{ label: 'Drainage (40cm)', data: [40], backgroundColor: '#d97706', borderWidth: 0 },
{ label: 'Baugrund (80cm)', data: [80], backgroundColor: '#292524', borderWidth: 0 }
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: { stacked: true, display: false },
y: { stacked: true, display: false }
},
plugins: {
legend: {
position: 'bottom',
labels: { color: '#d6d3d1', font: { family: 'Plus Jakarta Sans', size: 10 } }
}
}
}
});
// Chart 3: Gantt
new Chart(document.getElementById('subChartGantt').getContext('2d'), {
type: 'bar',
data: {
labels: ['1. Erdbau', '2. Tragschicht', '3. Pflaster', '4. Pflanzung'],
datasets: [{
data: [[1, 3], [2.5, 5], [4, 7], [6.5, 8]],
backgroundColor: '#065f46',
borderRadius: 4,
borderWidth: 0
}]
},
options: {
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
scales: {
x: { min: 1, max: 9, ticks: { color: '#78716c', font: { size: 10 }, callback: v => 'W.' + v } },
y: { ticks: { color: '#d6d3d1', font: { family: 'Plus Jakarta Sans', size: 11 } } }
},
plugins: { legend: { display: false } }
}
});
});
</script>
</Layout>