<!DOCTYPE html>
<html lang="en-GB">
<head>
<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">
<title>Preview Layout</title>
<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 text-grey-800 overflow-x-hidden">
</body>
</html>
<!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">
<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-packages" aria-haspopup="true">
Packages
<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-packages" 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-packages" 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">
Packages
</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="smooth-wrapper">
<div id="smooth-content">
<div id="main-content" class="js-main-content relative flex-grow z-[5]">
</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>
</div>
<div data-vanilla-module="Overlay" class="hidden fixed z-10 inset-0 w-full h-screen backdrop-blur-sm bg-black/30"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en-GB">
<head>
{% render "@meta" %}
<title>Preview Layout</title>
{% render "@js" %}
{% render "@css" %}
</head>
<body class="font-body text-grey-800 overflow-x-hidden">
</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="smooth-wrapper">
<div id="smooth-content">
<div id="main-content" class="js-main-content relative flex-grow z-[5]">
{{ yield | safe }}
</div>
{% render "@global-footer" %}
</div>
</div>
<div data-vanilla-module="Overlay" class="hidden fixed z-10 inset-0 w-full h-screen backdrop-blur-sm bg-black/30"></div>
</body>
</html>
{
"siteName": "Gigaclear Pattern Library",
"quickLinks": [
{
"name": "Login",
"url": "./login",
"icon": "icon-user"
}
],
"navItems": [
{
"menu_item": "Packages",
"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.