<div class="js-component relative z-0 pt-26 lg:min-h-[600px]">
<div class="h-[250px] absolute top-0 left-0 z-10 w-full hero-gradient pointer-events-none opacity-25"></div>
<div class="bg-gradient-to-l bg-brand-gradient absolute top-0 left-0 w-full h-[80%] lg:h-full z-0 mob-hero-slant-clip-path lg:hero-slant-clip-path"></div>
<div class="relative z-20">
<div class="container flex flex-col lg:flex-row lg:items-center lg:gap-6">
<div class="lg:min-h-[435px] flex-1 flex items-center pb-12 lg:pb-0 ">
<div class="text-left">
<h1>
<span class="text-white font-extrabold italic uppercase text-[clamp(2rem,8vw,88px)] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] block hero-text leading-[0.9]">About us</span>
</h1>
<div class="mt-6 text-white font-extrabold italic text-[clamp(1rem,3vw,32px)] text-white hero-text leading-[0.9] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="relative z-10 flex-1 flex lg:-mb-48">
<picture class="block overflow-hidden rounded-[12px] w-full">
<img class="lazyload w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/eros@16-10@1200w.png 1200w" data-src="/front-end/images/test-imagery/eros@16-10@1200w.png">
</picture>
</div>
</div>
</div>
</div>
<nav class=" items-center md:flex py-2 text-tiny">
<ul class="container flex min-w-0">
<li class="items-center hidden [&:nth-last-of-type(-n+2)]:flex md:flex text-grey-600 last-of-type:text-grey-700 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?v=1.2#icon-chevron"></use>
</svg>
</div>
</li>
<li class="items-center hidden [&:nth-last-of-type(-n+2)]:flex md:flex text-grey-600 last-of-type:text-grey-700 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?v=1.2#icon-chevron"></use>
</svg>
</div>
</li>
<li class="items-center hidden [&:nth-last-of-type(-n+2)]:flex md:flex text-grey-600 last-of-type:text-grey-700 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?v=1.2#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-lg 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>
<div class="">
<div class="">
<div class="text-center mb-10 lg:mb-16">
<div>
<h2 class="text-4xl lg:text-8xl block font-heading font-extrabold leading-tight text-bravo mb-4 lg:mb-6">Lorem ipsum dolor</h2>
</div>
<div class="">
<div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-xl lg:prose-2xl 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>
<div class="js-accordion-button-list ">
<div class="border-b border-grey-300 first:border-t first: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 lg:py-8 transition" aria-expanded="false">
<p class="text-xl lg:text-4xl text-bravo transition-colors ease-in-out group-hover:underline group-hover:decoration-1 text-left pr-4 max-w-5xl">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 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?v=1.2#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?v=1.2#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 max-w-5xl">
<div class="js-accordion-item-content pb-6 lg:pb-8">
<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 border-grey-300 first:border-t first: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 lg:py-8 transition" aria-expanded="false">
<p class="text-xl lg:text-4xl text-bravo transition-colors ease-in-out group-hover:underline group-hover:decoration-1 text-left pr-4 max-w-5xl">Title Two</p>
<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-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?v=1.2#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?v=1.2#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 max-w-5xl">
<div class="js-accordion-item-content pb-6 lg:pb-8">
<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 border-grey-300 first:border-t first: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 lg:py-8 transition" aria-expanded="false">
<p class="text-xl lg:text-4xl text-bravo transition-colors ease-in-out group-hover:underline group-hover:decoration-1 text-left pr-4 max-w-5xl">Title Three</p>
<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-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?v=1.2#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?v=1.2#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 max-w-5xl">
<div class="js-accordion-item-content pb-6 lg:pb-8">
<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 z-0 container component-spacer-margin">
<div class="max-w-[950px] mx-auto border-l-4 border-alpha pl-13">
<div class="w-10 h-10 lg:w-20 lg:h-20 bg-brand-gradient-4 rounded-full flex items-center justify-center mb-6 lg:mb-8">
<div class="w-5 h-5 lg:w-10 lg:h-10">
<svg class="fill-current w-full h-full text-bravo" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-quote"></use>
</svg>
</div>
</div>
<h2 class="text-3xl lg:text-7xl text-bravo text-left font-heading font-extrabold italic 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-lg lg:text-xl mt-6 lg:mt-8 text-left whitespace-pre-line text-grey-700">Proin venenatis</span>
<span class="block text-base text-grey-600 mt-2 text-left 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-10 lg:mb-16">
<div>
<div class="uppercase text-grey-600 mb-3 font-semibold">
<p>Heading Label</p>
</div>
<h2 class="text-4xl lg:text-8xl block font-heading font-extrabold leading-tight text-bravo mb-4 lg:mb-6">Lorem ipsum dolor</h2>
</div>
<div class="">
<div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-xl lg:prose-2xl 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="overflow-hidden">
<a href="./" class="flex items-center border-b border-grey-300 first:border-t first:border-grey-300 px-2 py-4 hover:bg-grey-100 transition ease-in-out duration-300 group">
<div class="flex-1">
<h3 class="text-lg lg:text-xl text-bravo font-bold group-hover:underline">Site name</h3>
<h2 class="text-grey-600 font-light text-tiny lg:text-base">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?v=1.2#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?v=1.2#icon-arrow"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
<a href="./" class="flex items-center border-b border-grey-300 first:border-t first:border-grey-300 px-2 py-4 hover:bg-grey-100 transition ease-in-out duration-300 group">
<div class="flex-1">
<h3 class="text-lg lg:text-xl text-bravo font-bold group-hover:underline">Site name</h3>
<h2 class="text-grey-600 font-light text-tiny lg:text-base">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?v=1.2#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?v=1.2#icon-arrow"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
<a href="./" class="flex items-center border-b border-grey-300 first:border-t first:border-grey-300 px-2 py-4 hover:bg-grey-100 transition ease-in-out duration-300 group">
<div class="flex-1">
<h3 class="text-lg lg:text-xl text-bravo font-bold group-hover:underline">Site name</h3>
<h2 class="text-grey-600 font-light text-tiny lg:text-base">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?v=1.2#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?v=1.2#icon-arrow"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</a>
<a href="./" class="flex items-center border-b border-grey-300 first:border-t first:border-grey-300 px-2 py-4 hover:bg-grey-100 transition ease-in-out duration-300 group">
<div class="flex-1">
<h3 class="text-lg lg:text-xl text-bravo font-bold group-hover:underline">Site name</h3>
<h2 class="text-grey-600 font-light text-tiny lg:text-base">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?v=1.2#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?v=1.2#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-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-10 lg:mb-16">
<div>
<div class="uppercase text-grey-600 mb-3 font-semibold">
<p>Heading Label</p>
</div>
<h2 class="text-4xl lg:text-8xl block font-heading font-extrabold leading-tight text-bravo mb-4 lg:mb-6">Switching is easy</h2>
</div>
<div class="">
<div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-xl lg:prose-2xl 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>
<div class="grid grid-cols-1 gap-8 md:grid-cols-3 ">
<a href="" class="group flex flex-col items-center justify-start relative h-full border border-grey-200 shadow-card rounded-3xl card-hover bg-grey-50 px-6 lg:px-11 pb-14 lg:pb-12 ">
<div class="w-full flex justify-center overflow-hidden">
<div class="w-28 h-28 bg-alpha -mt-px relative z-0 flex rounded-b-[60px] justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInDown">
<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?v=1.2#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<h2 class="text-center font-heading font-bold leading-[1.12] text-3xl lg:text-5xl text-bravo">Lorem ipsum dolor</h2>
</div>
<div class="text-center text-grey-600 pt-4 leading-snug text-lg xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
</div>
</a>
<a href="" class="group flex flex-col items-center justify-start relative h-full border border-grey-200 shadow-card rounded-3xl card-hover bg-grey-50 px-6 lg:px-11 pb-14 lg:pb-12 ">
<div class="w-full flex justify-center overflow-hidden">
<div class="w-28 h-28 bg-alpha -mt-px relative z-0 flex rounded-b-[60px] justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInDown">
<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?v=1.2#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<h2 class="text-center font-heading font-bold leading-[1.12] text-3xl lg:text-5xl text-bravo">Lorem ipsum dolor</h2>
</div>
<div class="text-center text-grey-600 pt-4 leading-snug text-lg xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
</div>
</a>
<a href="" class="group flex flex-col items-center justify-start relative h-full border border-grey-200 shadow-card rounded-3xl card-hover bg-grey-50 px-6 lg:px-11 pb-14 lg:pb-12 ">
<div class="w-full flex justify-center overflow-hidden">
<div class="w-28 h-28 bg-alpha -mt-px relative z-0 flex rounded-b-[60px] justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInDown">
<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?v=1.2#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<h2 class="text-center font-heading font-bold leading-[1.12] text-3xl lg:text-5xl text-bravo">Lorem ipsum dolor</h2>
</div>
<div class="text-center text-grey-600 pt-4 leading-snug text-lg xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
</div>
</a>
</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-10 lg:mb-16">
<div>
<div class="uppercase text-grey-600 mb-3 font-semibold">
<p>Heading Label</p>
</div>
<h2 class="text-4xl lg:text-8xl block font-heading font-extrabold leading-tight text-bravo mb-4 lg:mb-6">Switching is easy</h2>
</div>
<div class="">
<div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-xl lg:prose-2xl 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>
<div class="grid grid-cols-1 gap-8 md:grid-cols-3 ">
<a href="" class="group flex flex-col items-center justify-start relative h-full border border-grey-200 shadow-card rounded-3xl card-hover bg-white px-6 lg:px-11 pb-14 lg:pb-12 ">
<div class="w-full flex justify-center overflow-hidden">
<div class="w-28 h-28 bg-alpha -mt-px relative z-0 flex rounded-b-[60px] justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInDown">
<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?v=1.2#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<div class="text-center block font-extrabold text-8xl lg:text-10xl leading-tight text-bravo"><span data-vanilla-module="CountUp" data-number="10" data-suffix="" data-prefix="">0</span></div>
<h2 class="text-center font-heading font-bold leading-[1.12] text-3xl lg:text-5xl text-bravo">Lorem ipsum dolor</h2>
</div>
<div class="text-center text-grey-600 pt-4 leading-snug text-lg xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
</div>
</a>
<a href="" class="group flex flex-col items-center justify-start relative h-full border border-grey-200 shadow-card rounded-3xl card-hover bg-white px-6 lg:px-11 pb-14 lg:pb-12 ">
<div class="w-full flex justify-center overflow-hidden">
<div class="w-28 h-28 bg-alpha -mt-px relative z-0 flex rounded-b-[60px] justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInDown">
<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?v=1.2#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<div class="text-center block font-extrabold text-8xl lg:text-10xl leading-tight text-bravo"><span data-vanilla-module="CountUp" data-number="100" data-suffix="%" data-prefix="">0</span></div>
<h2 class="text-center font-heading font-bold leading-[1.12] text-3xl lg:text-5xl text-bravo">Lorem ipsum dolor</h2>
</div>
<div class="text-center text-grey-600 pt-4 leading-snug text-lg xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
</div>
</a>
<a href="" class="group flex flex-col items-center justify-start relative h-full border border-grey-200 shadow-card rounded-3xl card-hover bg-white px-6 lg:px-11 pb-14 lg:pb-12 ">
<div class="w-full flex justify-center overflow-hidden">
<div class="w-28 h-28 bg-alpha -mt-px relative z-0 flex rounded-b-[60px] justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInDown">
<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?v=1.2#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<div class="text-center block font-extrabold text-8xl lg:text-10xl leading-tight text-bravo"><span data-vanilla-module="CountUp" data-number="50" data-suffix="" data-prefix="">0</span></div>
<h2 class="text-center font-heading font-bold leading-[1.12] text-3xl lg:text-5xl text-bravo">Lorem ipsum dolor</h2>
</div>
<div class="text-center text-grey-600 pt-4 leading-snug text-lg xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
</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="lg:flex w-full lg:gap-14 2xl:gap-16">
<div class="lg:flex-1 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 class="lg:flex-1 flex flex-col justify-center align-center ">
<div>
<h2 class="text-3xl lg:text-5xl xl:text-7xl mb-6 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 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-6 flex-wrap">
<div>
<a href="./index.html" class="btn group bg-alpha text-white border-2 border-alpha">
<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?v=1.2#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
</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 rounded-lg ">
<div class="container ">
<div class="lg:flex w-full lg:gap-14 2xl:gap-16">
<div class="lg:flex-1 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/example2@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-10@1200w.jpg">
</picture>
</div>
</div>
<div class="lg:flex-1 flex flex-col justify-center align-center lg:order-first">
<div>
<h2 class="text-3xl lg:text-5xl xl:text-7xl mb-6 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 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-6 flex-wrap">
<div>
<a href="./index.html" class="btn group bg-alpha text-white border-2 border-alpha">
<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?v=1.2#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
</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 lg:gap-14 2xl:gap-16">
<div class="lg:flex-1 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 class="lg:flex-1 flex flex-col justify-center align-center ">
<div>
<h2 class="text-3xl lg:text-5xl xl:text-7xl mb-6 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 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-6 flex-wrap">
<div>
<a href="./index.html" class="btn group bg-alpha text-white border-2 border-alpha">
<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?v=1.2#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
</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 angled-mask-media-content z-0"></div>
<div class="container relative">
<div class="max-w-screen-xl mx-auto">
<div class="text-center mb-10 lg:mb-16">
<div>
<div class="uppercase text-grey-600 mb-3 font-semibold">
<p>Heading Label</p>
</div>
<h2 class="text-4xl lg:text-8xl block font-heading font-extrabold leading-tight text-bravo mb-4 lg:mb-6">Lorem ipsum dolor</h2>
</div>
<div class="">
<div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-xl lg:prose-2xl 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 class="mt-12">
<a href="./index.html" class="btn group bg-alpha text-white border-2 border-alpha">
<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?v=1.2#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</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 lg:angled-mask">
<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="lg:flex w-full lg:gap-14 2xl:gap-16">
<div class="lg:flex-1 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 class="lg:flex-1 flex flex-col justify-center align-center ">
<div>
<h2 class="text-3xl lg:text-5xl xl:text-7xl mb-6 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 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-6 flex-wrap">
<div>
<a href="./index.html" class="btn group bg-alpha text-white border-2 border-alpha">
<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?v=1.2#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
</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 rounded-lg ">
<div class="container ">
<div class="lg:flex w-full lg:gap-14 2xl:gap-16">
<div class="lg:flex-1 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/example2@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-10@1200w.jpg">
</picture>
</div>
</div>
<div class="lg:flex-1 flex flex-col justify-center align-center lg:order-first">
<div>
<h2 class="text-3xl lg:text-5xl xl:text-7xl mb-6 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 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-6 flex-wrap">
<div>
<a href="./index.html" class="btn group bg-alpha text-white border-2 border-alpha">
<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?v=1.2#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 container component-spacer-margin">
<div class="text-center mb-10 lg:mb-16">
<div>
<div class="uppercase text-grey-600 mb-3 font-semibold">
<p>Heading Label</p>
</div>
<h2 class="text-4xl lg:text-8xl block font-heading font-extrabold leading-tight text-bravo mb-4 lg:mb-6">Discover more</h2>
</div>
<div class="">
<div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-xl lg:prose-2xl max-w-screen-sm mx-auto">
<p>Lorem ipsum dolor sit amet consectetur. Nunc nunc pulvinar adipiscing vitae. Lorem convallis lorem diam ornare. Sed ornare et diam risus arcu id.</p>
</div>
</div>
</div>
<div class="block space-y-6 md:space-y-0 md:flex md:gap-6 md:justify-center">
<div class="flex-1 md:max-w-lg">
<a class="h-full group relative flex items-stretch shadow-card border border-grey-200 card-hover rounded-2xl bg-grey-50 px-6 py-7 sm:px-4 sm:py-5 xl:px-6 xl:py-7 flex flex-col gap-7 items-stretch" href="#">
<div class="rounded-t-2xl bg-brand-gradient-2 absolute top-0 left-0 w-full h-28 angled-mask-mega-card z-0"></div>
<div class="relative z-10 rounded-md overflow-hidden shrink-0">
<picture class="block overflow-hidden transition ease-in-out duration-300 group-hover:scale-110 w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@16-9@1200w.jpg">
</picture>
</div>
<div class="relative z-10 flex h-full flex-col justify-between">
<h2 class="text-bravo font-extrabold mb-2 text-xl xl:text-2xl leading-tight group-hover:underline">Our Products</h2>
<p class="text-grey-600 text-base xl:text-lg leading-snug">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</a>
</div>
<div class="flex-1 md:max-w-lg">
<a class="h-full group relative flex items-stretch shadow-card border border-grey-200 card-hover rounded-2xl bg-grey-50 px-6 py-7 sm:px-4 sm:py-5 xl:px-6 xl:py-7 flex flex-col gap-7 items-stretch" href="#">
<div class="rounded-t-2xl bg-brand-gradient-2 absolute top-0 left-0 w-full h-28 angled-mask-mega-card z-0"></div>
<div class="relative z-10 rounded-md overflow-hidden shrink-0">
<picture class="block overflow-hidden transition ease-in-out duration-300 group-hover:scale-110 w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example2@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-9@1200w.jpg">
</picture>
</div>
<div class="relative z-10 flex h-full flex-col justify-between">
<h2 class="text-bravo font-extrabold mb-2 text-xl xl:text-2xl leading-tight group-hover:underline">Our Services</h2>
<p class="text-grey-600 text-base xl:text-lg leading-snug">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</a>
</div>
<div class="flex-1 md:max-w-lg">
<a class="h-full group relative flex items-stretch shadow-card border border-grey-200 card-hover rounded-2xl bg-grey-50 px-6 py-7 sm:px-4 sm:py-5 xl:px-6 xl:py-7 flex flex-col gap-7 items-stretch" href="#">
<div class="rounded-t-2xl bg-brand-gradient-2 absolute top-0 left-0 w-full h-28 angled-mask-mega-card z-0"></div>
<div class="relative z-10 rounded-md overflow-hidden shrink-0">
<picture class="block overflow-hidden transition ease-in-out duration-300 group-hover:scale-110 w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example3@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example3@16-9@1200w.jpg">
</picture>
</div>
<div class="relative z-10 flex h-full flex-col justify-between">
<h2 class="text-bravo font-extrabold mb-2 text-xl xl:text-2xl leading-tight group-hover:underline">Our Services</h2>
<p class="text-grey-600 text-base xl:text-lg leading-snug">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</a>
</div>
</div>
</div>
<div class="js-component relative z-0 overflow-x-hidden w-full xl:grid lg:breakout-screen-lg xl:breakout-screen-xl 2xl:breakout-screen-2xl component-spacer-margin">
<div class="flex flex-col justify-center xl:col-start-2 xl:col-end-6 xl:row-start-1">
<div class="w-full mx-auto 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-bravo-800 text-4xl lg:text-7xl mb-4 font-heading font-bold leading-tight">Our Locations</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-alpha text-white border-2 border-alpha">
<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?v=1.2#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
<div class="w-full h-full overflow-hidden pl-4 pt-4 relative lg:row-start-1 lg:col-start-6 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"}},"768":{"perPage":3,"arrows":true,"gap":"1.5rem","padding":{"right":"4.5rem"}},"1024":{"perPage":4,"arrows":true,"gap":"1.5rem","padding":{"right":"4rem"}},"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 class="h-full group relative flex items-stretch shadow-card border border-grey-200 card-hover rounded-2xl bg-grey-50 px-6 py-7 sm:px-4 sm:py-5 xl:px-6 xl:py-7 flex flex-col gap-7 items-stretch" href="#">
<div class="rounded-t-2xl bg-brand-gradient-2 absolute top-0 left-0 w-full h-28 angled-mask-mega-card z-0"></div>
<div class="relative z-10 rounded-md overflow-hidden shrink-0">
<picture class="block overflow-hidden transition ease-in-out duration-300 group-hover:scale-110 w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@16-9@1200w.jpg">
</picture>
</div>
<div class="relative z-10 flex h-full flex-col justify-between">
<h2 class="text-bravo font-extrabold mb-2 text-xl xl:text-2xl leading-tight group-hover:underline">Oxford</h2>
<p class="text-grey-600 text-base xl:text-lg leading-snug">Lorem ipsum dolor sit amet consectetur. Pharetra enim.</p>
</div>
</a>
</div>
<div class="splide__slide">
<a class="h-full group relative flex items-stretch shadow-card border border-grey-200 card-hover rounded-2xl bg-grey-50 px-6 py-7 sm:px-4 sm:py-5 xl:px-6 xl:py-7 flex flex-col gap-7 items-stretch" href="#">
<div class="rounded-t-2xl bg-brand-gradient-2 absolute top-0 left-0 w-full h-28 angled-mask-mega-card z-0"></div>
<div class="relative z-10 rounded-md overflow-hidden shrink-0">
<picture class="block overflow-hidden transition ease-in-out duration-300 group-hover:scale-110 w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example2@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-9@1200w.jpg">
</picture>
</div>
<div class="relative z-10 flex h-full flex-col justify-between">
<h2 class="text-bravo font-extrabold mb-2 text-xl xl:text-2xl leading-tight group-hover:underline">Gloucestershire</h2>
<p class="text-grey-600 text-base xl:text-lg leading-snug">Lorem ipsum dolor sit amet consectetur. Pharetra enim.</p>
</div>
</a>
</div>
<div class="splide__slide">
<a class="h-full group relative flex items-stretch shadow-card border border-grey-200 card-hover rounded-2xl bg-grey-50 px-6 py-7 sm:px-4 sm:py-5 xl:px-6 xl:py-7 flex flex-col gap-7 items-stretch" href="#">
<div class="rounded-t-2xl bg-brand-gradient-2 absolute top-0 left-0 w-full h-28 angled-mask-mega-card z-0"></div>
<div class="relative z-10 rounded-md overflow-hidden shrink-0">
<picture class="block overflow-hidden transition ease-in-out duration-300 group-hover:scale-110 w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example3@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example31@16-9@1200w.jpg">
</picture>
</div>
<div class="relative z-10 flex h-full flex-col justify-between">
<h2 class="text-bravo font-extrabold mb-2 text-xl xl:text-2xl leading-tight group-hover:underline">Somerset</h2>
<p class="text-grey-600 text-base xl:text-lg leading-snug">Lorem ipsum dolor sit amet consectetur. Pharetra enim.</p>
</div>
</a>
</div>
<div class="splide__slide">
<a class="h-full group relative flex items-stretch shadow-card border border-grey-200 card-hover rounded-2xl bg-grey-50 px-6 py-7 sm:px-4 sm:py-5 xl:px-6 xl:py-7 flex flex-col gap-7 items-stretch" href="#">
<div class="rounded-t-2xl bg-brand-gradient-2 absolute top-0 left-0 w-full h-28 angled-mask-mega-card z-0"></div>
<div class="relative z-10 rounded-md overflow-hidden shrink-0">
<picture class="block overflow-hidden transition ease-in-out duration-300 group-hover:scale-110 w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-9@1200w.jpg">
</picture>
</div>
<div class="relative z-10 flex h-full flex-col justify-between">
<h2 class="text-bravo font-extrabold mb-2 text-xl xl:text-2xl leading-tight group-hover:underline">Devon</h2>
<p class="text-grey-600 text-base xl:text-lg leading-snug">Lorem ipsum dolor sit amet consectetur. Pharetra enim.</p>
</div>
</a>
</div>
<div class="splide__slide">
<a class="h-full group relative flex items-stretch shadow-card border border-grey-200 card-hover rounded-2xl bg-grey-50 px-6 py-7 sm:px-4 sm:py-5 xl:px-6 xl:py-7 flex flex-col gap-7 items-stretch" href="#">
<div class="rounded-t-2xl bg-brand-gradient-2 absolute top-0 left-0 w-full h-28 angled-mask-mega-card z-0"></div>
<div class="relative z-10 rounded-md overflow-hidden shrink-0">
<picture class="block overflow-hidden transition ease-in-out duration-300 group-hover:scale-110 w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example2@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-9@1200w.jpg">
</picture>
</div>
<div class="relative z-10 flex h-full flex-col justify-between">
<h2 class="text-bravo font-extrabold mb-2 text-xl xl:text-2xl leading-tight group-hover:underline">Devon</h2>
<p class="text-grey-600 text-base xl:text-lg leading-snug">Lorem ipsum dolor sit amet consectetur. Pharetra enim.</p>
</div>
</a>
</div>
</div>
</div>
<div class="flex items-center w-auto xsm:w-100 mt-7 lg:mt-12">
<div class="splide__arrows flex justify-center items-center lg:block">
<div class="flex gap-3">
<button class="group splide__arrow splide__arrow--prev w-12 h-12 rounded-full flex items-center bg-bravo-800 border border-bravo-800 hover:bg-bravo-900 hover:border-bravo-900 text-white hover:text-white justify-center transition ease-in-out duration-300">
<div class="rotate-90">
<svg class="w-5 h-3 relative fill-current -mb-0.5" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
<span class="sr-only text-white">Previous</span>
</button>
<button class="group splide__arrow splide__arrow--next w-12 h-12 rounded-full flex items-center bg-bravo-800 border border-bravo-800 hover:bg-bravo-900 hover:border-bravo-900 text-white hover:text-white justify-center transition ease-in-out duration-300">
<div class="-rotate-90">
<svg class="w-5 h-3 relative fill-current -mb-0.5" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
<span class="sr-only text-white">Next</span>
</button>
</div>
</div>
<div class="flex flex-1 justify-center items-center pl-5 lg:pl-8 pr-4">
<div class="w-full">
<div class="bg-bravo-800/20 rounded-full splide-progress-bar overflow-hidden">
<div class="h-2 w-0 bg-bravo-800 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-4xl text-center">
<div class="uppercase text-bravo mb-4 font-semibold">Faster Speeds</div>
<h2 class="text-4xl lg:6xl xl:text-8xl font-heading font-extrabold leading-tight text-bravo">Full fibre speeds are much faster than regular part fibre</h2>
<div class="prose prose-p:leading-snug prose-xl lg:prose-2xl mt-4 text-grey-600">
<p> Full fibre runs directly to your house, giving you the fastest and most reliable speeds. Most rural properties do not have full fibre installed - That’s where we make the difference.</p>
</div>
</div>
<div class="mt-10">
<a href="./.html" class="btn group bg-alpha text-white border-2 border-alpha">
<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?v=1.2#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 container component-spacer-margin">
<div class="flex flex-col gap-12 lg:flex-row lg:items-center rounded-3xl w-full ">
<div class="lg:flex-1">
<h2 class="text-3xl lg:text-5xl text-bravo font-heading font-bold leading-tight text-center lg:text-left ">
Any questions about the switching process?
</h2>
<p class="hidden lg:block text-lg text-grey-600 mt-6 ">Any questions about the switching process?</p>
</div>
<div class="flex flex-col lg:row gap-4 items-center lg:items-end">
<div class="text-center lg:text-right">
<a href="./.html" class="btn group btn--no-border text-grey-800 bg-brand-gradient-4">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Enquire now
</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?v=1.2#icon-chevron"></use>
</svg>
</div>
</a>
</div>
<div class="flex flex-col lg:flex-row items-center gap-2 mt-2 lg:mt-0">
<div class="font-bold text-1xl lg:text-1xl text-grey-600">Or call </div>
<div class="text-5xl lg:text-4xl font-bold text-alpha">01865 591 131</div>
</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-10 lg:mb-16">
<div>
<div class="uppercase text-grey-600 mb-3 font-semibold">
<p>Heading Label</p>
</div>
<h2 class="text-4xl lg:text-8xl block font-heading font-extrabold leading-tight text-bravo mb-4 lg:mb-6">Headline copy</h2>
</div>
<div class="">
<div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-xl lg:prose-2xl max-w-screen-sm mx-auto">
<p>Lorem ipsum dolor sit amet consectetur. Nunc nunc pulvinar adipiscing vitae. Lorem convallis lorem diam ornare. Sed ornare et diam risus arcu id.</p>
</div>
</div>
</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 class="h-full group relative flex items-stretch shadow-card border border-grey-200 card-hover rounded-2xl bg-grey-50 px-6 py-7 sm:px-4 sm:py-5 xl:px-6 xl:py-7 flex flex-col gap-7 items-stretch" href="#">
<div class="rounded-t-2xl bg-brand-gradient-2 absolute top-0 left-0 w-full h-28 angled-mask-mega-card z-0"></div>
<div class="relative z-10 rounded-md overflow-hidden shrink-0">
<picture class="block overflow-hidden transition ease-in-out duration-300 group-hover:scale-110 w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-9@1200w.jpg">
</picture>
</div>
<div class="relative z-10 flex h-full flex-col justify-between">
<h2 class="text-bravo font-extrabold mb-2 text-xl xl:text-2xl leading-tight group-hover:underline">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
<p class="text-grey-600 text-base xl:text-lg leading-snug"></p>
<div class="mt-4">
<div class="tag bg-delta w-max py-1 px-1.5 rounded text-xs text-grey-800">
test
</div>
</div>
</div>
</a>
</div>
<div class="splide__slide">
<a class="h-full group relative flex items-stretch shadow-card border border-grey-200 card-hover rounded-2xl bg-grey-50 px-6 py-7 sm:px-4 sm:py-5 xl:px-6 xl:py-7 flex flex-col gap-7 items-stretch" href="#">
<div class="rounded-t-2xl bg-brand-gradient-2 absolute top-0 left-0 w-full h-28 angled-mask-mega-card z-0"></div>
<div class="relative z-10 rounded-md overflow-hidden shrink-0">
<picture class="block overflow-hidden transition ease-in-out duration-300 group-hover:scale-110 w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example3@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example3@16-9@1200w.jpg">
</picture>
</div>
<div class="relative z-10 flex h-full flex-col justify-between">
<h2 class="text-bravo font-extrabold mb-2 text-xl xl:text-2xl leading-tight group-hover:underline">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
<p class="text-grey-600 text-base xl:text-lg leading-snug"></p>
<div class="mt-4">
<div class="tag bg-delta w-max py-1 px-1.5 rounded text-xs text-grey-800">
This is a tag
</div>
</div>
</div>
</a>
</div>
<div class="splide__slide">
<a class="h-full group relative flex items-stretch shadow-card border border-grey-200 card-hover rounded-2xl bg-grey-50 px-6 py-7 sm:px-4 sm:py-5 xl:px-6 xl:py-7 flex flex-col gap-7 items-stretch" href="#">
<div class="rounded-t-2xl bg-brand-gradient-2 absolute top-0 left-0 w-full h-28 angled-mask-mega-card z-0"></div>
<div class="relative z-10 rounded-md overflow-hidden shrink-0">
<picture class="block overflow-hidden transition ease-in-out duration-300 group-hover:scale-110 w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example2@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-9@1200w.jpg">
</picture>
</div>
<div class="relative z-10 flex h-full flex-col justify-between">
<h2 class="text-bravo font-extrabold mb-2 text-xl xl:text-2xl leading-tight group-hover:underline">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
<p class="text-grey-600 text-base xl:text-lg leading-snug"></p>
<div class="mt-4">
<div class="tag bg-delta w-max py-1 px-1.5 rounded text-xs text-grey-800">
This is a tag
</div>
</div>
</div>
</a>
</div>
<div class="splide__slide">
<a class="h-full group relative flex items-stretch shadow-card border border-grey-200 card-hover rounded-2xl bg-grey-50 px-6 py-7 sm:px-4 sm:py-5 xl:px-6 xl:py-7 flex flex-col gap-7 items-stretch" href="#">
<div class="rounded-t-2xl bg-brand-gradient-2 absolute top-0 left-0 w-full h-28 angled-mask-mega-card z-0"></div>
<div class="relative z-10 rounded-md overflow-hidden shrink-0">
<picture class="block overflow-hidden transition ease-in-out duration-300 group-hover:scale-110 w-full">
<img class="lazyload w-full" alt="" width="1200" height="675" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-9@1200w.jpg">
</picture>
</div>
<div class="relative z-10 flex h-full flex-col justify-between">
<h2 class="text-bravo font-extrabold mb-2 text-xl xl:text-2xl leading-tight group-hover:underline">Refer a friend </h2>
<p class="text-grey-600 text-base xl:text-lg leading-snug"></p>
<div class="mt-4">
<div class="tag bg-delta w-max py-1 px-1.5 rounded text-xs text-grey-800">
This is a tag
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="w-full">
<a href="" class="flex gap-1.5 justify-center items-center mt-8 group transition ease-in-out duration-300">
<span class="text-grey-700 relative z-10">View all</span>
<svg class="fill-current text-alpha w-4 h-4 relative z-10 group-hover:translate-x-1 transition ease-in-out duration-300">
<use href="/front-end/sprite.svg?v=1.2#icon-arrow"></use>
</svg>
</a>
</div>
</div>
</div>
<div data-vanilla-module="StickyPostcode" data-always-sticky>
<div data-vanilla-module="PostcodeLookupControl" class="opacity-0 transition ease-in-out duration-300 w-full max-w-[540px]">
<div data-initial-step="Search" class="block w-full">
<form class="bg-white/20 rounded-full shadow-[0_4px_30px_rgba(0,0,0,0.1)] backdrop-blur-[5px] border border-white/30 flex gap-6 items-center p-2 focus-within:ring-2 focus-within:ring-white transition-shadow duration-200">
<div class="bg-white w-full flex gap-2 lg:gap-6 items-center p-2 pl-3 lg:pl-6 rounded-full">
<div class="flex-1">
<input autocomplete="off" required class="js-postcode-input w-full disabled:opacity-50 border-0 leading-none lg:text-lg text-bravo font-bold placeholder:text-bravo placeholder:font-bold focus:outline-none focus:ring-0 focus:border-0" placeholder="Enter your postcode">
</div>
<div class="flex-shrink-0">
<button class="flex max-md:justify-center disabled:opacity-50 disabled:pointer-events-none items-center relative z-0 font-body font-bold lg:text-[19px] align-middle md:leading-none md:py-3.5 leading-normal md:px-8 no-underline rounded-full transition duration-500 ease-in-out group max-md:text-base text-grey-800 bg-brand-gradient-4 w-11 h-11 md:w-auto md:h-auto">
<div class="js-btn-search-icon-mob block w-4 h-4 md:hidden">
<svg class="fill-current w-full h-full text-bravo" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-search"></use>
</svg>
</div>
<div class="js-btn-loading-spinner md:mr-4.5 hidden">
<svg aria-hidden="true" class="w-4 h-4 text-white animate-spin dark:text-gray-600 fill-alpha" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor" />
<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill" />
</svg>
</div>
<div class="js-submit-label hidden md:block relative z-10 lg:group-hover:-translate-x-2 transition ease-in-out duration-300">
Check availability
</div>
<div class="max-md:hidden 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?v=1.2#icon-chevron"></use>
</svg>
</div>
</button>
</div>
</div>
</form>
</div>
<div data-initial-step="Continue" data-type="" class="hidden w-full">
<div class="bg-white/20 rounded-full shadow-[0_4px_30px_rgba(0,0,0,0.1)] backdrop-blur-[5px] border border-white/30 flex gap-6 items-center p-2 focus-within:ring-2 focus-within:ring-white transition-shadow duration-200">
<div class="bg-white w-full flex gap-2 lg:gap-6 items-center p-2 pl-3 lg:pl-6 rounded-full">
<div class="flex-1 w-full border-0 leading-none lg:text-lg">
<div class="flex gap-6 items-center">
<div class="w-4 flex-shrink-0 hidden [[data-type='HasService']_&]:block">
<svg width="24" height="21" viewBox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.23936 8.7415C3.24438 7.81087 1.669 7.81087 0.674022 8.8261C-0.238042 9.84133 -0.238042 11.4488 0.756936 12.3794L8.21928 19.5706C9.29717 20.5858 10.9555 20.5012 11.8675 19.3168L23.4756 4.08836C24.3048 2.98852 24.1389 1.38108 23.061 0.535051C21.9832 -0.310974 20.4078 -0.141769 19.5786 0.958064L9.62883 13.9869L4.23936 8.7415Z" fill="#078937" />
</svg>
</div>
<div class="flex-1 [[data-type='NoService']_&]:pl-2 [[data-type='Business']_&]:pl-2">
<div class="text-s-green-800 lg:text-lg font-bold leading-tight hidden [[data-type='HasService']_&]:block">
Available<span class="hidden sm:inline"> at your address</span>
</div>
<div class="text-grey-700 lg:text-lg font-bold leading-tight hidden [[data-type='NoService']_&]:block">
Not available yet
</div>
<div class="text-grey-700 lg:text-lg font-bold leading-tight hidden [[data-type='Business']_&]:block">
Get a business quote
</div>
<div class="text-grey-700 lg:text-lg font-bold leading-tight hidden [[data-type='HasOpenOrder']_&]:block">
Call us
</div>
<button class="js-reset text-bravo-700 text-sm hover:underline">Search again</button>
</div>
</div>
</div>
<div class="flex-shrink-0">
<button class="js-continue-link inline-flex items-center relative z-0 font-body font-bold lg:text-[19px] align-middle leading-none py-3.5 px-4 lg:px-8 no-underline rounded-full transition duration-500 ease-in-out group max-lg:text-base text-grey-800 bg-brand-gradient-4 disabled:opacity-50 disabled:pointer-events-none">
<div class="relative z-10 lg:group-hover:-translate-x-2 transition ease-in-out duration-300">
<span class="js-continue-label">
<span class="hidden [[data-type='HasService']_&]:block">View packages</span>
<span class="hidden [[data-type='NoService']_&]:block">Register interest</span>
<span class="hidden [[data-type='Business']_&]:block">Contact us</span>
<span class="hidden [[data-type='HasOpenOrder']_&]:block">Request callback</span>
</span>
<span class="js-continue-loading hidden">Please wait...</span>
</div>
<div class="max-lg:hidden 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?v=1.2#icon-chevron"></use>
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{% render "@hero-variant-2", hero, true %}
{% if breadcrumbs %}
{% render "@breadcrumbs", { breadcrumbs: breadcrumbs } %}
{% endif %}
{% for component in componentsList %}
{% render "@" + component.name, component.data, true %}
{% endfor %}
<div data-vanilla-module="StickyPostcode" data-always-sticky>
{% render "@postcode-lookup" %}
</div>
{
"siteName": "Gigaclear Pattern Library",
"pageName": "About us",
"activeSection": "personal",
"hero": {
"heading": [
"About us"
],
"caption": "Lorem ipsum dolor sit amet",
"image": {
"src": "images/test-imagery/eros@16-10@1200w.png",
"srcSet": [
{
"url": "images/test-imagery/eros@16-10@1200w.png",
"size": 1200
}
]
}
},
"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": "card-carousel-component"
},
{
"name": "one-panel-cta-component"
},
{
"name": "promo-content-card-component"
},
{
"name": "featured-article-card-list-component"
}
]
}
No notes defined.