feat: many changes
This commit is contained in:
@@ -1,59 +1,115 @@
|
||||
<f:layout name="Default" />
|
||||
<f:layout name="FullWidth" />
|
||||
|
||||
<!-- No extra heading from the parent layout -->
|
||||
<f:section name="Header" />
|
||||
|
||||
<f:section name="Main">
|
||||
<div class="py-12 px-4 max-w-6xl mx-auto">
|
||||
<div class="flex flex-col items-start lg:grid lg:grid-cols-[1fr_auto_auto] lg:grid-rows-[auto_auto_1fr] lg:gap-x-8 lg:items-start lg:justify-items-start lg:text-left">
|
||||
<h2 class="text-3xl text-primary mb-0 leading-none lg:text-5xl lg:col-start-1 lg:row-start-1">{data.subheader}</h2>
|
||||
<h1 class="uppercase text-6xl text-primary leading-none mb-8 lg:text-7xl lg:col-start-1 lg:row-start-2">{data.header}</h1>
|
||||
<div class="text-base text-gray-700 leading-snug mb-4 max-w-[45ch] lg:text-base lg:max-w-[40ch] lg:mb-6 lg:col-start-1 lg:row-start-3">
|
||||
<f:format.html>{data.bodytext}</f:format.html>
|
||||
</div>
|
||||
<div class="flex gap-2 mb-4 lg:flex-col lg:gap-4 lg:mb-0 lg:items-start lg:self-center lg:col-start-3 lg:row-start-1 lg:row-span-3">
|
||||
<a href="https://www.instagram.com/lena.ats/" target="_blank" aria-label="Lena Schillings Instagram" class="btn inline-flex items-center justify-center text-base p-4 rounded-full transition duration-300 bg-yellow text-primary hover:bg-primary-light hover:text-white md:p-6 md:text-3xl"><i class="ci ci-instagram"></i></a>
|
||||
<a href="https://www.tiktok.com/@dieschilling" target="_blank" aria-label="Lena Schillings TikTok" class="btn inline-flex items-center justify-center text-base p-4 rounded-full transition duration-300 bg-yellow text-primary hover:bg-primary-light hover:text-white md:p-6 md:text-3xl"><i class="ci ci-tiktok"></i></a>
|
||||
</div>
|
||||
<div class="mt-4 self-end w-full lg:mt-0 lg:flex lg:items-center lg:justify-center lg:col-start-2 lg:row-start-1 lg:row-span-3">
|
||||
<f:if condition="{data.image}">
|
||||
<f:then>
|
||||
<figure>
|
||||
<!-- WEBP source -->
|
||||
<div class="md:flex">
|
||||
|
||||
<!-- LEFT: blue background + image -->
|
||||
<div class="relative bg-primary md:w-3/5 py-16 flex justify-end">
|
||||
<!-- picture wrapper for relative positioning -->
|
||||
<div class="relative w-3/4">
|
||||
<f:if condition="{data.image}">
|
||||
<f:then>
|
||||
<picture class="block w-full object-cover">
|
||||
<!-- webp / fallback sources as before… -->
|
||||
<source
|
||||
type="image/webp"
|
||||
srcset="
|
||||
{f:uri.image(image:data.image.0, width:'320c', cropVariant:'default', fileExtension:'webp')} 320w,
|
||||
{f:uri.image(image:data.image.0, width:'768c', cropVariant:'default', fileExtension:'webp')} 768w,
|
||||
{f:uri.image(image:data.image.0, width:'430c', cropVariant:'default', fileExtension:'webp')} 1024w"
|
||||
sizes="(max-width: 320px) 80vw,
|
||||
(max-width: 768px) 80px,
|
||||
430px" />
|
||||
<!-- Fallback source -->
|
||||
<source
|
||||
srcset="
|
||||
{f:uri.image(image:data.image.0, width:'320c', cropVariant:'default')} 320w,
|
||||
{f:uri.image(image:data.image.0, width:'600c', cropVariant:'default')} 600w,
|
||||
{f:uri.image(image:data.image.0, width:'430c', cropVariant:'default')} 1024w"
|
||||
sizes="(max-width: 320px) 80vw,
|
||||
(max-width: 768px) 80vw,
|
||||
430px" />
|
||||
<f:image
|
||||
image="{data.image.0}"
|
||||
treatIdAsReference="1"
|
||||
fetchpriority="high"
|
||||
cropVariant="default"
|
||||
width="430c"
|
||||
alt="Hero Image"
|
||||
loading="lazy"
|
||||
class="w-full h-auto rounded-lg" />
|
||||
</figure>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<p>No image available</p>
|
||||
</f:else>
|
||||
</f:if>
|
||||
{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, 430px" />
|
||||
<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, 430px" />
|
||||
<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">No image available</p>
|
||||
</f:else>
|
||||
</f:if>
|
||||
|
||||
<!-- arrow: half‑out on right edge -->
|
||||
<div class="absolute top-1/2 -translate-y-1/2 right-[-2rem] z-20">
|
||||
<a href="#next-section"
|
||||
class="bg-primary border-4 border-white rounded-full p-5 inline-flex items-center justify-center hover:bg-opacity-90">
|
||||
<span class="sr-only">Scroll down</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-6"
|
||||
fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT: text & socials -->
|
||||
<div class="md:w-2/5 px-6 py-12 md:py-0 md:px-16 flex flex-col justify-center">
|
||||
|
||||
<!-- Mobile: simple centered intro -->
|
||||
<div class="block md:hidden text-center space-y-2 mb-8">
|
||||
<div class="text-sm uppercase tracking-wide text-gray-600">
|
||||
Hallo, wir sind
|
||||
</div>
|
||||
<h1 class="text-3xl font-extrabold">
|
||||
Dialog Relations
|
||||
</h1>
|
||||
<p class="text-base text-gray-800">
|
||||
Sorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Nunc vulputate libero et velit interdum, ac aliquet odio mattis.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Desktop: line + intro -->
|
||||
<div class="hidden md:block space-y-4">
|
||||
<!-- horizontal line + text -->
|
||||
<div class="flex items-center space-x-3 mb-2">
|
||||
<span class="block h-px w-10 bg-gray-600"></span>
|
||||
<div class="text-sm uppercase tracking-wide text-gray-600">
|
||||
Hallo, wir sind
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-5xl font-extrabold">
|
||||
Dialog Relations
|
||||
</h1>
|
||||
<p class="text-lg text-gray-800 max-w-md">
|
||||
Sorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Nunc vulputate libero et velit interdum, ac aliquet odio mattis.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Social icons -->
|
||||
<div class="mt-8 flex justify-center md:justify-start space-x-4">
|
||||
<a href="#" class="bg-primary text-white p-3 rounded-full">
|
||||
<span class="sr-only">LinkedIn</span>
|
||||
<svg class="w-5 h-5" fill="currentColor"><!-- … --></svg>
|
||||
</a>
|
||||
<a href="#" class="bg-primary text-white p-3 rounded-full">
|
||||
<span class="sr-only">Instagram</span>
|
||||
<svg class="w-5 h-5" fill="currentColor"><!-- … --></svg>
|
||||
</a>
|
||||
<a href="#" class="bg-primary text-white p-3 rounded-full">
|
||||
<span class="sr-only">Facebook</span>
|
||||
<svg class="w-5 h-5" fill="currentColor"><!-- … --></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</f:section>
|
||||
|
||||
Reference in New Issue
Block a user