<section class="org-grid-block">
<div class="vebego-container">
<h1 class="atm-heading ">De voordelen van onze dagelijkse schoonmaak</h1>
<ul class="org-grid-block-list">
<li class="org-grid-block-list-item">
<i class="atm-icon far fa-circle-arrow-right "></i>
<div>
<div class="atm-heading h5">Advies op maat</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>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Lees de klantcase</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</a>
</div>
</li>
<li class="org-grid-block-list-item">
<i class="atm-icon far fa-circle-arrow-right "></i>
<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>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Lees de klantcase</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</a>
</div>
</li>
<li class="org-grid-block-list-item">
<i class="atm-icon far fa-circle-arrow-right "></i>
<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>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Lees de klantcase</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</a>
</div>
</li>
<li class="org-grid-block-list-item">
<i class="atm-icon far fa-circle-arrow-right "></i>
<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>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Lees de klantcase</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</a>
</div>
</li>
<li class="org-grid-block-list-item">
<i class="atm-icon far fa-circle-arrow-right "></i>
<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>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Lees de klantcase</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</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--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>
<div class="swiper-slide--content">
<div class="atm-heading h3">Advies op maat</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>
</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--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>
<div class="swiper-slide--content">
<div class="atm-heading h3">Advies op maat</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>
</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--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>
<div class="swiper-slide--content">
<div class="atm-heading h3">Advies op maat</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>
</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--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>
<div class="swiper-slide--content">
<div class="atm-heading h3">Advies op maat</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>
</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--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>
<div class="swiper-slide--content">
<div class="atm-heading h3">Advies op maat</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>
</li>
</ul>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<section class="org-grid-block">
<div class="vebego-container">
{{render '@heading' heading merge=true}}
<ul class="org-grid-block-list">
{{#each items}}
<li class="org-grid-block-list-item">
{{render '@icon' icon merge=true }}
<div>
{{render '@heading' heading merge=true }}
{{render '@paragraph' paragraph merge=true}}
{{render '@button-secondary'}}
</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--image">
{{render '@image'}}
</div>
<div class="swiper-slide--content">
{{render '@heading' modalHeading merge=true }}
{{render '@paragraph' modalParagraph merge=true}}
</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": [
{
"icon": {
"icon": "fa-circle-arrow-right"
},
"close": {
"icon": {
"icon": "fa-xmark",
"style": "fa-light",
"size": "fa-md"
}
},
"heading": {
"tag": "div",
"modifier": "h5",
"text": "Advies op maat"
},
"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": "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-grid-block {
@apply relative;
.vebego-container > .atm-heading {
@apply text-secondary-col-1;
}
.org-grid-block-list {
@apply grid sm:grid-cols-2 lg:grid-cols-3 gap-8;
.org-grid-block-list-item {
@apply p-4 border-solid border-[1px] border-gray-200 rounded-xl bg-white cursor-pointer;
> .atm-icon {
@apply mb-4;
}
.atm-heading {
word-break: break-word;
}
.atm-paragraph p {
@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;
.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 gridSliders = document.querySelectorAll('.org-grid-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, {
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;
}
}
gridSliders.forEach((gridSlider) => {
const gridItems = gridSlider.querySelectorAll(
'.org-grid-block-list-item'
);
const swiperContainer = gridSlider.querySelector('.swiper-container');
gridItems.forEach((gridItem, index) => {
gridItem.addEventListener('click', (e) => {
e.preventDefault();
const targetModal = gridItem
.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.