<section class="org-case-block">
<div class="vebego-container">
<h1 class="atm-heading ">De voordelen van onze dagelijkse schoonmaak</h1>
<ul class="org-case-block-list">
<li class="org-case-block-list-item">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
<div class="list-item">
<div>
<div class="atm-heading h5">Innenraumreinigung Stuttgart</div>
<div class="atm-paragraph text-md">Mercedes Benz, Stuttgart</div>
</div>
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</li>
<li class="org-case-block-list-item">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
<div class="list-item">
<div>
<div class="atm-heading h5">Gedreven professionals</div>
<div class="atm-paragraph text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed.</div>
</div>
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</li>
<li class="org-case-block-list-item">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
<div class="list-item">
<div>
<div class="atm-heading h5">Positieve bijdrage</div>
<div class="atm-paragraph text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed.</div>
</div>
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</li>
<li class="org-case-block-list-item">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
<div class="list-item">
<div>
<div class="atm-heading h5">Positieve bijdrage</div>
<div class="atm-paragraph text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed.</div>
</div>
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</li>
<li class="org-case-block-list-item">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
<div class="list-item">
<div>
<div class="atm-heading h5">Positieve bijdrage</div>
<div class="atm-paragraph text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed.</div>
</div>
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</li>
</ul>
</div>
<div data-modal class="modal hidden">
<div class="swiper-navigation">
<div class="swiper-prev"><a class="atm-button atm-button-primary button-md icon-only button-icon-only ">
<div class="button-content-wrapper">
<span class="button-content">
<i class="atm-icon fa-light fa-arrow-left fa-md fa-fw"></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
<div class="swiper-next"><a class="atm-button atm-button-primary button-md icon-only button-icon-only ">
<div class="button-content-wrapper">
<span class="button-content">
<i class="atm-icon fa-light fa-arrow-right fa-md fa-fw"></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</div>
<div class="modal-container">
<div class="swiper-container swiper-grid">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<div class="modal-close" data-close-modal><a class="atm-button atm-button-primary button-md icon-only button-icon-only ">
<div class="button-content-wrapper">
<span class="button-content">
<i class="atm-icon fa-light fa-xmark fa-md fa-fw"></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
<div class="swiper-slide--content">
<div class="atm-heading h3">Innenraumreinigung Stuttgart</div>
<div class="atm-heading h5">Mercedes Benz, Stuttgart</div>
<div class="atm-paragraph text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non neque mi. Quisque scelerisque vehicula elementum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non neque mi. Quisque scelerisque vehicula elementum. </div>
</div>
<div class="swiper-slide--image">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
</div>
</li>
<li class="swiper-slide">
<div class="modal-close" data-close-modal><a class="atm-button atm-button-primary button-md icon-only button-icon-only ">
<div class="button-content-wrapper">
<span class="button-content">
<i class="atm-icon fa-light fa-xmark fa-md fa-fw"></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
<div class="swiper-slide--content">
<div class="atm-heading h3">Advies op maat</div>
<h1 class="atm-heading ">The quick brown fox jumps over the lazy dog</h1>
<div class="atm-paragraph text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non neque mi. Quisque scelerisque vehicula elementum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non neque mi. Quisque scelerisque vehicula elementum. </div>
</div>
<div class="swiper-slide--image">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
</div>
</li>
<li class="swiper-slide">
<div class="modal-close" data-close-modal><a class="atm-button atm-button-primary button-md icon-only button-icon-only ">
<div class="button-content-wrapper">
<span class="button-content">
<i class="atm-icon fa-light fa-xmark fa-md fa-fw"></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
<div class="swiper-slide--content">
<div class="atm-heading h3">Advies op maat</div>
<h1 class="atm-heading ">The quick brown fox jumps over the lazy dog</h1>
<div class="atm-paragraph text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non neque mi. Quisque scelerisque vehicula elementum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non neque mi. Quisque scelerisque vehicula elementum. </div>
</div>
<div class="swiper-slide--image">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
</div>
</li>
<li class="swiper-slide">
<div class="modal-close" data-close-modal><a class="atm-button atm-button-primary button-md icon-only button-icon-only ">
<div class="button-content-wrapper">
<span class="button-content">
<i class="atm-icon fa-light fa-xmark fa-md fa-fw"></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
<div class="swiper-slide--content">
<div class="atm-heading h3">Advies op maat</div>
<h1 class="atm-heading ">The quick brown fox jumps over the lazy dog</h1>
<div class="atm-paragraph text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non neque mi. Quisque scelerisque vehicula elementum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non neque mi. Quisque scelerisque vehicula elementum. </div>
</div>
<div class="swiper-slide--image">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
</div>
</li>
<li class="swiper-slide">
<div class="modal-close" data-close-modal><a class="atm-button atm-button-primary button-md icon-only button-icon-only ">
<div class="button-content-wrapper">
<span class="button-content">
<i class="atm-icon fa-light fa-xmark fa-md fa-fw"></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
<div class="swiper-slide--content">
<div class="atm-heading h3">Advies op maat</div>
<h1 class="atm-heading ">The quick brown fox jumps over the lazy dog</h1>
<div class="atm-paragraph text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non neque mi. Quisque scelerisque vehicula elementum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non neque mi. Quisque scelerisque vehicula elementum. </div>
</div>
<div class="swiper-slide--image">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
</div>
</li>
</ul>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<section class="org-case-block">
<div class="vebego-container">
{{render '@heading' heading merge=true}}
<ul class="org-case-block-list">
{{#each items}}
<li class="org-case-block-list-item">
{{render '@image' }}
<div class="list-item">
<div>
{{render '@heading' heading merge=true }}
{{render '@paragraph' paragraph merge=true}}
</div>
{{render '@button-primary'}}
</div>
</li>
{{/each}}
</ul>
</div>
<div data-modal class="modal hidden">
<div class="swiper-navigation">
<div class="swiper-prev">{{render "@button-primary--icon-only-md" prev merge=true}}</div>
<div class="swiper-next">{{render "@button-primary--icon-only-md" next merge=true}}</div>
</div>
<div class="modal-container">
<div class="swiper-container swiper-grid">
<ul class="swiper-wrapper">
{{#each items}}
<li class="swiper-slide">
<div class="modal-close" data-close-modal>{{render "@button-primary--icon-only-md" close merge=true}}</div>
<div class="swiper-slide--content">
{{render '@heading' modalHeading merge=true }}
{{render '@heading' modalSubHeading merge=true }}
{{render '@paragraph' modalParagraph merge=true}}
</div>
<div class="swiper-slide--image">
{{render '@image'}}
</div>
</li>
{{/each}}
</ul>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
{
"heading": {
"text": "De voordelen van onze dagelijkse schoonmaak",
"tag": "h1"
},
"next": {
"icon": {
"icon": "fa-arrow-right",
"style": "fa-light",
"size": "fa-md"
}
},
"prev": {
"icon": {
"icon": "fa-arrow-left",
"style": "fa-light",
"size": "fa-md"
}
},
"items": [
{
"close": {
"icon": {
"icon": "fa-xmark",
"style": "fa-light",
"size": "fa-md"
}
},
"heading": {
"tag": "div",
"modifier": "h5",
"text": "Innenraumreinigung Stuttgart"
},
"paragraph": {
"text": "Mercedes Benz, Stuttgart"
},
"modalHeading": {
"tag": "div",
"modifier": "h3",
"text": "Innenraumreinigung Stuttgart"
},
"modalSubHeading": {
"tag": "div",
"modifier": "h5",
"text": "Mercedes Benz, Stuttgart"
},
"modalParagraph": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non neque mi. Quisque scelerisque vehicula elementum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non neque mi. Quisque scelerisque vehicula elementum. "
}
},
{
"icon": {
"icon": "fa-circle-arrow-right"
},
"close": {
"icon": {
"icon": "fa-xmark",
"style": "fa-light",
"size": "fa-md"
}
},
"heading": {
"tag": "div",
"modifier": "h5",
"text": "Gedreven professionals"
},
"paragraph": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed."
},
"modalHeading": {
"tag": "div",
"modifier": "h3",
"text": "Advies op maat"
},
"modalParagraph": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non neque mi. Quisque scelerisque vehicula elementum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non neque mi. Quisque scelerisque vehicula elementum. "
}
},
{
"icon": {
"icon": "fa-circle-arrow-right"
},
"close": {
"icon": {
"icon": "fa-xmark",
"style": "fa-light",
"size": "fa-md"
}
},
"heading": {
"tag": "div",
"modifier": "h5",
"text": "Positieve bijdrage"
},
"paragraph": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed."
},
"modalHeading": {
"tag": "div",
"modifier": "h3",
"text": "Advies op maat"
},
"modalParagraph": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non neque mi. Quisque scelerisque vehicula elementum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non neque mi. Quisque scelerisque vehicula elementum. "
}
},
{
"icon": {
"icon": "fa-circle-arrow-right"
},
"close": {
"icon": {
"icon": "fa-xmark",
"style": "fa-light",
"size": "fa-md"
}
},
"heading": {
"tag": "div",
"modifier": "h5",
"text": "Positieve bijdrage"
},
"paragraph": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed."
},
"modalHeading": {
"tag": "div",
"modifier": "h3",
"text": "Advies op maat"
},
"modalParagraph": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non neque mi. Quisque scelerisque vehicula elementum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non neque mi. Quisque scelerisque vehicula elementum. "
}
},
{
"icon": {
"icon": "fa-circle-arrow-right"
},
"close": {
"icon": {
"icon": "fa-xmark",
"style": "fa-light",
"size": "fa-md"
}
},
"heading": {
"tag": "div",
"modifier": "h5",
"text": "Positieve bijdrage"
},
"paragraph": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed."
},
"modalHeading": {
"tag": "div",
"modifier": "h3",
"text": "Advies op maat"
},
"modalParagraph": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non neque mi. Quisque scelerisque vehicula elementum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non neque mi. Quisque scelerisque vehicula elementum. "
}
}
]
}
.org-case-block {
@apply relative;
.vebego-container > .atm-heading {
@apply text-secondary-col-1 mb-8;
}
.org-case-block-list {
@apply grid grid-cols-1 gap-8;
.org-case-block-list-item {
@apply bg-primary bg-opacity-10 border border-primary border-opacity-20 rounded-xl overflow-hidden cursor-pointer text-left;
.atm-image img {
@apply h-[380px] object-cover w-full aspect-video md:aspect-auto;
}
.list-item {
@apply grid gap-4 md:items-center justify-between p-8;
@media (min-width: 769px) {
grid-template-columns: 1fr auto;
}
.atm-heading {
@apply m-0;
word-break: break-word;
}
.atm-paragraph * {
@apply m-0;
}
}
}
}
.swiper-navigation {
@apply absolute flex justify-between w-full bottom-4 sm:bottom-8 md:bottom-16 px-4 sm:px-16 xl:px-0 lg:-translate-x-1/2 lg:left-1/2 xl:-translate-y-1/2 xl:top-1/2 h-max max-w-7xl;
.swiper-prev,
.swiper-next {
@apply cursor-auto;
}
.swiper-prev.swiper-button-disabled .atm-button,
.swiper-next.swiper-button-disabled .atm-button {
@apply bg-gray-300 cursor-not-allowed pointer-events-none transition-all;
.atm-icon {
@apply text-gray-500 transition-all;
}
}
}
.swiper-pagination {
@apply relative mb-6 mt-8 px-20 sm:px-0 sm:my-6 flex justify-center items-center gap-x-2;
.swiper-pagination-bullet {
@apply bg-accent-1/50 w-12 rounded-full transition-all opacity-100;
&.swiper-pagination-bullet-active {
@apply bg-accent-1/100 w-20 transition-all;
}
}
}
.swiper-grid {
@apply h-full;
.swiper-wrapper {
.swiper-slide {
@apply bg-white grid lg:grid-cols-2 lg:items-center rounded-b-3xl sm:rounded-3xl overflow-y-auto overflow-x-hidden;
@media (max-width: 1024px) {
grid-template-rows: auto 1fr;
}
&--content {
@apply p-4 py-8 sm:p-8 lg:p-12 lg:overflow-y-auto lg:aspect-square flex lg:items-center;
word-break: break-word;
.content__wrapper {
@apply max-h-full;
&:has(.atm-button){
.atm-button {
@apply lg:mb-12;
}
.atm-paragraph {
@apply lg:pb-0;
}
}
.atm-heading.h3 {
@apply mb-2;
}
.atm-heading.h5 {
@apply text-gray-400;
}
.atm-paragraph {
@apply lg:pb-12;
}
.atm-paragraph p {
@apply text-md leading-6;
}
}
}
&--image {
@apply w-full lg:sticky lg:top-0 h-full aspect-video lg:aspect-square row-start-1 lg:row-auto;
.atm-image {
@apply h-full;
img {
@apply h-full w-full object-cover;
@media (max-width: 1024px) {
@apply aspect-video;
}
}
}
}
}
}
}
.modal {
@apply z-50 p-0 sm:p-8 md:p-16 bg-secondary-col-1/10 outline-none overflow-hidden grid-cols-1 fixed h-[100dvh] w-screen top-0 lg:items-center z-[9999];
backdrop-filter: blur(10px);
grid-template-rows: 1fr auto;
@media (max-width: 640px) {
@apply m-0 max-w-full max-h-full h-full gap-4 pb-4;
}
.modal-container {
@apply overflow-hidden w-full max-w-xl lg:max-w-6xl mx-auto relative;
}
.modal-close {
@apply absolute top-4 right-4 z-50;
}
}
}
(function () {
'use strict';
const caseSliders = document.querySelectorAll('.org-case-block');
let swiperModal;
function checkArrows(swiper) {
if (swiper.isBeginning && swiper.isEnd) {
swiper.navigation.$prevEl.addClass('hide-prevnext');
swiper.navigation.$nextEl.addClass('hide-prevnext');
} else {
swiper.navigation.$prevEl.removeClass('hide-prevnext');
swiper.navigation.$nextEl.removeClass('hide-prevnext');
}
}
function openModal(index, targetModal, swiperContainer) {
targetModal.classList.add('grid');
targetModal.classList.remove('hidden');
document.body.style.overflow = "hidden";
if (!swiperModal) {
swiperModal = new Swiper(swiperContainer, {
a11y: true,
keyboard: {
enabled: true,
},
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 32,
navigation: {
nextEl: targetModal.querySelector('.swiper-next'),
prevEl: targetModal.querySelector('.swiper-prev'),
},
pagination: {
el: targetModal.querySelector('.swiper-pagination'),
clickable: true,
type: 'bullets',
},
on: {
init: function () {
toggleNavigation(targetModal);
},
afterInit: function () {
checkArrows(this);
},
resize: function () {
checkArrows(this);
},
},
});
}
swiperModal.slideTo(index, false);
}
function toggleNavigation(targetModal) {
if (targetModal.querySelectorAll(".swiper-slide").length <= 1) {
targetModal.querySelector('.swiper-next').style.display = 'none';
targetModal.querySelector('.swiper-prev').style.display = 'none';
} else {
targetModal.querySelector('.swiper-next').style.display = '';
targetModal.querySelector('.swiper-prev').style.display = '';
}
}
function closeModal(targetModal) {
targetModal.classList.add('hidden');
targetModal.classList.remove('grid');
document.body.style.overflow = "";
if (swiperModal) {
swiperModal.destroy(true, true);
swiperModal = null;
}
}
caseSliders.forEach((caseSlider) => {
const caseItems = caseSlider.querySelectorAll(
'.org-case-block-list-item'
);
const swiperContainer = caseSlider.querySelector('.swiper-container');
caseItems.forEach((caseItem, index) => {
caseItem.addEventListener('click', (e) => {
e.preventDefault();
const targetModal = caseItem
.closest('section')
.querySelector('[data-modal]');
openModal(index, targetModal, swiperContainer);
});
});
});
const modalCloseButtons = document.querySelectorAll('[data-close-modal]');
modalCloseButtons.forEach((button) => {
button.addEventListener('click', (e) => {
e.preventDefault();
const targetModal = button.closest('div.modal');
closeModal(targetModal);
});
});
})();
No notes defined.