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

Migrate to Astro and split components

Browse Source
This commit is contained in:
Felix Brabetz
2026-05-16 01:46:08 +02:00
parent a4b1ba7d79
commit 35fc67cd6e
19 changed files with 953 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SubpageContact.astro
+74
View File
@@ -0,0 +1,74 @@
---
// src/components/SubpageContact.astro
---
<!-- Subpage: Kontakt -->
<div x-show="currentPage === 'page-contact'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8">
<div class="max-w-6xl mx-auto space-y-12">
<button @click="currentPage = 'main'" class="text-stone-400 hover:text-white transition-colors font-semibold text-xs uppercase tracking-wider flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-stone-700">
<i class="fa-solid fa-arrow-left"></i> Zurück zur Übersicht
</button>
<div class="border-b border-stone-800 pb-6">
<span class="text-xs text-amber-500 font-mono uppercase tracking-widest block mb-2">Bauleitung & Vergabe</span>
<h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white">Projekt zünden.</h1>
<p class="text-stone-400 mt-4 max-w-2xl font-light">Unsere Kapazitäten für anspruchsvolle Außenanlagen im aktuellen Quartal sind streng limitiert. Wer zuerst kommt, baut zuerst.</p>
</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>
<label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Auftraggeber / Firma *</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>
<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>
<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.
</div>
</div>
<div class="lg:col-span-5 space-y-6">
<div class="glass p-8 rounded-2xl flex flex-col items-center text-center">
<div class="badge bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-3 py-1 rounded text-[10px] uppercase font-mono mb-6 tracking-widest">Digitale Visitenkarte</div>
<div class="p-4 bg-white rounded-xl border border-stone-800">
<img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&color=064e3b&data=https://galabau.brabros.de" alt="QR Code Gebrüder Brabetz" class="w-40 h-40">
</div>
<p class="text-xs text-stone-500 font-mono mt-6 leading-relaxed">
<strong>Direkt-Scan fürs Smartphone:</strong> Kamera draufhalten, Link öffnen und Kontakt speichern.
</p>
</div>
<div class="glass p-8 rounded-2xl font-mono text-xs text-stone-400 space-y-4">
<div class="text-amber-500 font-bold uppercase border-b border-stone-800 pb-2 tracking-widest">Die Zentrale</div>
<p><i class="fa-solid fa-phone text-amber-500 mr-2"></i> 06124 / 4654</p>
<p><i class="fa-solid fa-envelope text-amber-500 mr-2"></i> info@gebrueder-brabetz.de</p>
<p><i class="fa-solid fa-user-group text-emerald-500 mr-2"></i> Caspar, Jakob & Felix Brabetz</p>
</div>
</div>
</div>
</div>
</div>