Add 2 more projects (Teichbau, Weinberg) with dedicated story subpages
This commit is contained in:
Felix Brabetz
@@ -52,6 +52,48 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project 3: Teichbau -->
|
||||
<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-1590073242643-42be0032ba61?fm=jpg&q=60&w=800&auto=format&fit=crop" alt="Schwimmteich" 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 III</span>
|
||||
<span class="absolute top-4 right-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 flex items-center gap-1">
|
||||
<i class="fa-solid fa-leaf"></i> Plantlix verifiziert
|
||||
</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">Der lebendige Schwimmteich</h3>
|
||||
<p class="text-stone-400 text-sm leading-relaxed font-light mb-6">Ein Kunde wollte einen klassischen Pool. Wir überzeugten ihn von einem biologischen Badeparadies. Ohne Chlor, dafür mit einer Regenerationszone aus über 200 Wasserpflanzen. Kristallklares Wasser im Einklang mit der Natur.</p>
|
||||
</div>
|
||||
<button @click="currentPage = 'page-teich'" 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">
|
||||
Geschichte lesen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project 4: Weinberg -->
|
||||
<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-1504275107627-0c2ba7a43dba?fm=jpg&q=60&w=800&auto=format&fit=crop" alt="Weinberg Terrassen" 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 IV</span>
|
||||
<span class="absolute top-4 right-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 flex items-center gap-1">
|
||||
<i class="fa-solid fa-leaf"></i> Plantlix verifiziert
|
||||
</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">Die Weinberg-Terrassierung</h3>
|
||||
<p class="text-stone-400 text-sm leading-relaxed font-light mb-6">Ein historischer Steilhang-Weinberg im Rheingau drohte durch Erosion zu verfallen. Wir sicherten den Hang mit über 150 Metern Trockenmauerwerk und schufen neue, bepflanzbare Terrassen. Ein Denkmal für die Region.</p>
|
||||
</div>
|
||||
<button @click="currentPage = 'page-weinberg'" 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">
|
||||
Geschichte lesen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
// src/components/SubpageTeich.astro
|
||||
---
|
||||
<!-- Subpage: Teich -->
|
||||
<div x-show="currentPage === 'page-teich'" 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-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">
|
||||
<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">Echte Geschichte // Case Study III</span>
|
||||
<h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white mb-4">Der lebendige Schwimmteich</h1>
|
||||
<p class="text-stone-400 text-lg font-light leading-relaxed">
|
||||
Wie wir einen Chlor-Pool verhinderten und ein biologisches Badeparadies im Rheingau erschufen.
|
||||
</p>
|
||||
</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 wünschte sich einen klassischen Swimmingpool für seinen Garten. Doch der Gedanke an Chlorgeruch und eine künstlich blaue Wüste passte nicht zu seinem Wunsch nach einem naturnahen Garten. Die Herausforderung: Ein Badegewässer zu schaffen, das glasklar ist, aber ohne Chemie auskommt.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-white font-bold text-lg mb-2">Unsere Lösung</h3>
|
||||
<p>Wir bauten einen zweigeteilten Schwimmteich. Der Badebereich ist klar vom Regenerationsbereich getrennt. Im Regenerationsbereich filtert die Natur das Wasser: Spezielle Substrate und über 200 Wasserpflanzen (wie Schilf und Seerosen) entziehen dem Wasser Nährstoffe und verhindern so Algenbildung.</p>
|
||||
<p class="mt-2">Eine sanfte Umwälzpumpe sorgt dafür, dass das Wasser ständig durch diesen natürlichen Filter fließt. Ganz ohne Chlor.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-white font-bold text-lg mb-2">Das Ergebnis</h3>
|
||||
<p>Der Kunde schwimmt jetzt in Wasser von Trinkwasserqualität. Der Teich ist das optische Highlight des Gartens geworden und zieht Libellen, Frösche und Vögel an. Ein lebendiges Ökosystem, das gleichzeitig der Entspannung dient.</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">150 m³</span>
|
||||
<span class="text-xs text-stone-500 uppercase font-mono">Wasservolumen</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">200+</span>
|
||||
<span class="text-xs text-stone-500 uppercase font-mono">Wasserpflanzen</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">0 %</span>
|
||||
<span class="text-xs text-stone-500 uppercase font-mono">Chlor</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
// src/components/SubpageWeinberg.astro
|
||||
---
|
||||
<!-- Subpage: Weinberg -->
|
||||
<div x-show="currentPage === 'page-weinberg'" 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-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">
|
||||
<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">Echte Geschichte // Case Study IV</span>
|
||||
<h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white mb-4">Die Weinberg-Terrassierung</h1>
|
||||
<p class="text-stone-400 text-lg font-light leading-relaxed">
|
||||
Wie wir einen historischen Steilhang im Rheingau vor dem Verfall retteten.
|
||||
</p>
|
||||
</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>Ein Winzer im Rheingau stand vor einer Herkulesaufgabe: Seine besten Steillagen drohten durch Erosion und Starkregen abzurutschen. Die alten, maroden Mauern hielten dem Druck nicht mehr stand. Ohne Sicherung war die Bewirtschaftung lebensgefährlich und der Weinertrag bedroht.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-white font-bold text-lg mb-2">Unsere Lösung</h3>
|
||||
<p>Wir sanierten die Hänge nach historischem Vorbild, aber mit modernem statischen Wissen. Wir bauten über 150 Meter neue Trockenmauern aus regionalem Bruchstein. Dabei achteten wir extrem auf die Entwässerung hinter der Mauer (Hinterpackung), damit der Wasserdruck die Steine nicht wegdrückt.</p>
|
||||
<p class="mt-2">Zwischen den Mauern schufen wir breitere Terrassen, die nun maschinell oder zumindest sicherer von Hand bewirtschaftet werden können.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-white font-bold text-lg mb-2">Das Ergebnis</h3>
|
||||
<p>Der Weinberg ist für die nächsten 100 Jahre gesichert. Der Winzer kann wieder sicher arbeiten und die neuen Trockenmauern bieten Lebensraum für seltene Mauereidechsen und wärmeliebende Pflanzen. Ein Stück Kulturlandschaft wurde gerettet.</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">150 m</span>
|
||||
<span class="text-xs text-stone-500 uppercase font-mono">Mauerlänge</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-3xl font-luxury font-bold text-emerald-400 block mb-1">45°</span>
|
||||
<span class="text-xs text-stone-500 uppercase font-mono">Hangneigung</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">Handarbeit</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -18,6 +18,8 @@ import SubpageImpressum from '../components/SubpageImpressum.astro';
|
||||
import SubpageDatenschutz from '../components/SubpageDatenschutz.astro';
|
||||
import SubpageRain from '../components/SubpageRain.astro';
|
||||
import SubpagePlantlix from '../components/SubpagePlantlix.astro';
|
||||
import SubpageTeich from '../components/SubpageTeich.astro';
|
||||
import SubpageWeinberg from '../components/SubpageWeinberg.astro';
|
||||
import EasterEgg from '../components/EasterEgg.astro';
|
||||
---
|
||||
|
||||
@@ -45,6 +47,8 @@ import EasterEgg from '../components/EasterEgg.astro';
|
||||
<SubpageDatenschutz />
|
||||
<SubpageRain />
|
||||
<SubpagePlantlix />
|
||||
<SubpageTeich />
|
||||
<SubpageWeinberg />
|
||||
<EasterEgg />
|
||||
|
||||
<!-- CHARTS INIT -->
|
||||
|
||||
Reference in New Issue
Block a user