Merge pull request 'WEB-9: Homepage anpassen' (#7) from develop into main

Reviewed-on: https://git.feigel.it/SFBadSteben/schachfreunde-badsteben/pulls/7

content/1_home/home.txt

@@ -2,4 +2,12 @@ Title: Home
 
 ----
 
+Herobutton: Kontakt
+
+----
+
+Buttonlink: /kontakt.html
+
+----
+
 Uuid: N7ZiykL2AQxWubuT

site/snippets/hero.php

@@ -14,13 +14,30 @@
         <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"><?= $page->title() ?></h2>
-                    <p class="text-lg text-white">
-                        Ihr Text kommt hier. Lorem ipsum dolor sit amet,
-                        consectetur
-                        adipiscing elit.
-                    </p>
+                <div class="flex items-center justify-center p-2">
+                    <div class="relative w-full max-w-m bg-sf_grau-50 rounded-lg shadow-lg p-6">
+                        <div class="absolute -top-20 left-1/2 transform -translate-x-1/2 px-2 py-2">
+                            <h3 style="font-family: Case;" class="text-9xl text font-light text-sf_gelb-500 whitespace-nowrap">q</h3>
+                        </div>
+
+                        <div class="flex flex-col justify-center h-full pt-16">
+                            <h1>Nette Leute spielen Schach!</h1>
+                            <h2>Seien Sie nett! Spielen Sie mit?</h2>
+                            <p>Wir sind immer auf der Suche nach neuen Mitgliedern. Bitte kontaktieren Sie unseren Vorstand für weitere Informationen.</p>
+                        </div>
+
+                        <?php if ($page->heroButton()->isNotEmpty()): ?>
+                            <div class="mt-6 flex flex-wrap gap-4 md:mt-8 pt-8">
+                                <a href="<?= $page->buttonLink() ?>" class="hover:cursor-pointer hover:text-sf_gelb-500"
+                                   target="_blank">
+                                    <button class="hover:cursor-pointer inline-flex gap-3 items-center justify-center whitespace-nowrap transition-all duration-200 ease-in-out disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none border border-border-primary text-text-primary bg-background-primary px-6 py-3"
+                                            title="Kontakt" type="button">
+                                        <?= $page->heroButton() ?>
+                                    </button>
+                                </a>
+                            </div>
+                        <?php endif ?>
+                    </div>
                 </div>
             </div>