From 90e7b030ca6a7b35fe2f357dd50b37fc42335d3e Mon Sep 17 00:00:00 2001
From: Felix Brabetz <lixatnz@gmail.com>
Date: Sat, 16 May 2026 04:57:12 +0200
Subject: [PATCH] Add dedicated SubpageRain with slider and connection to
 Schwammstadt

---
 src/components/Hero.astro        |  8 ++---
 src/components/SubpageRain.astro | 56 ++++++++++++++++++++++++++++++++
 src/pages/index.astro            |  2 ++
 3 files changed, 62 insertions(+), 4 deletions(-)
 create mode 100644 src/components/SubpageRain.astro

diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 7dfcb95..cd047f4 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -38,11 +38,11 @@
             <span class="text-emerald-400">Aktuell perfektes Wetter für den Trockenmauerbau.</span>
         </div>
 
-        <!-- Rain Toggle Button -->
+        <!-- Rain Detail Page Button -->
         <div class="mb-8">
-            <button @click="rain = !rain" class="text-stone-500 hover:text-white text-xs font-mono flex justify-center items-center gap-2 mx-auto bg-stone-900/50 px-4 py-2 rounded-full border border-stone-800 hover:border-stone-700 transition-colors backdrop-blur-sm">
-                <i class="fa-solid" :class="rain ? 'fa-cloud-showers-heavy text-emerald-400' : 'fa-cloud'"></i>
-                <span x-text="rain ? 'Regen stoppen' : 'Regen-Modus für Gemütlichkeit'"></span>
+            <button @click="currentPage = 'page-rain'" class="text-emerald-400 hover:text-emerald-300 text-xs font-mono flex justify-center items-center gap-2 mx-auto bg-stone-900/50 px-4 py-2 rounded-full border border-emerald-900/50 hover:border-emerald-500 transition-colors backdrop-blur-sm">
+                <i class="fa-solid fa-cloud-showers-heavy"></i>
+                <span>Regen-Modus für Gemütlichkeit entdecken</span>
             </button>
         </div>
 
diff --git a/src/components/SubpageRain.astro b/src/components/SubpageRain.astro
new file mode 100644
index 0000000..4595c14
--- /dev/null
+++ b/src/components/SubpageRain.astro
@@ -0,0 +1,56 @@
+---
+// src/components/SubpageRain.astro
+---
+<div x-show="currentPage === 'page-rain'" 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 relative overflow-hidden" x-data="{ rainIntensity: 50, drops: [], generateDrops(val) { this.drops = []; for(let i=0; i<val; i++) this.drops.push({ left: Math.random()*100, speed: 0.5+Math.random()*0.5, delay: Math.random()*2 }); } }" x-init="generateDrops(rainIntensity); $watch('rainIntensity', value => generateDrops(value))">
+    
+    <!-- Rain Container (Full Screen on this page) -->
+    <div class="absolute inset-0 pointer-events-none z-0">
+        <template x-for="drop in drops">
+            <div class="absolute bg-emerald-400/30 w-0.5 h-8" 
+                 :style="`left: ${drop.left}%; top: -20px; animation: fall ${drop.speed}s linear infinite; animation-delay: ${drop.delay}s`">
+            </div>
+        </template>
+    </div>
+
+    <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-emerald-500 font-mono uppercase tracking-widest block mb-2">Atmosphäre & Ökologie</span>
+            <h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white">Regen für Gemütlichkeit</h1>
+        </div>
+
+        <!-- Controls -->
+        <div class="glass p-8 rounded-2xl border border-stone-800 space-y-6">
+            <div>
+                <label class="block text-xs font-mono text-stone-500 uppercase mb-2 tracking-widest">Regen-Intensität: <span x-text="rainIntensity" class="text-emerald-400"></span> Tropfen</label>
+                <input type="range" min="0" max="200" x-model="rainIntensity" class="w-full h-2 bg-stone-800 rounded-lg appearance-none cursor-pointer accent-emerald-500">
+            </div>
+            
+            <div class="flex justify-between text-xs text-stone-600 font-mono">
+                <span>Nieselregen</span>
+                <span>Landregen</span>
+                <span>Wolkenbruch</span>
+            </div>
+        </div>
+
+        <!-- Content -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 text-stone-400 text-sm leading-relaxed">
+            <div class="space-y-4">
+                <h3 class="text-white font-bold text-lg">Warum wir den Regen lieben</h3>
+                <p>Für viele ist Regen ein Grund, im Haus zu bleiben. Für uns Gärtner ist er der Herzschlag der Natur. Ohne Regen gibt es kein Wachstum, keine Kühlung und keine Erholung für den Boden.</p>
+                <p>Mit unserem "Regen-Modus" möchten wir dir die beruhigende Wirkung eines Sommerregens näherbringen. Setz dich hin, dreh die Intensität hoch und genieße die Atmosphäre.</p>
+            </div>
+            <div class="space-y-4">
+                <h3 class="text-white font-bold text-lg">Vom Genuss zur Technik</h3>
+                <p>Aber Regen ist nicht nur Atmosphäre. In Zeiten des Klimawandels müssen wir lernen, jeden Tropfen zu nutzen. Hier schließt sich der Kreis zu unserem **Schwammstadt-Prinzip**.</p>
+                <p>Wir bauen Gärten, die das Wasser nicht einfach ableiten, sondern wie ein Schwamm aufsaugen und speichern. So schützen wir vor Überflutung und versorgen die Pflanzen in Trockenzeiten.</p>
+                <button @click="currentPage = 'page-gewerbe'" class="text-emerald-400 hover:text-emerald-300 underline font-semibold transition-colors">
+                    Mehr zum Schwammstadt-Prinzip lesen
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 41190ae..8b26de3 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -16,6 +16,7 @@ import SubpageGewerbe from '../components/SubpageGewerbe.astro';
 import SubpageContact from '../components/SubpageContact.astro';
 import SubpageImpressum from '../components/SubpageImpressum.astro';
 import SubpageDatenschutz from '../components/SubpageDatenschutz.astro';
+import SubpageRain from '../components/SubpageRain.astro';
 import EasterEgg from '../components/EasterEgg.astro';
 ---
 
@@ -41,6 +42,7 @@ import EasterEgg from '../components/EasterEgg.astro';
     <SubpageContact />
     <SubpageImpressum />
     <SubpageDatenschutz />
+    <SubpageRain />
     <EasterEgg />
 
     <!-- CHARTS INIT -->