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>

site/snippets/navbar.php

@@ -1,28 +1,15 @@
-<?php
-    /*
-      Snippets are a great way to store code snippets for reuse
-      or to keep your templates clean.
-
-      This header snippet is reused in all templates.
-      It fetches information from the `site.txt` content file
-      and contains the site navigation.
-
-      More about snippets:
-      https://getkirby.com/docs/guide/templates/snippets
-    */
-?>
 <nav class="bg-sf_grau-100 shadow-lg sticky top-0 z-50">
     <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div class="flex h-24 items-center justify-between">
             <!-- Logo (Links) -->
-            <a href="https://www.schachfreunde-badsteben.de/" class="flex justify-center items-center">
+            <a href="https://www.schachfreunde-badsteben.de/">
-                <div class="relative flex justify-center items-center md:mt-20">
+                <div class="relative flex justify-center items-center md:mt-6">
                     <div class="hidden absolute inset-0 w-48 h-48 md:block">
                         <svg width="100%" height="100%" viewBox="0 0 48 48">
                             <circle cx="24" cy="24" r="24" fill="#cdcdcd"/>
                         </svg>
                     </div>
-                    <svg class="w-18 h-18 md:w-32 md:h-32 relative" viewBox="0 0 316.97 324.57" fill="none">
+                    <svg class="w-18 h-18 md:w-32 md:h-32 relative md:top-7 md:left-7" viewBox="0 0 316.97 324.57" fill="none">
                         <!-- Bestehendes SVG-Markup -->
                         <defs>
                             <style>
@@ -56,7 +43,6 @@
                         <path d="M162.91 201.98c-12.91-8.04-20.45-3.41-20.45-3.41 16.08 13.64 16.08 42.62 16.08 42.62 2.03-35.48 15.34-42.87 15.34-42.87-6.33-.24-10.96 3.66-10.96 3.66Z" class="cls-8"/>
                         <path d="M162.96 200.71s.86-7.19 6.34-9.13c5.48-1.95 5.72 2.92 3.16 3.41-2.56.49-6.09.73-9.5 5.73Z" class="cls-8"/>
                         <path fill="#0d0d0d" fill-rule="evenodd" d="M193.8 49.42c3.74-11.08 9.7-23.25 17.37-32.37-6.4.81-13.75 3.25-18.55 7.66 6.44 8.58-3.49 15.31-15.92 13.33-13.29-2.12-21.73-11.06-6.46-18.18-2.49-7.46-6.56-13.66-11.3-19.85-4.74 6.19-8.82 12.39-11.3 19.85 15.27 7.12 6.82 16.06-6.46 18.18-12.43 1.98-22.36-4.75-15.92-13.33-4.8-4.41-12.16-6.84-18.55-7.66 7.66 9.11 13.62 21.29 17.36 32.36 22.99-4.42 46.76-4.42 69.74 0Zm-8.37-13.12c-2.6.51-5.59.56-8.74.06-3.54-.56-6.74-1.61-9.24-2.98 8.4.19 14.41-4.27 5.89-10.8 2.65-4.43 6.15-7.84 10.06-11.14 2.16 4.65 3.9 9.2 4.44 14.34-8.86 1.97-7.67 6.99-2.42 10.52Zm-35.03-2.92c-2.5 1.37-5.69 2.42-9.24 2.98-3.15.5-6.14.45-8.74-.06 5.25-3.53 6.43-8.54-2.42-10.52.54-5.14 2.29-9.7 4.45-14.34 3.92 3.3 7.41 6.71 10.06 11.14-8.51 6.52-2.51 10.99 5.89 10.8Z"/>
-
                     </svg>
                 </div>
             </a>

site/templates/default.php

@@ -24,44 +24,7 @@
 <body class="font-sans antialiased bg-gray-100 text-gray-900">
 <?php snippet('navbar') ?>
 
-<div class="container mx-auto mt-8 p-4 bg-white rounded-lg shadow-lg max-w-4xl">
+<?php snippet('hero') ?>
-    <h1 class="text-4xl font-bold text-gray-800 mb-6 text-center">Willkommen auf
-        meiner Webseite!</h1>
-
-    <p class="text-lg leading-relaxed mb-4">
-        Dies ist ein Beispielinhalt für Ihre Webseite. Der Text ist in einem
-        zentralen Container eingefasst,
-        der die Breite begrenzt, um die Lesbarkeit zu verbessern und das Design
-        ansprechender zu gestalten.
-        Probieren Sie, die Größe Ihres Browserfensters zu ändern, um zu sehen,
-        wie sich der Inhalt anpasst.
-    </p>
-
-    <p class="text-lg leading-relaxed mb-4">
-        Tailwind CSS ermöglicht es uns, schnell und effizient modernes Design zu
-        erstellen,
-        ohne benutzerdefiniertes CSS schreiben zu müssen. Alle Stile werden
-        direkt in der HTML-Klasse definiert,
-        was die Entwicklung beschleunigt und die Wartung vereinfacht.
-    </p>
-
-    <h2 class="text-3xl font-semibold text-gray-700 mt-8 mb-4">Einige Vorteile
-        von Tailwind CSS:</h2>
-    <ul class="list-disc list-inside text-lg leading-relaxed mb-4 ml-4">
-        <li>Schnelle Entwicklung dank Utility-First-Ansatz</li>
-        <li>Hochgradig anpassbar</li>
-        <li>Responsives Design out-of-the-box</li>
-        <li>Geringere CSS-Dateigröße in Produktionsumgebungen (nach Purging)
-        </li>
-    </ul>
-
-    <p class="text-lg leading-relaxed">
-        Fügen Sie hier Ihren eigenen Inhalt hinzu, um Ihre Webseite individuell
-        zu gestalten.
-        Ob Texte, Bilder oder interaktive Elemente – alles passt perfekt in
-        diesen responsiven Container.
-    </p>
-</div>
 
 <?= js('assets/js/navbar.js') ?>
 </body>

src/css/input.css

@@ -1,3 +1,4 @@
+@import "tailwindcss";
 /* ubuntu-300 - latin */
 @font-face {
     font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */