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

Wire up CMS for Biodiversity section and add Impressum & Datenschutz subpages

Browse Source
This commit is contained in:
Felix Brabetz
2026-05-16 04:00:10 +02:00
parent e00df2e84b
commit 092982decf
6 changed files with 99 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Biodiversity.astro
+12 -31
View File
@@ -1,6 +1,8 @@
---
// src/components/Biodiversity.astro
// Komplett neu geschrieben für die "Plantlix Connection" und Fachthemen-Zusammenfassung
import { getEntry } from 'astro:content';
const entry = await getEntry('biodiversity', 'biotope');
const { data } = entry || { data: { items: [] } };
---
<section id="biodiversity" class="py-32 bg-stone-900/30">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
@@ -11,36 +13,15 @@
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
<!-- Fachthema 1: Trockenmauer -->
<div class="glass p-8 rounded-2xl border border-stone-800/50 hover:border-emerald-500/30 transition-all group">
<div class="text-amber-400 text-3xl mb-6"><i class="fa-solid fa-mound"></i></div>
<h3 class="text-xl font-luxury font-bold text-white mb-4">Meisterhafter Trockenmauerbau</h3>
<p class="text-stone-400 text-sm font-light leading-relaxed mb-4">
Wir bauen Mauern ohne Mörtel, Stein für Stein nach DIN 18915 im zweihäuptigen Verband. Das ist nicht nur standsicher, sondern schafft wertvollen Lebensraum für Eidechsen und Wildbienen in den offenen Fugen.
</p>
<div class="text-xs font-semibold text-emerald-400 uppercase tracking-wider">Fokus: Biodiversität & Statik</div>
</div>
<!-- Fachthema 2: Schwammstadt -->
<div class="glass p-8 rounded-2xl border border-stone-800/50 hover:border-emerald-500/30 transition-all group">
<div class="text-amber-400 text-3xl mb-6"><i class="fa-solid fa-droplet"></i></div>
<h3 class="text-xl font-luxury font-bold text-white mb-4">Das Schwammstadt-Prinzip</h3>
<p class="text-stone-400 text-sm font-light leading-relaxed mb-4">
Regenwasser ist wertvoll. Über Retentionsmulden und unterirdische Rigolen speichern wir das Wasser dort, wo es gebraucht wird. Das entlastet die Kanalisation und kühlt das Mikroklima deines Gartens.
</p>
<div class="text-xs font-semibold text-emerald-400 uppercase tracking-wider">Fokus: Klimaresistenz & Hydrologie</div>
</div>
<!-- Connection: Plantlix -->
<div class="glass p-8 rounded-2xl border border-emerald-500/30 bg-emerald-950/10 hover:border-emerald-500/50 transition-all group relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-emerald-500/5 blur-3xl rounded-full"></div>
<div class="text-emerald-400 text-3xl mb-6"><i class="fa-solid fa-robot"></i></div>
<h3 class="text-xl font-luxury font-bold text-white mb-4">Die Plantlix-Connection</h3>
<p class="text-stone-300 text-sm font-light leading-relaxed mb-4">
Hier schließt sich der Kreis: Über die API von <a href="https://plantlix.de" target="_blank" class="text-emerald-400 hover:underline font-bold">Plantlix.de</a> analysieren wir den Standort (Boden, Licht, Wasser) digital. Plantlix liefert uns die perfekte pflanzensoziologische Zusammenstellung für die Magerwiese oder das Sumpfbiotop.
</p>
<div class="text-xs font-semibold text-amber-500 uppercase tracking-wider">Fokus: Datengestützte Pflanzensoziologie</div>
</div>
{data.items.map((item) => (
<div class={`glass p-8 rounded-2xl border ${item.title === 'Die Plantlix-Connection' ? 'border-emerald-500/30 bg-emerald-950/10 hover:border-emerald-500/50' : 'border-stone-800/50 hover:border-emerald-500/30'} transition-all group relative overflow-hidden`}>
{item.title === 'Die Plantlix-Connection' && <div class="absolute top-0 right-0 w-32 h-32 bg-emerald-500/5 blur-3xl rounded-full"></div>}
<div class={`${item.title === 'Die Plantlix-Connection' ? 'text-emerald-400' : 'text-amber-400'} text-3xl mb-6`}><i class={item.icon}></i></div>
<h3 class="text-xl font-luxury font-bold text-white mb-4">{item.title}</h3>
<p class={`${item.title === 'Die Plantlix-Connection' ? 'text-stone-300' : 'text-stone-400'} text-sm font-light leading-relaxed mb-4`} set:html={item.description}></p>
<div class={`text-xs font-semibold ${item.title === 'Die Plantlix-Connection' ? 'text-amber-500' : 'text-emerald-400'} uppercase tracking-wider`}>{item.technique}</div>
</div>
))}
</div>
<!-- Interactive Scanner -->