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

feat: initialer commit der meisterhaften brabetz homepage

Browse Source
This commit is contained in:
Felix
2026-05-15 23:59:02 +02:00
commit 380fc243c0
3 changed files with 340 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -0,0 +1 @@
.env
docker-compose.yml
+25
View File
@@ -0,0 +1,25 @@
networks:
traefik_proxy:
external: true
services:
galabau-site:
image: nginx:alpine
container_name: brabetz-homepage
restart: unless-stopped
read_only: true
tmpfs:
- /var/cache/nginx
- /var/run
volumes:
- ./src:/usr/share/nginx/html:ro
networks:
- traefik_proxy
labels:
- "traefik.enable=true"
# Erreichbar unter galabau.deine-domain.de
- "traefik.http.routers.brabetz_site.rule=Host(`galabau.${DOMAIN}`)"
- "traefik.http.routers.brabetz_site.entrypoints=websecure"
- "traefik.http.routers.brabetz_site.tls.certresolver=myresolver"
- "traefik.http.services.brabetz_site.loadbalancer.server.port=80"
- "traefik.docker.network=traefik_proxy"
src/index.html
+314
View File
@@ -0,0 +1,314 @@
<!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 - Meisterhafter Garten- & Landschaftsbau</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<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=DM+Sans:wght@400;500;700&family=Merriweather:wght@400;700&display=swap" rel="stylesheet">
<style>
.font-serif { font-family: 'Merriweather', serif; }
.font-sans { font-family: 'DM Sans', sans-serif; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.faq-active .faq-answer { max-height: 200px; }
.faq-active .faq-icon { transform: rotate(180deg); }
</style>
</head>
<body class="bg-stone-50 text-stone-900 font-sans antialiased selection:bg-emerald-100 selection:text-emerald-900">
<nav class="fixed w-full bg-stone-50/95 backdrop-blur-sm z-50 shadow-sm border-b border-stone-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
<a href="#" class="flex items-center gap-3 group">
<i class="fa-solid fa-seedling text-emerald-700 text-3xl group-hover:scale-110 transition-transform"></i>
<div class="flex flex-col">
<span class="text-2xl font-serif font-bold text-emerald-900 tracking-tight">Gebrüder Brabetz</span>
<span class="text-xs font-medium text-stone-600 uppercase tracking-widest -mt-1">Garten- & Landschaftsbau</span>
</div>
</a>
<div class="hidden md:flex items-center gap-8 text-sm font-medium text-stone-700">
<a href="#services" class="hover:text-emerald-700 transition">Leistungen</a>
<a href="#gallery" class="hover:text-emerald-700 transition">Referenzen</a>
<a href="#about" class="hover:text-emerald-700 transition">Über uns</a>
<a href="#faq" class="hover:text-emerald-700 transition">FAQ</a>
<a href="#contact" class="bg-emerald-700 hover:bg-emerald-600 text-white px-5 py-2.5 rounded-full transition shadow-md shadow-emerald-700/10">Angebot einholen</a>
</div>
<button id="menu-btn" class="md:hidden text-stone-700 focus:outline-none text-2xl">
<i class="fa-solid fa-bars"></i>
</button>
</div>
<div id="mobile-menu" class="hidden md:hidden bg-stone-50 border-b border-stone-200 px-4 pt-2 pb-6 space-y-3 shadow-lg">
<a href="#services" class="block text-stone-700 font-medium hover:text-emerald-700 py-2">Leistungen</a>
<a href="#gallery" class="block text-stone-700 font-medium hover:text-emerald-700 py-2">Referenzen</a>
<a href="#about" class="block text-stone-700 font-medium hover:text-emerald-700 py-2">Über uns</a>
<a href="#faq" class="block text-stone-700 font-medium hover:text-emerald-700 py-2">FAQ</a>
<a href="#contact" class="block text-center bg-emerald-700 text-white px-4 py-2.5 rounded-xl font-medium">Angebot einholen</a>
</div>
</nav>
<header class="relative min-h-[95vh] flex items-center justify-center pt-20 overflow-hidden bg-emerald-950">
<img src="https://images.unsplash.com/photo-1558904541-efa8c3a30fc9?auto=format&fit=crop&w=1920&q=80" alt="Moderner Garten" class="absolute inset-0 w-full h-full object-cover opacity-55">
<div class="absolute inset-0 bg-gradient-to-b from-emerald-950/20 via-emerald-950/50 to-stone-50"></div>
<div class="relative max-w-5xl mx-auto px-6 text-center z-10">
<span class="text-sm font-bold tracking-widest text-emerald-300 uppercase bg-emerald-900/40 px-4 py-1.5 rounded-full border border-emerald-800/50 backdrop-blur-sm">Natur & Handwerk im Rheingau-Taunus</span>
<h1 class="mt-8 text-5xl sm:text-7xl font-serif font-bold tracking-tight text-white leading-tight">
Wir erwecken Ihren<br>
<span class="text-emerald-400">Traumgarten</span> zum Leben.
</h1>
<p class="mt-8 text-xl text-stone-200 max-w-2xl mx-auto leading-relaxed">
Meisterhafter Gartenbau kombiniert mit innovativer 3D-Planung. Wir gestalten Wohlfühloasen, die Generationen überdauern.
</p>
<div class="mt-12 flex flex-wrap justify-center gap-5">
<a href="#contact" class="px-8 py-4 bg-emerald-600 hover:bg-emerald-500 text-white font-semibold rounded-xl shadow-lg shadow-emerald-600/20 transition-all transform hover:-translate-y-0.5 text-lg">Kostenloses Erstgespräch</a>
<a href="#services" class="px-8 py-4 bg-white/10 hover:bg-white/20 text-white font-medium rounded-xl border border-white/20 transition-all backdrop-blur-sm">Unsere Leistungen</a>
</div>
</div>
</header>
<section class="relative z-10 -mt-16 max-w-6xl mx-auto px-4">
<div class="bg-white rounded-3xl shadow-xl border border-stone-100 p-8 grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
<div>
<p class="text-3xl font-serif font-bold text-emerald-900">25+</p>
<p class="text-xs text-stone-500 uppercase tracking-wider font-medium mt-1">Jahre Erfahrung</p>
</div>
<div>
<p class="text-3xl font-serif font-bold text-emerald-900">400+</p>
<p class="text-xs text-stone-500 uppercase tracking-wider font-medium mt-1">Projekte vollendet</p>
</div>
<div>
<p class="text-3xl font-serif font-bold text-emerald-900">3 Brüder</p>
<p class="text-xs text-stone-500 uppercase tracking-wider font-medium mt-1">Ein Wort & Versprechen</p>
</div>
<div>
<p class="text-3xl font-serif font-bold text-emerald-900">100%</p>
<p class="text-xs text-stone-500 uppercase tracking-wider font-medium mt-1">Smarte Datensouveränität</p>
</div>
</div>
</section>
<section id="services" class="py-28 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-20">
<h2 class="text-sm font-bold tracking-widest text-amber-600 uppercase">Unser Handwerk</h2>
<p class="mt-4 text-4xl font-serif font-bold text-emerald-900 sm:text-5xl tracking-tight">Vom Entwurf bis zur Vollendung</p>
<div class="mt-6 w-20 h-1 bg-amber-600 mx-auto"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
<div class="bg-white p-10 rounded-3xl border border-stone-100 shadow-xl shadow-stone-500/5 transition hover:shadow-emerald-900/5 group">
<div class="w-16 h-16 bg-emerald-50 rounded-2xl flex items-center justify-center text-emerald-700 text-2xl mb-8 group-hover:bg-emerald-700 group-hover:text-white transition-all">
<i class="fa-solid fa-compass-drafting"></i>
</div>
<h3 class="text-2xl font-semibold text-emerald-950 mb-4">Planung & Design</h3>
<p class="text-stone-600 text-base leading-relaxed">Individuelle 3D-Gartenarchitektur, die Ihre Wünsche exakt visualisiert, Höhenunterschiede ausgleicht und Schattenverläufe simuliert.</p>
</div>
<div class="bg-white p-10 rounded-3xl border border-stone-100 shadow-xl shadow-stone-500/5 transition hover:shadow-emerald-900/5 group">
<div class="w-16 h-16 bg-emerald-50 rounded-2xl flex items-center justify-center text-emerald-700 text-2xl mb-8 group-hover:bg-emerald-700 group-hover:text-white transition-all">
<i class="fa-solid fa-mountain-sun"></i>
</div>
<h3 class="text-2xl font-semibold text-emerald-950 mb-4">Hardscape & Bau</h3>
<p class="text-stone-600 text-base leading-relaxed">Terrassenbau, langlebige Natursteinmauern, Pflasterarbeiten, Zaunbau und meisterhafte Steinkunst präzise ausgeführt.</p>
</div>
<div class="bg-white p-10 rounded-3xl border border-stone-100 shadow-xl shadow-stone-500/5 transition hover:shadow-emerald-900/5 group">
<div class="w-16 h-16 bg-emerald-50 rounded-2xl flex items-center justify-center text-emerald-700 text-2xl mb-8 group-hover:bg-emerald-700 group-hover:text-white transition-all">
<i class="fa-solid fa-faucet-drip"></i>
</div>
<h3 class="text-2xl font-semibold text-emerald-950 mb-4">Smart Garden (IoT)</h3>
<p class="text-stone-600 text-base leading-relaxed">Automatisierte Bewässerungsanlagen, integrierte Bodenfeuchtesensoren und atmosphärische Lichtsteuerung – gehostet auf dem GreenStack.</p>
</div>
</div>
</section>
<section id="gallery" class="py-28 bg-stone-950 text-stone-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-20">
<h2 class="text-sm font-bold tracking-widest text-emerald-400 uppercase">Referenzen</h2>
<p class="mt-4 text-4xl font-serif font-bold text-white sm:text-5xl tracking-tight">Meisterwerke aus unserer Hand</p>
<div class="mt-6 w-20 h-1 bg-amber-500 mx-auto"></div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="relative overflow-hidden rounded-2xl group aspect-[4/3] shadow-lg">
<img src="https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?auto=format&fit=crop&w=600&q=80" alt="Gartenplanung" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent p-6 flex flex-col justify-end">
<p class="text-sm font-bold text-emerald-300">Designphase</p>
<p class="text-xs text-stone-400">Präzise 3D-Visualisierung</p>
</div>
</div>
<div class="relative overflow-hidden rounded-2xl group aspect-[4/3] shadow-lg">
<img src="https://images.unsplash.com/photo-1592417817098-8f3d6eb19675?auto=format&fit=crop&w=600&q=80" alt="Steinarbeiten" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent p-6 flex flex-col justify-end">
<p class="text-sm font-bold text-emerald-300">Umsetzung</p>
<p class="text-xs text-stone-400">Natursteinpflasterung</p>
</div>
</div>
<div class="relative overflow-hidden rounded-2xl group aspect-[4/3] shadow-lg">
<img src="https://images.unsplash.com/photo-1560568082-c15188aa6510?auto=format&fit=crop&w=600&q=80" alt="Moderner Garten" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent p-6 flex flex-col justify-end">
<p class="text-sm font-bold text-emerald-300">Vollendung</p>
<p class="text-xs text-stone-400">Wellness-Oase im Grünen</p>
</div>
</div>
<div class="relative overflow-hidden rounded-2xl group aspect-[4/3] shadow-lg">
<img src="https://images.unsplash.com/photo-1558904541-efa8c3a30fc9?auto=format&fit=crop&w=600&q=80" alt="Smart Garden" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent p-6 flex flex-col justify-end">
<p class="text-sm font-bold text-emerald-300">GreenStack IoT</p>
<p class="text-xs text-stone-400">Smarte Bewässerungssteuerung</p>
</div>
</div>
</div>
</div>
</section>
<section id="faq" class="py-28 max-w-4xl mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-sm font-bold tracking-widest text-amber-600 uppercase">Häufige Fragen</h2>
<p class="mt-4 text-4xl font-serif font-bold text-emerald-900 tracking-tight">Klarheit von Anfang an</p>
<div class="mt-4 w-16 h-1 bg-amber-600 mx-auto"></div>
</div>
<div class="space-y-4">
<div class="bg-white border border-stone-200 rounded-2xl p-6 transition-all duration-300 cursor-pointer" onclick="toggleFaq(this)">
<div class="flex justify-between items-center select-none">
<h3 class="font-semibold text-lg text-emerald-950">Wie läuft ein Projekt bei den Gebrüdern Brabetz ab?</h3>
<i class="fa-solid fa-chevron-down faq-icon text-stone-400 transition-transform duration-300"></i>
</div>
<div class="faq-answer mt-3 text-stone-600 text-sm leading-relaxed">
Alles beginnt mit einem kostenlosen Erstgespräch bei Ihnen vor Ort im Rheingau-Taunus-Kreis. Danach erstellen wir eine präzise 3D-Planung. Erst wenn Sie zu 100 % zufrieden sind, rücken wir mit unserem Maschinenpark zur meisterhaften Umsetzung an.
</div>
</div>
<div class="bg-white border border-stone-200 rounded-2xl p-6 transition-all duration-300 cursor-pointer" onclick="toggleFaq(this)">
<div class="flex justify-between items-center select-none">
<h3 class="font-semibold text-lg text-emerald-950">Was verbirgt sich hinter dem "GreenStack IoT"?</h3>
<i class="fa-solid fa-chevron-down faq-icon text-stone-400 transition-transform duration-300"></i>
</div>
<div class="faq-answer mt-3 text-stone-600 text-sm leading-relaxed">
Wir überlassen Ihre Gartendaten nicht fremden US-Cloud-Konzernen. Die digitale Steuerung Ihrer Bewässerung und Beleuchtung läuft über einen gesicherten, selbstgehosteten Docker-Stack direkt auf unserer eigenen Server-Infrastruktur. Das bedeutet absolute Datensouveränität und Ausfallsicherheit für Sie.
</div>
</div>
<div class="bg-white border border-stone-200 rounded-2xl p-6 transition-all duration-300 cursor-pointer" onclick="toggleFaq(this)">
<div class="flex justify-between items-center select-none">
<h3 class="font-semibold text-lg text-emerald-950">Übernehmen Sie auch kleinere Pflaster- oder Pflegearbeiten?</h3>
<i class="fa-solid fa-chevron-down faq-icon text-stone-400 transition-transform duration-300"></i>
</div>
<div class="faq-answer mt-3 text-stone-600 text-sm leading-relaxed">
Ja, absolut! Wir realisieren exklusive Großprojekte ebenso leidenschaftlich wie kleinere Anpassungen, Zaunbau, Terrassenerweiterungen oder den fachgerechten Baumschnitt bei Ihnen im Garten.
</div>
</div>
</div>
</section>
<section id="contact" class="py-24 bg-stone-100 border-t border-stone-200">
<div class="max-w-5xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div>
<h2 class="text-4xl font-serif font-bold text-emerald-900 leading-tight">Lass uns gemeinsam Großes erschaffen.</h2>
<p class="mt-4 text-stone-600 text-lg">Sende uns eine unverbindliche Anfrage. Wir melden uns innerhalb von 24 Stunden bei dir, um einen gemeinsamen Vor-Ort-Termin zu vereinbaren.</p>
<div class="mt-8 space-y-4">
<div class="flex items-center gap-4">
<div class="w-10 h-10 bg-white rounded-xl shadow flex items-center justify-center text-emerald-700"><i class="fa-solid fa-phone"></i></div>
<a href="tel:061244654" class="font-bold text-lg text-emerald-950 hover:text-emerald-700 transition">06124 / 4654</a>
</div>
<div class="flex items-center gap-4">
<div class="w-10 h-10 bg-white rounded-xl shadow flex items-center justify-center text-emerald-700"><i class="fa-solid fa-envelope"></i></div>
<a href="mailto:info@gebrueder-brabetz.de" class="font-medium text-stone-700 hover:text-emerald-700 transition">info@gebrueder-brabetz.de</a>
</div>
</div>
</div>
<div class="bg-white p-8 rounded-3xl shadow-xl border border-stone-200/60">
<form onsubmit="handleFormSubmit(event)" class="space-y-4">
<div>
<label class="block text-xs font-semibold uppercase tracking-wider text-stone-500 mb-1">Name *</label>
<input type="text" required class="w-full bg-stone-50 border border-stone-200 rounded-xl px-4 py-3 text-stone-900 focus:outline-none focus:border-emerald-600 transition text-sm">
</div>
<div>
<label class="block text-xs font-semibold uppercase tracking-wider text-stone-500 mb-1">E-Mail Adresse *</label>
<input type="email" required class="w-full bg-stone-50 border border-stone-200 rounded-xl px-4 py-3 text-stone-900 focus:outline-none focus:border-emerald-600 transition text-sm">
</div>
<div>
<label class="block text-xs font-semibold uppercase tracking-wider text-stone-500 mb-1">Projektart</label>
<select class="w-full bg-stone-50 border border-stone-200 rounded-xl px-4 py-3 text-stone-900 focus:outline-none focus:border-emerald-600 transition text-sm">
<option>Komplette Neugestaltung</option>
<option>Terrassen- & Steinarbeiten</option>
<option>Smart Garden & Bewässerung</option>
<option>Gartenpflege & Holzarbeiten</option>
</select>
</div>
<div>
<label class="block text-xs font-semibold uppercase tracking-wider text-stone-500 mb-1">Deine Nachricht</label>
<textarea rows="3" placeholder="Beschreibe kurz dein Vorhaben..." class="w-full bg-stone-50 border border-stone-200 rounded-xl px-4 py-3 text-stone-900 focus:outline-none focus:border-emerald-600 transition text-sm"></textarea>
</div>
<button type="submit" class="w-full py-4 bg-emerald-700 hover:bg-emerald-600 text-white font-semibold rounded-xl transition shadow-lg shadow-emerald-700/10 text-sm tracking-wide uppercase">Anfrage absenden</button>
</form>
<div id="form-success" class="hidden mt-4 p-4 bg-emerald-50 border border-emerald-200 rounded-xl text-emerald-800 text-sm text-center font-medium">
🎉 Danke! Deine Anfrage ist sicher auf unserem Server gelandet. Wir melden uns!
</div>
</div>
</div>
</section>
<footer class="bg-stone-900 py-16 text-stone-400 border-t border-stone-950">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-3 gap-12 text-sm">
<div>
<h4 class="font-semibold text-white mb-4 text-base">Kontakt</h4>
<p class="font-medium text-stone-200 text-base mb-1">Gebrüder Brabetz GmbH</p>
<p>Rheingau-Taunus-Kreis</p>
<p class="mt-3"><i class="fa-solid fa-phone text-emerald-400 mr-2"></i> 06124 / 4654</p>
<p><i class="fa-solid fa-envelope text-emerald-400 mr-2"></i> info@gebrueder-brabetz.de</p>
</div>
<div>
<h4 class="font-semibold text-white mb-4 text-base">Impressum</h4>
<p><strong>Vertreten durch die Gebrüder:</strong> Caspar Brabetz, Jakob Brabetz, Felix Brabetz</p>
<p><strong>Sitz der Gesellschaft:</strong> Rheingau-Taunus-Kreis</p>
<p><strong>Registereintrag:</strong> Amtsgericht Bad Schwalbach (i. Gr.)</p>
<p class="mt-3 text-xs text-stone-500 leading-relaxed">Verantwortlich für den Inhalt nach § 5 TMG: Caspar Brabetz, Jakob Brabetz, Felix Brabetz.</p>
</div>
<div class="text-right flex flex-col items-end justify-between">
<div class="flex items-center gap-2 mb-4">
<i class="fa-solid fa-seedling text-emerald-400 text-xl"></i>
<span class="text-lg font-serif font-bold text-white tracking-tight">Gebrüder Brabetz</span>
</div>
<div class="text-xs text-stone-500">
<p>&copy; 2026. Alle Rechte vorbehalten.</p>
<p class="mt-1">Hosted safely on our own Docker Stack (brabetz-node)</p>
</div>
</div>
</div>
</footer>
<script>
// Mobile Menu Toggle
const menuBtn = document.getElementById('menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
menuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Schließen des mobilen Menüs bei Klick auf Link
document.querySelectorAll('#mobile-menu a').forEach(link => {
link.addEventListener('click', () => mobileMenu.classList.add('hidden'));
});
// FAQ Akkordeon Toggle
function toggleFaq(element) {
element.classList.toggle('faq-active');
}
// Formular Absendungs-Simulation
function handleFormSubmit(event) {
event.preventDefault();
const successDiv = document.getElementById('form-success');
successDiv.classList.remove('hidden');
event.target.reset();
setTimeout(() => {
successDiv.classList.add('hidden');
}, 6000);
}
</script>
</body>
</html>