<div class="js-component bg-grey-50">
<div class="flex flex-col lg:flex-auto lg:grid lg:breakout-screen-lg xl:breakout-screen-xl 2xl:breakout-screen-2xl">
<div class="w-full order-last lg:order-none lg:row-start-1 lg:col-start-2 lg:col-end-8 relative z-10 flex items-center align-end lg:py-14 xsm:max-w-screen-xsm sm:max-w-screen-sm md:max-w-screen-md lg:max-w-none mx-auto lg:mx-0">
<div class="text-center items-center lg:items-start lg:text-left flex flex-col w-full pt-8 pb-16 lg:pt-0 lg:pb-0 lg:mt-0 px-4 xl:px-6">
<h1 class="text-4xl lg:text-4xl xl:text-7xl font-bold font-heading leading-tight text-grey-800">Welcome</h1>
<div class="block prose xl:prose-xl mt-8 ">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut purus dictum, sodales nunc at, porta orci.</p>
</div>
<div class="mt-6">
<a href="./about-us.html" class="btn bg-alpha text-white border-2 border-alpha hover:border-alpha-800 hover:bg-alpha-800">
Find out more
</a>
</div>
</div>
</div>
<div class="order-first lg:order-none lg:row-start-1 lg:col-start-8 lg:col-end-16 relative z-0 lg:angled-mask">
<div class="aspect-[16/10] md:aspect-[16/6] lg:aspect-[16/10]"></div>
<video preload="none" class="lazyload absolute object-cover w-full h-full top-0 left-0" muted autoplay loop playsinline>
<source src="https://player.vimeo.com/external/392924695.hd.mp4?s=5abd506422ab485f2e2174982ef5c07b2e309e38&profile_id=175" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="container relative">
<div class="max-w-screen-xl mx-auto">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-6xl block font-heading font-bold leading-tight text-bravo">Lorem ipsum dolor</h2>
<div class="prose xl:prose-lg mt-4 lg:mt-6 max-w-screen-sm mx-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="space-y-6 md:space-y-0 md:justify-center md:flex md:flex-wrap">
<div class="md:p-4 flex justify-center md:w-6/12 lg:w-4/12">
<a href="" class="flex flex-col items-center justify-center max-w-xs mx-auto md:mx-0 group">
<div class="w-32 h-32 bg-alpha relative flex rounded-full justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300 group-hover:bg-alpha-800 group-hover:shadow-xl" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInUp">
<div class="absolute w-2/4 h-auto">
<div class="w-full h-16">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<h2 class="text-center font-heading font-bold leading-tight text-2xl">Lorem ipsum dolor</h2>
</div>
<div class="prose text-center pt-3">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.</p>
</div>
</a>
</div>
<div class="md:p-4 flex justify-center md:w-6/12 lg:w-4/12">
<a href="" class="flex flex-col items-center justify-center max-w-xs mx-auto md:mx-0 group">
<div class="w-32 h-32 bg-alpha relative flex rounded-full justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300 group-hover:bg-alpha-800 group-hover:shadow-xl" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInUp">
<div class="absolute w-2/4 h-auto">
<div class="w-full h-16">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<h2 class="text-center font-heading font-bold leading-tight text-2xl">Lorem ipsum dolor</h2>
</div>
<div class="prose text-center pt-3">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.</p>
</div>
</a>
</div>
<div class="md:p-4 flex justify-center md:w-6/12 lg:w-4/12">
<a href="" class="flex flex-col items-center justify-center max-w-xs mx-auto md:mx-0 group">
<div class="w-32 h-32 bg-alpha relative flex rounded-full justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300 group-hover:bg-alpha-800 group-hover:shadow-xl" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInUp">
<div class="absolute w-2/4 h-auto">
<div class="w-full h-16">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<h2 class="text-center font-heading font-bold leading-tight text-2xl">Lorem ipsum dolor</h2>
</div>
<div class="prose text-center pt-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.</p>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="max-w-[1532px] mx-auto ">
<div class="container">
<div class="lg:flex w-full">
<div class="lg:flex-1 lg:w-6/12 flex flex-col justify-center align-center mb-8 lg:mb-0 lg:pr-12">
<div>
<h2 class="text-4xl mb-8 font-heading font-bold leading-tight text-bravo"> Ut bibendum dui leo, non consectetur nisl auctor sed.</h2>
<div class="mb-8 max-w-none prose xl:prose-lg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum dui leo, non consectetur nisl auctor sed. Curabitur tempor, dolor ac imperdiet fermentum, ipsum neque volutpat est, ac aliquet tellus enim non tortor. In hac habitasse platea dictumst. Cras pellentesque convallis nisi, at pretium diam auctor et. Sed placerat lobortis dictum. Aliquam ut tellus porttitor, porttitor dui blandit, bibendum nunc. Vivamus gravida dolor dui.</p>
</div>
<div class="flex gap-4 flex-wrap">
<div>
<a href="./index.html" class="btn bg-alpha text-white border-2 border-alpha hover:border-alpha-800 hover:bg-alpha-800">
Find out more
</a>
</div>
</div>
</div>
</div>
<div class="lg:flex-1 lg:w-6/12 flex relative justify-center align-center lg:mx-0">
<div class="relative w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-md w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-10@1200w.jpg">
</picture>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="max-w-[1532px] mx-auto component-spacer-padding bg-grey-50">
<div class="container">
<div class="lg:flex w-full">
<div class="lg:flex-1 lg:w-6/12 flex flex-col justify-center align-center mb-8 lg:mb-0 lg:order-last lg:pl-12">
<div>
<h2 class="text-4xl mb-8 font-heading font-bold leading-tight text-bravo"> Ut bibendum dui leo, non consectetur nisl auctor sed.</h2>
<div class="mb-8 max-w-none prose xl:prose-lg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum dui leo, non consectetur nisl auctor sed. Curabitur tempor, dolor ac imperdiet fermentum, ipsum neque volutpat est, ac aliquet tellus enim non tortor. In hac habitasse platea dictumst. Cras pellentesque convallis nisi, at pretium diam auctor et. Sed placerat lobortis dictum. Aliquam ut tellus porttitor, porttitor dui blandit, bibendum nunc. Vivamus gravida dolor dui.</p>
</div>
<div class="flex gap-4 flex-wrap">
<div>
<a href="./index.html" class="btn bg-bravo text-white border-2 border-bravo hover:border-bravo-600 hover:bg-bravo-600">
Find out more
</a>
</div>
</div>
</div>
</div>
<div class="lg:flex-1 lg:w-6/12 flex relative justify-center align-center lg:mx-0">
<div class="relative w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-md w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example2@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-10@1200w.jpg">
</picture>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 container component-spacer-margin">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-6xl block font-heading font-bold leading-tight text-bravo">Products & Services</h2>
<div class="prose xl:prose-lg mt-4 lg:mt-6 max-w-screen-sm mx-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="w-full space-y-6 md:space-y-0 md:grid md:gap-6 md:grid-cols-2">
<a href="#" class="bg-grey-50 hover:bg-grey-100 border border-grey-300 flex flex-col lg:flex-row h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
<div class="flex flex-1 relative z-10 flex-col justify-center p-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Our Products</h2>
<p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first">
<div class="w-full h-full">
<picture class="block overflow-hidden w-full">
<source media="(max-width: 1023px)" width="1200" height="750" srcset="/front-end/images/test-imagery/example2@16-10@1200w.jpg 1200w">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="1200" data-sizes="auto" data-srcset=",/front-end/images/test-imagery/example1@1-1@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@1-1@1200w.jpg">
</picture>
</div>
</div>
</a>
<a href="#" class="bg-grey-50 hover:bg-grey-100 border border-grey-300 flex flex-col lg:flex-row h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
<div class="flex flex-1 relative z-10 flex-col justify-center p-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Our Services</h2>
<p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first">
<div class="w-full h-full">
<picture class="block overflow-hidden w-full">
<source media="(max-width: 1023px)" width="1200" height="750" srcset="/front-end/images/test-imagery/example2@16-10@1200w.jpg 1200w">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="1200" data-sizes="auto" data-srcset=",/front-end/images/test-imagery/example2@1-1@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@1-1@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
</div>
<div class="js-component relative z-0 container component-spacer-margin">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-6xl block font-heading font-bold leading-tight text-bravo">Discover more</h2>
</div>
<div class="block space-y-6 md:space-y-0 md:grid md:gap-6 md:grid-cols-3">
<div>
<a href="#" class="bg-grey-50 hover:bg-grey-100 border border-grey-300 flex flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
<div class="flex flex-1 relative z-10 flex-col justify-center p-8 text-center items-center" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Our Products</h2>
<p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first">
<div class="w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
<div>
<a href="#" class="bg-grey-50 hover:bg-grey-100 border border-grey-300 flex flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
<div class="flex flex-1 relative z-10 flex-col justify-center p-8 text-center items-center" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Our Services</h2>
<p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first">
<div class="w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example2@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
<div>
<a href="#" class="bg-grey-50 hover:bg-grey-100 border border-grey-300 flex flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
<div class="flex flex-1 relative z-10 flex-col justify-center p-8 text-center items-center" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Our Services</h2>
<p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first">
<div class="w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example3@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example3@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="js-component relative z-0 overflow-hidden lg:overflow-visible component-spacer-margin">
<div class="container ">
<div class="text-center mb-8 lg:mb-12">
<h2 class="text-6xl block font-heading font-bold leading-tight text-bravo">News & insights</h2>
</div>
<div class="w-full splide" data-vanilla-module="Slider" data-splide='{"perPage":1,"mediaQuery":"min","pagination":true,"arrows":false,"gap":"1.5rem","padding":{"right":"4.5rem"},"breakpoints":{"768":{"perPage":2,"mediaQuery":"min","pagination":true,"arrows":false,"gap":"1.5rem","padding":{"right":"0rem"}},"1024":{"destroy":true}}}'>
<div class="splide__track !overflow-visible">
<div class="lg:!grid lg:!gap-6 lg:!grid-cols-4 splide__list">
<div class="splide__slide">
<a href="#" class="bg-grey-50 hover:bg-grey-100 border border-grey-300 flex flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
<div class="flex flex-1 relative z-10 flex-col justify-center p-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<div class="mb-4">
<div class="tag bg-alpha text-white w-max py-1 px-4 rounded text-xs">
test
</div>
</div>
<h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first">
<div class="w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
<div class="splide__slide">
<a href="#" class="bg-grey-50 hover:bg-grey-100 border border-grey-300 flex flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
<div class="flex flex-1 relative z-10 flex-col justify-center p-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<div class="mb-4">
<div class="tag bg-alpha text-white w-max py-1 px-4 rounded text-xs">
This is a tag
</div>
</div>
<h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first">
<div class="w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example3@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example3@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
<div class="splide__slide">
<a href="#" class="bg-grey-50 hover:bg-grey-100 border border-grey-300 flex flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
<div class="flex flex-1 relative z-10 flex-col justify-center p-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<div class="mb-4">
<div class="tag bg-alpha text-white w-max py-1 px-4 rounded text-xs">
This is a tag
</div>
</div>
<h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first">
<div class="w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example2@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
<div class="splide__slide">
<a href="#" class="bg-grey-50 hover:bg-grey-100 border border-grey-300 flex flex-col h-full flex-1 transition ease-in-out duration-300 group overflow-hidden hover:shadow-xl group rounded-md">
<div class="flex flex-1 relative z-10 flex-col justify-center p-8 " data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fade">
<div class="mb-4">
<div class="tag bg-alpha text-white w-max py-1 px-4 rounded text-xs">
This is a tag
</div>
</div>
<h2 class="relative text-xl font-heading font-bold leading-tight text-bravo">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
</div>
<div class="relative z-0 grid-rows-1 grid-cols-12 flex-1 order-first">
<div class="w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@16-10@1200w.jpg">
</picture>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
{% render "@hero-variant-1", hero, true %}
{% if breadcrumbs %}
{% render "@breadcrumbs", { breadcrumbs: breadcrumbs } %}
{% endif %}
{% for component in componentsList %}
{% render "@" + component.name, component.data, true %}
{% endfor %}
{
"siteName": "MentorKit Pattern Library",
"pageName": "Home",
"hero": {
"heading": "Welcome",
"caption": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut purus dictum, sodales nunc at, porta orci.",
"image": "",
"backgroundVideo": {
"src": "https://player.vimeo.com/external/392924695.hd.mp4?s=5abd506422ab485f2e2174982ef5c07b2e309e38&profile_id=175"
},
"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.