{% set clients = clients ?? pimcore_relations("clients") %}{% embed 'app/area-brick-layout.html.twig' %} {% block content %} {% if editmode or clients|length > 0 %} <section> <div class="container py-10 md:py-20"> {% if editmode or not pimcore_input('title').isEmpty() %} <h2 class="mb-12 text-2xl text-center md:text-4xl">{{ pimcore_input('title', { label: 'Titel' }) }}</h2> {% endif %} <div class="mb-6 !-mx-5 swiper customer-content-swiper lg:!mx-auto relative"> <div class="swiper-wrapper"> {% include 'areas/testimonial-brick/partials/editmode/_no-objects-found.html.twig' %} {# Defined as EditableDialog field #} {% for client in clients %} <div class="grid grid-cols-12 lg:gap-6 swiper-slide"> <div class="col-span-12 xl:col-start-2 xl:row-start-1 xl:col-span-6"> {% if client.media.items[0] is defined and client.media.items[0] is not null %} {{ client.media.items[0].thumbnail('testimonial-large').html( { 'pictureAttributes': { 'class': 'inline-block overflow-hidden shadow-lg sm:rounded-md w-full', }, 'imgAttributes': { 'class': 'object-cover object-center w-full h-full' }, } )|raw }} {% endif %} </div> <div class="col-span-12 xl:col-span-6 xl:col-start-6 xl:row-start-1 flex items-center"> {% include 'areas/testimonial-brick/partials/editmode/_no-client-details-found.html.twig' %} <div class="relative md:mx-6 -mt-12 lg:mt-10"> <div class="block p-8 text-white bg-blue-500 md:rounded shadow-lg "> <blockquote class="mb-8 text-xl font-bold leading-8 md:text-2xl"> {% if client.story %} “{{ client.story }}” {% endif %} </blockquote> <span class="font-bold"> {% if client.job_title and client.contact %} {{ client.contact }}, {{ client.job_title }} {% elseif client.contact %} {{ client.contact }} {% endif %} </span> </div> {% if client.logo %} <span class="flex justify-center py-6"> {{ client.logo.thumbnail('testimonial-small').html({ pictureAttributes: {class: 'p-6 rounded flex justify-center cursor-pointer bg-white !w-[188px] h-[60px] swiper-slide'}, }) | raw }} </span> {% endif %} {% if document.getProperty('clientArchivePage') %} <a class="button button__secondary button__secondary--white button--no-l-padding group" href="{{ document.getProperty('clientArchivePage').url | trimUrl }}" > <span class="flex items-center justify-center w-6 h-6 ml-3 transition-all bg-white rounded-full shadow-md text-blue group-hover:bg-blue group-hover:text-white"> <svg class="h-3.5 w-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> <path fill="currentColor" fill-rule="currentColor" d="m6.406 15.656 6.963-6.731c.249-.24.389-.575.389-.925 0-.35-.14-.685-.389-.925L6.406.343A1.206 1.206 0 0 0 4.657.41l-.09.113a1.297 1.297 0 0 0 .154 1.67L10.731 8l-6.008 5.806a1.295 1.295 0 0 0-.065 1.783c.463.52 1.248.55 1.748.066Z"/> </svg> </span> {{ "Bekijk alle verhalen"|trans }} </a> {% endif %} </div> </div> </div> {% endfor %} </div> <div class="mx-6 md:mx-0 flex md:justify-end justify-between flex-row"> <div class="!w-auto flex items-center customer-swiper-pagination swiper-pagination-bullets swiper-pagination-horizontal"></div> <div class="flex md:ml-12"> <div class="customer-swiper-button-prev testimonial-swiper-pagination-button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"><path fill="#0072BB" fill-rule="evenodd" d="M15.106 8.883H3.396l3.218 3.218a.885.885 0 1 1-1.252 1.252L.707 8.695a1 1 0 0 1 0-1.414l4.655-4.656a.885.885 0 1 1 1.252 1.252L3.396 7.095h11.71a.894.894 0 0 1 0 1.788Z"/></svg> </div> <div class="customer-swiper-button-next testimonial-swiper-pagination-button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"><path fill="#0072BB" fill-rule="evenodd" d="M.894 7.095h11.71L9.386 3.878a.885.885 0 1 1 1.252-1.252l4.655 4.656a1 1 0 0 1 0 1.414l-4.655 4.656A.885.885 0 1 1 9.386 12.1l3.218-3.217H.894a.894.894 0 0 1 0-1.788Z"/></svg> </div> </div> </div> </div> </div> </section> {% endif %} {% endblock %}{% endembed %}