<div class="relative w-full component-spacer-margin">
<div class="container relative z-10">
<div class="hidden mb-8" data-vanilla-module="PackageAvailabilityStatus" data-redirect-url="">
<div class="flex flex-col lg:flex-row items-center gap-4 justify-center">
<div class="flex gap-4 items-center">
<div class="w-4 flex-shrink-0 block">
<svg class="fill-current w-4 h-4 text-s-green" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-tick"></use>
</svg>
</div>
<div class="flex-1 flex gap-5">
<div class="text-bravo-800 lg:text-lg font-bold leading-tight block">
We're available at your address <span class="js-postcode-display"></span>
</div>
</div>
</div>
<button class="text-bravo-700 inline-block text-sm hover:underline">Search again</button>
</div>
</div>
<div class="text-center mb-10 lg:mb-16">
<div>
<h2 class="text-4xl lg:text-8xl block font-heading font-extrabold leading-tight text-bravo mb-4 lg:mb-6">Better broadband has landed</h2>
</div>
<div class="">
<div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-xl lg:prose-2xl max-w-screen-sm mx-auto">
<p>Join over 170,000 customers already enjoying full fibre - prices from £19</p>
</div>
</div>
</div>
<div class="flex mb-12 items-center justify-center">
<div class="lg:inline-flex max-lg:w-full flex-col xl:flex-row mx-auto p-6 rounded-[16px] border-grey-200 border gap-4 xl:items-center bg-white">
<div class="flex lg:items-center gap-6 flex-col max-lg:w-full lg:flex-row">
<div class="flex gap-3 items-center">
<div class="w-5 flex-shrink-0">
<svg class="fill-current w-5 h-5 text-bravo" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-tick"></use>
</svg>
</div>
<div class="text-lg font-bold text-bravo">
Eero WIFI 7 Routers
</div>
</div>
<div class="flex gap-3 items-center">
<div class="w-5 flex-shrink-0">
<svg class="fill-current w-5 h-5 text-bravo" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-tick"></use>
</svg>
</div>
<div class="text-lg font-bold text-bravo">
Free expert set-up
</div>
</div>
<div class="flex gap-3 items-center">
<div class="w-5 flex-shrink-0">
<svg class="fill-current w-5 h-5 text-bravo" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-tick"></use>
</svg>
</div>
<div class="text-lg font-bold text-bravo">
WIFI Guarantee
</div>
</div>
<div class="flex gap-3 items-center">
<div class="w-5 flex-shrink-0">
<svg class="fill-current w-5 h-5 text-bravo" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-tick"></use>
</svg>
</div>
<div class="text-lg font-bold text-bravo">
Free Eero Secure
</div>
</div>
</div>
</div>
</div>
<div class="w-full splide" data-vanilla-module="Slider" data-splide='{"perPage":1,"mediaQuery":"min","pagination":false,"arrows":false,"gap":"1.5rem","padding":{"right":"4.5rem"},"breakpoints":{"768":{"perPage":2,"mediaQuery":"min","pagination":false,"arrows":false,"gap":"1.5rem","padding":{"right":"2.5rem"}},"1024":{"destroy":true}}}'>
<div class="splide__track !overflow-visible">
<div class="lg:!flex lg:justify-center lg:!gap-12 2xl:!gap-24 splide__list">
<div class="splide__slide lg:!flex-1 lg:max-w-[420px]">
<div class="w-full pt-10 relative h-full ">
<div class="shadow-[0_4px_4px_0_rgba(0,0,0,0.05)] relative rounded-[24px] border border-grey-200 card-hover bg-white h-full flex flex-col">
<div class="absolute left-1/2 -translate-x-1/2 w-full top-0 bg-brand-gradient-2 h-[170px] z-0 product-card-header rounded-t-[24px]"></div>
<div class="flex flex-col items-center min-h-[170px] -mt-10 relative z-10 flex-shrink-0">
<div>
<img class="lazyload " data-src="/front-end/images/packages/badge--300.png" width="112" height="112">
</div>
<div>
<img class="lazyload " data-src="/front-end/images/packages/eros--1.png" width="174" height="130">
</div>
</div>
<div class="flex-1 flex items-center justify-center">
<div class="px-12 lg:px-6 xl:px-12 flex flex-col gap-4 pt-4 pb-10">
<div class="flex flex-col text-center gap-1.5">
<div>
<p class="leading-none py-3 px-4 bg-delta-500 rounded-lg text-grey-800 uppercase font-bold inline-block">Speedy</p>
</div>
<p class="text-grey-600 leading-tight text-sm">Lorem ipsum dolor</p>
</div>
<div class="flex flex-col text-center">
<span class="text-alpha text-4xl lg:text-5xl font-bold leading-tight">300Mbps</span>
<span class="text-bravo text-sm leading-normal">avg. download/upload</span>
</div>
<div class="flex items-center justify-center mt-2">
<div data-vanilla-module="PackageButtonStep1">
<div data-package-loading>
<button class="btn btn--sm text-alpha border-2 border-bravo opacity-50 cursor-not-allowed group" disabled>
<svg aria-hidden="true" class="mr-2 w-4 h-4 text-white animate-spin dark:text-gray-600 fill-grey" 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 class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Find out more
</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>
</button>
</div>
<div class="hidden" data-package-action-wrapper>
<button class="btn btn--sm text-bravo border-2 border-bravo group" data-package-action>
<span class="js-action-loading hidden">
<div class="flex">
<svg aria-hidden="true" class="mr-2 w-4 h-4 text-white animate-spin dark:text-gray-600 fill-grey" 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>
Please wait...
</div>
</span>
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
<span class="js-action-label">
Find out more
</span>
</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>
</button>
</div>
<div class="hidden" data-package-button-wrapper>
<button class="btn btn--sm text-bravo border-2 border-bravo group" data-package-button>
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Check availability
</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>
</button>
</div>
</div>
</div>
<ul class="flex flex-col gap-3 justify-center items-center text-center">
<li class="flex items-center gap-2 text-sm text-grey-700">
<svg class="w-4 h-4 text-s-green-800 shrink-0" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-tick"></use>
</svg>
<span class="font-bold text-bravo">
Single Eero 7 Router
</span>
</li>
<li class="flex items-center gap-2 text-sm text-grey-700">
<svg class="w-4 h-4 text-s-green-800 shrink-0" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-tick"></use>
</svg>
<span class="font-bold text-bravo">
Free Activation
</span>
</li>
</ul>
<div class="flex flex-col text-center gap-2">
<h2 class="font-bold text-sm text-grey-500">240Mbps minimum download speed</h2>
<p class="text-[12px] text-grey-500">18-month minimum term and then standard list price thereafter. Prices may change during the contract. £30 one-off activation fee.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="splide__slide lg:!flex-1 lg:max-w-[420px]">
<div class="w-full pt-10 relative h-full ">
<div class="shadow-[0_4px_60px_0_rgba(255,210,0,0.20),0_4px_28px_0_rgba(255,210,0,0.20),0_4px_16px_0_rgba(0,0,0,0.05)] relative rounded-[24px] border border-grey-200 card-hover bg-white h-full flex flex-col">
<div class="absolute left-1/2 -translate-x-1/2 w-full top-0 bg-brand-gradient-2 h-[170px] z-0 product-card-header rounded-t-[24px]"></div>
<div class="flex flex-col items-center min-h-[170px] -mt-10 relative z-10 flex-shrink-0">
<div>
<img class="lazyload " data-src="/front-end/images/packages/badge--500.png" width="112" height="112">
</div>
<div>
<img class="lazyload " data-src="/front-end/images/packages/eros--1.png" width="174" height="130">
</div>
</div>
<div class="flex-1 flex items-center justify-center">
<div class="px-12 lg:px-6 xl:px-12 flex flex-col gap-4 pt-4 pb-10">
<div class="flex flex-col text-center gap-1.5">
<div>
<p class="leading-none py-3 px-4 bg-gradient-to-l from-delta-500 to-[#FF9300] rounded-lg text-grey-800 uppercase font-bold inline-block">Balanced</p>
</div>
<p class="text-grey-600 leading-tight text-sm">Lorem ipsum dolor</p>
</div>
<div class="flex flex-col text-center">
<span class="text-alpha text-4xl lg:text-5xl font-bold leading-tight">500Mbps</span>
<span class="text-bravo text-sm leading-normal">avg. download/upload</span>
</div>
<div class="flex items-center justify-center mt-2">
<div data-vanilla-module="PackageButtonStep1">
<div data-package-loading>
<button class="btn btn--sm text-alpha border-2 border-bravo opacity-50 cursor-not-allowed group" disabled>
<svg aria-hidden="true" class="mr-2 w-4 h-4 text-white animate-spin dark:text-gray-600 fill-grey" 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 class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Find out more
</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>
</button>
</div>
<div class="hidden" data-package-action-wrapper>
<button class="btn btn--sm text-bravo border-2 border-bravo group" data-package-action>
<span class="js-action-loading hidden">
<div class="flex">
<svg aria-hidden="true" class="mr-2 w-4 h-4 text-white animate-spin dark:text-gray-600 fill-grey" 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>
Please wait...
</div>
</span>
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
<span class="js-action-label">
Find out more
</span>
</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>
</button>
</div>
<div class="hidden" data-package-button-wrapper>
<button class="btn btn--sm text-bravo border-2 border-bravo group" data-package-button>
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Check availability
</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>
</button>
</div>
</div>
</div>
<ul class="flex flex-col gap-3 justify-center items-center text-center">
<li class="flex items-center gap-2 text-sm text-grey-700">
<svg class="w-4 h-4 text-s-green-800 shrink-0" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-tick"></use>
</svg>
<span class="font-bold text-bravo">
Single Eero 7 Router
</span>
</li>
<li class="flex items-center gap-2 text-sm text-grey-700">
<svg class="w-4 h-4 text-s-green-800 shrink-0" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-tick"></use>
</svg>
<span class="font-bold text-bravo">
Free Activation
</span>
</li>
</ul>
<div class="flex flex-col text-center gap-2">
<h2 class="font-bold text-sm text-grey-500">400Mbps minimum download speed</h2>
<p class="text-[12px] text-grey-500">18-month minimum term and then standard list price thereafter. Prices may change during the contract. £30 one-off activation fee.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="splide__slide lg:!flex-1 lg:max-w-[420px]">
<div class="w-full pt-10 relative h-full ">
<div class="shadow-[0_4px_4px_0_rgba(0,0,0,0.05)] relative rounded-[24px] border border-grey-200 card-hover bg-white h-full flex flex-col">
<div class="absolute left-1/2 -translate-x-1/2 w-full top-0 bg-brand-gradient-2 h-[170px] z-0 product-card-header rounded-t-[24px]"></div>
<div class="flex flex-col items-center min-h-[170px] -mt-10 relative z-10 flex-shrink-0">
<div>
<img class="lazyload " data-src="/front-end/images/packages/badge--900.png" width="112" height="112">
</div>
<div>
<img class="lazyload " data-src="/front-end/images/packages/eros--2.png" width="174" height="130">
</div>
</div>
<div class="flex-1 flex items-center justify-center">
<div class="px-12 lg:px-6 xl:px-12 flex flex-col gap-4 pt-4 pb-10">
<div class="flex flex-col text-center gap-1.5">
<div>
<p class="leading-none py-3 px-4 bg-delta-500 rounded-lg text-grey-800 uppercase font-bold inline-block">Super speeds</p>
</div>
<p class="text-grey-600 leading-tight text-sm">Lorem ipsum dolor</p>
</div>
<div class="flex flex-col text-center">
<span class="text-alpha text-4xl lg:text-5xl font-bold leading-tight">900Mbps</span>
<span class="text-bravo text-sm leading-normal">avg. download/upload</span>
</div>
<div class="flex items-center justify-center mt-2">
<div data-vanilla-module="PackageButtonStep1">
<div data-package-loading>
<button class="btn btn--sm text-alpha border-2 border-bravo opacity-50 cursor-not-allowed group" disabled>
<svg aria-hidden="true" class="mr-2 w-4 h-4 text-white animate-spin dark:text-gray-600 fill-grey" 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 class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Find out more
</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>
</button>
</div>
<div class="hidden" data-package-action-wrapper>
<button class="btn btn--sm text-bravo border-2 border-bravo group" data-package-action>
<span class="js-action-loading hidden">
<div class="flex">
<svg aria-hidden="true" class="mr-2 w-4 h-4 text-white animate-spin dark:text-gray-600 fill-grey" 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>
Please wait...
</div>
</span>
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
<span class="js-action-label">
Find out more
</span>
</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>
</button>
</div>
<div class="hidden" data-package-button-wrapper>
<button class="btn btn--sm text-bravo border-2 border-bravo group" data-package-button>
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Check availability
</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>
</button>
</div>
</div>
</div>
<ul class="flex flex-col gap-3 justify-center items-center text-center">
<li class="flex items-center gap-2 text-sm text-grey-700">
<svg class="w-4 h-4 text-s-green-800 shrink-0" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-tick"></use>
</svg>
<span class="font-bold text-bravo">
2x Eero Pro 7 Routers
</span>
</li>
<li class="flex items-center gap-2 text-sm text-grey-700">
<svg class="w-4 h-4 text-s-green-800 shrink-0" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-tick"></use>
</svg>
<span class="font-bold text-bravo">
Free Activation
</span>
</li>
</ul>
<div class="flex flex-col text-center gap-2">
<h2 class="font-bold text-sm text-grey-500">700Mbps minimum download speed</h2>
<p class="text-[12px] text-grey-500">18-month minimum term and then standard list price thereafter. Prices may change during the contract. £30 one-off activation fee.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p class="font-bold lg:text-center text-grey-500 mt-11 max-w-[790px] mx-auto text-xm lg:text-base">
All packages have a £0 activation fee and free standard installation. These prices are applicable to new Gigaclear customers only. Prices, content and terms may change during your contract; see Terms and Conditions for details.
</p>
</div>
</div>
{% set sliderData = {
"perPage": 1,
"mediaQuery": "min",
"pagination": false,
"arrows": false,
"gap": "1.5rem",
"padding": { "right": "4.5rem" },
"breakpoints": {
"768": {
"perPage": 2,
"mediaQuery": "min",
"pagination": false,
"arrows": false,
"gap": "1.5rem",
"padding": { "right": "2.5rem" }
},
"1024": {
"destroy": true
}
}
}
%}
{% if packages.length == 4 %}
{% set sliderData = {
"perPage": 1,
"mediaQuery": "min",
"pagination": false,
"arrows": false,
"gap": "1.5rem",
"padding": { "right": "4.5rem" },
"breakpoints": {
"768": {
"perPage": 2,
"mediaQuery": "min",
"pagination": false,
"arrows": false,
"gap": "1.5rem",
"padding": { "right": "2.5rem" }
},
"1024": {
"perPage": 3,
"mediaQuery": "min",
"pagination": false,
"arrows": false,
"gap": "1.5rem",
"padding": { "right": "2.5rem" }
},
"1284": {
"destroy": true
}
}
}
%}
{% endif %}
{% set textColourClass = "" %}
{% set componentClass = "component-spacer-margin" %}
{% if backgroundImage %}
{% set componentClass = "component-spacer-padding" %}
{% set textColourClass = "text-white" %}
{% endif %}
<div class="relative w-full {{ componentClass }}">
{% if backgroundImage %}
<div class="h-[62%] lg:h-[70%] absolute top-0 left-0 w-full z-0 [clip-path:polygon(0_0,100%_0%,100%_92.5%,0%_100%)] lg:[clip-path:polygon(0_0,100%_0%,100%_73%,0%_100%)]">
<img data-src="{{ backgroundImage | asset }}" class="object-cover w-full h-full lazyload relative z-5" />
<div class="h-full w-full absolute left-0 top-0 z-10 bg-gradient-to-b from-black/30 via-black/30 to-transparent"></div>
</div>
{% endif %}
<div class="container relative z-10">
{% render "@package-availability-status", { textColourClass: textColourClass } %}
{% if headline %}
{% render "@headline", {
heading: headline.heading,
summary: headline.summary,
headingColour: textColourClass,
summaryColour: textColourClass
} %}
{% endif %}
{% if features %}
{% render "@package-features", { features: features} %}
{% endif %}
<div class="w-full splide" data-vanilla-module="Slider" data-splide='{{ sliderData | dump | safe }}'>
<div class="splide__track !overflow-visible">
{% if packages.length == 4 %}
{% set gridCols = "xl:!gap-7 xl:!flex xl:justify-center" %}
{% set gridItem = "xl:!flex-1 xl:max-w-[420px]" %}
{% else %}
{% set gridCols = "lg:!flex lg:justify-center lg:!gap-12 2xl:!gap-24" %}
{% set gridItem = "lg:!flex-1 lg:max-w-[420px]" %}
{% endif %}
<div class="{{ gridCols }} splide__list">
{% for item in packages %}
<div class="splide__slide {{ gridItem }}">
{% render "@package-card", item %}
</div>
{% endfor %}
</div>
</div>
</div>
{% if terms %}
<p class="font-bold lg:text-center text-grey-500 mt-11 max-w-[790px] mx-auto text-xm lg:text-base">
{{ terms }}
</p>
{% endif %}
</div>
</div>
{
"siteName": "Gigaclear Pattern Library",
"headline": {
"heading": "Better broadband has landed",
"summary": "Join over 170,000 customers already enjoying full fibre - prices from £19"
},
"terms": "All packages have a £0 activation fee and free standard installation. These prices are applicable to new Gigaclear customers only. Prices, content and terms may change during your contract; see Terms and Conditions for details.",
"features": [
{
"name": "Eero WIFI 7 Routers"
},
{
"name": "Free expert set-up"
},
{
"name": "WIFI Guarantee"
},
{
"name": "Free Eero Secure"
}
],
"packages": [
{
"step1": true,
"name": "Explorer",
"speed": "300Mbps",
"badgeImage": "images/packages/badge--300.png",
"routerImage": "images/packages/eros--1.png",
"offer": "Speedy",
"offerDescription": "Lorem ipsum dolor",
"features": [
"Single Eero 7 Router",
"Free Activation"
],
"disclaimerHeading": "240Mbps minimum download speed",
"disclaimerDescription": "18-month minimum term and then standard list price thereafter. Prices may change during the contract. £30 one-off activation fee."
},
{
"highlight": true,
"step1": true,
"name": "Voyager",
"speed": "500Mbps",
"badgeImage": "images/packages/badge--500.png",
"routerImage": "images/packages/eros--1.png",
"offer": "Balanced",
"offerDescription": "Lorem ipsum dolor",
"features": [
"Single Eero 7 Router",
"Free Activation"
],
"disclaimerHeading": "400Mbps minimum download speed",
"disclaimerDescription": "18-month minimum term and then standard list price thereafter. Prices may change during the contract. £30 one-off activation fee."
},
{
"step1": true,
"name": "Gallileo",
"speed": "900Mbps",
"badgeImage": "images/packages/badge--900.png",
"routerImage": "images/packages/eros--2.png",
"offer": "Super speeds",
"offerDescription": "Lorem ipsum dolor",
"features": [
"2x Eero Pro 7 Routers",
"Free Activation"
],
"disclaimerHeading": "700Mbps minimum download speed",
"disclaimerDescription": "18-month minimum term and then standard list price thereafter. Prices may change during the contract. £30 one-off activation fee."
}
]
}
No notes defined.