<!DOCTYPE html>
<html class="min-h-full" lang="en-GB">
<head>
<title>MentorKit Pattern Library</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link rel="icon" type="image/png" href="/front-end/images/favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/front-end/images/favicon/favicon.svg" />
<link rel="shortcut icon" href="/front-end/images/favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/front-end/images/favicon/apple-touch-icon.png" />
<link rel="manifest" href="/front-end/images/favicon/site.webmanifest" />
<script type="module" src="/front-end/assets/main-B1aWb94_.js"></script>
<script type="module" src="/front-end/assets/contentListingApp-tVV_wVv5.js"></script>
<link href="/front-end/assets/styles-DqlvlLdA.css" rel="stylesheet">
</head>
<body class="font-body flex flex-col min-h-screen text-grey-800 overflow-x-hidden">
<a href="#main-content" class="focus:block sr-only focus:not-sr-only focus:z-50 focus:bg-alpha focus:p-4 focus:border-2 focus:border-white focus:text-white focus:absolute focus:top-2 focus:left-2 focus:shadow-sm">
Skip to content
</a>
<div class="bg-bravo py-3 hidden relative lg:block z-30 flex-shrink-0 flex-grow-0">
<div class="container">
<ul class="flex justify-end space-x-10">
<li class="relative">
<a class="text-white text-xs flex items-center font-semibold hover:underline" href="./login.html">
<div class="w-4 h-4 mr-1.5">
<svg class="w-full h-full fill-current text-white" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-user"></use>
</svg>
</div>
Login
</a>
</li>
<li class="relative">
<a class="text-white text-xs flex items-center font-semibold hover:underline" href="./contact-us.html">
Contact us
</a>
</li>
</ul>
</div>
</div>
<header class="js-header sticky top-0 w-full z-20 transform ease-in-out duration-500 shadow-nav flex-shrink-0 flex-grow-0" data-vanilla-module="StickyHeader">
<div class="bg-white py-7 relative">
<div class="container">
<div class="flex flex-row justify-between items-stretch">
<a href="./index.html" class="flex items-center justify-center w-24 lg:w-auto">
<img src="/front-end/images/logo.svg" class="" alt="Starter Kit - VNext" width="60" height="43" />
</a>
<div class="flex items-center lg:items-stretch lg:justify-end lg:flex-1 lg:pl-4">
<div class="items-center flex lg:hidden mr-4">
<div>
<a href="" class="btn border-2 border-bravo text-bravo hover:bg-bravo hover:text-white">
Call to action
</a>
</div>
<div class="flex items-center ml-3">
<button class="block w-5 h-5 lg:w-4 lg:h-4" data-micromodal-trigger="search-modal">
<span class="sr-only">
Open Search Modal
</span>
<svg class="fill-current w-full h-full text-bravo transition-colors ease-in-out duration-300 hover:text-alpha" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-search"></use>
</svg>
</button>
</div>
</div>
<button aria-controls="menu" aria-expanded="false" data-vanilla-module="MobileMenuToggle" class="w-8 h-6 block relative transform lg:hidden text-bravo group" data-state="off">
<span aria-hidden="true" class="block rounded-md absolute h-1 w-8 bg-current transform transition duration-500 ease-in-out group-data-[state=off]:-translate-y-2 group-data-[state=on]:rotate-45"></span>
<span aria-hidden="true" class="block rounded-md absolute h-1 w-8 bg-current transform transition duration-500 ease-in-out group-data-[state=on]:opacity-0"></span>
<span aria-hidden="true" class="block rounded-md absolute h-1 w-8 bg-current transform transition duration-500 ease-in-out group-data-[state=off]:translate-y-2 group-data-[state=on]:-rotate-45"></span>
<span class="sr-only">Toggle Menu</span>
</button>
<nav id="menu" data-vanilla-module="Menu" class="items-center h-[calc(100dvh-var(--mobile-header-height))] hidden absolute overflow-hidden lg:overflow-visible z-50 top-full left-0 bg-grey-100 w-full lg:h-auto lg:flex lg:bg-transparent lg:static lg:p-0 lg:left-auto lg:w-auto">
<div class="overflow-y-auto lg:overflow-visible h-full js-menu-overlay">
<ul class="bg-white overflow-y-auto lg:bg-transparent lg:h-full lg:flex lg:items-center lg:overflow-visible">
<li class="js-menu-item border-b border-grey-400 lg:pr-6 xl:pr-12 lg:last:pr-0 lg:border-b-0 flex justify-between lg:h-full lg:items-center group ">
<a class="font-semibold hover:bg-grey-100 h-full relative py-3 px-4 flex flex-1 items-center hover:bg-alpha-dark text-3xl transition duration-150 text-grey-800 lg:p-0 lg:hover:bg-transparent lg:text-base lg:after:transition-opacity lg:after:duration-300 lg:after:ease-in-out lg:after:w-full lg:after:absolute lg:after:h-1 lg:after:-bottom-7 lg:after:bg-alpha lg:group-hover:text-alpha lg:after:opacity-0 " href="./about-us.html">About us</a>
</li>
<li class="js-menu-item border-b border-grey-400 lg:pr-6 xl:pr-12 lg:last:pr-0 lg:border-b-0 flex justify-between lg:h-full lg:items-center group ">
<a class="font-semibold hover:bg-grey-100 h-full relative py-3 px-4 flex flex-1 items-center hover:bg-alpha-dark text-3xl transition duration-150 text-grey-800 lg:p-0 lg:hover:bg-transparent lg:text-base lg:after:transition-opacity lg:after:duration-300 lg:after:ease-in-out lg:after:w-full lg:after:absolute lg:after:h-1 lg:after:-bottom-7 lg:after:bg-alpha lg:group-hover:text-alpha lg:after:opacity-0 " href="./products.html">Products</a>
<button class="js-mobile-second-level-trigger-forward transition lg:hidden p-4 border-l border-grey-400 hover:bg-grey-300 bg-white" aria-expanded="false" aria-controls="mega-menu-2" aria-haspopup="true">
<span class="sr-only">
Open Second Level
</span>
<div class="h-6 w-6">
<svg class="w-full h-full fill-current text-bravo transform" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-arrow"></use>
</svg>
</div>
</button>
<div id="second-level-menu-products" class="js-second-level-panel invisible lg:visible z-50 transition-transform duration-300 bg-grey-100 absolute translate-x-full w-full h-full top-0 lg:top-full left-0 lg:pt-7 lg:overflow-y-visible lg:bg-transparent lg:h-auto lg:-translate-y-7 lg:opacity-0 lg:-translate-x-full lg:transition-none lg:z-40 group-hover:opacity-100 lg:group-hover:translate-x-0 lg:focus-within:opacity-100 lg:focus-within:translate-x-0">
<div class="overflow-y-auto lg:overflow-visible h-full">
<div class="h-full lg:h-auto z-20 lg:relative lg:bg-grey-100 lg:shadow-top-light">
<div class="h-full lg:h-auto lg:container lg:py-12 lg:group-hover:animate-fadeQuick">
<button class="js-mobile-second-level-trigger-back w-full lg:hidden bg-white p-4 flex items-center text-grey-800" aria-controls="second-level-menu-products" aria-expanded="false" aria-controls="second-level-menu-products">
<div class="w-4 h-4 mr-4">
<svg class="w-full h-full fill-current text-bravo transform rotate-90" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-chevron"></use>
</svg>
</div>
<span class="hover:underline">
Back
</span>
</button>
<div class="px-4 pb-3 font-semibold text-3xl border-b border-grey-400 lg:border-b bg-white text-grey-800 lg:hidden">
Products
</div>
<div class="space-y-4 lg:space-y-0 lg:grid lg:grid-cols-12 lg:gap-12">
<div class="lg:col-span-3">
<ul>
<li>
<h2 class="flex font-heading font-bold leading-tight lg:block lg:border-b lg:border-grey-400 lg:text-bravo lg:mb-5 lg:pb-2">
<span class="flex-1 py-2 px-4 lg:p-0 text-2xl lg:text-xl lg:block">Our Products</span>
</h2>
<div class="overflow-y-auto lg:overflow-visible h-full w-full">
<div class="lg:flex lg:space-x-8">
<ul class="lg:flex-1">
<li class="lg:mb-2">
<a class="text-xl hover:bg-white block lg:inline-block px-4 py-2 lg:p-0 lg:text-sm xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">Product 1</a>
</li>
<li class="lg:mb-2">
<a class="text-xl hover:bg-white block lg:inline-block px-4 py-2 lg:p-0 lg:text-sm xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">Product 2</a>
</li>
<li class="lg:mb-2">
<a class="text-xl hover:bg-white block lg:inline-block px-4 py-2 lg:p-0 lg:text-sm xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">Product 3</a>
</li>
<li class="lg:mb-2">
<a class="text-xl hover:bg-white block lg:inline-block px-4 py-2 lg:p-0 lg:text-sm xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">Product 4</a>
</li>
<li class="lg:mb-2">
<a class="text-xl hover:bg-white block lg:inline-block px-4 py-2 lg:p-0 lg:text-sm xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">Product 5</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="lg:col-span-6">
<ul>
<li>
<h2 class="flex font-heading font-bold leading-tight lg:block lg:border-b lg:border-grey-400 lg:text-bravo lg:mb-5 lg:pb-2">
<span class="flex-1 py-2 px-4 lg:p-0 text-2xl lg:text-xl lg:block">Services</span>
</h2>
<div class="overflow-y-auto lg:overflow-visible h-full w-full">
<div class="lg:flex lg:space-x-8">
<ul class="lg:flex-1">
<li class="lg:mb-2">
<a class="text-xl hover:bg-white block lg:inline-block px-4 py-2 lg:p-0 lg:text-sm xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">Service 1</a>
</li>
<li class="lg:mb-2">
<a class="text-xl hover:bg-white block lg:inline-block px-4 py-2 lg:p-0 lg:text-sm xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">Service 2</a>
</li>
<li class="lg:mb-2">
<a class="text-xl hover:bg-white block lg:inline-block px-4 py-2 lg:p-0 lg:text-sm xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">Service 3</a>
</li>
<li class="lg:mb-2">
<a class="text-xl hover:bg-white block lg:inline-block px-4 py-2 lg:p-0 lg:text-sm xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">Service 4</a>
</li>
<li class="lg:mb-2">
<a class="text-xl hover:bg-white block lg:inline-block px-4 py-2 lg:p-0 lg:text-sm xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">Service 5</a>
</li>
</ul>
<ul class="lg:flex-1">
<li class="lg:mb-2">
<a class="text-xl hover:bg-white block lg:inline-block px-4 py-2 lg:p-0 lg:text-sm xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">Service 6</a>
</li>
<li class="lg:mb-2">
<a class="text-xl hover:bg-white block lg:inline-block px-4 py-2 lg:p-0 lg:text-sm xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">Service 7</a>
</li>
<li class="lg:mb-2">
<a class="text-xl hover:bg-white block lg:inline-block px-4 py-2 lg:p-0 lg:text-sm xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">Service 8</a>
</li>
<li class="lg:mb-2">
<a class="text-xl hover:bg-white block lg:inline-block px-4 py-2 lg:p-0 lg:text-sm xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">Service 9</a>
</li>
<li class="lg:mb-2">
<a class="text-xl hover:bg-white block lg:inline-block px-4 py-2 lg:p-0 lg:text-sm xl:text-base lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">Service 10</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="flex-grow-0 p-4 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">
<h2 class="font-heading font-bold leading-tight text-lg lg:text-xl font lg:border-b lg:border-grey-400 text-bravo mb-5 lg:pb-2">
Featured
</h2>
<a class="bg-white p-6 block rounded-md transition ease-in-out duration-150 hover:shadow-xl" href="./index.html">
<div class="mb-4">
<picture class="block overflow-hidden rounded-md 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>
<h2 class="text-bravo font-semibold mb-1">Our main service</h2>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="js-menu-item border-b border-grey-400 lg:pr-6 xl:pr-12 lg:last:pr-0 lg:border-b-0 flex justify-between lg:h-full lg:items-center group ">
<a class="font-semibold hover:bg-grey-100 h-full relative py-3 px-4 flex flex-1 items-center hover:bg-alpha-dark text-3xl transition duration-150 text-grey-800 lg:p-0 lg:hover:bg-transparent lg:text-base lg:after:transition-opacity lg:after:duration-300 lg:after:ease-in-out lg:after:w-full lg:after:absolute lg:after:h-1 lg:after:-bottom-7 lg:after:bg-alpha lg:group-hover:text-alpha lg:after:opacity-0 " href="./article-list.html">News & insights</a>
</li>
<li class="js-menu-item border-b border-grey-400 lg:pr-6 xl:pr-12 lg:last:pr-0 lg:border-b-0 flex justify-between lg:h-full lg:items-center group ">
<a class="font-semibold hover:bg-grey-100 h-full relative py-3 px-4 flex flex-1 items-center hover:bg-alpha-dark text-3xl transition duration-150 text-grey-800 lg:p-0 lg:hover:bg-transparent lg:text-base lg:after:transition-opacity lg:after:duration-300 lg:after:ease-in-out lg:after:w-full lg:after:absolute lg:after:h-1 lg:after:-bottom-7 lg:after:bg-alpha lg:group-hover:text-alpha lg:after:opacity-0 " href="./event-list.html">Events</a>
</li>
</ul>
<ul class="lg:hidden">
<li>
<a class="flex px-4 my-4 text-xl hover:underline" href="./login.html">
Login
<div class="w-6 h-6 ml-1.5">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-user"></use>
</svg>
</div>
</a>
</li>
<li>
<a class="flex px-4 my-4 text-xl hover:underline" href="./contact-us.html">
Contact us
<div class="w-6 h-6 ml-1.5">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg#"></use>
</svg>
</div>
</a>
</li>
</ul>
</div>
<div class="before:shadow-top-mid before:w-full before:h-4 before:absolute before:top-0 before:left-0 lg:before:hidden before:z-50 pointer-events-none"></div>
</nav>
<div class="items-center ml-10 hidden lg:flex">
<div class="flex items-center">
<button class="block w-5 h-5 lg:w-4 lg:h-4" data-micromodal-trigger="search-modal">
<span class="sr-only">
Open Search Modal
</span>
<svg class="fill-current w-full h-full text-bravo transition-colors ease-in-out duration-300 hover:text-alpha" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-search"></use>
</svg>
</button>
</div>
<div class="ml-6">
<a href="" class="btn border-2 border-bravo text-bravo hover:bg-bravo hover:text-white">
Call to action
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="fixed bg-black/70 z-50 -inset-0 hidden overflow-auto" id="search-modal" aria-hidden="true" data-vanilla-module="Modal">
<div tabindex="-1" class="w-full h-full flex px-4 py-12 lg:px-8" data-micromodal-close>
<div class="js-model-content w-full md:max-w-screen-md m-auto" role="dialog" aria-modal="true">
<div class="flex justify-end pb-4">
<button class="w-10 h-10 border-white group transition ease-in-out duration-300 hover:bg-white border rounded-full z-20 flex items-center justify-center" aria-label="Close modal" data-micromodal-close>
<svg class="fill-current w-5 h-5 text-white group-hover:text-bravo pointer-events-none">
<use href="/front-end/sprite.svg#icon-close"></use>
</svg>
<span class="sr-only">Close Search Modal</span>
</button>
</div>
<div class="js-model-content flex flex-col items-center justify-center z-10 relative bg-white p-8 shadow-xl w-full rounded-md" role="dialog" aria-modal="true">
<main class="w-full">
<form action="./search-results.html" class="pb-2">
<label class="block text-center text-4xl mb-2 text-bravo" for="modalSearchTerm">Search</label>
<div class="flex justify-center w-full items-stretch">
<div class="flex-1 mr-4">
<input class="w-full p-4 focus:ring-0 border-0 transition-colors focus:border-0 ease-in-out duration-300 focus:outline-none bg-grey-100" id="modalSearchTerm" name="searchTerm" placeholder="Search term" type="text" value="">
</div>
<button>
<span class="sr-only">Search site</span>
<div class="w-6 h-6">
<svg class="fill-current w-full h-full text-bravo transition-colors ease-in-out duration-300 hover:text-alpha">
<use href="/front-end/sprite.svg#icon-search"></use>
</svg>
</div>
</button>
</div>
</form>
</main>
</div>
</div>
</div>
</div>
<div id="main-content" class="js-main-content relative flex-grow z-[5]">
</div>
<footer class="text-white bg-bravo relative z-0 grid grid-rows-1 grid-cols-1 flex-shrink-0 flex-grow-0">
<div class="footer container md:grid md:grid-cols-12 md:auto-rows-auto py-16 h-full gap-x-6 relative z-10 row-start-1 row-end-2 col-start-1 col-end-2">
<div class="mb-6 row-start-1 row-end-2 md:col-start-1 md:col-end-5 lg:col-start-1 lg:col-end-3 xl:col-start-1 xl:col-end-5">
<a href="./index.html" class="flex items-center lg:block w-24 lg:w-auto">
<img src="/front-end/images/logo.svg" class="invert brightness-0" alt="Starter VNext" width="100" height="72" />
</a>
</div>
<div class="mb-6 row-start-1 row-end-2 md:col-start-5 md:col-end-9 lg:col-start-3 lg:col-end-6 xl:col-start-5 xl:col-end-7">
<p class="font-bold pb-3">Legal</p>
<ul class="">
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200" href="./about-us.html">Privacy</a>
</li>
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200" href="./sustainability.html">Cookie policy</a>
</li>
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200" href="./sustainability.html">Terms and Conditions</a>
</li>
</ul>
</div>
<div class="mb-6 row-start-1 row-end-2 md:col-start-9 md:col-end-13 lg:col-start-6 lg:col-end-9 xl:col-start-7 xl:col-end-9">
<p class="font-bold pb-3">Company</p>
<ul class="">
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200" href="./about-us.html">Privacy</a>
</li>
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200" href="./sustainability.html">Cookie policy</a>
</li>
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200" href="./sustainability.html">Terms and Conditions</a>
</li>
</ul>
</div>
<div class="mb-6 flex gap-3 flex-wrap md:justify-center lg:justify-end md:row-start-2 md:row-end-3 md:col-start-1 md:col-end-13 lg:row-start-1 lg:row-end-2 lg:col-start-9 lg:col-end-13">
<div>
<a class="w-10 h-10 flex items-center justify-center rounded-full transition-colors ease-in-out duration-300 bg-alpha hover:bg-alpha-800" href="./.html">
<div class="relative flex justify-center items-center transition ease-in duration-200">
<div class="w-5 h-5">
<svg class="w-full h-full fill-current text-white" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-facebook"></use>
</svg>
</div>
</div>
<span class="sr-only">Open Facebook (opens in new window)</span>
</a>
</div>
<div>
<a class="w-10 h-10 flex items-center justify-center rounded-full transition-colors ease-in-out duration-300 bg-alpha hover:bg-alpha-800" href="./.html">
<div class="relative flex justify-center items-center transition ease-in duration-200">
<div class="w-5 h-5">
<svg class="w-full h-full fill-current text-white" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-twitter"></use>
</svg>
</div>
</div>
<span class="sr-only">Open Twitter (opens in new window)</span>
</a>
</div>
<div>
<a class="w-10 h-10 flex items-center justify-center rounded-full transition-colors ease-in-out duration-300 bg-alpha hover:bg-alpha-800" href="./.html">
<div class="relative flex justify-center items-center transition ease-in duration-200">
<div class="w-5 h-5">
<svg class="w-full h-full fill-current text-white" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-linkedin"></use>
</svg>
</div>
</div>
<span class="sr-only">Open LinkedIn (opens in new window)</span>
</a>
</div>
<div>
<a class="w-10 h-10 flex items-center justify-center rounded-full transition-colors ease-in-out duration-300 bg-alpha hover:bg-alpha-800" href="./.html">
<div class="relative flex justify-center items-center transition ease-in duration-200">
<div class="w-5 h-5">
<svg class="w-full h-full fill-current text-white" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-youtube"></use>
</svg>
</div>
</div>
<span class="sr-only">Open Youtube (opens in new window)</span>
</a>
</div>
<div>
<a class="w-10 h-10 flex items-center justify-center rounded-full transition-colors ease-in-out duration-300 bg-alpha hover:bg-alpha-800" href="./.html">
<div class="relative flex justify-center items-center transition ease-in duration-200">
<div class="w-5 h-5">
<svg class="w-full h-full fill-current text-white" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-instagram"></use>
</svg>
</div>
</div>
<span class="sr-only">Open Instagram (opens in new window)</span>
</a>
</div>
</div>
<div class="flex items-end mt-0 sm:mt-4 md:mt-0 md:justify-center lg:justify-end flex-wrap md:row-start-3 md:row-end-4 xl:row-start-2 xl:row-end-3 md:col-start-1 md:col-end-13">
<p class="mr-6">© 2022 MentorKit</p>
<p>Site by <a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200" target="blank" href="https://www.mentordigital.co.uk">Mentor Digital</a></p>
</div>
</div>
</footer>
<div data-vanilla-module="Overlay" class="hidden fixed z-10 inset-0 w-full h-screen bg-black opacity-50"></div>
</body>
</html>
<!DOCTYPE html>
<html class="min-h-full" lang="en-GB">
<head>
<title>{{ siteName }}</title>
{% render "@meta" %}
{% render "@js" %}
{% render "@css" %}
</head>
<body class="font-body flex flex-col min-h-screen text-grey-800 overflow-x-hidden">
<a href="#main-content" class="focus:block sr-only focus:not-sr-only focus:z-50 focus:bg-alpha focus:p-4 focus:border-2 focus:border-white focus:text-white focus:absolute focus:top-2 focus:left-2 focus:shadow-sm">
Skip to content
</a>
{% render "@global-header", { title: siteName, pageTitle: _target.context.pageName, navItems: navItems, quickLinks: quickLinks, dropDownButtons: dropDownButtons } %}
<div id="main-content" class="js-main-content relative flex-grow z-[5]">
{{ yield | safe }}
</div>
{% render "@global-footer" %}
<div data-vanilla-module="Overlay" class="hidden fixed z-10 inset-0 w-full h-screen bg-black opacity-50"></div>
</body>
</html>
{
"siteName": "MentorKit Pattern Library",
"quickLinks": [
{
"name": "Login",
"url": "./login",
"icon": "icon-user"
},
{
"name": "Contact us",
"url": "./contact-us"
}
],
"navItems": [
{
"menu_item": "About us",
"url": "./about-us"
},
{
"menu_item": "Products",
"url": "./products",
"megaList": [
{
"component": "mega-secondary-list",
"data": {
"colHeading": "Our Products",
"columns": [
{
"list": [
{
"url": "./index",
"name": "Product 1"
},
{
"url": "./index",
"name": "Product 2"
},
{
"url": "./index",
"name": "Product 3"
},
{
"url": "./index",
"name": "Product 4"
},
{
"url": "./index",
"name": "Product 5"
}
]
}
]
}
},
{
"component": "mega-secondary-list",
"data": {
"colHeading": "Services",
"columns": [
{
"list": [
{
"url": "./index",
"name": "Service 1"
},
{
"url": "./index",
"name": "Service 2"
},
{
"url": "./index",
"name": "Service 3"
},
{
"url": "./index",
"name": "Service 4"
},
{
"url": "./index",
"name": "Service 5"
}
]
},
{
"list": [
{
"url": "./index",
"name": "Service 6"
},
{
"url": "./index",
"name": "Service 7"
},
{
"url": "./index",
"name": "Service 8"
},
{
"url": "./index",
"name": "Service 9"
},
{
"url": "./index",
"name": "Service 10"
}
]
}
]
}
},
{
"component": "mega-card",
"data": {
"colHeading": "Featured",
"url": "./index",
"heading": "Our main service",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor",
"image": {
"src": "images/test-imagery/example1@16-9@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example1@16-9@1200w.jpg",
"size": "1200"
}
]
}
}
}
]
},
{
"menu_item": "News & insights",
"url": "./article-list"
},
{
"menu_item": "Events",
"url": "./event-list"
}
]
}
No notes defined.