From 8b5d699c7cff5f42ee8cff9903a5e047f1c1c7fc Mon Sep 17 00:00:00 2001
From: Tobias Feigel <info@feigel.it>
Date: Sun, 6 Jul 2025 17:30:32 +0200
Subject: [PATCH] feat: enhance hero section with contact button and updated
 text content

Added a new hero button ("Kontakt") with a link to the contact page. Redesigned and enriched hero section text with a friendly message and call-to-action for recruiting new members. Incorporated conditional rendering for the button based on page content.
---
 content/1_home/home.txt |  8 ++++++++
 site/snippets/hero.php  | 31 ++++++++++++++++++++++++-------
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/content/1_home/home.txt b/content/1_home/home.txt
index f0a1245..638bb61 100644
--- a/content/1_home/home.txt
+++ b/content/1_home/home.txt
@@ -2,4 +2,12 @@ Title: Home
 
 ----
 
+Herobutton: Kontakt
+
+----
+
+Buttonlink: /kontakt.html
+
+----
+
 Uuid: N7ZiykL2AQxWubuT
\ No newline at end of file
diff --git a/site/snippets/hero.php b/site/snippets/hero.php
index 0f65d82..77e4b5c 100644
--- a/site/snippets/hero.php
+++ b/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-white 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>