fs/tsv08kulmbach-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hero Startseite: Editorial-Display-Variante — linksbündig, Kicker mit Akzentbalken, Titel bis 120px, Outline-Tagline, Seitenverlauf, Scroll-Cue

Browse Source 
Enthält auch User-Tweak: hero--compact auf 60vh/560px

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-06-11 23:11:11 +02:00
parent 259e209692
commit 1cb7a21759
3 changed files with 397 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/components/hero.php
View File

@@ -4,14 +4,17 @@ declare(strict_types=1);
/**
* Vollflächiger Hero mit Hintergrundbild/-video, Titel, Intro und CTAs.
* Props: $hero (array aus home.json: title, text, image, video?, ctas, align?, compact?)
* Props: $hero (array aus home.json: title, text, image, video?, ctas, align?, compact?,
* display?, kicker?, scroll_target?)
* align-Varianten: 'center' (mittig zentriert), 'bottom-left' (Default).
* compact: true → niedrigere Variante für Unterseiten-Header.
* display: true → großer Editorial-Look (Riesen-Titel, Outline-Tagline, Kicker, Scroll-Cue).
*/
$align = in_array($hero['align'] ?? '', ['center', 'bottom-left'], true) ? $hero['align'] : 'bottom-left';
$compact = !empty($hero['compact']);
$display = !empty($hero['display']);
?>
<section class="hero<?= $align === 'center' ? ' hero--center' : '' ?><?= $compact ? ' hero--compact' : '' ?>">
<section class="hero<?= $align === 'center' ? ' hero--center' : '' ?><?= $compact ? ' hero--compact' : '' ?><?= $display ? ' hero--display' : '' ?>">
<div class="hero__media" aria-hidden="true">
<?php component('img', ['image' => $hero['image'], 'sizes' => '100vw', 'eager' => true, 'class' => 'hero__img']); ?>
<?php if (!empty($hero['video'])): ?>
@@ -20,6 +23,9 @@ $compact = !empty($hero['compact']);
<?php endif; ?>
</div>
<div class="container hero__content">
<?php if (!empty($hero['kicker'])): ?>
<p class="hero__kicker"><?= e($hero['kicker']) ?></p>
<?php endif; ?>
<h1 class="hero__title"><?= e($hero['title']) ?><?php if (!empty($hero['tagline'])): ?> <span class="hero__tagline"><?= e($hero['tagline']) ?></span><?php endif; ?></h1>
<?php if (!empty($hero['text'])): ?>
<p class="hero__text"><?= e($hero['text']) ?></p>
@@ -32,4 +38,9 @@ $compact = !empty($hero['compact']);
</div>
<?php endif; ?>
</div>
<?php if ($display): ?>
<a class="hero__scroll-cue" href="#<?= e($hero['scroll_target'] ?? 'aktuelles') ?>">
<?= icon('chevron-down') ?><span class="visually-hidden">Zum Inhalt scrollen</span>
</a>
<?php endif; ?>
</section>