109 lines
3.2 KiB
Plaintext
109 lines
3.2 KiB
Plaintext
---
|
|
import { Image } from 'astro:assets';
|
|
import { readItems } from '@directus/sdk';
|
|
|
|
import type { HeaderImage } from '@lib/directusTypes';
|
|
|
|
import GoLinkPrimaryButton from '@components/buttons/GoLinkPrimaryButton.astro';
|
|
import GoLinkSecondaryButton from '@components/buttons/GoLinkSecondaryButton.astro';
|
|
import directus from '@lib/directus';
|
|
import { getDirectusImageURL } from '@/scripts/url';
|
|
|
|
interface Props {
|
|
title: string;
|
|
subTitle?: string;
|
|
primaryBtn?: string;
|
|
primaryBtnURL?: string;
|
|
secondaryBtn?: string;
|
|
secondaryBtnURL?: string;
|
|
}
|
|
|
|
const { title, subTitle, primaryBtn, primaryBtnURL, secondaryBtn, secondaryBtnURL } = Astro.props;
|
|
|
|
const imagesData = ((await directus.request(
|
|
readItems('header_images', {
|
|
fields: ['*'],
|
|
})
|
|
)) as unknown) as HeaderImage[];
|
|
|
|
const images = await Promise.all(imagesData.map(async (img) => ({
|
|
...img,
|
|
src: await getDirectusImageURL(img.image)
|
|
})));
|
|
---
|
|
|
|
<section class="grid md:grid-cols-2 md:items-center gap-4 md:gap-8 max-w-340 2xl:max-w-full px-4 py-14 sm:px-6 lg:px-8">
|
|
<div class="md:ml-12">
|
|
<h1 class="smooth-reveal card-text-header block lg:text-7xl">
|
|
<Fragment set:html={title} />
|
|
</h1>
|
|
{subTitle && (
|
|
<p class="smooth-reveal card-text-header-description lg:w-4/5 mt-6">
|
|
{subTitle}
|
|
</p>
|
|
)}
|
|
<div class="smooth-reveal grid sm:inline-flex mt-7 w-full gap-3">
|
|
{primaryBtn && <GoLinkPrimaryButton title={primaryBtn} url={primaryBtnURL} />}
|
|
{secondaryBtn && <GoLinkSecondaryButton title={secondaryBtn} url={secondaryBtnURL} />}
|
|
</div>
|
|
</div>
|
|
<div class="smooth-reveal-fade md:block w-full hidden md:mr-12">
|
|
<div
|
|
class="flex justify-center w-full top-12 md:ml-4 overflow-hidden no-js-fallback"
|
|
id="hero-image-container"
|
|
>
|
|
{images.map((img, index) => (
|
|
<div
|
|
class="hero-image hidden justify-center w-full h-full"
|
|
data-index={index}
|
|
>
|
|
<Image
|
|
class="h-full w-105 scale-100 object-cover object-center"
|
|
src={img.src}
|
|
alt={img.image_alt}
|
|
draggable="false"
|
|
loading="eager"
|
|
format="webp"
|
|
widths={[840]}
|
|
inferSize={true}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<style>
|
|
.no-js-fallback .hero-image:first-child {
|
|
display: flex !important;
|
|
}
|
|
</style>
|
|
<script is:inline>
|
|
document.getElementById('hero-image-container')?.classList.remove('no-js-fallback');
|
|
</script>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
function initHeroImage() {
|
|
const container = document.getElementById('hero-image-container');
|
|
if (container) {
|
|
const images = container.querySelectorAll('.hero-image');
|
|
images.forEach(img => {
|
|
img.classList.remove('flex');
|
|
img.classList.add('hidden');
|
|
});
|
|
if (images.length > 0) {
|
|
const randomIndex = Math.floor(Math.random() * images.length);
|
|
images[randomIndex].classList.remove('hidden');
|
|
images[randomIndex].classList.add('flex');
|
|
}
|
|
}
|
|
}
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initHeroImage);
|
|
} else {
|
|
initHeroImage();
|
|
}
|
|
if ((window as any).swup) {
|
|
(window as any).swup.hooks.on('page:view', initHeroImage);
|
|
}
|
|
</script>
|