<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">
<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-4 md:px-20 md:w-8/12 lg:w-6/12 xl:w-5/12 pt-10 sm:pt-14 xl:pt-12 pb-10 sm:pb-14 lg:pb-12 relative rounded-lg bg-bravo">
<div class="relative flex flex-col justify-center">
<h1 class="text-4xl xl:text-7xl font-bold font-heading leading-tight text-white ">What we're about...</h1>
<div class="block prose xl:prose-xl mt-8 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 bg-alpha text-white border-2 border-alpha hover:border-alpha-800 hover:bg-alpha-800" data-micromodal-trigger="video-modal-1234">
Play full video
</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-md">
<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>
<nav class=" items-center md:flex py-3 text-lg bg-grey-50 border-t border-b border-grey-300">
<ul class="container flex min-w-0">
<li class="items-center hidden [&:nth-last-of-type(-n+2)]:flex md:flex text-alpha last-of-type:font-bold last-of-type:text-grey-800 group last-of-type:truncate">
<a href="./.html" class="hover:underline ">Lorem</a>
<div class="h-1.5 w-2.5 mx-1.5 group-last-of-type:hidden">
<svg class="w-full h-full fill-current text-grey-800 transform -rotate-90" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</li>
<li class="items-center hidden [&:nth-last-of-type(-n+2)]:flex md:flex text-alpha last-of-type:font-bold last-of-type:text-grey-800 group last-of-type:truncate">
<a href="./.html" class="hover:underline ">Ipsum</a>
<div class="h-1.5 w-2.5 mx-1.5 group-last-of-type:hidden">
<svg class="w-full h-full fill-current text-grey-800 transform -rotate-90" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</li>
<li class="items-center hidden [&:nth-last-of-type(-n+2)]:flex md:flex text-alpha last-of-type:font-bold last-of-type:text-grey-800 group last-of-type:truncate">
<a href="./.html" class="hover:underline truncate" aria-current="page">Dolor</a>
<div class="h-1.5 w-2.5 mx-1.5 group-last-of-type:hidden">
<svg class="w-full h-full fill-current text-grey-800 transform -rotate-90" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</li>
</ul>
</nav>
<div class="js-component relative z-0 component-spacer-margin">
<div class="container">
<div class="max-w-screen-md mx-auto">
<div class="prose xl:prose-lg 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 block font-heading font-bold leading-tight text-bravo">Lorem ipsum dolor</h2>
<div class="prose xl:prose-lg mt-4 lg:mt-6 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-bold leading-tight flex w-full items-center justify-between py-6 px-4 transition" aria-expanded="false">
<p class="text-xl text-bravo transition-colors ease-in-out group-hover:text-alpha text-left pr-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<div class="js-accordion-item-icon w-6 h-6 transform transition ease-in-out duration-500 flex-shrink-0 group-aria-expanded:rotate-180" aria-hidden="true">
<svg class="fill-current text-bravo w-full h-full transition-colors ease-in-out group-hover:text-alpha">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</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 xl:prose-lg 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-bold leading-tight flex w-full items-center justify-between py-6 px-4 transition" aria-expanded="false">
<p class="text-xl text-bravo transition-colors ease-in-out group-hover:text-alpha text-left pr-4">Title Two</p>
<div class="js-accordion-item-icon w-6 h-6 transform transition ease-in-out duration-500 flex-shrink-0 group-aria-expanded:rotate-180" aria-hidden="true">
<svg class="fill-current text-bravo w-full h-full transition-colors ease-in-out group-hover:text-alpha">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</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 xl:prose-lg 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-bold leading-tight flex w-full items-center justify-between py-6 px-4 transition" aria-expanded="false">
<p class="text-xl text-bravo transition-colors ease-in-out group-hover:text-alpha text-left pr-4">Title Three</p>
<div class="js-accordion-item-icon w-6 h-6 transform transition ease-in-out duration-500 flex-shrink-0 group-aria-expanded:rotate-180" aria-hidden="true">
<svg class="fill-current text-bravo w-full h-full transition-colors ease-in-out group-hover:text-alpha">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</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 xl:prose-lg 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 z-0 container component-spacer-margin">
<div class="w-full max-w-screen-md mx-auto ">
<div class="w-24 h-24 bg-alpha rounded-full flex items-center justify-center ml-auto mr-auto mb-6">
<div class="w-10 h-10">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-quote"></use>
</svg>
</div>
</div>
<h2 class="text-lg md:text-4xl text-alpha text-center font-heading font-bold leading-tight whitespace-pre-line">Mauris ultricies arcu rhoncus, venenatis nibh non, malesuada nisl. Nam varius finibus lectus at molestie.</h2>
<span class="block font-bold text-xl mt-4 text-center whitespace-pre-line">Proin venenatis</span>
<span class="block text-base mt-2 text-center whitespace-pre-line">Lorem ipsum dolor</span>
</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 block font-heading font-bold leading-tight text-bravo">Lorem ipsum dolor</h2>
<div class="prose xl:prose-lg mt-4 lg:mt-6 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-md 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">
<div class="flex-1">
<h3 class="text-lg text-alpha">Site name</h3>
<h2 class="text-2xl text-bravo">Page title or description
</div>
<div class="flex-shrink-0">
<div class="w-8 h-8">
<svg class="w-full h-full fill-current text-alpha" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</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">
<div class="flex-1">
<h3 class="text-lg text-alpha">Site name</h3>
<h2 class="text-2xl text-bravo">Page title or description
</div>
<div class="flex-shrink-0">
<div class="w-8 h-8">
<svg class="w-full h-full fill-current text-alpha" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</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">
<div class="flex-1">
<h3 class="text-lg text-alpha">Site name</h3>
<h2 class="text-2xl text-bravo">Page title or description
</div>
<div class="flex-shrink-0">
<div class="w-8 h-8">
<svg class="w-full h-full fill-current text-alpha" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</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">
<div class="flex-1">
<h3 class="text-lg text-alpha">Site name</h3>
<h2 class="text-2xl text-bravo">Page title or description
</div>
<div class="flex-shrink-0">
<div class="w-8 h-8">
<svg class="w-full h-full fill-current text-alpha" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</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-md w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example2@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-10@1200w.jpg">
</picture>
<div class="mt-3 text-grey-800">
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-md w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example2@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-10@1200w.jpg">
</picture>
<div class="mt-3 text-grey-800">
Lorem ipsum dolor
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="container relative">
<div class="max-w-screen-xl mx-auto">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-6xl block font-heading font-bold leading-tight text-bravo">Lorem ipsum dolor</h2>
<div class="prose xl:prose-lg mt-4 lg:mt-6 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="space-y-6 md:space-y-0 md:justify-center md:flex md:flex-wrap">
<div class="md:p-4 flex justify-center md:w-6/12 lg:w-4/12">
<a href="" class="flex flex-col items-center justify-center max-w-xs mx-auto md:mx-0 group">
<div class="w-32 h-32 bg-alpha relative flex rounded-full justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300 group-hover:bg-alpha-800 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="text-center font-heading font-bold leading-tight text-2xl">Lorem ipsum dolor</h2>
</div>
<div class="prose text-center pt-3">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.</p>
</div>
</a>
</div>
<div class="md:p-4 flex justify-center md:w-6/12 lg:w-4/12">
<a href="" class="flex flex-col items-center justify-center max-w-xs mx-auto md:mx-0 group">
<div class="w-32 h-32 bg-alpha relative flex rounded-full justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300 group-hover:bg-alpha-800 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="text-center font-heading font-bold leading-tight text-2xl">Lorem ipsum dolor</h2>
</div>
<div class="prose text-center pt-3">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.</p>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-padding bg-grey-50">
<div class="container relative">
<div class="max-w-screen-xl mx-auto">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-6xl block font-heading font-bold leading-tight text-bravo">Lorem ipsum dolor</h2>
<div class="prose xl:prose-lg mt-4 lg:mt-6 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="space-y-6 md:space-y-0 md:justify-center md:flex md:flex-wrap">
<div class="md:p-4 flex justify-center md:w-6/12 lg:w-4/12">
<a href="" class="flex flex-col items-center justify-center max-w-xs mx-auto md:mx-0 group">
<div class="w-32 h-32 bg-alpha relative flex rounded-full justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300 group-hover:bg-alpha-800 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>
<span class="text-center block font-semibold text-7xl leading-tight"><span data-vanilla-module="CountUp" data-number="10" data-suffix="" data-prefix="">0</span></span>
<h2 class="text-center font-heading font-bold leading-tight text-2xl">Lorem ipsum dolor</h2>
</div>
<div class="prose text-center pt-3">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.</p>
</div>
</a>
</div>
<div class="md:p-4 flex justify-center md:w-6/12 lg:w-4/12">
<a href="" class="flex flex-col items-center justify-center max-w-xs mx-auto md:mx-0 group">
<div class="w-32 h-32 bg-alpha relative flex rounded-full justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300 group-hover:bg-alpha-800 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>
<span class="text-center block font-semibold text-7xl leading-tight"><span data-vanilla-module="CountUp" data-number="100" data-suffix="%" data-prefix="">0</span></span>
<h2 class="text-center font-heading font-bold leading-tight text-2xl">Lorem ipsum dolor</h2>
</div>
<div class="prose text-center pt-3">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.</p>
</div>
</a>
</div>
<div class="md:p-4 flex justify-center md:w-6/12 lg:w-4/12">
<a href="" class="flex flex-col items-center justify-center max-w-xs mx-auto md:mx-0 group">
<div class="w-32 h-32 bg-alpha relative flex rounded-full justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300 group-hover:bg-alpha-800 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>
<span class="text-center block font-semibold text-7xl leading-tight"><span data-vanilla-module="CountUp" data-number="50" data-suffix="" data-prefix="">0</span></span>
<h2 class="text-center font-heading font-bold leading-tight text-2xl">Lorem ipsum dolor</h2>
</div>
<div class="prose text-center pt-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.</p>
</div>
</a>
</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="lg:flex w-full">
<div class="lg:flex-1 lg:w-6/12 flex flex-col justify-center align-center mb-8 lg:mb-0 lg:pr-12">
<div>
<h2 class="text-4xl mb-8 font-heading font-bold leading-tight text-bravo"> Ut bibendum dui leo, non consectetur nisl auctor sed.</h2>
<div class="mb-8 max-w-none prose xl:prose-lg">
<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 bg-alpha text-white border-2 border-alpha hover:border-alpha-800 hover:bg-alpha-800">
Find out more
</a>
</div>
</div>
</div>
</div>
<div class="lg:flex-1 lg:w-6/12 flex relative justify-center align-center lg:mx-0">
<div class="relative w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-md 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="lg:flex w-full">
<div class="lg:flex-1 lg:w-6/12 flex flex-col justify-center align-center mb-8 lg:mb-0 lg:order-last lg:pl-12">
<div>
<h2 class="text-4xl mb-8 font-heading font-bold leading-tight text-bravo"> Ut bibendum dui leo, non consectetur nisl auctor sed.</h2>
<div class="mb-8 max-w-none prose xl:prose-lg">
<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 bg-bravo text-white border-2 border-bravo hover:border-bravo-600 hover:bg-bravo-600">
Find out more
</a>
</div>
</div>
</div>
</div>
<div class="lg:flex-1 lg:w-6/12 flex relative justify-center align-center lg:mx-0">
<div class="relative w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-md w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example2@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@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="lg:flex w-full">
<div class="lg:flex-1 lg:w-6/12 flex flex-col justify-center align-center mb-8 lg:mb-0 lg:pr-12">
<div>
<h2 class="text-4xl mb-8 font-heading font-bold leading-tight text-bravo"> Ut bibendum dui leo, non consectetur nisl auctor sed.</h2>
<div class="mb-8 max-w-none prose xl:prose-lg">
<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 bg-alpha text-white border-2 border-alpha hover:border-alpha-800 hover:bg-alpha-800">
Find out more
</a>
</div>
</div>
</div>
</div>
<div class="lg:flex-1 lg:w-6/12 flex relative justify-center align-center lg:mx-0">
<div class="relative w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-md 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 bg-grey-50">
<div class="flex flex-col md:flex-auto lg:grid lg:breakout-screen-lg xl:breakout-screen-xl 2xl:breakout-screen-2xl">
<div class="relative py-8 lg:row-start-1 order-last z-10 flex items-center align-end lg:py-24 max-w-screen-xsm md:max-w-screen-md w-full lg:max-w-none mx-auto lg:mx-0 lg:order-none lg:col-start-2 lg:col-end-8 relative">
<div class="px-4 xl:px-6 w-full lg:w-10/12">
<h2 class="text-4xl font-heading font-bold leading-tight text-grey-800">Check this out - with video button</h2>
<div class="block w-full max-w-full prose xl:prose-lg mt-8 ">
<p>Mauris ultricies arcu rhoncus, venenatis nibh non, malesuada nisl. Nam varius finibus lectus at molestie. Proin venenatis nisi eu erat consectetur, sed gravida odio laoreet.</p>
</div>
<div class="mt-6">
<button class="btn bg-alpha text-white border-2 border-alpha hover:border-alpha-800 hover:bg-alpha-800" data-micromodal-trigger="video-modal-1234">
Play full video
</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-md">
<iframe class="absolute top-0 left-0 w-full h-full js-iframe" data-src="https://www.youtube.com/embed/vqNZngMjgko" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="lg:row-start-1 relative z-0 lg:order-none lg:row-start-1 lg:col-start-8 lg:col-end-16 lg:angled-mask">
<div class="relative w-full h-full">
<div class="aspect-[16/10]"></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>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="max-w-[1532px] mx-auto ">
<div class="container">
<div class="lg:flex w-full">
<div class="lg:flex-1 lg:w-6/12 flex flex-col justify-center align-center mb-8 lg:mb-0 lg:pr-12">
<div>
<h2 class="text-4xl mb-8 font-heading font-bold leading-tight text-bravo"> Ut bibendum dui leo, non consectetur nisl auctor sed.</h2>
<div class="mb-8 max-w-none prose xl:prose-lg">
<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 bg-alpha text-white border-2 border-alpha hover:border-alpha-800 hover:bg-alpha-800">
Find out more
</a>
</div>
</div>
</div>
</div>
<div class="lg:flex-1 lg:w-6/12 flex relative justify-center align-center lg:mx-0">
<div class="relative w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-md 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="lg:flex w-full">
<div class="lg:flex-1 lg:w-6/12 flex flex-col justify-center align-center mb-8 lg:mb-0 lg:order-last lg:pl-12">
<div>
<h2 class="text-4xl mb-8 font-heading font-bold leading-tight text-bravo"> Ut bibendum dui leo, non consectetur nisl auctor sed.</h2>
<div class="mb-8 max-w-none prose xl:prose-lg">
<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 bg-bravo text-white border-2 border-bravo hover:border-bravo-600 hover:bg-bravo-600">
Find out more
</a>
</div>
</div>
</div>
</div>
<div class="lg:flex-1 lg:w-6/12 flex relative justify-center align-center lg:mx-0">
<div class="relative w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-md w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example2@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@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 block font-heading font-bold leading-tight text-bravo">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-50 hover:bg-grey-100 border border-grey-300 flex flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
<div class="flex flex-1 relative z-10 flex-col justify-center p-8 text-center items-center" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Our Products</h2>
<p class="mt-2">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 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-50 hover:bg-grey-100 border border-grey-300 flex flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
<div class="flex flex-1 relative z-10 flex-col justify-center p-8 text-center items-center" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Our Services</h2>
<p class="mt-2">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 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/example2@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
<div>
<a href="#" class="bg-grey-50 hover:bg-grey-100 border border-grey-300 flex flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
<div class="flex flex-1 relative z-10 flex-col justify-center p-8 text-center items-center" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Our Services</h2>
<p class="mt-2">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 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 block font-heading font-bold leading-tight text-bravo">Products & Services</h2>
<div class="prose xl:prose-lg mt-4 lg:mt-6 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-50 hover:bg-grey-100 border border-grey-300 flex flex-col lg:flex-row h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
<div class="flex flex-1 relative z-10 flex-col justify-center p-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Our Products</h2>
<p class="mt-2">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 w-full">
<source media="(max-width: 1023px)" width="1200" height="750" srcset="/front-end/images/test-imagery/example2@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-50 hover:bg-grey-100 border border-grey-300 flex flex-col lg:flex-row h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
<div class="flex flex-1 relative z-10 flex-col justify-center p-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Our Services</h2>
<p class="mt-2">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 w-full">
<source media="(max-width: 1023px)" width="1200" height="750" srcset="/front-end/images/test-imagery/example2@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/example2@1-1@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@1-1@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
</div>
<div class="js-component relative z-0 overflow-x-hidden w-full lg:grid lg:breakout-screen-lg xl:breakout-screen-xl 2xl:breakout-screen-2xl component-spacer-margin">
<div class="flex flex-col justify-center lg:col-start-2 lg:col-end-7 lg:row-start-1">
<div class="w-full mx-auto max-w-screen-xsm sm:max-w-screen-sm md:max-w-screen-md lg:max-w-none lg:w-10/12 2xl:w-9/12 lg:mx-0 px-4 pt-0 pb-4 lg:py-12 xl:px-6">
<h2 class=" text-4xl mb-8 font-heading font-bold leading-tight">Markets</h2>
<div class="mb-8 prose 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 bg-alpha text-white border-2 border-alpha hover:border-alpha-800 hover:bg-alpha-800">
Find out more
</a>
</div>
</div>
<div class="w-full h-full overflow-hidden pl-4 pt-4 relative lg:row-start-1 lg:col-start-7 lg:col-end-15">
<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"}},"1024":{"perPage":2,"arrows":true,"gap":"1.5rem","padding":{"right":"4.5rem"}},"1284":{"perPage":3,"arrows":true,"gap":"1.5rem","padding":{"right":"0rem"}}}}'>
<div class="splide__track !overflow-visible">
<div class="splide__list">
<div class="splide__slide">
<a href="#" class="bg-grey-50 hover:bg-grey-100 border border-grey-300 flex flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
<div class="flex flex-1 relative z-10 flex-col justify-center p-8 text-center items-center" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Automotive</h2>
</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 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-grey-50 hover:bg-grey-100 border border-grey-300 flex flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
<div class="flex flex-1 relative z-10 flex-col justify-center p-8 text-center items-center" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Aviation</h2>
</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 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/example2@16-12@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-12@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
<div class="splide__slide">
<a href="#" class="bg-grey-50 hover:bg-grey-100 border border-grey-300 flex flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
<div class="flex flex-1 relative z-10 flex-col justify-center p-8 text-center items-center" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Building services</h2>
</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 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/example31@16-12@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
<div class="splide__slide">
<a href="#" class="bg-grey-50 hover:bg-grey-100 border border-grey-300 flex flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
<div class="flex flex-1 relative z-10 flex-col justify-center p-8 text-center items-center" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Lorem ipsum dolor sit amet</h2>
</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 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-8/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 hover:bg-alpha hover:border-alpha text-grey hover:text-white justify-center bg-transparent border border-grey 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-grey hover:text-white">Previous</span>
</button>
<button class="group splide__arrow splide__arrow--next w-8 h-8 rounded-full flex items-center hover:bg-alpha hover:border-alpha text-grey hover:text-white justify-center bg-transparent border border-grey 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-grey 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 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 bg-grey-50">
<div class="bg-gradient-to-b relative text-white rounded-md overflow-hidden">
<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-bold leading-tight text-grey-800">Ellentesque feugiat purus in euismod tempus</h2>
<div class="prose prose-lg mt-8 ">
<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 bg-alpha text-white border-2 border-alpha hover:border-alpha-800 hover:bg-alpha-800">
Find out more
</a>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 container component-spacer-margin">
<div class="bg-grey-50 p-8 md:flex items-center rounded-md shadow-lg">
<h2 class="text-xl text-bravo flex-1 font-heading font-bold leading-tight">
Stay updated on our latest news, volunteering and fundraising events
</h2>
<div>
<div class="mt-4 md:mt-0 md:ml-4">
<a href="./.html" class="btn bg-alpha text-white border-2 border-alpha hover:border-alpha-800 hover:bg-alpha-800">
Find out more
</a>
</div>
</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 block font-heading font-bold leading-tight text-bravo">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-grey-50 hover:bg-grey-100 border border-grey-300 flex flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
<div class="flex flex-1 relative z-10 flex-col justify-center p-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<div class="mb-4">
<div class="tag bg-alpha text-white w-max py-1 px-4 rounded text-xs">
test
</div>
</div>
<h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
</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 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-grey-50 hover:bg-grey-100 border border-grey-300 flex flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
<div class="flex flex-1 relative z-10 flex-col justify-center p-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<div class="mb-4">
<div class="tag bg-alpha text-white w-max py-1 px-4 rounded text-xs">
This is a tag
</div>
</div>
<h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
</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 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-grey-50 hover:bg-grey-100 border border-grey-300 flex flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
<div class="flex flex-1 relative z-10 flex-col justify-center p-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<div class="mb-4">
<div class="tag bg-alpha text-white w-max py-1 px-4 rounded text-xs">
This is a tag
</div>
</div>
<h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
</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 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/example2@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
<div class="splide__slide">
<a href="#" class="bg-grey-50 hover:bg-grey-100 border border-grey-300 flex flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
<div class="flex flex-1 relative z-10 flex-col justify-center p-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<div class="mb-4">
<div class="tag bg-alpha text-white w-max py-1 px-4 rounded text-xs">
This is a tag
</div>
</div>
<h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
</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 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-colour", hero, true %}
{% if breadcrumbs %}
{% render "@breadcrumbs", { breadcrumbs: breadcrumbs } %}
{% endif %}
{% for component in componentsList %}
{% render "@" + component.name, component.data, true %}
{% endfor %}
{
"siteName": "MentorKit 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--2-items"
},
{
"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.