tfeigel
89debde29c
Adds a new page for chess analysis, powered by lichess.org, and integrates it into the navigation menu. Also adds daily puzzle snippet to home page. Updates hero image to correct gif.
60 lines
3.1 KiB
PHP
60 lines
3.1 KiB
PHP
<?php
|
|
/** @var vendor\getkirby\cms\src\Cms\App $kirby */
|
|
/** @var vendor\getkirby\cms\src\Cms\Page\Cms\Site $site */
|
|
/** @var vendor\getkirby\cms\src\Cms\Page $page */
|
|
?>
|
|
<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-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. Gerne über unser Kontaktformular.</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.gif"
|
|
alt="Animation"
|
|
class="w-full h-auto">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|