Rewrite Biodiversity section to 'The Brabetz-Plantlix Connection' and summarize topics
This commit is contained in:
Felix Brabetz
@@ -1,82 +1,45 @@
|
|||||||
---
|
---
|
||||||
// src/components/Biodiversity.astro
|
// src/components/Biodiversity.astro
|
||||||
import { getEntry } from 'astro:content';
|
// Komplett neu geschrieben für die "Plantlix Connection" und Fachthemen-Zusammenfassung
|
||||||
|
|
||||||
const biotopeEntry = await getEntry('biodiversity', 'biotope');
|
|
||||||
const biotope = biotopeEntry.data;
|
|
||||||
---
|
---
|
||||||
<!-- Biodiversity & Quality Section -->
|
<section id="biodiversity" class="py-32 bg-stone-900/30">
|
||||||
<section id="biodiversity" class="py-32 bg-stone-900/50 border-y border-stone-800/50">
|
|
||||||
<div class="max-w-7xl mx-auto px-6 lg:px-8">
|
<div class="max-w-7xl mx-auto px-6 lg:px-8">
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center mb-20">
|
<div class="mb-20 text-center">
|
||||||
<div class="lg:col-span-6">
|
<span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Die Symbiose</span>
|
||||||
<div class="flex flex-wrap items-center gap-3 mb-3">
|
<h2 class="text-3xl sm:text-5xl font-luxury font-bold text-white mb-4">Die Brabetz-Plantlix Connection</h2>
|
||||||
<span class="text-xs font-bold tracking-widest text-amber-500 uppercase">Zukunftssicher & Lebendig</span>
|
<p class="text-stone-500 max-w-2xl mx-auto font-light">Wie wir traditionelles Handwerk mit modernster digitaler Pflanzenintelligenz verbinden, um wundervolle Gärten zu schaffen.</p>
|
||||||
<a href="https://plantlix.de" target="_blank" class="px-3 py-1 bg-emerald-900/50 text-emerald-400 text-[10px] font-bold uppercase rounded border border-emerald-700/50 hover:border-emerald-500 transition-colors backdrop-blur-sm">Sponsored by Plantlix.de</a>
|
|
||||||
</div>
|
|
||||||
<h2 class="text-3xl sm:text-4xl font-luxury font-bold text-white mb-6">Biodiversität trifft Premium-Qualität</h2>
|
|
||||||
<div class="w-16 h-1 bg-gradient-to-r from-emerald-500 to-amber-500 mb-6"></div>
|
|
||||||
<p class="text-stone-400 text-lg leading-relaxed font-light mb-6">
|
|
||||||
Ein Garten ist mehr als nur eine optische Kulisse. Wir schaffen lebendige Ökosysteme, die Generationen überdauern. Unser Fokus liegt auf der perfekten Symbiose aus exklusivem Design, höchster baulicher Qualität und ökologischer Verantwortung.
|
|
||||||
</p>
|
|
||||||
<div class="glass p-6 rounded-xl border border-emerald-500/30 bg-emerald-950/20 mb-6 group hover:border-emerald-500/50 transition-all">
|
|
||||||
<div class="flex items-center gap-3 mb-3">
|
|
||||||
<div class="text-amber-400 text-xl"><i class="fa-solid fa-robot"></i></div>
|
|
||||||
<h4 class="font-luxury font-bold text-white text-lg">Datengestützte Perfektion: Plantlix.de</h4>
|
|
||||||
</div>
|
|
||||||
<p class="text-stone-400 text-sm font-light leading-relaxed">
|
|
||||||
In exklusiver Kooperation mit <a href="https://plantlix.de" target="_blank" class="text-emerald-400 hover:underline font-bold">Plantlix.de</a> nutzen wir modernste, datengestützte Pflanzenanalysen. Jede Pflanzung wird digital auf Bodenbeschaffenheit, Mikroklima und Biodiversitäts-Faktor geprüft. Keine Schätzung, sondern echte botanische Präzision.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-8">
|
|
||||||
<div class="flex items-start gap-3">
|
|
||||||
<div class="text-emerald-500 mt-1"><i class="fa-solid fa-leaf"></i></div>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-bold text-white text-sm">Native Flora & Magerböden</h4>
|
|
||||||
<p class="text-stone-500 text-xs mt-1">Gezielte Abmagerung des Bodens für artenreiche Wildblumenwiesen statt Einheitsgrün.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-start gap-3">
|
|
||||||
<div class="text-emerald-500 mt-1"><i class="fa-solid fa-seedling"></i></div>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-bold text-white text-sm">Bodenbiologie nach DIN 18915</h4>
|
|
||||||
<p class="text-stone-500 text-xs mt-1">Nachhaltiger Aufbau der Bodenschichten für langlebiges Grün und optimalen Wasserhaushalt.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="lg:col-span-6">
|
|
||||||
<div class="relative rounded-2xl overflow-hidden shadow-2xl border border-white/5">
|
|
||||||
<img src="https://images.unsplash.com/photo-1466692442299-3581ffda9327?auto=format&fit=crop&w=800&q=80" alt="Biodiverser Garten" class="w-full h-full object-cover">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-t from-stone-950/50 to-transparent"></div>
|
|
||||||
<div class="absolute bottom-6 left-6 right-6 glass p-4 rounded-xl">
|
|
||||||
<p class="text-xs text-stone-300 font-light">"Wir schaffen Oasen, die nicht nur schön anzusehen sind, sondern aktiv zum Erhalt unserer Artenvielfalt beitragen."</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Projektvorschläge -->
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
||||||
<div class="border-t border-stone-800/50 pt-20">
|
<!-- Fachthema 1: Trockenmauer -->
|
||||||
<div class="text-center mb-12">
|
<div class="glass p-8 rounded-2xl border border-stone-800/50 hover:border-emerald-500/30 transition-all group">
|
||||||
<span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">{biotope.description}</span>
|
<div class="text-amber-400 text-3xl mb-6"><i class="fa-solid fa-mound"></i></div>
|
||||||
<h3 class="text-2xl sm:text-3xl font-luxury font-bold text-white">{biotope.title}</h3>
|
<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>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
<!-- Fachthema 2: Schwammstadt -->
|
||||||
{biotope.items.map((item) => (
|
<div class="glass p-8 rounded-2xl border border-stone-800/50 hover:border-emerald-500/30 transition-all group">
|
||||||
<div class="glass p-8 rounded-2xl hover:border-amber-500/20 transition-all group flex flex-col h-full">
|
<div class="text-amber-400 text-3xl mb-6"><i class="fa-solid fa-droplet"></i></div>
|
||||||
<div>
|
<h3 class="text-xl font-luxury font-bold text-white mb-4">Das Schwammstadt-Prinzip</h3>
|
||||||
<div class="text-amber-400 text-2xl mb-4"><i class={item.icon}></i></div>
|
<p class="text-stone-400 text-sm font-light leading-relaxed mb-4">
|
||||||
<h4 class="text-xl font-luxury font-bold text-white mb-3">{item.title}</h4>
|
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 class="text-stone-400 text-sm font-light leading-relaxed mb-6" set:html={item.description}></p>
|
</p>
|
||||||
|
<div class="text-xs font-semibold text-emerald-400 uppercase tracking-wider">Fokus: Klimaresistenz & Hydrologie</div>
|
||||||
</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">{item.technique}</span>
|
<!-- Connection: Plantlix -->
|
||||||
<span class="text-[10px] font-mono text-stone-500 uppercase tracking-widest">{item.location}</span>
|
<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>
|
<div class="absolute top-0 right-0 w-32 h-32 bg-emerald-500/5 blur-3xl rounded-full"></div>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user