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

Update Case Studies with stories and better images

Browse Source
This commit is contained in:
Felix Brabetz
2026-05-16 02:45:58 +02:00
parent 7d0f7412ff
commit 481e5cefe8
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Projects.astro
+8 -8
View File
@@ -14,17 +14,17 @@
<!-- Project 1 --> <!-- Project 1 -->
<div class="glass rounded-2xl overflow-hidden group hover:border-amber-500/20 transition-all duration-500 flex flex-col h-full"> <div class="glass rounded-2xl overflow-hidden group hover:border-amber-500/20 transition-all duration-500 flex flex-col h-full">
<div class="relative h-64 overflow-hidden"> <div class="relative h-64 overflow-hidden">
<img src="https://images.unsplash.com/photo-1604014237800-1c9102c219da?auto=format&fit=crop&w=800&q=80" alt="Mauerbau" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80"> <img src="https://source.unsplash.com/AnJcEbq5u8c/800x600" alt="Trockenmauer im Taunus" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80">
<div class="absolute inset-0 bg-gradient-to-t from-stone-900 to-transparent"></div> <div class="absolute inset-0 bg-gradient-to-t from-stone-900 to-transparent"></div>
<span class="absolute top-4 left-4 text-[10px] font-mono text-emerald-400 bg-stone-900/80 px-3 py-1 rounded border border-emerald-500/20 uppercase tracking-widest">Case Study I</span> <span class="absolute top-4 left-4 text-[10px] font-mono text-emerald-400 bg-stone-900/80 px-3 py-1 rounded border border-emerald-500/20 uppercase tracking-widest">Case Study I</span>
</div> </div>
<div class="p-8 flex flex-col flex-grow justify-between"> <div class="p-8 flex flex-col flex-grow justify-between">
<div> <div>
<h3 class="text-2xl font-luxury font-bold text-white mb-3">Monumentale Hangterrassierung</h3> <h3 class="text-2xl font-luxury font-bold text-white mb-3">Die schwebende Trockenmauer im Taunus</h3>
<p class="text-stone-400 text-sm leading-relaxed font-light mb-6">Bau einer zweihäuptigen Muschelkalk-Trockenmauer gegen enormen Erddruck. Statische Meisterleistung nach DIN 18300.</p> <p class="text-stone-400 text-sm leading-relaxed font-light mb-6">Ein steiler Hang drohte wegzurutschen. Statt Beton bauten wir eine 3 Meter hohe Trockenmauer aus regionalem Quarzit. Stein für Stein im zweihäuptigen Verband. Heute sonnen sich dort Eidechsen.</p>
</div> </div>
<button @click="currentPage = 'page-mauer'" class="w-full text-center px-6 py-3.5 bg-stone-800 hover:bg-emerald-800 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all border border-stone-700 hover:border-emerald-600"> <button @click="currentPage = 'page-mauer'" class="w-full text-center px-6 py-3.5 bg-stone-800 hover:bg-emerald-800 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all border border-stone-700 hover:border-emerald-600">
Technische Detailseite öffnen Geschichte lesen
</button> </button>
</div> </div>
</div> </div>
@@ -32,17 +32,17 @@
<!-- Project 2 --> <!-- Project 2 -->
<div class="glass rounded-2xl overflow-hidden group hover:border-amber-500/20 transition-all duration-500 flex flex-col h-full"> <div class="glass rounded-2xl overflow-hidden group hover:border-amber-500/20 transition-all duration-500 flex flex-col h-full">
<div class="relative h-64 overflow-hidden"> <div class="relative h-64 overflow-hidden">
<img src="https://images.unsplash.com/photo-1547005327-ef75a6961556?auto=format&fit=crop&w=800&q=80" alt="Gewerbebau" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80"> <img src="https://source.unsplash.com/R2yEwN-Yh6A/800x600" alt="Sponge City Garten" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80">
<div class="absolute inset-0 bg-gradient-to-t from-stone-900 to-transparent"></div> <div class="absolute inset-0 bg-gradient-to-t from-stone-900 to-transparent"></div>
<span class="absolute top-4 left-4 text-[10px] font-mono text-emerald-400 bg-stone-900/80 px-3 py-1 rounded border border-emerald-500/20 uppercase tracking-widest">Case Study II</span> <span class="absolute top-4 left-4 text-[10px] font-mono text-emerald-400 bg-stone-900/80 px-3 py-1 rounded border border-emerald-500/20 uppercase tracking-widest">Case Study II</span>
</div> </div>
<div class="p-8 flex flex-col flex-grow justify-between"> <div class="p-8 flex flex-col flex-grow justify-between">
<div> <div>
<h3 class="text-2xl font-luxury font-bold text-white mb-3">Großflächen-Wegebau & Rigolensystem</h3> <h3 class="text-2xl font-luxury font-bold text-white mb-3">Die blühende Schwammstadt</h3>
<p class="text-stone-400 text-sm leading-relaxed font-light mb-6">650 m² Pflasterdecke für extreme Achslasten (Ev2 ≥ 45 MPa) inklusive sensorgesteuerter Entwässerung.</p> <p class="text-stone-400 text-sm leading-relaxed font-light mb-6">In einem Neubaugebiet staute sich das Regenwasser. Wir bauten ein Rigolensystem und tarnten es als wunderschönes Sumpfbiotop mit Sumpfschwertlilien. Bei Starkregen saugt der Garten das Wasser auf wie ein Schwamm.</p>
</div> </div>
<button @click="currentPage = 'page-gewerbe'" class="w-full text-center px-6 py-3.5 bg-stone-800 hover:bg-emerald-800 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all border border-stone-700 hover:border-emerald-600"> <button @click="currentPage = 'page-gewerbe'" class="w-full text-center px-6 py-3.5 bg-stone-800 hover:bg-emerald-800 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all border border-stone-700 hover:border-emerald-600">
Technische Detailseite öffnen Geschichte lesen
</button> </button>
</div> </div>
</div> </div>