26 lines
1.3 KiB
Plaintext
26 lines
1.3 KiB
Plaintext
---
|
|
import type { ImageMetadata } from 'astro';
|
|
import { getImage } from 'astro:assets';
|
|
|
|
interface Props { title: string; eyebrow?: string; bgImage?: ImageMetadata | string }
|
|
const { title, eyebrow, bgImage } = Astro.props;
|
|
const bgUrl = typeof bgImage === 'string' ? bgImage : bgImage ? (await getImage({ src: bgImage, width: 1920 })).src : null;
|
|
---
|
|
<section class:list={['phero', { 'phero--photo': bgUrl }]} style={bgUrl ? `background-image:url(${bgUrl})` : undefined}>
|
|
<div class="container" data-reveal>
|
|
{eyebrow && <p class="eyebrow">{eyebrow}</p>}
|
|
<h1>{title}</h1>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
/* Banner scuro come nel Figma: ~460px, titolo bianco maiuscolo ~44px */
|
|
.phero { background: var(--c-dark); min-height: 380px; display: flex; align-items: center; }
|
|
.phero .container { width: 100%; }
|
|
.phero h1 { text-transform: uppercase; font-weight: 500; color: #fff; font-size: clamp(2.2rem, 4vw, 2.75rem); letter-spacing: .04em; margin: 0; }
|
|
.phero--photo { position: relative; background-size: cover; background-position: center; }
|
|
.phero--photo::before { content: ''; position: absolute; inset: 0; background: rgba(46,32,24,.6); }
|
|
.phero--photo .container { position: relative; }
|
|
@media (max-width: 767px) { .phero { min-height: 240px; } }
|
|
</style>
|