30 lines
1.4 KiB
PHP
30 lines
1.4 KiB
PHP
<?php
|
|
|
|
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?)
|
|
* align-Varianten: 'center' (mittig zentriert), 'bottom-left' (Default).
|
|
*/
|
|
$align = in_array($hero['align'] ?? '', ['center', 'bottom-left'], true) ? $hero['align'] : 'bottom-left';
|
|
?>
|
|
<section class="hero<?= $align === 'center' ? ' hero--center' : '' ?>">
|
|
<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'])): ?>
|
|
<?php /* Bild bleibt Poster/Fallback; reduced-motion blendet das Video per CSS aus */ ?>
|
|
<video class="hero__video" src="<?= e(asset($hero['video'])) ?>" autoplay muted loop playsinline preload="none" tabindex="-1"></video>
|
|
<?php endif; ?>
|
|
</div>
|
|
<div class="container hero__content">
|
|
<h1 class="hero__title"><?= e($hero['title']) ?><?php if (!empty($hero['tagline'])): ?> <span class="hero__tagline"><?= e($hero['tagline']) ?></span><?php endif; ?></h1>
|
|
<p class="hero__text"><?= e($hero['text']) ?></p>
|
|
<div class="hero__actions">
|
|
<?php foreach ($hero['ctas'] as $cta): ?>
|
|
<?php component('cta', ['cta' => $cta]); ?>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</section>
|