Flesh out subpages into rich stories with challenges, solutions, and facts
This commit is contained in:
Felix Brabetz
@@ -2,18 +2,56 @@
|
|||||||
// src/components/SubpageGewerbe.astro
|
// src/components/SubpageGewerbe.astro
|
||||||
---
|
---
|
||||||
<!-- Subpage: Gewerbe -->
|
<!-- 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 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 bg-stone-950">
|
||||||
<div class="max-w-6xl mx-auto space-y-12">
|
<div class="max-w-4xl mx-auto space-y-12 relative z-10">
|
||||||
<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">
|
<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
|
<i class="fa-solid fa-arrow-left"></i> Zurück zur Übersicht
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="border-b border-stone-800 pb-6">
|
<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>
|
<span class="text-xs text-amber-500 font-mono uppercase tracking-widest block mb-2">Echte Geschichte // Case Study II</span>
|
||||||
<h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white mb-4">Das blühende Schwammstadt-Biotop</h1>
|
<h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white mb-4">Die blühende Schwammstadt</h1>
|
||||||
<p class="text-stone-400 text-lg font-light leading-relaxed max-w-3xl">
|
<p class="text-stone-400 text-lg font-light leading-relaxed">
|
||||||
In einem Neubaugebiet staute sich das Regenwasser. Statt es einfach in die Kanalisation zu leiten, bauten wir ein unterirdisches Rigolensystem und tarnten es an der Oberfläche als wunderschönes Sumpfbiotop. Bei Starkregen saugt der Garten das Wasser auf wie ein Schwamm.
|
Wie wir ein Entwässerungsproblem in ein blühendes Sumpfbiotop verwandelten – optimiert durch Plantlix.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Story Content -->
|
||||||
|
<div class="space-y-8 text-stone-400 text-sm leading-relaxed">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-white font-bold text-lg mb-2">Die Herausforderung</h3>
|
||||||
|
<p>In einem neu erschlossenen Wohngebiet gab es massiven Ärger: Bei Starkregen staute sich das Wasser auf den Grundstücken, weil der Boden das Wasser nicht schnell genug aufnehmen konnte. Die Kanalisation war überlastet. Die Gemeinde forderte eine Lösung zur Regenwasser-Rückhaltung.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="text-white font-bold text-lg mb-2">Unsere Lösung</h3>
|
||||||
|
<p>Statt hässlicher Betonbecken bauten wir ein intelligentes Rigolensystem unter der Erde. Das Besondere: An der Oberfläche tarnten wir das System als wunderschönes, natürliches Sumpfbiotop.</p>
|
||||||
|
<p class="mt-2">Über die API von **Plantlix.de** analysierten wir die Standortbedingungen. Plantlix lieferte uns die perfekte pflanzensoziologische Zusammenstellung für ein wechselfeuchtes Biotop. Wir pflanzten über 300 spezialisierte Sumpf- und Wasserpflanzen.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="text-white font-bold text-lg mb-2">Das Ergebnis</h3>
|
||||||
|
<p>Bei Starkregen saugt der Garten das Wasser auf wie ein Schwamm. Es gibt keine Überschwemmungen mehr. Und der Kunde hat statt einer technischen Anlage eine wunderschöne Oase, in der sich Libellen und Amphibien sichtlich wohlfühlen.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Facts & Figures -->
|
||||||
|
<div class="glass p-8 rounded-2xl border border-stone-800 grid grid-cols-1 sm:grid-cols-3 gap-6 text-center">
|
||||||
|
<div>
|
||||||
|
<span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">50.000 l</span>
|
||||||
|
<span class="text-xs text-stone-500 uppercase font-mono">Speicherkapazität</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">300+</span>
|
||||||
|
<span class="text-xs text-stone-500 uppercase font-mono">Spezialpflanzen</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">100 %</span>
|
||||||
|
<span class="text-xs text-stone-500 uppercase font-mono">Regenwassernutzung</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Keep the Charts -->
|
||||||
<div class="glass p-8 rounded-2xl"><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>
|
</div>
|
||||||
|
|||||||
@@ -2,18 +2,56 @@
|
|||||||
// src/components/SubpageMauer.astro
|
// src/components/SubpageMauer.astro
|
||||||
---
|
---
|
||||||
<!-- Subpage: Mauer -->
|
<!-- 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 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 bg-stone-950">
|
||||||
<div class="max-w-6xl mx-auto space-y-12">
|
<div class="max-w-4xl mx-auto space-y-12 relative z-10">
|
||||||
<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">
|
<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
|
<i class="fa-solid fa-arrow-left"></i> Zurück zur Übersicht
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="border-b border-stone-800 pb-6">
|
<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>
|
<span class="text-xs text-amber-500 font-mono uppercase tracking-widest block mb-2">Echte Geschichte // Case Study I</span>
|
||||||
<h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white mb-4">Die Festung im Rheingau</h1>
|
<h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white mb-4">Die schwebende Trockenmauer im Taunus</h1>
|
||||||
<p class="text-stone-400 text-lg font-light leading-relaxed max-w-3xl">
|
<p class="text-stone-400 text-lg font-light leading-relaxed">
|
||||||
Ein steiler Hang drohte wegzurutschen. Statt einer kalten Betonwand bauten wir eine bis zu 3 Meter hohe Trockenmauer aus regionalem Quarzit. Stein für Stein im zweihäuptigen Verband – ganz ohne Mörtel. Heute sonnen sich dort Eidechsen und der Hang ist für Generationen gesichert.
|
Wie wir einen rutschenden Steilhang ohne ein Gramm Mörtel sicherten und ein Paradies für Eidechsen schufen.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Story Content -->
|
||||||
|
<div class="space-y-8 text-stone-400 text-sm leading-relaxed">
|
||||||
|
<div>
|
||||||
|
<h3 class="text-white font-bold text-lg mb-2">Die Herausforderung</h3>
|
||||||
|
<p>Der Kunde stand vor einem Riesenproblem: Ein extrem steiler Hang auf seinem Grundstück drohte bei jedem starken Regen weiter abzurutschen. Die klassische Lösung der meisten Firmen: Eine gigantische Betonwand. Aber der Kunde wollte Natur. Er wollte keine graue Wüste vor seinem Fenster.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="text-white font-bold text-lg mb-2">Unsere Lösung</h3>
|
||||||
|
<p>Wir entschieden uns für die Königsdisziplin im GaLaBau: Den echten Trockenmauerbau. Wir verwendeten regionalen Quarzit aus dem Taunus. Stein für Stein wurde von Hand ausgewählt und im zweihäuptigen Verband gesetzt. Das Prinzip basiert auf Schwerkraft und Reibung – kein Mörtel, kein Beton.</p>
|
||||||
|
<p class="mt-2">Die offenen Fugen füllten wir mit einem speziellen Substrat und pflanzten trockenheitsresistente Stauden. So entstand eine "schwebende" Optik, die sich perfekt in die Landschaft einfügt.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="text-white font-bold text-lg mb-2">Das Ergebnis</h3>
|
||||||
|
<p>Die Mauer hält bombensicher. Und das Beste: Schon im ersten Sommer zogen die ersten Smaragdeidechsen in die warmen Fugen ein. Es ist ein lebendiges Bauwerk geworden, das mit den Jahren immer schöner wird.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Facts & Figures -->
|
||||||
|
<div class="glass p-8 rounded-2xl border border-stone-800 grid grid-cols-1 sm:grid-cols-3 gap-6 text-center">
|
||||||
|
<div>
|
||||||
|
<span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">120 t</span>
|
||||||
|
<span class="text-xs text-stone-500 uppercase font-mono">Stein bewegt</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">3 m</span>
|
||||||
|
<span class="text-xs text-stone-500 uppercase font-mono">Maximale Höhe</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">0 g</span>
|
||||||
|
<span class="text-xs text-stone-500 uppercase font-mono">Mörtel verwendet</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Keep the Charts -->
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
<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="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 class="glass p-8 rounded-2xl"><div class="relative w-full h-[280px] flex justify-center"><canvas id="subChartBoden"></canvas></div></div>
|
||||||
|
|||||||
Reference in New Issue
Block a user