feat: add hero section with background image and animated chess game

site/snippets/hero.php

@@ -0,0 +1,36 @@
+<section class="relative w-full">
+    <!-- Hintergrundbild mit zweischichtigem Overlay -->
+    <div class="absolute inset-0 z-0">
+        <img src="/assets/img/hero.jpg"
+             alt="Hintergrundbild"
+             class="w-full h-full object-cover opacity-50">
+        <!-- Farbiges Overlay -->
+        <div class="absolute inset-0 bg-blue-500/40"></div>
+    </div>
+
+    <!-- Content Container -->
+    <div class="relative z-10 container mx-auto max-w-7xl px-4 py-24 md:py-32 sm:px-6 lg:px-8">
+        <!-- Zwei-Spalten-Layout -->
+        <div class="flex flex-col lg:flex-row items-center gap-8 lg:gap-16">
+            <!-- Linke Spalte - Text -->
+            <div class="w-full lg:w-1/2">
+                <div class="prose prose-invert">
+                    <h2 class="text-4xl font-bold text-sf_blau-500 mb-6">Ihr Titel</h2>
+                    <p class="text-lg text-white">
+                        Ihr Text kommt hier. Lorem ipsum dolor sit amet, consectetur
+                        adipiscing elit.
+                    </p>
+                </div>
+            </div>
+
+            <!-- Rechte Spalte - GIF -->
+            <div class="w-3/4 md:w-1/2">
+                <div class="rounded-lg overflow-hidden shadow-xl">
+                    <img src="/assets/img/Hort-Martius-2.gif"
+                         alt="Animation"
+                         class="w-full h-auto">
+                </div>
+            </div>
+        </div>
+    </div>
+</section>