<section class="org-experience-block">
<div class="vebego-container">
<div class="experience-top">
<h2 class="atm-heading ">Ontdek onze werkgebieden</h2>
<div class="atm-paragraph text-md">Bij Vebego werken we in verschillende sectoren. Bekijk onze video om meer te weten te komen over onze werkwijze en cultuur.</div>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Bekijk alle vacatures</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</a>
</div>
<div class="experience-images">
<div class="experience-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/200/400/500" alt="" loading="lazy">
</picture>
</div>
<div class="experience-image has-video">
<div class="mol-video-player basic">
<div class="video-player-video">
<div class="atm-video">
<video playsinline autoplay muted loop>
<source src="https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<a class="atm-play " title="Bekijk film">
<i class="atm-icon fal fa-play-circle fa-md "></i>
<span class="text">
Bekijk film
</span>
</a>
</div>
</div>
</div>
<div class="experience-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/202/400/500" alt="" loading="lazy">
</picture>
</div>
</div>
<div class="experience-bottom">
<h2 class="atm-heading ">Klaar om te beginnen?</h2>
<div class="atm-paragraph text-md">Solliciteer direct op een van onze openstaande vacatures of neem contact met ons op voor meer informatie over werken bij Vebego.</div>
<a class="atm-button atm-button-secondary button-md ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Neem contact op</span>
<i class="atm-icon far fa-long-arrow-right "></i>
<span class="button-underline"></span>
</span>
</div>
</a>
</div>
</div>
</section>
<section class="org-experience-block">
<div class="vebego-container">
<div class="experience-top">
{{#if title}}
{{render '@heading' title merge=true}}
{{/if}}
{{#if description}}
{{render '@paragraph' description merge=true}}
{{/if}}
{{#if button}}
{{render '@button-secondary' button merge=true}}
{{/if}}
</div>
{{#if images}}
<div class="experience-images">
{{#each images}}
{{#if @first}}
<div class="experience-image">
{{render '@image' this merge=true}}
</div>
{{else if @last}}
<div class="experience-image">
{{render '@image' this merge=true}}
</div>
{{else}}
<div class="experience-image{{#if @root.video}} has-video{{/if}}">
{{#if @root.video}}
{{render '@video-player--basic' @root.video merge=true}}
{{else}}
{{render '@image' this merge=true}}
{{/if}}
</div>
{{/if}}
{{/each}}
</div>
{{/if}}
<div class="experience-bottom">
{{#if bottomTitle}}
{{render '@heading' bottomTitle merge=true}}
{{/if}}
{{#if bottomDescription}}
{{render '@paragraph' bottomDescription merge=true}}
{{/if}}
{{#if bottomButton}}
{{render '@button-secondary' bottomButton merge=true}}
{{/if}}
</div>
</div>
</section>
{
"title": {
"text": "Ontdek onze werkgebieden",
"tag": "h2"
},
"description": {
"text": "Bij Vebego werken we in verschillende sectoren. Bekijk onze video om meer te weten te komen over onze werkwijze en cultuur."
},
"button": {
"text": "Bekijk alle vacatures",
"url": "#"
},
"images": [
{
"src": "https://picsum.photos/id/200/400/500"
},
{
"src": "https://picsum.photos/id/201/400/500"
},
{
"src": "https://picsum.photos/id/202/400/500"
}
],
"bottomTitle": {
"text": "Klaar om te beginnen?",
"tag": "h2"
},
"bottomDescription": {
"text": "Solliciteer direct op een van onze openstaande vacatures of neem contact met ons op voor meer informatie over werken bij Vebego."
},
"bottomButton": {
"text": "Neem contact op",
"url": "#"
},
"video": {
"url": "https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4",
"autoPlay": true,
"showControls": false,
"youtube": false,
"vimeo": false
}
}
.org-experience-block {
@apply py-16 overflow-hidden;
.experience-top {
@apply mb-12;
.atm-heading {
@apply text-secondary-col-1 mb-4;
}
.atm-paragraph {
@apply mb-6 max-w-2xl;
}
}
.experience-images {
@apply relative grid grid-cols-3 gap-4 md:gap-10 mb-12;
margin-left: -50%;
margin-right: -50%;
@media (min-width: 768px) {
margin-left: -25%;
margin-right: -25%;
}
@media (min-width: 1280px) {
margin-left: 0;
margin-right: 0;
}
.experience-image {
@apply rounded-lg overflow-hidden;
aspect-ratio: 3/4;
&:nth-child(1) {
@apply mt-32;
}
&:nth-child(2) {
@apply mt-16;
}
&:nth-child(3) {
@apply mt-0;
}
&.has-video {
.mol-video-player {
@apply w-full h-full;
}
.atm-video {
@apply w-full h-full;
video {
@apply w-full h-full object-cover;
}
}
}
.atm-image {
@apply w-full h-full;
img {
@apply w-full h-full object-cover;
}
}
}
}
.experience-bottom {
@apply ml-auto max-w-2xl pr-0 md:pr-16;
.atm-heading {
@apply text-secondary-col-1 mb-4;
}
.atm-paragraph {
@apply mb-6;
}
.atm-button {
@apply inline-block;
}
}
}
No notes defined.