Wire up CMS for Biodiversity section and add Impressum & Datenschutz subpages
This commit is contained in:
Felix Brabetz
@@ -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 -->
|
||||
|
||||
@@ -42,6 +42,6 @@
|
||||
|
||||
<!-- Bottom -->
|
||||
<div class="max-w-7xl mx-auto px-6 lg:px-8 mt-16 pt-8 border-t border-stone-900/50 text-center text-[10px] text-stone-700">
|
||||
<p>© 2026 Gebrüder Brabetz GmbH. Alle Rechte vorbehalten. | <a href="#" class="hover:text-stone-500">Impressum</a> | <a href="#" class="hover:text-stone-500">Datenschutz</a></p>
|
||||
<p>© 2026 Gebrüder Brabetz GmbH. Alle Rechte vorbehalten. | <button @click="currentPage = 'page-impressum'" class="hover:text-stone-500">Impressum</button> | <button @click="currentPage = 'page-datenschutz'" class="hover:text-stone-500">Datenschutz</button></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
---
|
||||
// src/components/SubpageDatenschutz.astro
|
||||
---
|
||||
<div x-show="currentPage === 'page-datenschutz'" 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-4xl 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">Rechtliches</span>
|
||||
<h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white">Datenschutz</h1>
|
||||
</div>
|
||||
|
||||
<div class="glass p-8 rounded-2xl text-stone-400 text-sm leading-relaxed space-y-6">
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-2">1. Datenschutz auf einen Blick</h3>
|
||||
<p>Wir nehmen den Schutz deiner persönlichen Daten sehr ernst. Wir behandeln deine personenbezogenen Daten vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-2">2. Datenerfassung auf unserer Website</h3>
|
||||
<p>Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten kannst du dem Impressum dieser Website entnehmen.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-2">3. Plugins und Tools</h3>
|
||||
<p>Unsere Website nutzt zur einheitlichen Darstellung von Schriftarten sogenannte Web Fonts, die von Google bereitgestellt werden. Beim Aufruf einer Seite lädt dein Browser die benötigten Web Fonts in deinen Browsercache, um Texte und Schriftarten korrekt anzuzeigen.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,39 @@
|
||||
---
|
||||
// src/components/SubpageImpressum.astro
|
||||
---
|
||||
<div x-show="currentPage === 'page-impressum'" 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-4xl 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">Rechtliches</span>
|
||||
<h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white">Impressum</h1>
|
||||
</div>
|
||||
|
||||
<div class="glass p-8 rounded-2xl text-stone-400 text-sm leading-relaxed space-y-6">
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-2">Angaben gemäß § 5 TMG:</h3>
|
||||
<p>Gebrüder Brabetz GmbH</p>
|
||||
<p>Musterstraße 123</p>
|
||||
<p>12345 Musterstadt</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-2">Vertreten durch:</h3>
|
||||
<p>Caspar Brabetz, Jakob Brabetz, Felix Brabetz</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-2">Kontakt:</h3>
|
||||
<p>Telefon: 06124 / 4654</p>
|
||||
<p>E-Mail: info@gebrueder-brabetz.de</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-white font-bold mb-2">Registereintrag:</h3>
|
||||
<p>Eintragung im Handelsregister.</p>
|
||||
<p>Registergericht: Mustergericht</p>
|
||||
<p>Registernummer: HRB 12345</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user