<div class="js-component md:bg-grey-50 relative block md:grid grid-cols-1 auto-rows-auto md:grid-cols-1 md:grid-rows-1 overflow-hidden z-0 bg-bravo-900 ">
<div class="md:col-start-1 md:col-end-md:row-start-1 md:row-end-2 relative hero-clip md:clip-path-none">
<div class="aspect-[16/10] lg:aspect-[16/6]"></div>
<video preload="none" class="lazyload absolute object-cover w-full h-full top-0 left-0" muted autoplay loop playsinline>
<source src="https://player.vimeo.com/external/392924695.hd.mp4?s=5abd506422ab485f2e2174982ef5c07b2e309e38&profile_id=175" type="video/mp4">
</video>
</div>
<div class="md:col-start-1 md:col-end-1 md:row-start-1 md:row-end-2 md:flex md:items-center relative -mt-3/10 md:mt-0">
<div class="mx-auto max-xsm:max-w-screen-xsm max-sm:max-w-screen-sm md:container">
<div class="px-6 py-7 lg:px-12 lg:py-13 md:w-96 lg:w-[420px] xl:w-[580px] relative rounded-3xl bg-bravo-900">
<div class="relative flex flex-col justify-center z-20">
<h1 class="text-5xl xl:text-9xl font-medium font-heading leading-none text-white ">What we're about...</h1>
<div class="block prose prose-p:font-light prose-lg lg:prose:xl prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal lg:prose-xl mt-6 prose-white">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="mt-6">
<button class="btn group bg-white border-2 border-white text-bravo-800" data-micromodal-trigger="video-modal-1234">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Play full video
</div>
<div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</button>
<div class="fixed bg-black/70 z-50 -inset-0 hidden overflow-auto" id="video-modal-1234" aria-hidden="true" data-vanilla-module="Modal">
<div tabindex="-1" class="w-full h-full flex px-4 py-12 lg:px-8" data-micromodal-close>
<div class="js-model-content w-full md:max-w-screen-xl m-auto" role="dialog" aria-modal="true">
<div class="flex justify-end pb-4">
<button class="w-10 h-10 border-white group transition ease-in-out duration-300 hover:bg-white border rounded-full z-20 flex items-center justify-center" aria-label="Close modal" data-micromodal-close>
<svg class="fill-current w-5 h-5 text-white group-hover:text-bravo pointer-events-none">
<use href="/front-end/sprite.svg#icon-close"></use>
</svg>
<span class="sr-only">Close Video Modal</span>
</button>
</div>
<div class="relative aspect-[16/9] bg-black shadow-xl overflow-hidden rounded-2xl">
<iframe class="absolute top-0 left-0 w-full h-full js-iframe" data-src="https://www.youtube.com/embed/NZrX_ES93JA" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="container">
<div class="max-w-screen-md mx-auto">
<div class="prose prose-rte max-w-none">
<p style='text-align: center'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra sed odio sagittis tristique. Proin interdum nunc magna. Praesent imperdiet magna et euismod scelerisque. In sollicitudin nulla quis accumsan auctor. Morbi at ultrices orci. In eu tristique est, ut laoreet nisl. Mauris sit amet neque non sem cursus accumsan et ut erat.</p>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 container component-spacer-margin" data-vanilla-module="Accordion">
<div class="max-w-screen-md mx-auto ">
<div class="">
<div class="">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-6xl lg:text-9xl block font-heading font-medium leading-tight text-bravo-900">Lorem ipsum dolor</h2>
<div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-lg lg:prose-xl mt-4 lg:mt-6 text-bravo-900 max-w-screen-sm mx-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="js-accordion-button-list ">
<div class="border-b-2 border-grey-300">
<button id="accordion-button-1" aria-controls="accordion-panel-1" class="js-accordion-item-button group peer font-heading font-medium leading-tight flex w-full items-center justify-between py-6 px-4 transition" aria-expanded="false">
<p class="text-xl lg:text-3xl text-bravo-900 transition-colors ease-in-out text-left pr-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<div class="flex-shrink-0">
<div class="w-8 h-8">
<div class="w-8 h-8 rounded-full bg-alpha-700 text-white relative overflow-hidden">
<div class="absolute w-full h-full flex flex-col flex-nowrap top-0 left-0 -translate-y-full transition ease-in-out duration-500 group-hover:translate-y-0">
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="group-aria-expanded:rotate-180 w-[50%] h-[50%] transition ease-in-out duration-300">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</div>
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="group-aria-expanded:rotate-180 w-[50%] h-[50%] transition ease-in-out duration-300">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</button>
<div id="accordion-panel-1" aria-labelledby="accordion-button-1" class="js-accordion-item-panel hidden overflow-hidden peer-aria-expanded:block">
<div class="js-accordion-item-content p-4">
<div class="prose prose-rte max-w-none">
<p><a href=''>Lorem Ipsum is simply dummy text of the printing and typesetting industry</a>. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<ul>
<li>In eu tristique est</li>
<li>In eu tristique est</li>
<li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="border-b-2 border-grey-300">
<button id="accordion-button-2" aria-controls="accordion-panel-2" class="js-accordion-item-button group peer font-heading font-medium leading-tight flex w-full items-center justify-between py-6 px-4 transition" aria-expanded="false">
<p class="text-xl lg:text-3xl text-bravo-900 transition-colors ease-in-out text-left pr-4">Title Two</p>
<div class="flex-shrink-0">
<div class="w-8 h-8">
<div class="w-8 h-8 rounded-full bg-alpha-700 text-white relative overflow-hidden">
<div class="absolute w-full h-full flex flex-col flex-nowrap top-0 left-0 -translate-y-full transition ease-in-out duration-500 group-hover:translate-y-0">
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="group-aria-expanded:rotate-180 w-[50%] h-[50%] transition ease-in-out duration-300">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</div>
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="group-aria-expanded:rotate-180 w-[50%] h-[50%] transition ease-in-out duration-300">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</button>
<div id="accordion-panel-2" aria-labelledby="accordion-button-2" class="js-accordion-item-panel hidden overflow-hidden peer-aria-expanded:block">
<div class="js-accordion-item-content p-4">
<div class="prose prose-rte max-w-none">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam enim nunc, lobortis at tincidunt id, tempus a augue. Morbi vestibulum arcu maximus augue auctor, id finibus mauris suscipit. Praesent ante erat, molestie in facilisis in, ornare et sem. Morbi gravida faucibus nulla, id malesuada turpis placerat id. Aliquam at felis at diam volutpat dictum. Fusce sed orci sed quam pulvinar tempus vel nec dolor. Maecenas fermentum quam et arcu porttitor elementum. Sed tincidunt orci libero, in vehicula orci feugiat quis.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce maximus, quam non facilisis pellentesque, ante sapien tristique sapien, sed auctor arcu magna quis urna. Sed dictum felis sit amet quam rutrum maximus. Nulla et finibus nibh, vel finibus nisi. Integer leo metus, mattis nec lacus vitae, egestas ultricies ex. Fusce efficitur mauris metus, quis auctor turpis elementum eget. Duis mollis mattis ipsum sit amet interdum.Donec id ultricies erat. Aliquam molestie ante quis venenatis eleifend. Nullam ac feugiat nulla, quis varius risus. Morbi sollicitudin eget libero sit amet mollis. Etiam velit ex, pellentesque non mi eget, commodo mollis nunc. Fusce dolor sapien, ultricies ut enim consectetur, fringilla hendrerit nibh. Donec sodales ornare tempor. Morbi sit amet mi eu nisl porta consectetur.Phasellus vel efficitur quam, id scelerisque elit. Donec et nisl vulputate, tristique urna a, sodales metus. Curabitur scelerisque erat quis pulvinar faucibus. Proin odio nisl, rutrum in venenatis vitae, porttitor at urna. Etiam pellentesque nisl ac facilisis bibendum. Vestibulum ullamcorper velit eget convallis consectetur. Cras fringilla nibh tellus, et vestibulum sapien efficitur sit amet. Mauris pellentesque odio diam, vitae lacinia eros luctus ac. Proin mollis ac mi semper accumsan. Cras ut nibh justo.Donec vitae ex lectus. Donec id velit aliquet, ullamcorper purus a, viverra turpis. Praesent posuere tortor tellus, at accumsan nibh sodales eu. Phasellus arcu sapien, sollicitudin sit amet laoreet sit amet, tempus eget dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam facilisis, eros id facilisis consequat, nunc nibh convallis lectus, nec mattis augue sapien vel massa. Etiam placerat eu erat faucibus lacinia. </p>
</div>
</div>
</div>
</div>
<div class="border-b-2 border-grey-300">
<button id="accordion-button-3" aria-controls="accordion-panel-3" class="js-accordion-item-button group peer font-heading font-medium leading-tight flex w-full items-center justify-between py-6 px-4 transition" aria-expanded="false">
<p class="text-xl lg:text-3xl text-bravo-900 transition-colors ease-in-out text-left pr-4">Title Three</p>
<div class="flex-shrink-0">
<div class="w-8 h-8">
<div class="w-8 h-8 rounded-full bg-alpha-700 text-white relative overflow-hidden">
<div class="absolute w-full h-full flex flex-col flex-nowrap top-0 left-0 -translate-y-full transition ease-in-out duration-500 group-hover:translate-y-0">
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="group-aria-expanded:rotate-180 w-[50%] h-[50%] transition ease-in-out duration-300">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</div>
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="group-aria-expanded:rotate-180 w-[50%] h-[50%] transition ease-in-out duration-300">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</button>
<div id="accordion-panel-3" aria-labelledby="accordion-button-3" class="js-accordion-item-panel hidden overflow-hidden peer-aria-expanded:block">
<div class="js-accordion-item-content p-4">
<div class="prose prose-rte max-w-none">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative container component-spacer-margin">
<div class="w-full max-w-screen-md mx-auto ">
<div class="space-y-6 px-4">
<div class="relative">
<div class="absolute -top-4 -left-5 md:-left-7 z-0">
<svg class="fill-current w-14 h-9 text-grey-100 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-quote"></use>
</svg>
</div>
<h2 class="relative z-10 text-1xl md:text-4xl text-bravo-900 font-heading font-medium leading-tight whitespace-pre-line ">"It wouldn’t be an overstatement to say that our slow broadband speed was killing our business"</h2>
<div class="absolute -bottom-5 -right-7 z-0">
<svg class="fill-current w-14 h-9 text-grey-100 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-quote"></use>
</svg>
</div>
</div>
<div class="relative z-10">
<span class="font-bold text-xl whitespace-pre-line">Paul Ferrito</span>
<span class="text-base whitespace-pre-line"> - Drain Technology</span>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 container component-spacer-margin">
<div class="w-full max-w-screen-md mx-auto">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-6xl lg:text-9xl block font-heading font-medium leading-tight text-bravo-900">Lorem ipsum dolor</h2>
<div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-lg lg:prose-xl mt-4 lg:mt-6 text-bravo-900 max-w-screen-sm mx-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="border-grey-400 border rounded-2xl overflow-hidden">
<a href="./" class="flex items-center border-t border-grey-400 first:border-0 p-6 hover:bg-grey-100 transition ease-in-out duration-300 group">
<div class="flex-1">
<h3 class="text-lg text-bravo-900">Site name</h3>
<h2 class="text-2xl text-bravo-900">Page title or description
</div>
<div class="flex-shrink-0">
<div class="w-8 h-8">
<div class="w-8 h-8 rounded-full bg-alpha text-white relative overflow-hidden">
<div class="absolute w-full h-full flex flex-nowrap top-0 left-0 -translate-x-full transition ease-in-out duration-500 group-hover:translate-x-0">
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</div>
</div>
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
<a href="./" class="flex items-center border-t border-grey-400 first:border-0 p-6 hover:bg-grey-100 transition ease-in-out duration-300 group">
<div class="flex-1">
<h3 class="text-lg text-bravo-900">Site name</h3>
<h2 class="text-2xl text-bravo-900">Page title or description
</div>
<div class="flex-shrink-0">
<div class="w-8 h-8">
<div class="w-8 h-8 rounded-full bg-alpha text-white relative overflow-hidden">
<div class="absolute w-full h-full flex flex-nowrap top-0 left-0 -translate-x-full transition ease-in-out duration-500 group-hover:translate-x-0">
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</div>
</div>
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
<a href="./" class="flex items-center border-t border-grey-400 first:border-0 p-6 hover:bg-grey-100 transition ease-in-out duration-300 group">
<div class="flex-1">
<h3 class="text-lg text-bravo-900">Site name</h3>
<h2 class="text-2xl text-bravo-900">Page title or description
</div>
<div class="flex-shrink-0">
<div class="w-8 h-8">
<div class="w-8 h-8 rounded-full bg-alpha text-white relative overflow-hidden">
<div class="absolute w-full h-full flex flex-nowrap top-0 left-0 -translate-x-full transition ease-in-out duration-500 group-hover:translate-x-0">
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</div>
</div>
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
<a href="./" class="flex items-center border-t border-grey-400 first:border-0 p-6 hover:bg-grey-100 transition ease-in-out duration-300 group">
<div class="flex-1">
<h3 class="text-lg text-bravo-900">Site name</h3>
<h2 class="text-2xl text-bravo-900">Page title or description
</div>
<div class="flex-shrink-0">
<div class="w-8 h-8">
<div class="w-8 h-8 rounded-full bg-alpha text-white relative overflow-hidden">
<div class="absolute w-full h-full flex flex-nowrap top-0 left-0 -translate-x-full transition ease-in-out duration-500 group-hover:translate-x-0">
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</div>
</div>
<div class="w-full h-full justify-center flex items-center flex-shrink-0">
<div class="group-aria-expanded:rotate-180 w-[50%] h-[50%] -mr-0.5">
<svg class="fill-current text-white w-4 h-4 transition-colors ease-in-out">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="container ">
<div class="w-full mx-auto gap-6 flex flex-col md:flex-row justify-center">
<div class="flex-1 flex justify-center">
<div class="w-full max-w-screen-lg">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-2xl w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example11@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example11@16-10@1200w.jpg">
</picture>
<div class="mt-3 text-bravo-900">
Lorem ipsum dolor
</div>
</div>
</div>
<div class="flex-1 flex justify-center">
<div class="w-full max-w-screen-lg">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-2xl w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example11@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example11@16-10@1200w.jpg">
</picture>
<div class="mt-3 text-bravo-900">
Lorem ipsum dolor
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative component-spacer-margin">
<div class="container relative z-10">
<div class="max-w-screen-xl mx-auto">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-6xl lg:text-9xl block font-heading font-medium leading-tight text-bravo-900">Lorem ipsum dolor</h2>
<div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-lg lg:prose-xl mt-4 lg:mt-6 text-bravo-900 max-w-screen-sm mx-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="grid grid-cols-1 gap-8 md:grid-cols-3 ">
<a href="" class="group overflow-hidden rounded-3xl hover:shadow-card hover:border-grey-300 border border-transparent">
<div class="w-full h-full">
<div class="h-full bg-grey-50 flex flex-col justify-start relative px-6 py-7 xl:px-13 xl:py-14 ">
<div class="w-14 h-14 xl:w-[120px] xl:h-[120px] bg-bravo-900 relative flex rounded-full justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300 group-hover:shadow-xl" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInUp">
<div class="absolute w-2/4 h-auto">
<div class="w-full h-16">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<h2 class="font-heading font-medium leading-[1.12] text-3xl md:text-2xl lg:text-3xl xl:text-5xl text-bravo-900">Lorem ipsum dolor</h2>
</div>
<div class="text-bravo-900 pt-4 leading-snug font-light text-xl xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
</div>
</div>
</div>
</a>
<a href="" class="group overflow-hidden rounded-3xl hover:shadow-card hover:border-grey-300 border border-transparent">
<div class="w-full h-full">
<div class="h-full bg-grey-50 flex flex-col justify-start relative px-6 py-7 xl:px-13 xl:py-14 ">
<div class="w-14 h-14 xl:w-[120px] xl:h-[120px] bg-bravo-900 relative flex rounded-full justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300 group-hover:shadow-xl" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInUp">
<div class="absolute w-2/4 h-auto">
<div class="w-full h-16">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<h2 class="font-heading font-medium leading-[1.12] text-3xl md:text-2xl lg:text-3xl xl:text-5xl text-bravo-900">Lorem ipsum dolor</h2>
</div>
<div class="text-bravo-900 pt-4 leading-snug font-light text-xl xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
</div>
</div>
</div>
</a>
<a href="" class="group overflow-hidden rounded-3xl hover:shadow-card hover:border-grey-300 border border-transparent">
<div class="w-full h-full">
<div class="h-full bg-grey-50 flex flex-col justify-start relative px-6 py-7 xl:px-13 xl:py-14 ">
<div class="w-14 h-14 xl:w-[120px] xl:h-[120px] bg-bravo-900 relative flex rounded-full justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300 group-hover:shadow-xl" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInUp">
<div class="absolute w-2/4 h-auto">
<div class="w-full h-16">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<h2 class="font-heading font-medium leading-[1.12] text-3xl md:text-2xl lg:text-3xl xl:text-5xl text-bravo-900">Lorem ipsum dolor</h2>
</div>
<div class="text-bravo-900 pt-4 leading-snug font-light text-xl xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="js-component relative component-spacer-padding bg-grey-50">
<div class="absolute w-full h-full top-0 left-0 gradient-alpha opacity-50 z-0"></div>
<div class="container relative z-10">
<div class="max-w-screen-xl mx-auto">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-6xl lg:text-9xl block font-heading font-medium leading-tight text-bravo-900">Lorem ipsum dolor</h2>
<div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-lg lg:prose-xl mt-4 lg:mt-6 text-bravo-900 max-w-screen-sm mx-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="grid grid-cols-1 gap-8 md:grid-cols-3 ">
<a href="" class="group overflow-hidden rounded-3xl hover:shadow-card hover:border-grey-300 border border-transparent">
<div class="w-full h-full">
<div class="h-full bg-white flex flex-col justify-start relative px-6 py-7 xl:px-13 xl:py-14 ">
<div class="w-14 h-14 xl:w-[120px] xl:h-[120px] bg-bravo-900 relative flex rounded-full justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300 group-hover:shadow-xl" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInUp">
<div class="absolute w-2/4 h-auto">
<div class="w-full h-16">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<div class="block font-bold text-8xl md:text-6xl lg:text-8xl xl:text-10xl leading-tight text-alpha-700"><span data-vanilla-module="CountUp" data-number="10" data-suffix="" data-prefix="">0</span></div>
<h2 class="font-heading font-medium leading-[1.12] text-3xl md:text-2xl lg:text-3xl xl:text-5xl text-bravo-900">Lorem ipsum dolor</h2>
</div>
<div class="text-bravo-900 pt-4 leading-snug font-light text-xl xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
</div>
</div>
</div>
</a>
<a href="" class="group overflow-hidden rounded-3xl hover:shadow-card hover:border-grey-300 border border-transparent">
<div class="w-full h-full">
<div class="h-full bg-white flex flex-col justify-start relative px-6 py-7 xl:px-13 xl:py-14 ">
<div class="w-14 h-14 xl:w-[120px] xl:h-[120px] bg-bravo-900 relative flex rounded-full justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300 group-hover:shadow-xl" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInUp">
<div class="absolute w-2/4 h-auto">
<div class="w-full h-16">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<div class="block font-bold text-8xl md:text-6xl lg:text-8xl xl:text-10xl leading-tight text-alpha-700"><span data-vanilla-module="CountUp" data-number="100" data-suffix="%" data-prefix="">0</span></div>
<h2 class="font-heading font-medium leading-[1.12] text-3xl md:text-2xl lg:text-3xl xl:text-5xl text-bravo-900">Lorem ipsum dolor</h2>
</div>
<div class="text-bravo-900 pt-4 leading-snug font-light text-xl xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
</div>
</div>
</div>
</a>
<a href="" class="group overflow-hidden rounded-3xl hover:shadow-card hover:border-grey-300 border border-transparent">
<div class="w-full h-full">
<div class="h-full bg-white flex flex-col justify-start relative px-6 py-7 xl:px-13 xl:py-14 ">
<div class="w-14 h-14 xl:w-[120px] xl:h-[120px] bg-bravo-900 relative flex rounded-full justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300 group-hover:shadow-xl" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInUp">
<div class="absolute w-2/4 h-auto">
<div class="w-full h-16">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<div class="block font-bold text-8xl md:text-6xl lg:text-8xl xl:text-10xl leading-tight text-alpha-700"><span data-vanilla-module="CountUp" data-number="50" data-suffix="" data-prefix="">0</span></div>
<h2 class="font-heading font-medium leading-[1.12] text-3xl md:text-2xl lg:text-3xl xl:text-5xl text-bravo-900">Lorem ipsum dolor</h2>
</div>
<div class="text-bravo-900 pt-4 leading-snug font-light text-xl xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="max-w-[1532px] mx-auto ">
<div class="container">
<div class="flex flex-col lg:flex-row w-full">
<div class="flex-1 lg:w-6/12 flex flex-col justify-center align-center order-last lg:order-first lg:pr-12">
<div>
<span class="text-base mb-2 block font-heading font-semibold uppercase leading-tight text-bravo-900">Pre Heading</span>
<h2 class="text-4xl lg:text-7xl mb-6 font-heading font-medium text-bravo-900"> Ut bibendum dui leo, non consectetur nisl auctor sed.</h2>
<div class="mb-6 max-w-none prose prose-p:font-heading prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal lg:prose-xl">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum dui leo, non consectetur nisl auctor sed. Curabitur tempor, dolor ac imperdiet fermentum, ipsum neque volutpat est, ac aliquet tellus enim non tortor. In hac habitasse platea dictumst. Cras pellentesque convallis nisi, at pretium diam auctor et. Sed placerat lobortis dictum. Aliquam ut tellus porttitor, porttitor dui blandit, bibendum nunc. Vivamus gravida dolor dui.</p>
</div>
<div class="flex gap-4 flex-wrap">
<div>
<a href="./index.html" class="btn group bg-bravo-900 text-white border-2 border-bravo-900">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Find out more
</div>
<div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="order-first lg:order-last flex-1 lg:w-6/12 flex relative justify-center align-center lg:mx-0 mb-8 lg:mb-0 ">
<div class="relative w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-2xl w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-10@1200w.jpg">
</picture>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="max-w-[1532px] mx-auto component-spacer-padding bg-grey-50">
<div class="container">
<div class="flex flex-col lg:flex-row w-full">
<div class="flex-1 lg:w-6/12 flex flex-col justify-center align-center order-last lg:order-last lg:pl-12">
<div>
<span class="text-base mb-2 block font-heading font-semibold uppercase leading-tight text-bravo-900">Pre Heading</span>
<h2 class="text-4xl lg:text-7xl mb-6 font-heading font-medium text-bravo-900"> Ut bibendum dui leo, non consectetur nisl auctor sed.</h2>
<div class="mb-6 max-w-none prose prose-p:font-heading prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal lg:prose-xl">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum dui leo, non consectetur nisl auctor sed. Curabitur tempor, dolor ac imperdiet fermentum, ipsum neque volutpat est, ac aliquet tellus enim non tortor. In hac habitasse platea dictumst. Cras pellentesque convallis nisi, at pretium diam auctor et. Sed placerat lobortis dictum. Aliquam ut tellus porttitor, porttitor dui blandit, bibendum nunc. Vivamus gravida dolor dui.</p>
</div>
<div class="flex gap-4 flex-wrap">
<div>
<a href="./index.html" class="btn group bg-bravo-900 text-white border-2 border-bravo-900">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Find out more
</div>
<div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="first lg:order-first flex-1 lg:w-6/12 flex relative justify-center align-center lg:mx-0 mb-8 lg:mb-0 ">
<div class="relative w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-2xl w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example11@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example11@16-10@1200w.jpg">
</picture>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="max-w-[1532px] mx-auto ">
<div class="container">
<div class="flex flex-col lg:flex-row w-full">
<div class="flex-1 lg:w-6/12 flex flex-col justify-center align-center order-last lg:order-first lg:pr-12">
<div>
<span class="text-base mb-2 block font-heading font-semibold uppercase leading-tight text-bravo-900">Pre Heading</span>
<h2 class="text-4xl lg:text-7xl mb-6 font-heading font-medium text-bravo-900"> Ut bibendum dui leo, non consectetur nisl auctor sed.</h2>
<div class="mb-6 max-w-none prose prose-p:font-heading prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal lg:prose-xl">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum dui leo, non consectetur nisl auctor sed. Curabitur tempor, dolor ac imperdiet fermentum, ipsum neque volutpat est, ac aliquet tellus enim non tortor. In hac habitasse platea dictumst. Cras pellentesque convallis nisi, at pretium diam auctor et. Sed placerat lobortis dictum. Aliquam ut tellus porttitor, porttitor dui blandit, bibendum nunc. Vivamus gravida dolor dui.</p>
</div>
<div class="flex gap-4 flex-wrap">
<div>
<a href="./index.html" class="btn group bg-bravo-900 text-white border-2 border-bravo-900">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Find out more
</div>
<div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="order-first lg:order-last flex-1 lg:w-6/12 flex relative justify-center align-center lg:mx-0 mb-8 lg:mb-0 ">
<div class="relative w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-2xl w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-10@1200w.jpg">
</picture>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative component-spacer-margin">
<div class=" absolute top-0 left-0 w-full h-full z-0"></div>
<div class="container relative z-20">
<div class="max-w-screen-xl mx-auto">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-6xl lg:text-9xl block font-heading font-medium leading-tight text-bravo-900">Lorem ipsum dolor</h2>
<div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-lg lg:prose-xl mt-4 lg:mt-6 text-bravo-900 max-w-screen-sm mx-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="relative z-0 rounded-2xl lg:order-none lg:row-start-1 lg:col-start-8 lg:col-end-16">
<div class="relative w-full h-full rounded-2xl">
<div class="aspect-[16/10]"></div>
<video preload="none" class="lazyload absolute object-cover w-full h-full top-0 left-0 rounded-2xl" muted autoplay loop playsinline>
<source src="https://player.vimeo.com/external/392924695.hd.mp4?s=5abd506422ab485f2e2174982ef5c07b2e309e38&profile_id=175" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="max-w-[1532px] mx-auto ">
<div class="container">
<div class="flex flex-col lg:flex-row w-full">
<div class="flex-1 lg:w-6/12 flex flex-col justify-center align-center order-last lg:order-first lg:pr-12">
<div>
<span class="text-base mb-2 block font-heading font-semibold uppercase leading-tight text-bravo-900">Pre Heading</span>
<h2 class="text-4xl lg:text-7xl mb-6 font-heading font-medium text-bravo-900"> Ut bibendum dui leo, non consectetur nisl auctor sed.</h2>
<div class="mb-6 max-w-none prose prose-p:font-heading prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal lg:prose-xl">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum dui leo, non consectetur nisl auctor sed. Curabitur tempor, dolor ac imperdiet fermentum, ipsum neque volutpat est, ac aliquet tellus enim non tortor. In hac habitasse platea dictumst. Cras pellentesque convallis nisi, at pretium diam auctor et. Sed placerat lobortis dictum. Aliquam ut tellus porttitor, porttitor dui blandit, bibendum nunc. Vivamus gravida dolor dui.</p>
</div>
<div class="flex gap-4 flex-wrap">
<div>
<a href="./index.html" class="btn group bg-bravo-900 text-white border-2 border-bravo-900">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Find out more
</div>
<div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="order-first lg:order-last flex-1 lg:w-6/12 flex relative justify-center align-center lg:mx-0 mb-8 lg:mb-0 ">
<div class="relative w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-2xl w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-10@1200w.jpg">
</picture>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="max-w-[1532px] mx-auto component-spacer-padding bg-grey-50">
<div class="container">
<div class="flex flex-col lg:flex-row w-full">
<div class="flex-1 lg:w-6/12 flex flex-col justify-center align-center order-last lg:order-last lg:pl-12">
<div>
<span class="text-base mb-2 block font-heading font-semibold uppercase leading-tight text-bravo-900">Pre Heading</span>
<h2 class="text-4xl lg:text-7xl mb-6 font-heading font-medium text-bravo-900"> Ut bibendum dui leo, non consectetur nisl auctor sed.</h2>
<div class="mb-6 max-w-none prose prose-p:font-heading prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal lg:prose-xl">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum dui leo, non consectetur nisl auctor sed. Curabitur tempor, dolor ac imperdiet fermentum, ipsum neque volutpat est, ac aliquet tellus enim non tortor. In hac habitasse platea dictumst. Cras pellentesque convallis nisi, at pretium diam auctor et. Sed placerat lobortis dictum. Aliquam ut tellus porttitor, porttitor dui blandit, bibendum nunc. Vivamus gravida dolor dui.</p>
</div>
<div class="flex gap-4 flex-wrap">
<div>
<a href="./index.html" class="btn group bg-bravo-900 text-white border-2 border-bravo-900">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Find out more
</div>
<div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="first lg:order-first flex-1 lg:w-6/12 flex relative justify-center align-center lg:mx-0 mb-8 lg:mb-0 ">
<div class="relative w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-2xl w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example11@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example11@16-10@1200w.jpg">
</picture>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 container component-spacer-margin">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-6xl lg:text-9xl block font-heading font-medium leading-tight text-bravo-900">Discover more</h2>
</div>
<div class="block space-y-6 md:space-y-0 md:grid md:gap-6 md:grid-cols-3 ">
<div>
<a href="#" class="bg-grey-100 hover:bg-grey-100 border border-transparent flex px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col justify-center text-center items-center flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-2xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Our Products</h2>
<p class="mt-2 text-bravo-900 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first grow-0 ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
<div>
<a href="#" class="bg-grey-100 hover:bg-grey-100 border border-transparent flex px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col justify-center text-center items-center flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-2xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Our Services</h2>
<p class="mt-2 text-bravo-900 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first grow-0 ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example11@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example11@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
<div>
<a href="#" class="bg-grey-100 hover:bg-grey-100 border border-transparent flex px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col justify-center text-center items-center flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-2xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Our Services</h2>
<p class="mt-2 text-bravo-900 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first grow-0 ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example3@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example3@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="js-component relative z-0 container component-spacer-margin">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-6xl lg:text-9xl block font-heading font-medium leading-tight text-bravo-900">Products & Services</h2>
<div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-lg lg:prose-xl mt-4 lg:mt-6 text-bravo-900 max-w-screen-sm mx-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="w-full space-y-6 md:space-y-0 md:grid md:gap-6 md:grid-cols-2">
<a href="#" class="bg-grey-100 hover:bg-grey-100 border border-transparent flex p-4 flex-col lg:flex-row h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col justify-center flex-2 py-8 lg:px-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-2xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Our Products</h2>
<p class="mt-2 text-bravo-900 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<source media="(max-width: 1023px)" width="1200" height="750" srcset="/front-end/images/test-imagery/example11@16-10@1200w.jpg 1200w">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="1200" data-sizes="auto" data-srcset=",/front-end/images/test-imagery/example1@1-1@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@1-1@1200w.jpg">
</picture>
</div>
</div>
</a>
<a href="#" class="bg-grey-100 hover:bg-grey-100 border border-transparent flex p-4 flex-col lg:flex-row h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col justify-center flex-2 py-8 lg:px-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-2xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Our Services</h2>
<p class="mt-2 text-bravo-900 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<source media="(max-width: 1023px)" width="1200" height="750" srcset="/front-end/images/test-imagery/example11@16-10@1200w.jpg 1200w">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="1200" data-sizes="auto" data-srcset=",/front-end/images/test-imagery/example11@1-1@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example11@1-1@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
</div>
<div class="js-component component-spacer-padding bg-grey-50 relative z-0 overflow-x-hidden w-full sm:pl-16 xl:pl-0 lg:grid xl:breakout-screen-xl 2xl:breakout-screen-2xl">
<div class="lex flex-col justify-center xl:col-start-2 xl:col-end-6 xl:row-start-1 relative z-20">
<div class="w-full mx-auto max-w-screen-xsm sm:max-w-none xl:w-10/12 2xl:w-9/12 xl:mx-0 px-4 pt-0 pb-4 xl:py-12 2xl:px-6">
<h2 class=" text-4xl mb-6 font-heading font-medium leading-tight">Markets</h2>
<div class="mb-8 prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal xl:prose-lg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum dui leo, non consectetur nisl auctor sed.</p>
</div>
<a href="./index.html" class="btn group bg-bravo-900 text-white border-2 border-bravo-900">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Find out more
</div>
<div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
<div class="w-full h-full overflow-hidden pl-4 pt-4 relative xl:row-start-1 xl:col-start-6 xl:col-end-15 z-20">
<div class="w-full splide" data-vanilla-module="Slider" data-splide='{"perPage":1,"mediaQuery":"min","pagination":false,"arrows":true,"gap":"1.5rem","padding":{"right":"4.5rem"},"updateOnMove":true,"breakpoints":{"640":{"perPage":2,"arrows":true,"gap":"1.5rem","padding":{"right":"4.5rem"}},"800":{"perPage":3,"arrows":true,"gap":"1.5rem","padding":{"right":"4rem"}},"1180":{"perPage":4,"arrows":true,"gap":"1.5rem","padding":{"right":"8rem"}},"1284":{"perPage":3,"arrows":true,"gap":"1.5rem","padding":{"right":"8rem"}}}}'>
<div class="splide__track !overflow-visible">
<div class="splide__list">
<div class="splide__slide">
<a href="#" class="bg-white hover:bg-grey-100 border border-transparent flex px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col justify-center text-center items-center flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Automotive</h2>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first grow-0 ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="900" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-12@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@16-12@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
<div class="splide__slide">
<a href="#" class="bg-white hover:bg-grey-100 border border-transparent flex px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col justify-center text-center items-center flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Aviation</h2>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first grow-0 ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="900" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example11@16-12@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example11@16-12@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
<div class="splide__slide">
<a href="#" class="bg-white hover:bg-grey-100 border border-transparent flex px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col justify-center text-center items-center flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Building services</h2>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first grow-0 ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="900" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example3@16-12@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example3@16-12@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
<div class="splide__slide">
<a href="#" class="bg-white hover:bg-grey-100 border border-transparent flex px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col justify-center text-center items-center flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Lorem ipsum dolor sit amet</h2>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first grow-0 ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="900" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@16-12@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-12@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="flex items-center lg:w-6/12 xl:w-4/12 mt-5">
<div class="splide__arrows flex justify-center items-center lg:block">
<div class="flex gap-4">
<button class="group splide__arrow splide__arrow--prev w-8 h-8 rounded-full flex items-center bg-alpha-700 hover:bg-alpha-900 border-alpha-700 hover:border-alpha-900 text-white justify-center border transition ease-in-out duration-300">
<div class="rotate-90">
<svg class="w-4 h-3 relative fill-current -mb-0.5" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
<span class="sr-only text-bravo-900 hover:text-white">Previous</span>
</button>
<button class="group splide__arrow splide__arrow--next w-8 h-8 rounded-full flex items-center bg-alpha-700 hover:bg-alpha-900 border-alpha-700 hover:border-alpha-900 text-white justify-center border transition ease-in-out duration-300">
<div class="-rotate-90">
<svg class="w-4 h-3 relative fill-current -mb-0.5" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
<span class="sr-only text-bravo-900 hover:text-white">Next</span>
</button>
</div>
</div>
<div class="flex flex-1 justify-center items-center px-4">
<div class="w-full">
<div class="bg-grey-300 rounded-full splide-progress-bar overflow-hidden">
<div class="h-2 w-0 bg-alpha-700 transition-all ease-in-out duration-300 splide-progress-bar__step"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 container component-spacer-margin">
<div class="bg-gradient-to-b relative text-white rounded-2xl overflow-hidden bg-grey-50">
<div class="flex flex-col items-center justify-center px-8 py-12 lg:py-24 relative z-10">
<div class="max-w-xl text-center">
<h2 class="text-5xl font-heading font-medium leading-tight text-bravo-900">Ellentesque feugiat purus in euismod tempus</h2>
<div class="prose prose-p:leading-snug prose-xl mt-4 ">
<p>Nullam vel metus nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="mt-8">
<a href="./.html" class="btn group bg-alpha-700 text-white border-2 border-alpha-700">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Find out more
</div>
<div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 container component-spacer-margin">
<div class="bg-grey-50 px-6 py-11 lg:p-14 md:flex items-center gap-6 rounded-2xl shadow-lg">
<div class="flex flex-col w-full gap-6 content-between">
<h2 class="text-3xl lg:text-5xl text-bravo-900 flex-1 font-heading font-medium leading-tight">
Lorem ipsum dolor sit amet consectetur. Dictumst accumsan.
</h2>
<div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-lg max-w-none ">
<p>Any questions about the switching process?</p>
</div>
</div>
<div class="mt-4 md:mt-0 shrink-0">
<a href="./.html" class="btn group bg-bravo-900 text-white border-2 border-bravo-900">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Find out more
</div>
<div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
</div>
<div class="js-component relative z-0 overflow-hidden lg:overflow-visible component-spacer-margin">
<div class="container ">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-6xl lg:text-9xl block font-heading font-medium leading-tight text-bravo-900">News & insights</h2>
</div>
<div class="w-full splide" data-vanilla-module="Slider" data-splide='{"perPage":1,"mediaQuery":"min","pagination":true,"arrows":false,"gap":"1.5rem","padding":{"right":"4.5rem"},"breakpoints":{"768":{"perPage":2,"mediaQuery":"min","pagination":true,"arrows":false,"gap":"1.5rem","padding":{"right":"0rem"}},"1024":{"destroy":true}}}'>
<div class="splide__track !overflow-visible">
<div class="lg:!grid lg:!gap-6 lg:!grid-cols-4 splide__list">
<div class="splide__slide">
<a href="#" class="bg-white hover:bg-grey-100 border border-transparent flex px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
<ul class="mt-4 flex gap-1">
<div class="tag bg-bravo-200 text-bravo-900 w-max py-px px-2 rounded-full text-tiny font-heading uppercase">
News
</div>
</ul>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first grow-0 ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
<div class="splide__slide">
<a href="#" class="bg-white hover:bg-grey-100 border border-transparent flex px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
<ul class="mt-4 flex gap-1">
<div class="tag bg-bravo-200 text-bravo-900 w-max py-px px-2 rounded-full text-tiny font-heading uppercase">
News
</div>
</ul>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first grow-0 ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example3@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example3@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
<div class="splide__slide">
<a href="#" class="bg-white hover:bg-grey-100 border border-transparent flex px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
<ul class="mt-4 flex gap-1">
<div class="tag bg-bravo-200 text-bravo-900 w-max py-px px-2 rounded-full text-tiny font-heading uppercase">
News
</div>
</ul>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first grow-0 ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example11@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example11@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
<div class="splide__slide">
<a href="#" class="bg-white hover:bg-grey-100 border border-transparent flex px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
<ul class="mt-4 flex gap-1">
<div class="tag bg-charlie text-bravo-900 w-max py-px px-2 rounded-full text-tiny font-heading uppercase">
Event
</div>
</ul>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first grow-0 ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
{% render "@hero-variant-2--bravo-background", hero, true %}
{% for component in componentsList %}
{% render "@" + component.name, component.data, true %}
{% endfor %}
{
"siteName": "BIR Pattern Library",
"pageName": "About us",
"hero": {
"heading": "What we're about...",
"caption": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
"link": {
"text": "Play full video",
"url": "https://www.youtube.com/embed/NZrX_ES93JA",
"modal": true,
"id": "video-modal-1234",
"renderAsButton": true
},
"image": "",
"backgroundVideo": {
"src": "https://player.vimeo.com/external/392924695.hd.mp4?s=5abd506422ab485f2e2174982ef5c07b2e309e38&profile_id=175"
}
},
"breadcrumbs": [
{
"text": "Lorem",
"url": "./"
},
{
"text": "Ipsum",
"url": "./"
},
{
"text": "Dolor",
"url": "./"
}
],
"componentsList": [
{
"name": "rich-text-component",
"data": {
"text": "<p style='text-align: center'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra sed odio sagittis tristique. Proin interdum nunc magna. Praesent imperdiet magna et euismod scelerisque. In sollicitudin nulla quis accumsan auctor. Morbi at ultrices orci. In eu tristique est, ut laoreet nisl. Mauris sit amet neque non sem cursus accumsan et ut erat.</p>"
}
},
{
"name": "accordion-component"
},
{
"name": "quote-component"
},
{
"name": "link-component"
},
{
"name": "image-list-component--2"
},
{
"name": "summary-card-list-component"
},
{
"name": "summary-card-list-component--counters"
},
{
"name": "media-content-panel-style-1-component"
},
{
"name": "media-content-panel-style-1-component--contrast-bg"
},
{
"name": "media-content-panel-style-1-component"
},
{
"name": "media-content-panel-style-2-component--video"
},
{
"name": "media-content-panel-style-1-component"
},
{
"name": "media-content-panel-style-1-component--contrast-bg"
},
{
"name": "cta-card-list-style-1-component"
},
{
"name": "cta-card-list-style-2-component"
},
{
"name": "card-carousel-component"
},
{
"name": "one-panel-cta-component"
},
{
"name": "promo-content-card-component"
},
{
"name": "featured-article-card-list-component"
}
]
}
No notes defined.