<div class="js-component relative">
<div class="absolute w-full h-full top-0 left-0 gradient-alpha z-0 opacity-30 lg:opacity-100"></div>
<div class="container flex flex-col lg:flex-row lg:items-center gap-8 py-8 lg:py-16 relative z-20 lg:min-h-[250px]">
<div class="flex-1 flex order-last lg:order-first lg:items-center">
<div class="items-start lg:text-left flex flex-col w-full">
<div class="uppercase font-semibold font-heading leading-tight ">
Pre Heading
</div>
<h1 class="text-6xl lg:text-9xl font-medium font-heading leading-tight ">
Welcome
<span class="font-medium font-heading leading-none text-alpha-600">
Extra Colour
</span>
</h1>
<div class="max-w-xl prose prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal prose-lg lg:prose-xl mt-6 ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut purus dictum, sodales nunc at, porta orci.
</div>
<div class="mt-6">
<a href="./about-us.html" class="btn group bg-bravo-900 text-white border-2 border-bravo-900">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Find out more
</div>
<div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
</div>
<div class="relative z-10 flex-1 order-first lg:order-last">
<picture class="block overflow-hidden h-full w-full">
<source media="(max-width: 767px)" width="1200" height="750" srcset="/front-end/images/test-imagery/example7@16-10@1200w.jpg 1200w">
<source media="(max-width: 1023px)" width="1920" height="720" srcset=",/front-end/images/test-imagery/example7@16-6@2000w.jpg 1200w">
<img class="lazyload h-full object-cover rounded-xl w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset=",/front-end/images/test-imagery/example7@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example7@16-10@1200w.jpg">
</picture>
</div>
</div>
</div>
<div class="js-component relative component-spacer-margin">
<div class="container relative z-10">
<div class="max-w-screen-xl mx-auto">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-6xl lg:text-9xl block font-heading font-medium leading-tight text-bravo-900">Lorem ipsum dolor</h2>
<div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-lg lg:prose-xl mt-4 lg:mt-6 text-bravo-900 max-w-screen-sm mx-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="grid grid-cols-1 gap-8 md:grid-cols-3 ">
<a href="" class="group overflow-hidden rounded-3xl hover:shadow-card hover:border-grey-300 border border-transparent">
<div class="w-full h-full">
<div class="h-full bg-grey-50 flex flex-col justify-start relative px-6 py-7 xl:px-13 xl:py-14 ">
<div class="w-14 h-14 xl:w-[120px] xl:h-[120px] bg-bravo-900 relative flex rounded-full justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300 group-hover:shadow-xl" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInUp">
<div class="absolute w-2/4 h-auto">
<div class="w-full h-16">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<h2 class="font-heading font-medium leading-[1.12] text-3xl md:text-2xl lg:text-3xl xl:text-5xl text-bravo-900">Lorem ipsum dolor</h2>
</div>
<div class="text-bravo-900 pt-4 leading-snug font-light text-xl xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
</div>
</div>
</div>
</a>
<a href="" class="group overflow-hidden rounded-3xl hover:shadow-card hover:border-grey-300 border border-transparent">
<div class="w-full h-full">
<div class="h-full bg-grey-50 flex flex-col justify-start relative px-6 py-7 xl:px-13 xl:py-14 ">
<div class="w-14 h-14 xl:w-[120px] xl:h-[120px] bg-bravo-900 relative flex rounded-full justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300 group-hover:shadow-xl" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInUp">
<div class="absolute w-2/4 h-auto">
<div class="w-full h-16">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<h2 class="font-heading font-medium leading-[1.12] text-3xl md:text-2xl lg:text-3xl xl:text-5xl text-bravo-900">Lorem ipsum dolor</h2>
</div>
<div class="text-bravo-900 pt-4 leading-snug font-light text-xl xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
</div>
</div>
</div>
</a>
<a href="" class="group overflow-hidden rounded-3xl hover:shadow-card hover:border-grey-300 border border-transparent">
<div class="w-full h-full">
<div class="h-full bg-grey-50 flex flex-col justify-start relative px-6 py-7 xl:px-13 xl:py-14 ">
<div class="w-14 h-14 xl:w-[120px] xl:h-[120px] bg-bravo-900 relative flex rounded-full justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300 group-hover:shadow-xl" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInUp">
<div class="absolute w-2/4 h-auto">
<div class="w-full h-16">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<h2 class="font-heading font-medium leading-[1.12] text-3xl md:text-2xl lg:text-3xl xl:text-5xl text-bravo-900">Lorem ipsum dolor</h2>
</div>
<div class="text-bravo-900 pt-4 leading-snug font-light text-xl xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="max-w-[1532px] mx-auto ">
<div class="container">
<div class="flex flex-col lg:flex-row w-full">
<div class="flex-1 lg:w-6/12 flex flex-col justify-center align-center order-last lg:order-first lg:pr-12">
<div>
<span class="text-base mb-2 block font-heading font-semibold uppercase leading-tight text-bravo-900">Pre Heading</span>
<h2 class="text-4xl lg:text-7xl mb-6 font-heading font-medium text-bravo-900"> Ut bibendum dui leo, non consectetur nisl auctor sed.</h2>
<div class="mb-6 max-w-none prose prose-p:font-heading prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal lg:prose-xl">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum dui leo, non consectetur nisl auctor sed. Curabitur tempor, dolor ac imperdiet fermentum, ipsum neque volutpat est, ac aliquet tellus enim non tortor. In hac habitasse platea dictumst. Cras pellentesque convallis nisi, at pretium diam auctor et. Sed placerat lobortis dictum. Aliquam ut tellus porttitor, porttitor dui blandit, bibendum nunc. Vivamus gravida dolor dui.</p>
</div>
<div class="flex gap-4 flex-wrap">
<div>
<a href="./index.html" class="btn group bg-bravo-900 text-white border-2 border-bravo-900">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Find out more
</div>
<div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="order-first lg:order-last flex-1 lg:w-6/12 flex relative justify-center align-center lg:mx-0 mb-8 lg:mb-0 ">
<div class="relative w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-2xl w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-10@1200w.jpg">
</picture>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="max-w-[1532px] mx-auto component-spacer-padding bg-grey-50">
<div class="container">
<div class="flex flex-col lg:flex-row w-full">
<div class="flex-1 lg:w-6/12 flex flex-col justify-center align-center order-last lg:order-last lg:pl-12">
<div>
<span class="text-base mb-2 block font-heading font-semibold uppercase leading-tight text-bravo-900">Pre Heading</span>
<h2 class="text-4xl lg:text-7xl mb-6 font-heading font-medium text-bravo-900"> Ut bibendum dui leo, non consectetur nisl auctor sed.</h2>
<div class="mb-6 max-w-none prose prose-p:font-heading prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal lg:prose-xl">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum dui leo, non consectetur nisl auctor sed. Curabitur tempor, dolor ac imperdiet fermentum, ipsum neque volutpat est, ac aliquet tellus enim non tortor. In hac habitasse platea dictumst. Cras pellentesque convallis nisi, at pretium diam auctor et. Sed placerat lobortis dictum. Aliquam ut tellus porttitor, porttitor dui blandit, bibendum nunc. Vivamus gravida dolor dui.</p>
</div>
<div class="flex gap-4 flex-wrap">
<div>
<a href="./index.html" class="btn group bg-bravo-900 text-white border-2 border-bravo-900">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Find out more
</div>
<div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="first lg:order-first flex-1 lg:w-6/12 flex relative justify-center align-center lg:mx-0 mb-8 lg:mb-0 ">
<div class="relative w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-2xl w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example11@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example11@16-10@1200w.jpg">
</picture>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 container component-spacer-margin">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-6xl lg:text-9xl block font-heading font-medium leading-tight text-bravo-900">Products & Services</h2>
<div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-lg lg:prose-xl mt-4 lg:mt-6 text-bravo-900 max-w-screen-sm mx-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="w-full space-y-6 md:space-y-0 md:grid md:gap-6 md:grid-cols-2">
<a href="#" class="bg-grey-100 hover:bg-grey-100 border border-transparent flex p-4 flex-col lg:flex-row h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col justify-center flex-2 py-8 lg:px-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-2xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Our Products</h2>
<p class="mt-2 text-bravo-900 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<source media="(max-width: 1023px)" width="1200" height="750" srcset="/front-end/images/test-imagery/example11@16-10@1200w.jpg 1200w">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="1200" data-sizes="auto" data-srcset=",/front-end/images/test-imagery/example1@1-1@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@1-1@1200w.jpg">
</picture>
</div>
</div>
</a>
<a href="#" class="bg-grey-100 hover:bg-grey-100 border border-transparent flex p-4 flex-col lg:flex-row h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col justify-center flex-2 py-8 lg:px-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-2xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Our Services</h2>
<p class="mt-2 text-bravo-900 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<source media="(max-width: 1023px)" width="1200" height="750" srcset="/front-end/images/test-imagery/example11@16-10@1200w.jpg 1200w">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="1200" data-sizes="auto" data-srcset=",/front-end/images/test-imagery/example11@1-1@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example11@1-1@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
</div>
<div class="js-component relative z-0 container component-spacer-margin">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-6xl lg:text-9xl block font-heading font-medium leading-tight text-bravo-900">Discover more</h2>
</div>
<div class="block space-y-6 md:space-y-0 md:grid md:gap-6 md:grid-cols-3 ">
<div>
<a href="#" class="bg-grey-100 hover:bg-grey-100 border border-transparent flex px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col justify-center text-center items-center flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-2xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Our Products</h2>
<p class="mt-2 text-bravo-900 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first grow-0 ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
<div>
<a href="#" class="bg-grey-100 hover:bg-grey-100 border border-transparent flex px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col justify-center text-center items-center flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-2xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Our Services</h2>
<p class="mt-2 text-bravo-900 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first grow-0 ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example11@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example11@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
<div>
<a href="#" class="bg-grey-100 hover:bg-grey-100 border border-transparent flex px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col justify-center text-center items-center flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-2xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Our Services</h2>
<p class="mt-2 text-bravo-900 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first grow-0 ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example3@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example3@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="js-component relative z-0 overflow-hidden lg:overflow-visible component-spacer-margin">
<div class="container ">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-6xl lg:text-9xl block font-heading font-medium leading-tight text-bravo-900">News & insights</h2>
</div>
<div class="w-full splide" data-vanilla-module="Slider" data-splide='{"perPage":1,"mediaQuery":"min","pagination":true,"arrows":false,"gap":"1.5rem","padding":{"right":"4.5rem"},"breakpoints":{"768":{"perPage":2,"mediaQuery":"min","pagination":true,"arrows":false,"gap":"1.5rem","padding":{"right":"0rem"}},"1024":{"destroy":true}}}'>
<div class="splide__track !overflow-visible">
<div class="lg:!grid lg:!gap-6 lg:!grid-cols-4 splide__list">
<div class="splide__slide">
<a href="#" class="bg-white hover:bg-grey-100 border border-transparent flex px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
<ul class="mt-4 flex gap-1">
<div class="tag bg-bravo-200 text-bravo-900 w-max py-px px-2 rounded-full text-tiny font-heading uppercase">
News
</div>
</ul>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first grow-0 ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
<div class="splide__slide">
<a href="#" class="bg-white hover:bg-grey-100 border border-transparent flex px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
<ul class="mt-4 flex gap-1">
<div class="tag bg-bravo-200 text-bravo-900 w-max py-px px-2 rounded-full text-tiny font-heading uppercase">
News
</div>
</ul>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first grow-0 ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example3@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example3@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
<div class="splide__slide">
<a href="#" class="bg-white hover:bg-grey-100 border border-transparent flex px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
<ul class="mt-4 flex gap-1">
<div class="tag bg-bravo-200 text-bravo-900 w-max py-px px-2 rounded-full text-tiny font-heading uppercase">
News
</div>
</ul>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first grow-0 ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example11@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example11@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
<div class="splide__slide">
<a href="#" class="bg-white hover:bg-grey-100 border border-transparent flex px-4 pt-4 pb-6 gap-6 flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:border-grey-300 hover:shadow-card group rounded-xl">
<div class="flex relative z-10 flex-col flex-1 justify-start " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-medium leading-tight text-bravo-900 group-hover:underline group-hover:text-alpha-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
<ul class="mt-4 flex gap-1">
<div class="tag bg-charlie text-bravo-900 w-max py-px px-2 rounded-full text-tiny font-heading uppercase">
Event
</div>
</ul>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first grow-0 ">
<div class="w-full h-full">
<picture class="block overflow-hidden rounded-lg w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
{% render "@hero-variant-1--gradient-alpha", hero, true %}
{% for component in componentsList %}
{% render "@" + component.name, component.data, true %}
{% endfor %}
{
"siteName": "BIR Pattern Library",
"pageName": "Home",
"hero": {
"heading": "Welcome",
"caption": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut purus dictum, sodales nunc at, porta orci.",
"image": {
"src": "images/test-imagery/example7@16-10@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example7@16-10@1200w.jpg",
"size": 1200
}
],
"mdMax": {
"width": 1920,
"height": 720,
"srcSet": [
{
"url": "images/test-imagery/example7@16-6@2000w.jpg",
"size": 1200
}
]
},
"smMax": {
"width": 1200,
"height": 750,
"srcSet": [
{
"url": "images/test-imagery/example7@16-10@1200w.jpg",
"size": 1200
}
]
}
},
"link": {
"text": "Find out more",
"url": "./about-us"
}
},
"componentsList": [
{
"name": "summary-card-list-component"
},
{
"name": "media-content-panel-style-1-component"
},
{
"name": "media-content-panel-style-1-component--contrast-bg"
},
{
"name": "cta-card-list-style-2-component"
},
{
"name": "cta-card-list-style-1-component"
},
{
"name": "featured-article-card-list-component"
}
]
}
No notes defined.