tfeigel
8b5d699c7c
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.
54 lines
2.9 KiB
PHP
54 lines
2.9 KiB
PHP
<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="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>
|
|
|
|
<!-- 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>
|