<!DOCTYPE html>
<html class="min-h-full" lang="en-GB">
<head>
<title>Gigaclear 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="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" />
<link rel="preconnect" href="https://use.typekit.net">
<link rel="preconnect" href="https://p.typekit.net">
<script type="module" src="/front-end/assets/main-CE3wMKtF.js"></script>
<script type="module" src="/front-end/assets/contentListingApp-Dt_tWUFI.js"></script>
<link rel="stylesheet" href="https://use.typekit.net/voz5rlu.css">
<link href="/front-end/assets/styles-gDsqZJQb.css" rel="stylesheet">
</head>
<body class="font-body flex flex-col min-h-screen text-grey-800 overflow-x-hidden relative">
<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="absolute top-0 w-full h-[50px] z-30 flex-shrink-0 flex-grow-0 hidden lg:block overflow-hidden js-top-nav [&[data-nav-theme='contrast']]:bg-white" data-nav-theme="">
<div class="container relative flex justify-between">
<div class="flex relative after:bg-bravo after:absolute after:right-0 after:translate-x-full after:w-[300vw] after:h-full before:bg-bravo before:absolute before:left-0 before:-translate-x-full before:w-[300vw] before:h-full before:z-50 ">
<a href="./index.html" class="bg-bravo text-white py-3 px-7 relative z-10 rounded-br-2xl">
Home
</a>
<a href="./business.html" class="bg-bravo text-white py-3 px-7 relative z-10 rounded-bl-2xl">
Business
</a>
</div>
<ul class="flex justify-end space-x-10 py-3 border border-bravo">
<li class="relative">
<a class="text-white text-1xl lg:text-base flex items-center font-bold lg:font-extrabold hover:underline" href="./login.html">
<div class="w-5 h-5 mr-1.5">
<svg class="w-full h-full fill-current text-white" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-user"></use>
</svg>
</div>
Login
</a>
</li>
</ul>
</div>
</div>
<header data-nav-theme="" class="absolute top-0 lg:top-[50px] lg:[[data-is-sticky]]:top-0 w-full z-20 transition-transform ease-in-out duration-500 flex-shrink-0 flex-grow-0 will-change-transform" data-vanilla-module="StickyHeader">
<div class="bg-nav-bg py-7 relative lg:[[data-is-sticky]_&]:shadow-nav">
<div class="container">
<div class="flex flex-row justify-between items-stretch">
<a href="./index.html" class="flex items-center justify-center w-36 lg:w-44 xl:w-48 2xl:w-auto invert brightness-0 [[data-nav-theme='contrast']_&]:invert-0 [[data-nav-theme='contrast']_&]:brightness-100">
<img src="/front-end/images/logo.svg" class="" alt="Gigaclear" width="250" height="47" />
</a>
<div class="flex items-center lg:items-stretch lg:justify-end lg:flex-1 lg:pl-4">
<button aria-controls="menu" aria-expanded="false" data-vanilla-module="MobileMenuToggle" class="w-8 h-6 block relative transform lg:hidden text-nav-fg 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="bg-nav-bg items-center h-[calc(100dvh-var(--mobile-header-height))] hidden absolute overflow-hidden lg:overflow-visible z-50 top-full left-0 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 flex">
<div class="max-lg:container">
<ul class="overflow-y-auto lg:bg-transparent lg:h-full lg:flex lg:items-center lg:overflow-visible">
<li class="js-menu-item lg:pr-[clamp(1.25rem,2vw,2.25rem)] lg:last:pr-0 lg:border-b-0 flex justify-between lg:h-full lg:items-center ">
<button class="js-mobile-second-level-trigger-forward font-bold text-nav-fg h-full relative py-3 flex flex-1 items-center text-3xl transition duration-150 lg:p-0 lg:text-[clamp(0.9rem,0.9vw+0.25rem,1.125rem)] hover:bg-alpha-dark lg:hover:bg-transparent 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-2 lg:after:bg-nav-fg lg:before:transition-opacity lg:before:duration-300 lg:before:ease-in-out lg:before:w-full lg:before:absolute lg:before:h-1 lg:before:-bottom-2 lg:before:bg-transparent lg:hover:before:bg-nav-fg lg:after:opacity-0" aria-expanded="false" aria-controls="second-level-menu-business-types" aria-haspopup="true">
Business types
<div class="w-3 h-3 ml-2 mt-0.5 hidden lg:block transition-transform duration-200 [[aria-expanded='true']_&]:rotate-180">
<svg class="w-full h-full fill-current text-current text-nav-arrow" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
<div class="h-10 w-10 pl-3 border-l border-l-nav-fg ml-auto lg:hidden">
<svg class="w-full h-full fill-current transform text-nav-arrow" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-arrow"></use>
</svg>
</div>
</button>
<div id="second-level-menu-business-types" class="js-second-level-panel invisible lg:invisible z-50 transition-transform duration-300 bg-white 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-0 lg:transition-none lg:z-40 lg:data-[open]:visible lg:data-[open]:opacity-100">
<div class="overflow-y-auto lg:overflow-visible h-full lg:[[data-nav-theme='contrast']_&]:border-t lg:[[data-nav-theme='contrast']_&]:border-t-grey-200">
<div class="max-lg:container">
<div class="h-full lg:h-auto z-20 lg:relative lg:bg-white">
<div class="h-full lg:h-auto lg:container lg:py-12">
<button class="js-mobile-second-level-trigger-back w-full lg:hidden bg-white py-4 flex items-center text-nav-fg" aria-controls="second-level-menu-business-types" aria-expanded="false">
<div class="w-5 h-5 mr-3">
<svg class="w-full h-full fill-current text-nav-arrow transform rotate-90" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
<div class="font-semibold text-3xl bg-white text-nav-fg lg:hidden hover:underline">
Business types
</div>
</button>
<div class="pt-6 lg:pt-0 space-y-4 lg:space-y-0 lg:grid lg:grid-cols-12 lg:gap-12 border-t border-t-grey-200 lg:border-0">
<div class="lg:col-span-3">
<ul>
<li>
<h2 class="flex font-heading font-extrabold leading-tight text-nav-fg lg:block lg:text-bravo lg:mb-2 lg:pb-2">
<span class="flex-1 py-2 lg:p-0 text-3xl lg:text-2xl 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-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg 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-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg 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-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg 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-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg 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-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg 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>
<div class="mt-8 mb-2 lg:mb-0 lg:mt-10 lg:px-0">
<a href="" 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">
View all
</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>
</li>
</ul>
</div>
<div class="lg:col-span-6">
<ul>
<li>
<h2 class="flex font-heading font-extrabold leading-tight text-nav-fg lg:block lg:text-bravo lg:mb-2 lg:pb-2">
<span class="flex-1 py-2 lg:p-0 text-3xl lg:text-2xl 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-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg 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-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg 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-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg 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-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg 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-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg 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-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg 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-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg 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-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg 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-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg 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-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg 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 py-4 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">
<h2 class="font-heading font-extrabold leading-tight text-2xl text-bravo mb-2 lg:pb-2">
Featured
</h2>
<a class="bg-grey-50 px-4 py-4 xl:px-6 xl:py-7 shadow-card block rounded-lg border border-grey-200 hover:cta-gradient-border relative overflow-hidden group" href="./index.html">
<div class="bg-brand-gradient-2 absolute top-0 left-0 w-full h-26 angled-mask-mega-card z-0"></div>
<div class="mb-4 xl:mb-7 relative z-10 rounded-md overflow-hidden">
<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>
<h2 class="text-bravo font-extrabold mb-3 text-xl xl:text-xl">Our main service</h2>
<p class="text-grey-600 leading-snug text-base xl:text-lg"> Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor </p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="js-menu-item lg:pr-[clamp(1.25rem,2vw,2.25rem)] lg:last:pr-0 lg:border-b-0 flex justify-between lg:h-full lg:items-center ">
<button class="js-mobile-second-level-trigger-forward font-bold text-nav-fg h-full relative py-3 flex flex-1 items-center text-3xl transition duration-150 lg:p-0 lg:text-[clamp(0.9rem,0.9vw+0.25rem,1.125rem)] hover:bg-alpha-dark lg:hover:bg-transparent 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-2 lg:after:bg-nav-fg lg:before:transition-opacity lg:before:duration-300 lg:before:ease-in-out lg:before:w-full lg:before:absolute lg:before:h-1 lg:before:-bottom-2 lg:before:bg-transparent lg:hover:before:bg-nav-fg lg:after:opacity-0" aria-expanded="false" aria-controls="second-level-menu-news-&-insights" aria-haspopup="true">
News & Insights
<div class="w-3 h-3 ml-2 mt-0.5 hidden lg:block transition-transform duration-200 [[aria-expanded='true']_&]:rotate-180">
<svg class="w-full h-full fill-current text-current text-nav-arrow" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
<div class="h-10 w-10 pl-3 border-l border-l-nav-fg ml-auto lg:hidden">
<svg class="w-full h-full fill-current transform text-nav-arrow" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-arrow"></use>
</svg>
</div>
</button>
<div id="second-level-menu-news-&-insights" class="js-second-level-panel invisible lg:invisible z-50 transition-transform duration-300 bg-white 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-0 lg:transition-none lg:z-40 lg:data-[open]:visible lg:data-[open]:opacity-100">
<div class="overflow-y-auto lg:overflow-visible h-full lg:[[data-nav-theme='contrast']_&]:border-t lg:[[data-nav-theme='contrast']_&]:border-t-grey-200">
<div class="max-lg:container">
<div class="h-full lg:h-auto z-20 lg:relative lg:bg-white">
<div class="h-full lg:h-auto lg:container lg:py-12">
<button class="js-mobile-second-level-trigger-back w-full lg:hidden bg-white py-4 flex items-center text-nav-fg" aria-controls="second-level-menu-news-&-insights" aria-expanded="false">
<div class="w-5 h-5 mr-3">
<svg class="w-full h-full fill-current text-nav-arrow transform rotate-90" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
<div class="font-semibold text-3xl bg-white text-nav-fg lg:hidden hover:underline">
News & Insights
</div>
</button>
<div class="pt-6 lg:pt-0 space-y-4 lg:space-y-0 lg:grid lg:grid-cols-12 lg:gap-12 border-t border-t-grey-200 lg:border-0">
<div class="lg:col-span-3">
<ul>
<li>
<h2 class="flex font-heading font-extrabold leading-tight text-nav-fg lg:block lg:text-bravo lg:mb-2 lg:pb-2">
<span class="flex-1 py-2 lg:p-0 text-3xl lg:text-2xl lg:block">Browse</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-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./article-list.html">Latest News</a>
</li>
<li class="lg:mb-2">
<a class="text-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./article-list.html">Industry Insights</a>
</li>
<li class="lg:mb-2">
<a class="text-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./article-list.html">Case Studies</a>
</li>
<li class="lg:mb-2">
<a class="text-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./article-list.html">White Papers</a>
</li>
<li class="lg:mb-2">
<a class="text-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./article-list.html">Press Releases</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="flex-grow-0 py-4 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">
<h2 class="font-heading font-extrabold leading-tight text-2xl text-bravo mb-2 lg:pb-2">
Featured Article
</h2>
<a class="bg-grey-50 px-4 py-4 xl:px-6 xl:py-7 shadow-card block rounded-lg border border-grey-200 hover:cta-gradient-border relative overflow-hidden group" href="./article-list.html">
<div class="bg-brand-gradient-2 absolute top-0 left-0 w-full h-26 angled-mask-mega-card z-0"></div>
<div class="mb-4 xl:mb-7 relative z-10 rounded-md overflow-hidden">
<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>
<h2 class="text-bravo font-extrabold mb-3 text-xl xl:text-xl">Latest industry insights</h2>
<p class="text-grey-600 leading-snug text-base xl:text-lg"> Stay up to date with the latest trends and developments in our industry. </p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="js-menu-item lg:pr-[clamp(1.25rem,2vw,2.25rem)] lg:last:pr-0 lg:border-b-0 flex justify-between lg:h-full lg:items-center ">
<button class="js-mobile-second-level-trigger-forward font-bold text-nav-fg h-full relative py-3 flex flex-1 items-center text-3xl transition duration-150 lg:p-0 lg:text-[clamp(0.9rem,0.9vw+0.25rem,1.125rem)] hover:bg-alpha-dark lg:hover:bg-transparent 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-2 lg:after:bg-nav-fg lg:before:transition-opacity lg:before:duration-300 lg:before:ease-in-out lg:before:w-full lg:before:absolute lg:before:h-1 lg:before:-bottom-2 lg:before:bg-transparent lg:hover:before:bg-nav-fg lg:after:opacity-0" aria-expanded="false" aria-controls="second-level-menu-help-&-support" aria-haspopup="true">
Help & Support
<div class="w-3 h-3 ml-2 mt-0.5 hidden lg:block transition-transform duration-200 [[aria-expanded='true']_&]:rotate-180">
<svg class="w-full h-full fill-current text-current text-nav-arrow" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
<div class="h-10 w-10 pl-3 border-l border-l-nav-fg ml-auto lg:hidden">
<svg class="w-full h-full fill-current transform text-nav-arrow" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-arrow"></use>
</svg>
</div>
</button>
<div id="second-level-menu-help-&-support" class="js-second-level-panel invisible lg:invisible z-50 transition-transform duration-300 bg-white 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-0 lg:transition-none lg:z-40 lg:data-[open]:visible lg:data-[open]:opacity-100">
<div class="overflow-y-auto lg:overflow-visible h-full lg:[[data-nav-theme='contrast']_&]:border-t lg:[[data-nav-theme='contrast']_&]:border-t-grey-200">
<div class="max-lg:container">
<div class="h-full lg:h-auto z-20 lg:relative lg:bg-white">
<div class="h-full lg:h-auto lg:container lg:py-12">
<button class="js-mobile-second-level-trigger-back w-full lg:hidden bg-white py-4 flex items-center text-nav-fg" aria-controls="second-level-menu-help-&-support" aria-expanded="false">
<div class="w-5 h-5 mr-3">
<svg class="w-full h-full fill-current text-nav-arrow transform rotate-90" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
<div class="font-semibold text-3xl bg-white text-nav-fg lg:hidden hover:underline">
Help & Support
</div>
</button>
<div class="pt-6 lg:pt-0 space-y-4 lg:space-y-0 lg:grid lg:grid-cols-12 lg:gap-12 border-t border-t-grey-200 lg:border-0">
<div class="lg:col-span-3">
<ul>
<li>
<h2 class="flex font-heading font-extrabold leading-tight text-nav-fg lg:block lg:text-bravo lg:mb-2 lg:pb-2">
<span class="flex-1 py-2 lg:p-0 text-3xl lg:text-2xl lg:block">Support</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-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">FAQs</a>
</li>
<li class="lg:mb-2">
<a class="text-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./contact-us.html">Contact Us</a>
</li>
<li class="lg:mb-2">
<a class="text-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">Live Chat</a>
</li>
<li class="lg:mb-2">
<a class="text-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">Submit a Ticket</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="lg:col-span-3">
<ul>
<li>
<h2 class="flex font-heading font-extrabold leading-tight text-nav-fg lg:block lg:text-bravo lg:mb-2 lg:pb-2">
<span class="flex-1 py-2 lg:p-0 text-3xl lg:text-2xl lg:block">Resources</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-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">Documentation</a>
</li>
<li class="lg:mb-2">
<a class="text-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">Video Tutorials</a>
</li>
<li class="lg:mb-2">
<a class="text-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">Community Forum</a>
</li>
<li class="lg:mb-2">
<a class="text-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">System Status</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="flex-grow-0 py-4 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">
<h2 class="font-heading font-extrabold leading-tight text-2xl text-bravo mb-2 lg:pb-2">
Get in Touch
</h2>
<a class="bg-grey-50 px-4 py-4 xl:px-6 xl:py-7 shadow-card block rounded-lg border border-grey-200 hover:cta-gradient-border relative overflow-hidden group" href="./index.html">
<div class="bg-brand-gradient-2 absolute top-0 left-0 w-full h-26 angled-mask-mega-card z-0"></div>
<div class="mb-4 xl:mb-7 relative z-10 rounded-md overflow-hidden">
<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>
<h2 class="text-bravo font-extrabold mb-3 text-xl xl:text-xl">We're here to help</h2>
<p class="text-grey-600 leading-snug text-base xl:text-lg"> Our support team is available Monday to Friday, 9am to 5pm. </p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="js-menu-item lg:pr-[clamp(1.25rem,2vw,2.25rem)] lg:last:pr-0 lg:border-b-0 flex justify-between lg:h-full lg:items-center ">
<button class="js-mobile-second-level-trigger-forward font-bold text-nav-fg h-full relative py-3 flex flex-1 items-center text-3xl transition duration-150 lg:p-0 lg:text-[clamp(0.9rem,0.9vw+0.25rem,1.125rem)] hover:bg-alpha-dark lg:hover:bg-transparent 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-2 lg:after:bg-nav-fg lg:before:transition-opacity lg:before:duration-300 lg:before:ease-in-out lg:before:w-full lg:before:absolute lg:before:h-1 lg:before:-bottom-2 lg:before:bg-transparent lg:hover:before:bg-nav-fg lg:after:opacity-0" aria-expanded="false" aria-controls="second-level-menu-our-mission" aria-haspopup="true">
Our Mission
<div class="w-3 h-3 ml-2 mt-0.5 hidden lg:block transition-transform duration-200 [[aria-expanded='true']_&]:rotate-180">
<svg class="w-full h-full fill-current text-current text-nav-arrow" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
<div class="h-10 w-10 pl-3 border-l border-l-nav-fg ml-auto lg:hidden">
<svg class="w-full h-full fill-current transform text-nav-arrow" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-arrow"></use>
</svg>
</div>
</button>
<div id="second-level-menu-our-mission" class="js-second-level-panel invisible lg:invisible z-50 transition-transform duration-300 bg-white 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-0 lg:transition-none lg:z-40 lg:data-[open]:visible lg:data-[open]:opacity-100">
<div class="overflow-y-auto lg:overflow-visible h-full lg:[[data-nav-theme='contrast']_&]:border-t lg:[[data-nav-theme='contrast']_&]:border-t-grey-200">
<div class="max-lg:container">
<div class="h-full lg:h-auto z-20 lg:relative lg:bg-white">
<div class="h-full lg:h-auto lg:container lg:py-12">
<button class="js-mobile-second-level-trigger-back w-full lg:hidden bg-white py-4 flex items-center text-nav-fg" aria-controls="second-level-menu-our-mission" aria-expanded="false">
<div class="w-5 h-5 mr-3">
<svg class="w-full h-full fill-current text-nav-arrow transform rotate-90" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
<div class="font-semibold text-3xl bg-white text-nav-fg lg:hidden hover:underline">
Our Mission
</div>
</button>
<div class="pt-6 lg:pt-0 space-y-4 lg:space-y-0 lg:grid lg:grid-cols-12 lg:gap-12 border-t border-t-grey-200 lg:border-0">
<div class="lg:col-span-3">
<ul>
<li>
<h2 class="flex font-heading font-extrabold leading-tight text-nav-fg lg:block lg:text-bravo lg:mb-2 lg:pb-2">
<span class="flex-1 py-2 lg:p-0 text-3xl lg:text-2xl lg:block">About Us</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-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./our-story.html">Our Story</a>
</li>
<li class="lg:mb-2">
<a class="text-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">Our Values</a>
</li>
<li class="lg:mb-2">
<a class="text-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">Leadership Team</a>
</li>
<li class="lg:mb-2">
<a class="text-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">Careers</a>
</li>
<li class="lg:mb-2">
<a class="text-nav-fg lg:text-bravo font-bold text-2xl hover:bg-white block lg:inline-block py-2 lg:p-0 lg:text-base xl:text-lg lg:hover:bg-transparent transition-colors ease-in-out duration-200 lg:hover:text-alpha lg:hover:underline" href="./index.html">Sustainability</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="flex-grow-0 py-4 max-w-md lg:max-w-none lg:p-0 lg:col-span-3">
<h2 class="font-heading font-extrabold leading-tight text-2xl text-bravo mb-2 lg:pb-2">
Our Impact
</h2>
<a class="bg-grey-50 px-4 py-4 xl:px-6 xl:py-7 shadow-card block rounded-lg border border-grey-200 hover:cta-gradient-border relative overflow-hidden group" href="./index.html">
<div class="bg-brand-gradient-2 absolute top-0 left-0 w-full h-26 angled-mask-mega-card z-0"></div>
<div class="mb-4 xl:mb-7 relative z-10 rounded-md overflow-hidden">
<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>
<h2 class="text-bravo font-extrabold mb-3 text-xl xl:text-xl">Making a difference</h2>
<p class="text-grey-600 leading-snug text-base xl:text-lg"> Learn how we're working towards a better future for our customers and communities. </p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="flex mt-10 lg:hidden">
<li class="relative">
<a class="text-bravo-800 text-1xl lg:text-base flex items-center font-bold lg:font-extrabold hover:underline" href="./login.html">
<div class="w-5 h-5 mr-1.5">
<svg class="w-full h-full fill-current text-bravo-800" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-user"></use>
</svg>
</div>
Login
</a>
</li>
</ul>
<div class="mt-10 lg:hidden pt-6 border-t border-t-grey-200">
<a href="./business.html" class="text-bravo-800 text-1xl lg:text-base font-bold lg:font-extrabold">
</a>
</div>
</div>
</div>
</nav>
</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?v=1.2#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?v=1.2#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] overflow-x-clip">
</div>
<footer class="text-white bg-bravo relative z-50 grid grid-rows-1 grid-cols-1 flex-shrink-0 flex-grow-0 pt-12 sm:pt-20 xl:pt-28">
<div class="absolute top-0 left-0 w-full h-12 sm:h-20 xl:h-28">
<svg class="absolute top-0 left-0 w-full h-auto" xmlns="http://www.w3.org/2000/svg" width="1920" height="108" viewBox="0 0 1920 108" fill="none">
<path d="M8.91763e-10 0H1920V14.3943L0 108L8.91763e-10 0Z" fill="white" />
</svg>
</div>
<div class="footer container md:grid md:grid-cols-12 md:auto-rows-auto pt-2 lg:pt-10 pb-6 lg:pb-16 h-full gap-x-6 relative z-10">
<div class="mb-9 row-start-1 row-end-2 col-start-1 col-end-12">
<div>
<a href="./index.html" class="flex items-center lg:block w-64 lg:w-auto">
<img src="/front-end/images/logo.svg" alt="Gigaclear" width="260" height="50" />
</a>
</div>
</div>
<div class="mb-6 row-start-2 row-end-3 md:col-start-1 md:col-end-7 lg:col-start-1 lg:col-end-4">
<p class="font-bold pb-4 text-xl lg:text-2xl">Home</p>
<ul class="">
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./about-us.html">Smart WiFi</a>
</li>
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./sustainability.html">Home Phone</a>
</li>
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./sustainability.html">Careers</a>
</li>
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./sustainability.html">Support</a>
</li>
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./sustainability.html">About us</a>
</li>
</ul>
</div>
<div class="mb-6 row-start-2 row-end-3 md:col-start-7 md:col-end-13 lg:col-start-4 lg:col-end-7">
<p class="font-bold pb-4 text-xl lg:text-2xl">Business</p>
<ul class="">
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./about-us.html">Smart WiFi</a>
</li>
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./sustainability.html">Home Phone</a>
</li>
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./sustainability.html">Careers</a>
</li>
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./sustainability.html">Support</a>
</li>
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./sustainability.html">About us</a>
</li>
</ul>
</div>
<div class="mb-6 row-start-3 row-end-4 lg:row-start-2 lg:row-end-3 md:col-start-1 md:col-end-7 lg:col-start-7 lg:col-end-10">
<p class="font-bold pb-4 text-xl lg:text-2xl">My Account</p>
<ul class="">
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./about-us.html">My Gigaclear</a>
</li>
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./sustainability.html">Network Status</a>
</li>
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./sustainability.html">Refer a Friend</a>
</li>
</ul>
</div>
<div class="mb-6 row-start-3 row-end-4 lg:row-start-2 lg:row-end-3 md:col-start-7 md:col-end-13 lg:col-start-10 lg:col-end-13">
<p class="font-bold pb-4 text-xl lg:text-2xl">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 text-lg" href="./terms-and-conditions.html">Legal</a>
</li>
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./sustainability.html">Privacy Policy</a>
</li>
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./sustainability.html">Modern Slavery Statement</a>
</li>
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./about-us.html">Vulnerable Customers Policy</a>
</li>
<li class="pb-2">
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-lg" href="./about-us.html">Cookie Policy</a>
</li>
</ul>
</div>
<div class="md:mt-20 row-start-4 row-end-5 lg:row-start-3 lg:row-end-4 md:col-start-1 md:col-end-13 flex gap-3 md:gap-6 flex-row justify-between items-end sm:items-center">
<ul class="list-none flex gap-3 sm:gap-6 flex-col sm:flex-row">
<li>
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-tiny" href="./.html">Legal</a>
</li>
<li>
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-tiny" href="./.html">Privacy policy</a>
</li>
<li>
<a class="border-b border-transparent hover:border-b hover:border-white transition ease-in duration-200 text-tiny" href="./.html">Terms and conditions </a>
</li>
</ul>
<div class="flex gap-3 flex-wrap">
<div>
<a class="w-10 h-10 flex items-center justify-center rounded-full transition-colors ease-in-out duration-300 border border-white hover:bg-white group" 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 group-hover:text-bravo" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-linkedin"></use>
</svg>
</div>
</div>
<span class="sr-only">Open LinkedIn (opens in new window)</span>
</a>
</div>
</div>
</div>
<div class="flex mt-6 pt-2 flex-col gap-3 lg:flex-row lg:mt-6 lg:pt-6 border-t border-white md:justify-between flex-wrap md:col-start-1 md:col-end-13">
<div class="flex gap-3 lg:gap-6 flex-col lg:flex-row">
<p class="mr-6 text-tiny">© 2026 Gigaclear Ltd. All rights reserved.</p>
<p class="text-tiny">Gigaclear Ltd is registered in England and Wales. CRN 07476617</p>
</div>
<p class="text-tiny">Site by <a class="font-bold 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 backdrop-blur-xs bg-black/30"></div>
<div data-vanilla-module="PostcodeModal">
<div class="fixed bg-black/70 z-50 -inset-0 hidden overflow-auto" id="postcode-modal" aria-hidden="true">
<div tabindex="-1" class="w-full h-full flex px-4 py-12 lg:px-8" data-micromodal-close>
<div class="js-model-content relative w-full md:max-w-[650px] m-auto" role="dialog" aria-modal="true">
<div class="relative bg-white rounded-[16px] overflow-hidden">
<div class="js-overlay hidden absolute inset-0 bg-white/70 rounded-[16px] z-10">
<div class="items-center justify-center w-full h-full flex">
<div role="status">
<svg class="inline mr-2 w-16 h-16 text-grey-200 animate-spin 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>
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<button class="absolute shadow-lg top-6 right-6 w-10 h-10 border-white group transition ease-in-out duration-300 bg-white border-3 rounded-full z-20 flex items-center justify-center" aria-label="Close modal" data-micromodal-close>
<svg class="w-4 h-4 text-grey-600 pointer-events-none" width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.5 13.5L13.5 1.5" stroke="#6A7181" stroke-width="3" stroke-linecap="round" />
<path d="M1.5 1.5L13.5 13.5" stroke="#6A7181" stroke-width="3" stroke-linecap="round" />
</svg>
<span class="sr-only">Close Modal</span>
</button>
<div class="relative w-full min-h-52 pb-20 overflow-hidden flex items-end justify-start px-10 lg:px-20">
<div class="absolute left-1/2 -translate-x-1/2 w-[1000px] top-0 h-full bg-brand-gradient-2 slanted-header"></div>
<span data-header="Pending" class="relative rotate-[-8deg] uppercase font-black text-3xl lg:text-7xl text-white leading-[0.9] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
Nearly there...
</span>
<span data-header="Success" class="relative rotate-[-8deg] uppercase font-black text-3xl lg:text-7xl text-white leading-[0.9] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] hidden">
Great news!
</span>
<span data-header="Error" class="relative rotate-[-8deg] uppercase font-black text-3xl lg:text-7xl text-white leading-[0.9] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] hidden">
We're sorry
</span>
</div>
<div data-screen="Search" class="hidden">
<div class="px-10 lg:px-20 pb-10 lg:pb-20 pt-0 lg:pt-5 flex flex-col gap-6">
<p class="text-xl lg:text-2xl text-grey-600">Enter your postcode to check availability</p>
<form class="js-modal-search-form flex gap-3">
<div class="bg-white border border-grey-200 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-modal-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>
<p class="js-modal-search-error hidden text-s-red text-lg"></p>
</div>
</div>
<div data-screen="SelectAddress" class="hidden">
<div class="px-10 lg:px-20 pb-10 lg:pb-20 pt-0 lg:pt-5 flex flex-col gap-6">
<div>
<div class="text-xl lg:text-2xl text-grey-600 mb-2">
We've found a few homes in
</div>
<div class="flex gap-4">
<span class="js-postcode-label text-2xl lg:text-5xl text-bravo font-bold uppercase"></span>
<button class="js-change-postcode text-lg underline text-bravo">Change</button>
</div>
</div>
<div>
<p class="mb-4 text-xl lg:text-2xl text-grey-600">Select your address</p>
<select class="js-select p-6 border-grey-600 text-xl leading-none w-full text-grey-600 rounded-xl">
<option value="">Please select</option>
</select>
</div>
<div class="js-status-success hidden">
<div class="text-s-green-800 font-bold text-lg lg:text-2xl flex gap-3 items-center">
<div class="flex-shrink-0 w-[38px] h-[38px] flex items-center justify-center rounded-full border-4 border-s-green-800">
<svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.06466 6.09551C2.34539 5.44657 1.20653 5.44657 0.487254 6.1545C-0.172082 6.86243 -0.172082 7.98331 0.547194 8.63225L5.94177 13.6467C6.72098 14.3547 7.91978 14.2957 8.57911 13.4697L16.9707 2.85084C17.5701 2.08392 17.4502 0.963034 16.671 0.373095C15.8918 -0.216845 14.7529 -0.0988567 14.1535 0.668065L6.96074 9.75313L3.06466 6.09551Z" fill="#078937" />
</svg>
</div>
<div class="flex-1 leading-tight">We're available at this address</div>
</div>
</div>
<div class="js-status-error hidden">
<div class="text-s-red font-bold text-lg lg:text-2xl flex gap-3 items-center">
<div class="flex-shrink-0 w-[38px] h-[38px] flex items-center justify-center rounded-full border-4 border-s-red">
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.5 13.5L13.5 1.5" stroke="#FF0000" stroke-width="3" stroke-linecap="round" />
<path d="M1.5 1.5L13.5 13.5" stroke="#FF0000" stroke-width="3" stroke-linecap="round" />
</svg>
</div>
<div class="flex-1 leading-tight">We haven't reached your home yet</div>
</div>
</div>
<div class="js-supplementary-message hidden text-xl lg:text-2xl text-grey-600"></div>
<div class="js-next-action hidden">
<button class="js-cta w-full block p-6 text-xl lg:text-1xl text-bravo text-center rounded-full font-bold leading-none bg-brand-gradient-4"></button>
<div class="js-alt-providers-wrap hidden mt-4 text-center">
<a href="#" class="js-alt-providers text-bravo underline text-lg">Alternative providers</a>
</div>
</div>
<p class="js-call-us-hours hidden text-center text-sm text-grey-600 mt-2"></p>
</div>
</div>
<div data-screen="GovernmentConsent" class="hidden">
<div class="px-10 lg:px-20 pb-10 lg:pb-20 pt-0 lg:pt-5 flex flex-col gap-11">
<div>
<h2 class="text-2xl font-heading font-bold text-bravo leading-tight mb-4">You can help us to improve rural connectivity!</h2>
<div class="prose prose-p:text-grey-600 prose-a:text-bravo prose-a:underline max-w-full">
<p>Your community's new full fibre network is being delivered with the help of the government's Gigabit Broadband Voucher Programme (part of Project Gigabit). Your property is eligible for a voucher, which helps us fund the expansion of our full fibre broadband network to rural communities.</p>
<p>If you would like to help fund the rollout of gigabit broadband in your community, please give us your consent to claim the voucher from the government. We will submit an application to Building Digital UK (BDUK) on your behalf. You will receive an email from BDUK to confirm your participation in the scheme (and, if you are a business, confirm your eligibility as an SME).</p>
<p>Provided you consent to be part of the scheme and respond to the emails you receive from BDUK, we will waive the broadband activation fee of £30.</p>
<p>To find out more about the government's Gigabit Broadband Voucher scheme, visit <a href=''>gigabitvoucher.culture.gov.uk</a> or email us at <a href=''>vouchers@gigaclear.com</a></p>
</div>
</div>
<div class="flex gap-6">
<button data-consent-accept class="rounded-full py-6 px-8 leading-none text-[19px] font-bold text-bravo bg-brand-gradient-4">
I consent
</button>
<button data-consent-deny class="rounded-full py-6 px-8 leading-none text-[19px] font-bold text-bravo border-2 border-bravo">
I do not consent
</button>
</div>
<div class="prose prose-sm prose-p:text-grey-600 prose-a:text-bravo prose-a:underline max-w-full">
<p>Your data will be shared with BDUK to administer your Gigabit Broadband Voucher submission. You have the right to object to us processing your data at any time. For more information about your rights, read Gigaclear's <a href=''>Privacy Policy</a> and <a href=''>BDUK's Privacy Notice</a>.</p>
</div>
</div>
</div>
<div data-screen="Error" class="hidden">
<div class="px-10 lg:px-20 pb-10 lg:pb-20 pt-10 text-xl text-grey-600">
<div class="js-error-message text-center"></div>
<div class="text-center mt-6">
<button class="js-change-postcode text-lg underline text-bravo">Enter a new postcode</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</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 relative">
<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, activeSection: _target.context.activeSection, staticHeader: _target.context.staticHeader } %}
<div id="main-content" class="js-main-content relative flex-grow z-[5] overflow-x-clip">
{{ yield | safe }}
</div>
{% render "@global-footer" %}
<div data-vanilla-module="Overlay" class="hidden fixed z-10 inset-0 w-full h-screen backdrop-blur-xs bg-black/30"></div>
{% render "@postcode-modal" %}
</body>
</html>
{
"siteName": "Gigaclear Pattern Library",
"quickLinks": [
{
"name": "Login",
"url": "./login",
"icon": "icon-user"
}
],
"navItems": [
{
"menu_item": "Business types",
"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"
}
]
}
],
"showButton": true,
"link": {
"text": "View all"
}
}
},
{
"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",
"megaList": [
{
"component": "mega-secondary-list",
"data": {
"colHeading": "Browse",
"columns": [
{
"list": [
{
"url": "./article-list",
"name": "Latest News"
},
{
"url": "./article-list",
"name": "Industry Insights"
},
{
"url": "./article-list",
"name": "Case Studies"
},
{
"url": "./article-list",
"name": "White Papers"
},
{
"url": "./article-list",
"name": "Press Releases"
}
]
}
]
}
},
{
"component": "mega-card",
"data": {
"colHeading": "Featured Article",
"url": "./article-list",
"heading": "Latest industry insights",
"description": "Stay up to date with the latest trends and developments in our industry.",
"image": {
"src": "images/test-imagery/example1@16-9@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example1@16-9@1200w.jpg",
"size": "1200"
}
]
}
}
}
]
},
{
"menu_item": "Help & Support",
"url": "./event-list",
"megaList": [
{
"component": "mega-secondary-list",
"data": {
"colHeading": "Support",
"columns": [
{
"list": [
{
"url": "./index",
"name": "FAQs"
},
{
"url": "./contact-us",
"name": "Contact Us"
},
{
"url": "./index",
"name": "Live Chat"
},
{
"url": "./index",
"name": "Submit a Ticket"
}
]
}
]
}
},
{
"component": "mega-secondary-list",
"data": {
"colHeading": "Resources",
"columns": [
{
"list": [
{
"url": "./index",
"name": "Documentation"
},
{
"url": "./index",
"name": "Video Tutorials"
},
{
"url": "./index",
"name": "Community Forum"
},
{
"url": "./index",
"name": "System Status"
}
]
}
]
}
},
{
"component": "mega-card",
"data": {
"colHeading": "Get in Touch",
"url": "./index",
"heading": "We're here to help",
"description": "Our support team is available Monday to Friday, 9am to 5pm.",
"image": {
"src": "images/test-imagery/example1@16-9@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example1@16-9@1200w.jpg",
"size": "1200"
}
]
}
}
}
]
},
{
"menu_item": "Our Mission",
"url": "./event-list",
"megaList": [
{
"component": "mega-secondary-list",
"data": {
"colHeading": "About Us",
"columns": [
{
"list": [
{
"url": "./our-story",
"name": "Our Story"
},
{
"url": "./index",
"name": "Our Values"
},
{
"url": "./index",
"name": "Leadership Team"
},
{
"url": "./index",
"name": "Careers"
},
{
"url": "./index",
"name": "Sustainability"
}
]
}
]
}
},
{
"component": "mega-card",
"data": {
"colHeading": "Our Impact",
"url": "./index",
"heading": "Making a difference",
"description": "Learn how we're working towards a better future for our customers and communities.",
"image": {
"src": "images/test-imagery/example1@16-9@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example1@16-9@1200w.jpg",
"size": "1200"
}
]
}
}
}
]
}
]
}
No notes defined.