Delete old index.html to avoid confusion with Astro files
This commit is contained in:
Felix Brabetz
-490
@@ -1,490 +0,0 @@
|
|||||||
<!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>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@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 }">
|
|
||||||
|
|
||||||
<!-- 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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- 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>
|
|
||||||
|
|
||||||
<!-- 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>
|
|
||||||
|
|
||||||
<!-- 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>
|
|
||||||
|
|
||||||
<!-- 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 © 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>
|
|
||||||
|
|
||||||
<!-- 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>
|
|
||||||
|
|
||||||
<!-- 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>
|
|
||||||
|
|
||||||
<!-- 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>
|
|
||||||
|
|
||||||
<!-- CHARTS INIT -->
|
|
||||||
<script>
|
|
||||||
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>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Reference in New Issue
Block a user