89 lines
5.2 KiB
HTML
89 lines
5.2 KiB
HTML
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
|
|
|
|
<f:layout name="Default" />
|
|
|
|
<f:section name="Header" />
|
|
|
|
<f:section name="Main">
|
|
<div class="card-container">
|
|
<f:if condition="{data.header}">
|
|
<h2>{data.header}</h2>
|
|
</f:if>
|
|
<f:if condition="{data.bodytext}">
|
|
<f:then>
|
|
<div class="max-w-3xl prose lg:prose-lg">
|
|
<p>{data.bodytext}</p>
|
|
</div>
|
|
</f:then>
|
|
</f:if>
|
|
|
|
<f:if condition="{data.cards}">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<f:for each="{data.cards}" as="card">
|
|
<div class="card-flip group perspective" tabindex="0">
|
|
<div class="card-flip-inner relative w-full h-64 preserve-3d group-hover:rotate-y-180 group-focus:rotate-y-180 duration-500">
|
|
<div class="card-front absolute w-full h-full backface-hidden overflow-hidden shadow-lg">
|
|
<f:if condition="{card.images}">
|
|
<f:then>
|
|
<picture class="w-full h-full object-cover transition-all duration-500">
|
|
<!-- WEBP source -->
|
|
<source
|
|
type="image/webp"
|
|
srcset="
|
|
{f:uri.image(image:card.images.0, width:'320c', cropVariant:'default', fileExtension:'webp')} 320w,
|
|
{f:uri.image(image:card.images.0, width:'768c', cropVariant:'default', fileExtension:'webp')} 768w,
|
|
{f:uri.image(image:card.images.0, width:'1024c', cropVariant:'default', fileExtension:'webp')} 1024w"
|
|
sizes="(max-width: 767px) 90vw,
|
|
{f:if(condition: '{data.imagesize} == 1', then: '(min-width: 768px) 40vw', else: '(min-width: 768px) 50vw')}" />
|
|
<!-- Fallback source -->
|
|
<source
|
|
srcset="
|
|
{f:uri.image(image:card.images.0, width:'320c', cropVariant:'default')} 320w,
|
|
{f:uri.image(image:card.images.0, width:'400c', cropVariant:'default')} 768w,
|
|
{f:uri.image(image:card.images.0, width:'538c', cropVariant:'default')} 1024w"
|
|
sizes="(max-width: 767px) 90vw,
|
|
{f:if(condition: '{data.imagesize} == 1', then: '(min-width: 768px) 40vw', else: '(min-width: 768px) 50vw')}" />
|
|
<f:image
|
|
image="{card.images.0}"
|
|
treatIdAsReference="1"
|
|
cropVariant="default"
|
|
width="538c"
|
|
alt="{card.images.0.alternative}"
|
|
class="w-full h-full object-cover"
|
|
/>
|
|
</picture>
|
|
</f:then>
|
|
<f:else>
|
|
<div class="w-full h-full bg-gray-300 flex items-center justify-center">
|
|
<span class="text-gray-500">No Image</span>
|
|
</div>
|
|
</f:else>
|
|
</f:if>
|
|
<div class="absolute inset-0 bg-white bg-opacity-80 flex flex-col items-center justify-center">
|
|
<div class="w-full">
|
|
<h3 class="text-black text-xl font-bold text-center px-4">{card.header}</h3>
|
|
</div>
|
|
<div class="w-full text-center">
|
|
<div class="w-6 h-6 bg-primary text-white rounded-full inline-flex items-center justify-center">
|
|
<i class="ci ci-arrow-up-right"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-back absolute w-full h-full backface-hidden rotate-y-180 bg-light-grey border border-dark-grey p-6">
|
|
<h4 class="text-center">{card.header}</h4>
|
|
<div class="text-sm">
|
|
<f:format.html>{card.bodytext}</f:format.html>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</f:for>
|
|
</div>
|
|
</f:if>
|
|
</div>
|
|
</f:section>
|
|
|
|
</html>
|