Add weather widget to Hero and convert contact form to multi-step wizard
This commit is contained in:
Felix Brabetz
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user