From bb75341f80cfe7f22ed818f80ca77e1544b6a976 Mon Sep 17 00:00:00 2001
From: Felix Brabetz <lixatnz@gmail.com>
Date: Sat, 16 May 2026 03:51:00 +0200
Subject: [PATCH] Add weather widget to Hero and convert contact form to
 multi-step wizard

---
 src/components/Hero.astro           |  11 ++-
 src/components/SubpageContact.astro | 108 ++++++++++++++++++++++------
 2 files changed, 97 insertions(+), 22 deletions(-)

diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index ec5470d..d39ff3e 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -9,9 +9,18 @@
     </div>
     
     <div class="relative max-w-5xl mx-auto px-6 text-center z-10 pt-20">
-        <span class="text-xs font-bold tracking-[0.4em] 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-8">
+        <span class="text-xs font-bold tracking-[0.4em] 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">
             Botanische Präzision. Maximale Gewährleistung.
         </span>
+        
+        <!-- Live Status / Weather Widget -->
+        <div class="mb-8 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>
+
         <h1 class="text-4xl sm:text-6xl lg:text-7xl font-luxury font-bold tracking-wide leading-tight mb-6">
             Gärten, die berühren.<br>Handwerk, das bleibt.
         </h1>
diff --git a/src/components/SubpageContact.astro b/src/components/SubpageContact.astro
index ba9a716..e0cedda 100644
--- a/src/components/SubpageContact.astro
+++ b/src/components/SubpageContact.astro
@@ -15,37 +15,103 @@
         </div>
 
         <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
-            <div class="lg:col-span-7 glass p-8 rounded-2xl" x-data="{ submitted: false }">
-                <form @submit.prevent="submitted = true; setTimeout(() => submitted = false, 5000)" class="space-y-6" x-show="!submitted">
-                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+            <div class="lg:col-span-7 glass p-8 rounded-2xl" x-data="{ step: 1, submitted: false, projectType: '', area: '', slope: false }">
+                <!-- Progress Indicator -->
+                <div class="flex items-center justify-between mb-8" x-show="!submitted">
+                    <div class="flex items-center gap-2">
+                        <span class="w-6 h-6 flex items-center justify-center rounded-full text-xs font-mono" :class="step >= 1 ? 'bg-emerald-600 text-white' : 'bg-stone-800 text-stone-500'">1</span>
+                        <span class="text-xs font-mono text-stone-400">Projekt</span>
+                    </div>
+                    <div class="flex-grow h-px bg-stone-800 mx-4"></div>
+                    <div class="flex items-center gap-2">
+                        <span class="w-6 h-6 flex items-center justify-center rounded-full text-xs font-mono" :class="step >= 2 ? 'bg-emerald-600 text-white' : 'bg-stone-800 text-stone-500'">2</span>
+                        <span class="text-xs font-mono text-stone-400">Details</span>
+                    </div>
+                    <div class="flex-grow h-px bg-stone-800 mx-4"></div>
+                    <div class="flex items-center gap-2">
+                        <span class="w-6 h-6 flex items-center justify-center rounded-full text-xs font-mono" :class="step >= 3 ? 'bg-emerald-600 text-white' : 'bg-stone-800 text-stone-500'">3</span>
+                        <span class="text-xs font-mono text-stone-400">Kontakt</span>
+                    </div>
+                </div>
+
+                <form @submit.prevent="submitted = true; setTimeout(() => { submitted = false; step = 1; }, 5000)" class="space-y-6" x-show="!submitted">
+                    <!-- Step 1: Project Type -->
+                    <div x-show="step === 1" class="space-y-4">
+                        <label class="block text-[10px] font-mono text-stone-500 uppercase mb-4 tracking-widest">Was möchtest du bauen? *</label>
+                        <div class="grid grid-cols-1 gap-4">
+                            <label class="glass p-4 rounded-lg border cursor-pointer hover:border-emerald-500/50 transition-colors" :class="projectType === 'mauer' ? 'border-emerald-500 bg-emerald-950/10' : 'border-stone-800'">
+                                <input type="radio" name="type" value="mauer" x-model="projectType" class="hidden">
+                                <p class="text-white text-sm font-bold">Trockenmauerwerk / Hangsicherung</p>
+                                <p class="text-stone-400 text-xs mt-1 font-light">Traditioneller Steinbau für Ewigkeit und Biodiversität.</p>
+                            </label>
+                            <label class="glass p-4 rounded-lg border cursor-pointer hover:border-emerald-500/50 transition-colors" :class="projectType === 'schwamm' ? 'border-emerald-500 bg-emerald-950/10' : 'border-stone-800'">
+                                <input type="radio" name="type" value="schwamm" x-model="projectType" class="hidden">
+                                <p class="text-white text-sm font-bold">Schwammstadt-System / Entwässerung</p>
+                                <p class="text-stone-400 text-xs mt-1 font-light">Intelligentes Regenwassermanagement und Rigolen.</p>
+                            </label>
+                            <label class="glass p-4 rounded-lg border cursor-pointer hover:border-emerald-500/50 transition-colors" :class="projectType === 'garten' ? 'border-emerald-500 bg-emerald-950/10' : 'border-stone-800'">
+                                <input type="radio" name="type" value="garten" x-model="projectType" class="hidden">
+                                <p class="text-white text-sm font-bold">Premium Privatgarten</p>
+                                <p class="text-stone-400 text-xs mt-1 font-light">Komplette Neugestaltung mit Fokus auf Natur.</p>
+                            </label>
+                        </div>
+                        <button type="button" @click="step = 2" :disabled="!projectType" class="w-full mt-6 py-3 bg-emerald-600 hover:bg-emerald-700 disabled:bg-stone-800 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all">
+                            Weiter zu den Details
+                        </button>
+                    </div>
+
+                    <!-- Step 2: Details -->
+                    <div x-show="step === 2" class="space-y-6">
                         <div>
