<div class="selector-sub mega-menu mega-menu--marketing">
<ul>
<li>
<a href="#">
<i class="atm-icon fal fa-ferris-wheel "></i>
<div>
<p class="atm-heading h6">Recreation</p>
<div class="atm-paragraph">
<p>Holiday parks, Theme parks and more.</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-book "></i>
<div>
<p class="atm-heading h6">Education</p>
<div class="atm-paragraph">
<p>From primary schools till universities.</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-bolt-lightning "></i>
<div>
<p class="atm-heading h6">Industry</p>
<div class="atm-paragraph">
<p>Farmaceutische , High Care and Voedingsmiddelenindustrie</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-circle-play "></i>
<div>
<p class="atm-heading h6">Transport and logistics</p>
<div class="atm-paragraph">
<p>Public transport and airports</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-ferris-wheel "></i>
<div>
<p class="atm-heading h6">Offices</p>
<div class="atm-paragraph">
<p>The latest industry news, updates and info.</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-book "></i>
<div>
<p class="atm-heading h6">Government</p>
<div class="atm-paragraph">
<p>The latest industry news, updates and info.</p>
</div>
</div>
</a>
</li>
</ul>
<div class="marketing-area">
<div>
<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>
<h4 class="atm-heading ">Create more value for your customers with extra services</h4>
<div class="atm-paragraph text-md">We’ve just released a 10 minute podcast about value creation for your customers.</div>
</div>
<a class="atm-button atm-button-primary button-md icon-left ">
<div class="button-content-wrapper">
<span class="button-content">
<i class="atm-icon fal fa-arrow-right "></i>
<span>Listen podcast</span>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</div>
{{#if subitems}}
<div class="selector-sub mega-menu mega-menu--{{modifier}}">
<ul>
{{#each subitems}}
<li>
<a href="{{href}}">
{{render '@icon' itemIcon}}
<div>
<p class="atm-heading h6">{{title}}</p>
<div class="atm-paragraph"><p>{{text}}</p></div>
</div>
</a>
</li>
{{/each}}
</ul>
<div class="marketing-area">
<div>
{{render '@image'}}
{{render '@heading--h4' heading merge=true}}
{{render '@paragraph' paragraph merge=true}}
</div>
{{render '@button-primary--icon-left-md' button merge=true}}
</div>
</div>
{{/if}}
{
"contact": {
"text": "Do you need advice right now? Call",
"linkText": "+31 (0)88 099 08 90",
"href": "#"
},
"subitems": [
{
"title": "Recreation",
"text": "Holiday parks, Theme parks and more.",
"active": true,
"href": "#",
"itemIcon": {
"icon": "fa-ferris-wheel",
"style": "fal"
}
},
{
"title": "Education",
"text": "From primary schools till universities.",
"active": false,
"href": "#",
"itemIcon": {
"icon": "fa-book",
"style": "fal"
}
},
{
"title": "Industry",
"text": "Farmaceutische , High Care and Voedingsmiddelenindustrie",
"active": false,
"href": "#",
"itemIcon": {
"icon": "fa-bolt-lightning",
"style": "fal"
}
},
{
"title": "Transport and logistics",
"text": "Public transport and airports",
"active": false,
"href": "#",
"itemIcon": {
"icon": "fa-circle-play",
"style": "fal"
}
},
{
"title": "Offices",
"text": "The latest industry news, updates and info.",
"active": true,
"href": "#",
"itemIcon": {
"icon": "fa-ferris-wheel",
"style": "fal"
}
},
{
"title": "Government",
"text": "The latest industry news, updates and info.",
"active": false,
"href": "#",
"itemIcon": {
"icon": "fa-book",
"style": "fal"
}
}
],
"modifier": "marketing",
"hasIcon": false,
"icon": {},
"heading": {
"text": "Create more value for your customers with extra services"
},
"paragraph": {
"text": "We’ve just released a 10 minute podcast about value creation for your customers."
},
"button": {
"text": "Listen podcast"
}
}
.mega-menu {
@apply overflow-hidden min-w-[48rem] w-max border border-primary border-opacity-10;
&.mega-menu--grid,
&.mega-menu--marketing {
> ul {
> li a .atm-paragraph p {
@apply max-w-none;
}
}
}
&.mega-menu--grid {
> ul {
@apply grid grid-cols-2 !p-8;
}
}
&.mega-menu--marketing {
@apply grid grid-cols-2 p-2;
> ul {
@apply max-h-[480px] overflow-y-scroll;
}
.marketing-area {
@apply bg-primary bg-opacity-10 text-primary p-4 justify-between flex flex-col rounded-2xl max-w-sm;
.atm-image img {
@apply aspect-video object-cover rounded-lg mb-4 w-full;
}
.atm-heading {
@apply mb-2;
}
.atm-paragraph {
@apply mb-8 text-gray-500 text-left;
}
}
}
> ul {
@apply !p-6 flex flex-col gap-6;
> li a {
@apply flex gap-6;
.atm-icon {
@apply text-h4 w-7 flex-shrink-0;
}
.atm-heading {
@apply m-0 mb-2;
}
.atm-paragraph p {
@apply text-sm max-w-[26ch] transition-colors m-0;
}
&:hover * {
@apply text-secondary-col-1;
}
}
}
footer {
@apply font-display bg-primary bg-opacity-10 text-primary px-10 py-3 text-sm text-center;
}
}
No notes defined.