<!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">
<div class="js-main-content">
</div>
<div data-vanilla-module="Overlay" class="hidden fixed z-10 inset-0 w-full h-screen bg-black opacity-50"></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 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">
<div class="js-main-content">
{{ yield | safe }}
</div>
<div data-vanilla-module="Overlay" class="hidden fixed z-10 inset-0 w-full h-screen bg-black opacity-50"></div>
{% render "@postcode-modal" %}
</body>
</html>
{
"siteName": "Gigaclear Pattern Library"
}
No notes defined.