From 65a875fbaf125cf401c7e93f982cf269d539f8e3 Mon Sep 17 00:00:00 2001
From: Felix Brabetz <lixatnz@gmail.com>
Date: Sat, 16 May 2026 04:45:57 +0200
Subject: [PATCH] Add hidden Easter Egg clicker game triggered by clicking the
 company name 5 times

---
 src/components/EasterEgg.astro | 46 ++++++++++++++++++++++++++++++++++
 src/components/Footer.astro    |  2 +-
 src/pages/index.astro          |  2 ++
 3 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 src/components/EasterEgg.astro

diff --git a/src/components/EasterEgg.astro b/src/components/EasterEgg.astro
new file mode 100644
index 0000000..e468618
--- /dev/null
+++ b/src/components/EasterEgg.astro
@@ -0,0 +1,46 @@
+---
+// src/components/EasterEgg.astro
+---
+<div x-data="{ open: false, plantClicks: 0, blooming: false }" class="fixed bottom-4 right-4 z-50">
+    <!-- Modal -->
+    <div x-show="open" x-cloak class="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50">
+        <div class="glass p-8 rounded-2xl max-w-sm w-full text-center relative border border-emerald-500/30">
+            <button @click="open = false; plantClicks = 0; blooming = false" class="absolute top-4 right-4 text-stone-500 hover:text-white">
+                <i class="fa-solid fa-times"></i>
+            </button>
+            
+            <h3 class="text-xl font-luxury font-bold text-white mb-2">Secret Garden</h3>
+            <p class="text-stone-400 text-xs mb-6">Klicke auf Gießen, um die Pflanze wachsen zu lassen!</p>
+            
+            <div class="h-48 flex items-end justify-center mb-6">
+                <!-- The Plant -->
+                <div class="relative transition-transform duration-200" :style="`transform: scale(${1 + plantClicks * 0.005})`">
+                    <div x-show="!blooming" class="text-emerald-500 text-6xl">
+                        <i class="fa-solid fa-seedling"></i>
+                    </div>
+                    <!-- When blooming -->
+                    <div x-show="blooming" class="text-6xl animate-bounce">
+                        🌸
+                    </div>
+                </div>
+            </div>
+            
+            <div class="space-y-2">
+                <p class="text-xs font-mono text-stone-500">Wachstum: <span x-text="plantClicks"></span>%</p>
+                <div class="w-full bg-stone-800 h-1.5 rounded-full overflow-hidden">
+                    <div class="bg-emerald-500 h-full transition-all" :style="`width: ${plantClicks}%`"></div>
+                </div>
+            </div>
+            
+            <button @click="plantClicks += 10; if(plantClicks >= 100) { plantClicks = 100; blooming = true; }" :disabled="blooming" class="mt-6 w-full py-3 bg-emerald-600 hover:bg-emerald-700 disabled:bg-emerald-900 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-colors">
+                <span x-show="!blooming">Gießen 💧</span>
+                <span x-show="blooming">Prächtig erblüht! 🎉</span>
+            </button>
+            
+            <p x-show="blooming" class="text-emerald-400 text-xs mt-4 font-semibold">Du hast den echten Brabetz-Grünen-Daumen!</p>
+        </div>
+    </div>
+    
+    <!-- Listen for custom event -->
+    <div x-init="window.addEventListener('open-easter-egg', () => { open = true; })"></div>
+</div>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 3d559c1..ce6a02a 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -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>&copy; 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>
+        <p x-data="{ clickCount: 0 }" class="select-none">&copy; 2026 <span @click="clickCount++; if(clickCount >= 5) { window.dispatchEvent(new CustomEvent('open-easter-egg')); clickCount = 0; }" class="cursor-pointer hover:text-stone-500">Gebrüder Brabetz GmbH</span>. 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>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 95ee2b1..419643f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -16,6 +16,7 @@ import SubpageGewerbe from '../components/SubpageGewerbe.astro';
 import SubpageContact from '../components/SubpageContact.astro';
 import SubpageImpressum from '../components/SubpageImpressum.astro';
 import SubpageDatenschutz from '../components/SubpageDatenschutz.astro';
+import EasterEgg from '../components/EasterEgg.astro';
 ---
 
 <Layout title="Gebrüder Brabetz GmbH - Premium GaLaBau">
@@ -40,6 +41,7 @@ import SubpageDatenschutz from '../components/SubpageDatenschutz.astro';
     <SubpageContact />
     <SubpageImpressum />
     <SubpageDatenschutz />
+    <EasterEgg />
 
     <!-- CHARTS INIT -->
     <script is:inline>