118 lines
2.4 KiB
Plaintext
118 lines
2.4 KiB
Plaintext
---
|
|
import { Image } from "astro:assets";
|
|
|
|
type TextPosition = "right" | "left" | "center";
|
|
|
|
interface Props {
|
|
title?: string | string[];
|
|
subtitle?: string[];
|
|
description?: string;
|
|
imageUrl?: string;
|
|
ctas?: Array<{
|
|
label: string;
|
|
href: string;
|
|
primary?: boolean;
|
|
}>;
|
|
textPosition?: TextPosition;
|
|
}
|
|
|
|
const {
|
|
title = [],
|
|
subtitle = [],
|
|
description,
|
|
imageUrl,
|
|
ctas = [],
|
|
textPosition = "right" as TextPosition
|
|
} = Astro.props;
|
|
|
|
const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/hero/*.{png,jpg,jpeg,webp,avif}', {
|
|
eager: true
|
|
});
|
|
|
|
let imageAsset: ImageMetadata | null = null;
|
|
|
|
if (imageUrl) {
|
|
const path = `/src/assets/hero/${imageUrl}`;
|
|
const mod = images[path];
|
|
if (mod) {
|
|
imageAsset = mod.default;
|
|
}
|
|
}
|
|
|
|
const isLCP = true;
|
|
---
|
|
|
|
<section class={`f-hero f-hero--${textPosition}`}>
|
|
|
|
<!-- Background Image -->
|
|
{imageAsset && (
|
|
<Image
|
|
src={imageAsset}
|
|
alt="Światłowód FUZ, szybki internet w Wyszkowie"
|
|
class="f-hero__bg"
|
|
loading="eager"
|
|
fetchpriority={isLCP ? "high" : "auto"}
|
|
decoding="async"
|
|
format="webp"
|
|
widths={[640, 960, 1280, 1350, 1920]}
|
|
sizes="100vw"
|
|
/>
|
|
)}
|
|
|
|
<!-- Overlay -->
|
|
<div class="f-hero__overlay"></div>
|
|
|
|
<!-- Container -->
|
|
<div class="f-hero__container">
|
|
|
|
<!-- Content -->
|
|
<div class="f-hero__content">
|
|
|
|
<!-- Titles -->
|
|
<div class="f-hero__titles">
|
|
{Array.isArray(title)
|
|
? title.map(line => (
|
|
<h1 class="f-hero__title">{line}</h1>
|
|
))
|
|
: <h1 class="f-hero__title">{title}</h1>
|
|
}
|
|
</div>
|
|
|
|
<!-- Subtitles -->
|
|
{subtitle && Array.isArray(subtitle) && subtitle.length > 0 && (
|
|
<div class="f-hero__subtitles">
|
|
{subtitle.map((line, i) => (
|
|
<p
|
|
class="f-hero__subtitle"
|
|
style={`--delay: ${i}`}
|
|
>
|
|
{line}
|
|
</p>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<!-- Description -->
|
|
{description && (
|
|
<p class="f-hero__description">{description}</p>
|
|
)}
|
|
|
|
<!-- CTAs -->
|
|
{ctas.length > 0 && (
|
|
<div class="f-hero__ctas">
|
|
{ctas.map((cta) => (
|
|
<a
|
|
href={cta.href}
|
|
class={cta.primary ? "btn-hero-primary" : "btn-hero-outline"}
|
|
>
|
|
{cta.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section> |