Daniel/ndsolutionswebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: replace range calculators in templates with simulated contact forms
All checks were successful
Production Build & Deploy / build-and-deploy (push) Successful in 29s
Details

Browse Source
This commit is contained in:
DanielS
2026-07-18 23:58:48 +02:00
parent e22a724c57
commit a3222ec496
1 changed files with 17 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/pages/templates/[id].astro
View File

@@ -480,46 +480,34 @@ const { tpl } = Astro.props;
<div class="flex flex-col items-center justify-center py-12"> <div class="flex flex-col items-center justify-center py-12">
<div class="text-center max-w-xl mb-12"> <div class="text-center max-w-xl mb-12">
<span class={`text-xs font-mono font-bold uppercase tracking-widest ${tpl.accentText}`}>{tpl.businessType}</span> <span class={`text-xs font-mono font-bold uppercase tracking-widest ${tpl.accentText}`}>{tpl.businessType}</span>
<h1 class="text-4xl sm:text-5xl font-black uppercase tracking-tight mt-2 mb-4">Direkt kalkulieren.</h1> <h1 class="text-4xl sm:text-5xl font-black uppercase tracking-tight mt-2 mb-4">Direkt anfragen.</h1>
<p class="opacity-75 text-xs sm:text-sm">Ermitteln Sie Ihren Bedarf schnell und unverbindlich in nur wenigen Schritten.</p> <p class="opacity-75 text-xs sm:text-sm">Tragen Sie Ihre Nachricht ein. Wir melden uns unverbindlich innerhalb von 24 Stunden.</p>
</div> </div>
{/* The centralized Calculator Block (Monolith) */} {/* The centralized Contact Form Block (Monolith) */}
<div class={`w-full max-w-xl p-8 rounded-3xl ${tpl.cardClass} relative overflow-hidden shadow-2xl z-20`}> <div class={`w-full max-w-xl p-8 rounded-3xl ${tpl.cardClass} relative overflow-hidden shadow-2xl z-20`}>
{tpl.group === "Glassmorphismus" && ( {tpl.group === "Glassmorphismus" && (
<div class="absolute inset-0 bg-white/[0.01] pointer-events-none rounded-3xl"></div> <div class="absolute inset-0 bg-white/[0.01] pointer-events-none rounded-3xl"></div>
)} )}
<h3 class="text-lg font-bold mb-6 border-b border-current/10 pb-4">Bedarfs-Rechner</h3> <h3 class="text-lg font-bold mb-6 border-b border-current/10 pb-4">Kontaktformular</h3>
<div class="space-y-4"> <form class="space-y-4" onsubmit="event.preventDefault(); alert('Demo-Modus: Nachricht erfolgreich simuliert!')">
<div> <div>
<label class="block text-[10px] font-bold uppercase opacity-60 mb-2">Projekt-Fläche (ca. m²)</label> <label class="block text-[10px] font-bold uppercase opacity-60 mb-1">Ihr Name</label>
<input type="range" min="10" max="500" value="120" class="w-full h-1 bg-current/10 rounded-lg appearance-none cursor-pointer" /> <input type="text" required class="w-full bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current" />
<div class="flex justify-between text-xs font-bold mt-2 opacity-80">
<span>10 m²</span>
<span class={tpl.accentText}>120 m²</span>
<span>500 m²</span>
</div>
</div> </div>
<div class="pt-4"> <div>
<label class="block text-[10px] font-bold uppercase opacity-60 mb-2">Dienstleistung</label> <label class="block text-[10px] font-bold uppercase opacity-60 mb-1">E-Mail-Adresse</label>
<select class="w-full bg-current/5 border border-current/20 rounded p-2 text-xs focus:outline-none focus:border-current"> <input type="email" required class="w-full bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current" />
<option>Komplettmontage & Service</option>
<option>Nur Lieferung & Zuschnitt</option>
<option>Wartung & Reparatur</option>
</select>
</div> </div>
<div>
<div class="bg-current/5 p-4 rounded-xl mt-6 border border-current/10 text-center"> <label class="block text-[10px] font-bold uppercase opacity-60 mb-1">Ihre Nachricht</label>
<div class="text-[10px] uppercase font-bold opacity-60">Voraussichtliches Budget</div> <textarea rows="4" required class="w-full bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current resize-none"></textarea>
<div class="text-3xl font-black mt-1 uppercase tracking-tight">~ 2.450 €</div>
<div class="text-[9px] opacity-50 mt-1">Unverbindlicher Richtpreis inkl. MwSt.</div>
</div> </div>
<button type="submit" class={`w-full py-3 mt-4 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}>
<button class={`w-full py-3 mt-4 text-xs font-bold uppercase tracking-wider ${tpl.accentBg}`}> Anfrage senden
Ergebnis absenden & anfragen
</button> </button>
</div> </form>
</div> </div>
</div> </div>
)} )}
@@ -548,7 +536,7 @@ const { tpl } = Astro.props;
<h2 class="text-2xl sm:text-3xl font-extrabold uppercase tracking-tight">Projekt anfragen</h2> <h2 class="text-2xl sm:text-3xl font-extrabold uppercase tracking-tight">Projekt anfragen</h2>
<p class="opacity-70 text-xs mt-2">Tragen Sie Ihr Vorhaben kurz ein. Wir antworten werktags innerhalb von 24 Stunden.</p> <p class="opacity-70 text-xs mt-2">Tragen Sie Ihr Vorhaben kurz ein. Wir antworten werktags innerhalb von 24 Stunden.</p>
</div> </div>
<form class="max-w-md mx-auto space-y-4" onsubmit="event.preventDefault()"> <form class="max-w-md mx-auto space-y-4" onsubmit="event.preventDefault(); alert('Demo-Modus: Nachricht erfolgreich simuliert!')">
<div> <div>
<label class="block text-[10px] font-bold uppercase opacity-60 mb-1">Ihr Name</label> <label class="block text-[10px] font-bold uppercase opacity-60 mb-1">Ihr Name</label>
<input type="text" required class="w-full bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current" /> <input type="text" required class="w-full bg-current/5 border border-current/25 rounded p-2.5 text-xs focus:outline-none focus:border-current" />