From 4a41cd1392692fe6195912b953174a9f9b0816fb Mon Sep 17 00:00:00 2001
From: Felix Brabetz <lixatnz@gmail.com>
Date: Sat, 16 May 2026 04:53:08 +0200
Subject: [PATCH] Add interactive Rain Mode to Hero section for coziiness

---
 src/components/Hero.astro | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 2f7f36a..7dfcb95 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -1,6 +1,13 @@
 ---
 // src/components/Hero.astro
 ---
+<style>
+    @keyframes fall {
+        to {
+            transform: translateY(100vh);
+        }
+    }
+</style>
 <!-- Hero Section -->
 <header class="relative min-h-screen flex items-center justify-center overflow-hidden">
     <div class="absolute inset-0 z-0">
@@ -8,19 +15,37 @@
         <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">
+    <div class="relative max-w-5xl mx-auto px-6 text-center z-10 pt-20" x-data="{ rain: false, drops: [] }" x-init="for(let i=0; i<50; i++) drops.push({ left: Math.random()*100, speed: 0.5+Math.random()*0.5, delay: Math.random()*2 })">
+        
+        <!-- Rain Container -->
+        <div x-show="rain" x-cloak class="absolute inset-0 pointer-events-none z-0 overflow-hidden">
+            <template x-for="drop in drops">
+                <div class="absolute bg-emerald-400/20 w-0.5 h-6" 
+                     :style="`left: ${drop.left}%; top: -20px; animation: fall ${drop.speed}s linear infinite; animation-delay: ${drop.delay}s`">
+                </div>
+            </template>
+        </div>
+
         <span class="text-xs font-bold tracking-[0.2em] 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-4">
             Handwerk aus dem Herzen. Natur im Einklang. // Powered by Plantlix
         </span>
         
         <!-- Live Status / Weather Widget -->
-        <div class="mb-8 text-xs font-mono text-stone-500 flex justify-center items-center gap-2">
+        <div class="mb-4 text-xs font-mono text-stone-500 flex justify-center items-center gap-2">
             <i class="fa-solid fa-cloud-sun text-emerald-400"></i>
             <span>Rheingau-Taunus: 18°C</span>
             <span class="text-stone-700">//</span>
             <span class="text-emerald-400">Aktuell perfektes Wetter für den Trockenmauerbau.</span>
         </div>
 
+        <!-- Rain Toggle 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>
+        </div>
+
         <h1 class="text-3xl sm:text-5xl lg:text-6xl font-luxury font-bold tracking-wide leading-tight mb-4">
             „Wer einen Garten anlegt,<br>findet das Glück von selbst.“
         </h1>