100 lines
4.0 KiB
HTML
100 lines
4.0 KiB
HTML
<f:layout name="FullWidth" />
|
||
|
||
<f:section name="Header" />
|
||
|
||
<f:section name="Main">
|
||
<section class="bg-white md:bg-hero-gradient md:mb-16">
|
||
<div class="container mx-auto px-6 py-12 md:py-24 bg-white md:bg-hero-inner">
|
||
<div class="md:flex md:items-center">
|
||
|
||
<!-- IMAGE HALF -->
|
||
<div class="order-2 py-16 md:order-1 md:w-1/2 relative">
|
||
<f:if condition="{data.image}">
|
||
<f:then>
|
||
<picture class="block w-full object-cover">
|
||
<!-- WEBP -->
|
||
<source
|
||
type="image/webp"
|
||
srcset="
|
||
{f:uri.image(image:data.image.0, width:'320c', fileExtension:'webp')} 320w,
|
||
{f:uri.image(image:data.image.0, width:'768c', fileExtension:'webp')} 768w,
|
||
{f:uri.image(image:data.image.0, width:'1024c', fileExtension:'webp')} 1024w"
|
||
sizes="(max-width: 768px) 80vw, 1024px" />
|
||
<!-- fallback -->
|
||
<source
|
||
srcset="
|
||
{f:uri.image(image:data.image.0, width:'320c')} 320w,
|
||
{f:uri.image(image:data.image.0, width:'768c')} 768w,
|
||
{f:uri.image(image:data.image.0, width:'1024c')} 1024w"
|
||
sizes="(max-width: 768px) 80vw, 1024px" />
|
||
<f:image
|
||
image="{data.image.0}"
|
||
treatIdAsReference="1"
|
||
fetchpriority="high"
|
||
cropVariant="default"
|
||
width="1024c"
|
||
alt="Hero Image"
|
||
loading="lazy"
|
||
class="w-full h-auto"
|
||
/>
|
||
</picture>
|
||
</f:then>
|
||
<f:else>
|
||
<p class="w-full text-center text-white py-20">
|
||
No image available
|
||
</p>
|
||
</f:else>
|
||
</f:if>
|
||
|
||
<!-- Down‑arrow, half out on the right edge -->
|
||
<div
|
||
class="absolute -translate-y-1/2 right-1/2 translate-x-1/2 md:top-2/3 md:-translate-y-1/2 md:right-[-3rem] md:translate-x-0 z-20">
|
||
<a href="#"
|
||
class="hero-down-link w-24 h-24 text-5xl bg-primary border-8 border-white text-white rounded-full inline-flex items-center justify-center hover:bg-primary-dark hover:text-white">
|
||
<span class="sr-only">Scroll down</span>
|
||
<i class="ci ci-arrow-down"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TEXT HALF -->
|
||
<div id="hero-text" class="order-1 md:order-2 md:w-1/2 flex flex-col justify-center md:pl-24">
|
||
|
||
<!-- Desktop: line + intro -->
|
||
<div class="flex items-center space-x-3">
|
||
<span class="block h-px w-10 bg-gray-600"></span>
|
||
<span class="text-sm uppercase tracking-wide font-bold">
|
||
{data.subheader}
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Heading -->
|
||
<h1>
|
||
{data.header}
|
||
</h1>
|
||
|
||
<!-- Body copy -->
|
||
<div class="text-base md:text-lg max-w-md">
|
||
<f:format.html>{data.bodytext}</f:format.html>
|
||
</div>
|
||
|
||
<!-- Social icons -->
|
||
<div class="space-x-3">
|
||
<a href="#" class="w-6 h-6 md:w-10 md:h-10 bg-primary text-white rounded-full inline-flex items-center justify-center hover:bg-primary-dark hover:text-white">
|
||
<i class="ci ci-linkedin"></i>
|
||
</a>
|
||
<a href="#" class="w-6 h-6 md:w-10 md:h-10 bg-primary text-white rounded-full inline-flex items-center justify-center hover:bg-primary-dark hover:text-white">
|
||
<i class="ci ci-instagram"></i>
|
||
</a>
|
||
<a href="#" class="w-6 h-6 md:w-10 md:h-10 bg-primary text-white rounded-full inline-flex items-center justify-center hover:bg-primary-dark hover:text-white">
|
||
<i class="ci ci-facebook"></i>
|
||
</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<f:asset.script identifier="scroll-to-next" src="{cb:assetPath()}/scroll-to-next.js" nonce="{f:security.nonce()}"/>
|
||
</f:section>
|