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

Add buttons to Biodiversity cards linking to dedicated story subpages

Browse Source
This commit is contained in:
Felix Brabetz
2026-05-16 05:10:02 +02:00
parent e958bfc323
commit 6947e259a0
3 changed files with 68 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Biodiversity.astro
+12 -6
View File
@@ -14,12 +14,18 @@ const { data } = entry || { data: { items: [] } };
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
{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 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 flex flex-col justify-between`}>
<div>
{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>
<button @click={item.title === 'Die Trockenmauer als Biotop' ? "currentPage = 'page-mauer'" : item.title === 'Das Schwammstadt-Prinzip' ? "currentPage = 'page-gewerbe'" : "currentPage = 'page-plantlix'"} class="mt-6 w-full text-center px-4 py-2.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">
Geschichte lesen
</button>
</div>
))}
</div>