37 lines
1.5 KiB
PHP
37 lines
1.5 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="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>
|
|
</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>
|