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

Setup Decap CMS and Content Collection for Biodiversity

Browse Source
This commit is contained in:
Felix Brabetz
2026-05-16 02:18:39 +02:00
parent f5bc182a06
commit afe6e2ebe9
6 changed files with 125 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Biodiversity.astro
+18 -45
View File
@@ -1,5 +1,9 @@
---
// src/components/Biodiversity.astro
import { getEntry } from 'astro:content';
const biotopeEntry = await getEntry('biodiversity', 'biotope');
const biotope = biotopeEntry.data;
---
<!-- Biodiversity & Quality Section -->
<section id="biodiversity" class="py-32 bg-stone-900/50 border-y border-stone-800/50">
@@ -46,55 +50,24 @@
<!-- Projektvorschläge -->
<div class="border-t border-stone-800/50 pt-20">
<div class="text-center mb-12">
<span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Konzepte & Techniken</span>
<h3 class="text-2xl sm:text-3xl font-luxury font-bold text-white">Biotop-Bausteine für Ihren Garten</h3>
<span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">{biotope.description}</span>
<h3 class="text-2xl sm:text-3xl font-luxury font-bold text-white">{biotope.title}</h3>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Projekt 1 -->
<div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group flex flex-col h-full">
<div>
<div class="text-amber-400 text-2xl mb-4"><i class="fa-solid fa-mound"></i></div>
<h4 class="text-xl font-luxury font-bold text-white mb-3">Friesen- & Trockenmauern</h4>
<p class="text-stone-400 text-sm font-light leading-relaxed mb-6">
Bauen ohne Mörtel: Wir setzen regionales Gestein im zweihäuptigen Verband. Die offenen Fugen bieten Eidechsen und Wildbienen Lebensraum. Ideal für Steingartenpflanzen wie <em class="text-emerald-400">Sedum album</em> (Weiße Fetthenne) und <em class="text-emerald-400">Sempervivum tectorum</em>.
</p>
{biotope.items.map((item) => (
<div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group flex flex-col h-full">
<div>
<div class="text-amber-400 text-2xl mb-4"><i class={item.icon}></i></div>
<h4 class="text-xl font-luxury font-bold text-white mb-3">{item.title}</h4>
<p class="text-stone-400 text-sm font-light leading-relaxed mb-6" set:html={item.description}></p>
</div>
<div class="flex justify-between items-center mt-auto pt-4 border-t border-stone-800/50">
<span class="text-[10px] font-mono text-emerald-500 uppercase tracking-widest">{item.technique}</span>
<span class="text-[10px] font-mono text-stone-500 uppercase tracking-widest">{item.location}</span>
</div>
</div>
<div class="flex justify-between items-center mt-auto pt-4 border-t border-stone-800/50">
<span class="text-[10px] font-mono text-emerald-500 uppercase tracking-widest">Mauerwerk</span>
<span class="text-[10px] font-mono text-stone-500 uppercase tracking-widest">Taunus-Hänge</span>
</div>
</div>
<!-- Projekt 2 -->
<div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group flex flex-col h-full">
<div>
<div class="text-amber-400 text-2xl mb-4"><i class="fa-solid fa-seedling"></i></div>
<h4 class="text-xl font-luxury font-bold text-white mb-3">Artenreiche Magerwiese</h4>
<p class="text-stone-400 text-sm font-light leading-relaxed mb-6">
Wir tauschen humosen Oberboden gegen ein Sand-Kies-Gemisch, um Nährstoffe zu reduzieren. Nur so etablieren sich seltene Wildkräuter wie <em class="text-emerald-400">Salvia pratensis</em> (Wiesensalbei) und <em class="text-emerald-400">Leucanthemum vulgare</em> dauerhaft.
</p>
</div>
<div class="flex justify-between items-center mt-auto pt-4 border-t border-stone-800/50">
<span class="text-[10px] font-mono text-emerald-500 uppercase tracking-widest">Bodenabmagerung</span>
<span class="text-[10px] font-mono text-stone-500 uppercase tracking-widest">Rheingau-Sonne</span>
</div>
</div>
<!-- Projekt 3 -->
<div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group flex flex-col h-full">
<div>
<div class="text-amber-400 text-2xl mb-4"><i class="fa-solid fa-droplet"></i></div>
<h4 class="text-xl font-luxury font-bold text-white mb-3">Sumpf- & Feuchtbiotope</h4>
<p class="text-stone-400 text-sm font-light leading-relaxed mb-6">
Kombination aus Versickerung und Lebensraum. Mit standortgerechten Sumpfpflanzen wie <em class="text-emerald-400">Iris pseudacorus</em> (Sumpf-Schwertlilie) und <em class="text-emerald-400">Caltha palustris</em> schaffen wir Filterzonen, die Libellen anziehen.
</p>
</div>
<div class="flex justify-between items-center mt-auto pt-4 border-t border-stone-800/50">
<span class="text-[10px] font-mono text-emerald-500 uppercase tracking-widest">Retentionsmulde</span>
<span class="text-[10px] font-mono text-stone-500 uppercase tracking-widest">Talauen & Senken</span>
</div>
</div>
))}
</div>
</div>
</div>