fberger/brabetz-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add weather widget to Hero and convert contact form to multi-step wizard

Browse Source
This commit is contained in:
Felix Brabetz
2026-05-16 03:51:00 +02:00
parent ee614af5e1
commit bb75341f80
2 changed files with 97 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Hero.astro
+10 -1
View File
@@ -9,9 +9,18 @@
</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">
<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. Botanische Präzision. Maximale Gewährleistung.
</span> </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"> <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. Gärten, die berühren.<br>Handwerk, das bleibt.
</h1> </h1>
src/components/SubpageContact.astro
+87 -21
View File
@@ -15,37 +15,103 @@
</div> </div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start"> <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 }"> <div class="lg:col-span-7 glass p-8 rounded-2xl" x-data="{ step: 1, submitted: false, projectType: '', area: '', slope: false }">
<form @submit.prevent="submitted = true; setTimeout(() => submitted = false, 5000)" class="space-y-6" x-show="!submitted"> <!-- Progress Indicator -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6"> <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> <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"> <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>
<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"> <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>
<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>
<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> </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"> <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>
</div> </div>