From 7f32dd944005057332ecaee4450b963714388f4c Mon Sep 17 00:00:00 2001
From: Felix Brabetz <lixatnz@gmail.com>
Date: Sat, 16 May 2026 04:21:45 +0200
Subject: [PATCH] Add interactive Plant Quiz component in cooperation with
 Plantlix.de

---
 src/components/PlantQuiz.astro | 46 ++++++++++++++++++++++++++++++++++
 src/pages/index.astro          |  2 ++
 2 files changed, 48 insertions(+)
 create mode 100644 src/components/PlantQuiz.astro

diff --git a/src/components/PlantQuiz.astro b/src/components/PlantQuiz.astro
new file mode 100644
index 0000000..54c5cae
--- /dev/null
+++ b/src/components/PlantQuiz.astro
@@ -0,0 +1,46 @@
+---
+// src/components/PlantQuiz.astro
+---
+<section class="py-24 bg-stone-950">
+    <div class="max-w-4xl mx-auto px-6 text-center">
+        <span class="text-xs font-bold tracking-widest text-emerald-500 uppercase block mb-3">Spielerisch lernen</span>
+        <h2 class="text-3xl sm:text-4xl font-luxury font-bold text-white mb-6">Das kleine Pflanzen-Quiz</h2>
+        <p class="text-stone-400 mb-12 font-light">Teste dein Wissen! In Kooperation mit den Lern-Algorithmen von Plantlix.de.</p>
+
+        <div class="glass p-8 rounded-2xl border border-stone-800 text-left" x-data="{ answered: false, correct: false }">
+            <h3 class="text-xl font-bold text-white mb-6">Welcher dieser Bäume ist ein extremer Tiefwurzler und übersteht Trockenheit am besten?</h3>
+            
+            <div class="space-y-4" x-show="!answered">
+                <button @click="answered = true; correct = false" class="w-full text-left p-4 bg-stone-900/50 hover:bg-stone-800 border border-stone-800 rounded-lg text-stone-300 transition-colors flex justify-between items-center">
+                    <span>A) Die Rotbuche (*Fagus sylvatica*)</span>
+                    <i class="fa-solid fa-chevron-right text-stone-600"></i>
+                </button>
+                <button @click="answered = true; correct = true" class="w-full text-left p-4 bg-stone-900/50 hover:bg-stone-800 border border-stone-800 rounded-lg text-stone-300 transition-colors flex justify-between items-center">
+                    <span>B) Die Stieleiche (*Quercus robur*)</span>
+                    <i class="fa-solid fa-chevron-right text-stone-600"></i>
+                </button>
+                <button @click="answered = true; correct = false" class="w-full text-left p-4 bg-stone-900/50 hover:bg-stone-800 border border-stone-800 rounded-lg text-stone-300 transition-colors flex justify-between items-center">
+                    <span>C) Die Fichte (*Picea abies*)</span>
+                    <i class="fa-solid fa-chevron-right text-stone-600"></i>
+                </button>
+            </div>
+
+            <!-- Result -->
+            <div x-show="answered" x-cloak class="text-center py-6" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100">
+                <div x-show="correct" class="text-emerald-400">
+                    <div class="text-4xl mb-4"><i class="fa-solid fa-circle-check"></i></div>
+                    <h4 class="text-xl font-bold mb-2">Absolut richtig!</h4>
+                    <p class="text-stone-400 text-sm font-light">Die Stieleiche bildet eine tiefgehende Pfahlwurzel und kommt so auch in trockenen Sommern an Wasser. Buchen und Fichten sind Flachwurzler und leiden schneller unter Trockenstress.</p>
+                </div>
+                <div x-show="!correct" class="text-amber-500">
+                    <div class="text-4xl mb-4"><i class="fa-solid fa-circle-xmark"></i></div>
+                    <h4 class="text-xl font-bold mb-2">Leider nicht ganz!</h4>
+                    <p class="text-stone-400 text-sm font-light">Die richtige Antwort ist **B) Die Stieleiche**. Sie bildet eine tiefe Pfahlwurzel. Rotbuchen und Fichten wurzeln eher flach und sind daher anfälliger für Trockenheit.</p>
+                </div>
+                <button @click="answered = false" class="mt-8 text-xs text-stone-500 hover:text-white underline uppercase tracking-wider transition-colors">
+                    Nochmal versuchen
+                </button>
+            </div>
+        </div>
+    </div>
+</section>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 395c6c5..95ee2b1 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -8,6 +8,7 @@ import Projects from '../components/Projects.astro';
 import Events from '../components/Events.astro';
 import Biodiversity from '../components/Biodiversity.astro';
 import PlantOfTheWeek from '../components/PlantOfTheWeek.astro';
+import PlantQuiz from '../components/PlantQuiz.astro';
 import FAQ from '../components/FAQ.astro';
 import Footer from '../components/Footer.astro';
 import SubpageMauer from '../components/SubpageMauer.astro';
@@ -28,6 +29,7 @@ import SubpageDatenschutz from '../components/SubpageDatenschutz.astro';
         <Events />
         <Biodiversity />
         <PlantOfTheWeek />
+        <PlantQuiz />
         <FAQ />
         <Footer />
     </div>