-                            <label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Auftraggeber / Firma *</label>
+                            <label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Ungefähre Fläche (m²)</label>
+                            <input type="number" x-model="area" placeholder="z.B. 100" class="w-full bg-stone-900/50 border border-stone-800 rounded-lg px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition-colors">
+                        </div>
+                        <div>
+                            <label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Gibt es eine Hanglage?</label>
+                            <div class="flex gap-4">
+                                <label class="flex-grow glass p-3 rounded-lg border cursor-pointer text-center text-sm" :class="slope ? 'border-emerald-500 bg-emerald-950/10 text-white' : 'border-stone-800 text-stone-400'">
+                                    <input type="radio" name="slope" :value="true" x-model="slope" class="hidden">
+                                    Ja, Hanglage
+                                </label>
+                                <label class="flex-grow glass p-3 rounded-lg border cursor-pointer text-center text-sm" :class="!slope ? 'border-emerald-500 bg-emerald-950/10 text-white' : 'border-stone-800 text-stone-400'">
+                                    <input type="radio" name="slope" :value="false" x-model="slope" class="hidden">
+                                    Nein, flach
+                                </label>
+                            </div>
+                        </div>
+                        <div class="flex gap-4 mt-6">
+                            <button type="button" @click="step = 1" class="flex-grow py-3 bg-stone-800 hover:bg-stone-700 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all">
+                                Zurück
+                            </button>
+                            <button type="button" @click="step = 3" class="flex-grow py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all">
+                                Weiter zum Kontakt
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Step 3: Contact -->
+                    <div x-show="step === 3" class="space-y-6">
+                        <div>
+                            <label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Dein Name *</label>
                             <input type="text" required class="w-full bg-stone-900/50 border border-stone-800 rounded-lg px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition-colors">
                         </div>
                         <div>
-                            <label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Direkte E-Mail *</label>
+                            <label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">E-Mail Adresse *</label>
                             <input type="email" required class="w-full bg-stone-900/50 border border-stone-800 rounded-lg px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition-colors">
                         </div>
+                        <div class="flex gap-4 mt-6">
+                            <button type="button" @click="step = 2" class="flex-grow py-3 bg-stone-800 hover:bg-stone-700 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all">
+                                Zurück
+                            </button>
+                            <button type="submit" class="flex-grow py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-lg text-xs uppercase tracking-widest transition-all shadow-lg border border-emerald-700 hover:border-emerald-600">
+                                Konfiguration senden
+                            </button>
+                        </div>
                     </div>
-                    <div>
-                        <label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Gewerk / Projektart</label>
-                        <select class="w-full bg-stone-900/50 border border-stone-800 rounded-lg px-4 py-3 text-sm text-stone-300 focus:outline-none focus:border-amber-500 transition-colors">
-                            <option>Ausschreibung nach VOB (Kommunal/Gewerblich)</option>
-                            <option>Exklusive Neuanlage (Privatgarten Premium)</option>
-                            <option>Naturstein- & Ingenieurbau (Schwerlast/Statik)</option>
-                        </select>
-                    </div>
-                    <div>
-                        <label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Projektdaten (Maße, Fakten)</label>
-                        <textarea rows="4" placeholder="Zahlen, Maße und Fakten..." class="w-full bg-stone-900/50 border border-stone-800 rounded-lg px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition-colors"></textarea>
-                    </div>
-                    <button type="submit" class="w-full py-4 bg-emerald-800 hover:bg-emerald-700 text-white font-bold rounded-lg text-xs uppercase tracking-widest transition-all shadow-lg border border-emerald-700 hover:border-emerald-600">
-                        Daten zur Prüfung einreichen
-                    </button>
                 </form>
                 
                 <div x-show="submitted" x-cloak class="p-6 bg-emerald-950/50 border border-emerald-800 rounded-lg text-emerald-400 text-sm text-center font-medium font-mono" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100">
-                    ✔ Datensatz erfolgreich an die Bauleitung übermittelt. Wir prüfen Ihre Angaben.
+                    ✔ Konfiguration erfolgreich an die Bauleitung übermittelt. Wir prüfen deine Angaben.
                 </div>
             </div>