<div class="min-h-[740px] lg:min-h-[max(100vh,700px)] lg:min-h-[max(100vh,700px)] z-0 grid w-full relative overflow-hidden pt-[100px] lg:pt-[130px] pb-34">
<div class="h-[250px] absolute top-0 left-0 z-10 w-full hero-gradient pointer-events-none opacity-25"></div>
<div class="bg-brand-gradient absolute w-full left-0 top-0 h-full z-5"></div>
<video data-vanilla-module="VideoMQSwitcher" data-breakpoint="(max-width: 1023px)" preload="auto" class="opacity-0 transition-opacity duration-1000 absolute z-5 object-cover w-full h-full top-0 left-0 max-lg:object-right" muted="" autoplay="" loop="" playsinline="">
<source media="(max-width: 1023px)" src="/front-end/playground/hero-bg-mobile.webm" type="video/webm">
<source media="(min-width: 1024px)" src="/front-end/playground/hero-bg.webm" type="video/webm">
</video>
<div class="z-20 w-full">
<div class="container flex h-full flex-col justify-between mx-auto">
<div class="flex-1 py-24 lg:pt-[10%] lg:pb-[7%]">
<h1>
<span class="block max-w-[900px] hero-text font-extrabold italic uppercase text-[clamp(2.4rem,8vw,88px)] text-white leading-[0.9] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">Faster</span>
<span class="block max-w-[900px] hero-text font-extrabold italic uppercase text-[clamp(2.4rem,8vw,88px)] text-white leading-[0.9] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">broadband for</span>
<span class="block max-w-[900px] hero-text font-extrabold italic uppercase text-[clamp(2.4rem,8vw,88px)] text-white leading-[0.9] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">rural britain</span>
</h1>
<div class="max-w-[900px] hero-text mt-6 font-extrabold italic text-[clamp(1.2rem,3vw,32px)] text-white leading-snug js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
For the best speed, home connectivity and service
</div>
</div>
<div class="relative flex-shrink-0 w-full h-[78px] lg:h-[81px]">
<div data-vanilla-module="StickyPostcode">
<div class="flex items-center justify-center w-full">
<div data-vanilla-module="PostcodeLookupControl" class="opacity-0 transition ease-in-out duration-300 w-full max-w-[540px]">
<div data-initial-step="Search" class="block w-full">
<form class="bg-white/20 rounded-full shadow-[0_4px_30px_rgba(0,0,0,0.1)] backdrop-blur-[5px] border border-white/30 flex gap-6 items-center p-2 focus-within:ring-2 focus-within:ring-white transition-shadow duration-200">
<div class="bg-white 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-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>
</div>
<div data-initial-step="Continue" data-type="" class="hidden w-full">
<div class="bg-white/20 rounded-full shadow-[0_4px_30px_rgba(0,0,0,0.1)] backdrop-blur-[5px] border border-white/30 flex gap-6 items-center p-2 focus-within:ring-2 focus-within:ring-white transition-shadow duration-200">
<div class="bg-white w-full flex gap-2 lg:gap-6 items-center p-2 pl-3 lg:pl-6 rounded-full">
<div class="flex-1 w-full border-0 leading-none lg:text-lg">
<div class="flex gap-6 items-center">
<div class="w-4 flex-shrink-0 hidden [[data-type='HasService']_&]:block">
<svg width="24" height="21" viewBox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.23936 8.7415C3.24438 7.81087 1.669 7.81087 0.674022 8.8261C-0.238042 9.84133 -0.238042 11.4488 0.756936 12.3794L8.21928 19.5706C9.29717 20.5858 10.9555 20.5012 11.8675 19.3168L23.4756 4.08836C24.3048 2.98852 24.1389 1.38108 23.061 0.535051C21.9832 -0.310974 20.4078 -0.141769 19.5786 0.958064L9.62883 13.9869L4.23936 8.7415Z" fill="#078937" />
</svg>
</div>
<div class="flex-1 [[data-type='NoService']_&]:pl-2 [[data-type='Business']_&]:pl-2">
<div class="text-s-green-800 lg:text-lg font-bold leading-tight hidden [[data-type='HasService']_&]:block">
Available<span class="hidden sm:inline"> at your address</span>
</div>
<div class="text-grey-700 lg:text-lg font-bold leading-tight hidden [[data-type='NoService']_&]:block">
Not available yet
</div>
<div class="text-grey-700 lg:text-lg font-bold leading-tight hidden [[data-type='Business']_&]:block">
Get a business quote
</div>
<div class="text-grey-700 lg:text-lg font-bold leading-tight hidden [[data-type='HasOpenOrder']_&]:block">
Call us
</div>
<button class="js-reset text-bravo-700 text-sm hover:underline">Search again</button>
</div>
</div>
</div>
<div class="flex-shrink-0">
<button class="js-continue-link inline-flex items-center relative z-0 font-body font-bold lg:text-[19px] align-middle leading-none py-3.5 px-4 lg:px-8 no-underline rounded-full transition duration-500 ease-in-out group max-lg:text-base text-grey-800 bg-brand-gradient-4 disabled:opacity-50 disabled:pointer-events-none">
<div class="relative z-10 lg:group-hover:-translate-x-2 transition ease-in-out duration-300">
<span class="js-continue-label">
<span class="hidden [[data-type='HasService']_&]:block">View packages</span>
<span class="hidden [[data-type='NoService']_&]:block">Register interest</span>
<span class="hidden [[data-type='Business']_&]:block">Contact us</span>
<span class="hidden [[data-type='HasOpenOrder']_&]:block">Request callback</span>
</span>
<span class="js-continue-loading hidden">Please wait...</span>
</div>
<div class="max-lg: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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="overflow-hidden -mt-20">
<section class="container" data-vanilla-module="StoryStackComponent">
<div class="js-slides flex flex-col gap-12">
<div class="js-item aspect-[12/16] sm:aspect-[16/12] lg:aspect-[16/9] rounded-xl overflow-hidden relative flex justify-start p-6 md:p-12 lg:px-16 lg:pt-16 xl:px-24 xl:pt-24 lg:pb-12">
<picture class="overflow-hidden">
<source srcset="../../front-end/images/test-imagery/slide-1@12-16@680w.webp" media="(max-width: 639px)">
<source srcset="../../front-end/images/test-imagery/slide-1@16-12@1024w.webp" media="(max-width: 1023px)">
<img src="../../front-end/images/test-imagery/slide-1@16-9@1792w.webp" class=" js-image absolute top-0 left-0 object-cover w-full h-full scale-[1.2] origin-center" alt="" fetchpriority="high" />
</picture>
<div class="flex flex-col">
<div class="flex-1">
<p class="js-line font-extrabold italic uppercase text-[44px] lg:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
Go fast
</p>
<p class="js-line font-extrabold italic uppercase text-[44px] lg:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
and save
</p>
<p class="js-line font-extrabold italic uppercase text-[44px] lg:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
this spring
</p>
<div class="js-line mt-6 font-extrabold italic text-[18px] lg:text-[24px] 3xl:text-[32px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
Your household deserves 100% full fibre.
</div>
</div>
<div style="visibility: hidden;" class="js-slide-description flex-shrink-0 bg-bravo p-5 3xl:p-10 lg:text-lg xl:text-xl text-white mt-auto lg:mt-26 max-w-[540px] rounded-lg">
We're delivering faster broadband for rural Britain that's up to 15x faster and up to 5x more reliable than part fibre.
</div>
</div>
</div>
<div class="js-item aspect-[12/16] sm:aspect-[16/12] lg:aspect-[16/9] rounded-xl overflow-hidden relative flex justify-start p-6 md:p-12 lg:px-16 lg:pt-16 xl:px-24 xl:pt-24 lg:pb-12">
<picture class="overflow-hidden">
<source srcset="../../front-end/images/test-imagery/slide-2@12-16@680w.webp" media="(max-width: 639px)">
<source srcset="../../front-end/images/test-imagery/slide-2@16-12@1024w.webp" media="(max-width: 1023px)">
<img data-src="../../front-end/images/test-imagery/slide-2@16-9@1792w.webp" class="lazyload js-image absolute top-0 left-0 object-cover w-full h-full scale-[1.2] origin-center" alt="" fetchpriority="auto" />
</picture>
<div class="flex flex-col">
<div class="flex-1">
<p class="js-line font-extrabold italic uppercase text-[44px] lg:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
The best
</p>
<p class="js-line font-extrabold italic uppercase text-[44px] lg:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
home
</p>
<p class="js-line font-extrabold italic uppercase text-[44px] lg:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
connectivity
</p>
<div class="js-line mt-6 font-extrabold italic text-[18px] lg:text-[24px] 3xl:text-[32px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
Perfect wifi signal around your home
</div>
</div>
<div style="visibility: hidden;" class="js-slide-description flex-shrink-0 bg-bravo p-5 3xl:p-10 lg:text-lg xl:text-xl text-white mt-auto lg:mt-26 max-w-[540px] rounded-lg">
No more searching for signals around your home, thanks to our professionally installed Smart WiFi systems by eero.
</div>
</div>
</div>
<div class="js-item aspect-[12/16] sm:aspect-[16/12] lg:aspect-[16/9] rounded-xl overflow-hidden relative flex justify-start p-6 md:p-12 lg:px-16 lg:pt-16 xl:px-24 xl:pt-24 lg:pb-12">
<picture class="overflow-hidden">
<source srcset="../../front-end/images/test-imagery/slide-3@12-16@680w.webp" media="(max-width: 639px)">
<source srcset="../../front-end/images/test-imagery/slide-3@16-12@1024w.webp" media="(max-width: 1023px)">
<img data-src="../../front-end/images/test-imagery/slide-3@16-9@1792w.webp" class="lazyload js-image absolute top-0 left-0 object-cover w-full h-full scale-[1.2] origin-center" alt="" fetchpriority="auto" />
</picture>
<div class="flex flex-col">
<div class="flex-1">
<p class="js-line font-extrabold italic uppercase text-[44px] lg:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
The best
</p>
<p class="js-line font-extrabold italic uppercase text-[44px] lg:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
home set up
</p>
<p class="js-line font-extrabold italic uppercase text-[44px] lg:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
service
</p>
<div class="js-line mt-6 font-extrabold italic text-[18px] lg:text-[24px] 3xl:text-[32px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
Your household deserves 100% full fibre.
</div>
</div>
<div style="visibility: hidden;" class="js-slide-description flex-shrink-0 bg-bravo p-5 3xl:p-10 lg:text-lg xl:text-xl text-white mt-auto lg:mt-26 max-w-[540px] rounded-lg">
Our engineers go beyond to ensure everything is perfectly set up in your home
</div>
</div>
</div>
</div>
</section>
</div>
<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-[140px] z-0 product-card-header-alt rounded-t-[24px]"></div>
<div class="flex justify-center pl-[7.5%] gap-6 min-h-[140px] relative z-10 flex-shrink-0">
<div>
<img class="lazyload -mt-5" data-src="/front-end/images/packages/badge--300.png" width="112" height="112">
</div>
<div>
<img class="lazyload mt-5" 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-[140px] z-0 product-card-header-alt rounded-t-[24px]"></div>
<div class="flex justify-center pl-[7.5%] gap-6 min-h-[140px] relative z-10 flex-shrink-0">
<div>
<img class="lazyload -mt-5" data-src="/front-end/images/packages/badge--500.png" width="112" height="112">
</div>
<div>
<img class="lazyload mt-5" 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">First 2000 customers only</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-[140px] z-0 product-card-header-alt rounded-t-[24px]"></div>
<div class="flex justify-center pl-[7.5%] gap-6 min-h-[140px] relative z-10 flex-shrink-0">
<div>
<img class="lazyload -mt-5" data-src="/front-end/images/packages/badge--600.png" width="112" height="112">
</div>
<div>
<img class="lazyload mt-5" 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">Super speed</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">600bps</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">540Mbps 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>
<div class="js-component relative z-0 component-spacer-margin ">
<div class="max-w-[1532px] mx-auto ">
<div class="container ">
<div class="lg:flex w-full lg:gap-14 2xl:gap-16">
<div class="lg:flex-1 flex relative justify-center align-center lg:mx-0 mb-8 lg:mb-0">
<div class="relative w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-2xl w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example4@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-10@1200w.jpg">
</picture>
</div>
</div>
<div class="lg:flex-1 flex flex-col justify-center align-center ">
<div>
<h2 class="text-3xl lg:text-5xl xl:text-7xl mb-6 font-heading font-bold leading-tight text-bravo"> Ut bibendum dui leo, non consectetur nisl auctor sed.</h2>
<div class="mb-8 max-w-none prose prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal lg:prose-xl">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum dui leo, non consectetur nisl auctor sed. Curabitur tempor, dolor ac imperdiet fermentum, ipsum neque volutpat est, ac aliquet tellus enim non tortor. In hac habitasse platea dictumst. Cras pellentesque convallis nisi, at pretium diam auctor et. Sed placerat lobortis dictum. Aliquam ut tellus porttitor, porttitor dui blandit, bibendum nunc. Vivamus gravida dolor dui.</p>
</div>
<div class="flex gap-6 flex-wrap">
<div>
<a href="./index.html" class="btn group bg-alpha text-white border-2 border-alpha">
<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>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin ">
<div class="max-w-[1532px] mx-auto component-spacer-padding bg-grey-50 rounded-lg ">
<div class="container ">
<div class="lg:flex w-full lg:gap-14 2xl:gap-16">
<div class="lg:flex-1 flex relative justify-center align-center lg:mx-0 mb-8 lg:mb-0">
<div class="relative w-full h-full">
<picture class="block overflow-hidden w-full">
<img class="lazyload rounded-2xl w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example2@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-10@1200w.jpg">
</picture>
</div>
</div>
<div class="lg:flex-1 flex flex-col justify-center align-center lg:order-first">
<div>
<h2 class="text-3xl lg:text-5xl xl:text-7xl mb-6 font-heading font-bold leading-tight text-bravo"> Ut bibendum dui leo, non consectetur nisl auctor sed.</h2>
<div class="mb-8 max-w-none prose prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal lg:prose-xl">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum dui leo, non consectetur nisl auctor sed. Curabitur tempor, dolor ac imperdiet fermentum, ipsum neque volutpat est, ac aliquet tellus enim non tortor. In hac habitasse platea dictumst. Cras pellentesque convallis nisi, at pretium diam auctor et. Sed placerat lobortis dictum. Aliquam ut tellus porttitor, porttitor dui blandit, bibendum nunc. Vivamus gravida dolor dui.</p>
</div>
<div class="flex gap-6 flex-wrap">
<div>
<a href="./index.html" class="btn group bg-alpha text-white border-2 border-alpha">
<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>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 container component-spacer-margin">
<div class="text-center mb-10 lg:mb-16">
<div>
<div class="uppercase text-grey-600 mb-3 font-semibold">
<p>Heading Label</p>
</div>
<h2 class="text-4xl lg:text-8xl block font-heading font-extrabold leading-tight text-bravo mb-4 lg:mb-6">Discover more</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>Lorem ipsum dolor sit amet consectetur. Nunc nunc pulvinar adipiscing vitae. Lorem convallis lorem diam ornare. Sed ornare et diam risus arcu id.</p>
</div>
</div>
</div>
<div class="block space-y-6 md:space-y-0 md:flex md:gap-6 md:justify-center">
<div class="flex-1 md:max-w-lg">
<div class="pt-6 h-full">
<a class="w-full h-full rounded-2xl group shadow-card-lg gap-8 flex flex-col border border-grey-200 card-hover relative bg-grey-50 px-10 pb-7 flex flex-col gap-7 items-stretch" href="#">
<div class="bg-brand-gradient-2 absolute top-0 left-0 w-full h-28 angled-mask-mega-card z-0 rounded-t-2xl"></div>
<div class="flex justify-center w-full">
<div class="relative z-10 overflow-hidden rounded-lg w-full max-w-[270px] -mt-6">
<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="1200" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example1@1-1@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example1@1-1@1200w.jpg">
</picture>
</div>
</div>
<div class="flex flex-col gap-7 justify-between h-full">
<div class="relative z-10">
<h2 class="text-center text-bravo font-extrabold mb-2 text-xl xl:text-2xl leading-tight group-hover:underline">Giga-powered speeds</h2>
<p class="text-grey-600 text-base xl:text-lg text-center leading-normal">Download up to 15x faster and upload up to 77x faster than part fibre - no sweat</p>
</div>
</div>
</a>
</div>
</div>
<div class="flex-1 md:max-w-lg">
<div class="pt-6 h-full">
<a class="w-full h-full rounded-2xl group shadow-card-lg gap-8 flex flex-col border border-grey-200 card-hover relative bg-grey-50 px-10 pb-7 flex flex-col gap-7 items-stretch" href="#">
<div class="bg-brand-gradient-2 absolute top-0 left-0 w-full h-28 angled-mask-mega-card z-0 rounded-t-2xl"></div>
<div class="flex justify-center w-full">
<div class="relative z-10 overflow-hidden rounded-lg w-full max-w-[270px] -mt-6">
<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="1200" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example2@1-1@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@1-1@1200w.jpg">
</picture>
</div>
</div>
<div class="flex flex-col gap-7 justify-between h-full">
<div class="relative z-10">
<h2 class="text-center text-bravo font-extrabold mb-2 text-xl xl:text-2xl leading-tight group-hover:underline">Multi-device happy</h2>
<p class="text-grey-600 text-base xl:text-lg text-center leading-normal">Download up to 15x faster and upload up to 77x faster than part fibre - no sweat</p>
</div>
</div>
</a>
</div>
</div>
<div class="flex-1 md:max-w-lg">
<div class="pt-6 h-full">
<a class="w-full h-full rounded-2xl group shadow-card-lg gap-8 flex flex-col border border-grey-200 card-hover relative bg-grey-50 px-10 pb-7 flex flex-col gap-7 items-stretch" href="#">
<div class="bg-brand-gradient-2 absolute top-0 left-0 w-full h-28 angled-mask-mega-card z-0 rounded-t-2xl"></div>
<div class="flex justify-center w-full">
<div class="relative z-10 overflow-hidden rounded-lg w-full max-w-[270px] -mt-6">
<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="1200" data-sizes="auto" data-srcset="/front-end/images/test-imagery/example3@1-1@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example3@1-1@1200w.jpg">
</picture>
</div>
</div>
<div class="flex flex-col gap-7 justify-between h-full">
<div class="relative z-10">
<h2 class="text-center text-bravo font-extrabold mb-2 text-xl xl:text-2xl leading-tight group-hover:underline">Smart Wi-fi</h2>
<p class="text-grey-600 text-base xl:text-lg text-center leading-normal">Provides complete coverage so say goodbye to poor signal strength</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="max-lg:py-12">
<div class="max-w-[1600px] mx-auto relative bg-white lg:opacity-0" data-vanilla-module="StoryScrollComponent" data-snap="false" data-image-transition="boxed">
<div class="relative lg:h-screen lg:flex px-4 xsm:px-6 md:px-10 lg:px-14 xl:px-16 2xl:px-0" data-pin-track>
<div class="flex-1 relative h-full overflow-hidden">
<div class="lg:absolute lg:inset-0 flex flex-col justify-center max-lg:pb-12" data-text-panel>
<div class="overflow-hidden relative max-lg:block hidden mb-6 aspect-square bg-grey-50" data-mobile-image>
<picture>
<source media="(max-width: 1023px)" srcset="/front-end/images/test-imagery/cta-1@1-1@783w.jpg">
<img class="lazyload w-full absolute top-0 left-0 h-full object-cover rounded-lg" alt="" data-src="../../front-end/images/pixel.png" />
</picture>
<div class="absolute inset-0 bg-grey-50 pointer-events-none" data-mobile-mask></div>
</div>
<div class="lg:w-8/12 pl-[22px] lg:pl-[44px] relative" data-text-inner>
<span class="absolute left-0 top-0 h-full w-1 bg-alpha origin-top" data-border-line></span>
<p class="text-[#8F8F8F] 3xl:text-lg tracking-[2px] mb-4 uppercase">
New Eero Router
</p>
<h2 class="text-4xl 3xl:text-7xl text-bravo-800 font-bold mb-7 leading-tight">
Latest hardware to power your home.
</h2>
<div class="prose prose-p:leading-snug prose-ul:leading-snug prose-ol:leading-snug lg:prose-2xl">
<p>All our packages now include a powerful eero router with the latest WiFi 7 technology, allowing your home to connect over 120 devices at the same time - with a fast, reliable connection as standard.</p>
<p>You can also add Smart WiFi to extend coverage throughout your home, so you stay connected in even more places.
<p>
</div>
</div>
</div>
<div class="lg:absolute lg:inset-0 flex flex-col justify-center max-lg:pb-12" data-text-panel>
<div class="overflow-hidden relative max-lg:block hidden mb-6 aspect-square bg-grey-50" data-mobile-image>
<video data-vanilla-module="LazyVideo" class="w-full absolute top-0 left-0 h-full object-cover rounded-lg" muted="" autoplay="" loop="" playsinline="">
<source media="(max-width: 1023px)" data-src="/front-end/playground/field.webm" type="video/webm">
</video>
<div class="absolute inset-0 bg-grey-50 pointer-events-none" data-mobile-mask></div>
</div>
<div class="lg:w-8/12 pl-[22px] lg:pl-[44px] relative" data-text-inner>
<span class="absolute left-0 top-0 h-full w-1 bg-alpha origin-top" data-border-line></span>
<p class="text-[#8F8F8F] 3xl:text-lg tracking-[2px] mb-4 uppercase">
Smart WiFi guarantee
</p>
<h2 class="text-4xl 3xl:text-7xl text-bravo-800 font-bold mb-7 leading-tight">
Blast off with powerful, intelligent WiFi
</h2>
<div class="prose prose-p:leading-snug prose-ul:leading-snug prose-ol:leading-snug lg:prose-2xl">
<p>Whichever package you choose, it’s backed by our WiFi Guarantee - giving you peace of mind that you’ll enjoy strong, reliable WiFi. The Mesh technology in our Smart WiFi uses powerful nodes to increase coverage and performance around your home.</p>
</div>
</div>
</div>
<div class="lg:absolute lg:inset-0 flex flex-col justify-center max-lg:pb-12" data-text-panel>
<div class="overflow-hidden relative max-lg:block hidden mb-6 aspect-square bg-grey-50" data-mobile-image>
<picture>
<source media="(max-width: 1023px)" srcset="/front-end/images/test-imagery/cta-3@1-1@783w.jpg">
<img class="lazyload w-full absolute top-0 left-0 h-full object-cover rounded-lg" alt="" data-src="../../front-end/images/pixel.png" />
</picture>
<div class="absolute inset-0 bg-grey-50 pointer-events-none" data-mobile-mask></div>
</div>
<div class="lg:w-8/12 pl-[22px] lg:pl-[44px] relative" data-text-inner>
<span class="absolute left-0 top-0 h-full w-1 bg-alpha origin-top" data-border-line></span>
<p class="text-[#8F8F8F] 3xl:text-lg tracking-[2px] mb-4 uppercase">
Professional installation
</p>
<h2 class="text-4xl 3xl:text-7xl text-bravo-800 font-bold mb-7 leading-tight">
Seamless switching
</h2>
<div class="prose prose-p:leading-snug prose-ul:leading-snug prose-ol:leading-snug lg:prose-2xl">
<p>Our customer service team will be on hand to support you and make the process of switching to full fibre seamless and without any disruption.</p>
<p>On installation day, our expert engineers will make sure everything is fully set up, you’re connected and ready to go.</p>
</div>
</div>
</div>
</div>
<div class="flex-1 relative h-full overflow-hidden max-lg:hidden">
<div class="absolute inset-0 bg-white overflow-hidden px-12" data-image-panel>
<div class="w-full h-full flex items-center justify-center" data-image-inner>
<picture>
<source media="(min-width: 1024px)" srcset="/front-end/images/test-imagery/cta-1@1-1@783w.jpg">
<img class="lazyload aspect-square rounded-[16px] object-cover block" alt="" data-src="../../front-end/images/pixel.png" />
</picture>
</div>
<div class="absolute inset-0 bg-white pointer-events-none" data-image-reveal></div>
</div>
<div class="absolute inset-0 bg-white overflow-hidden px-12" data-image-panel>
<div class="w-full h-full flex items-center justify-center" data-image-inner>
<video data-vanilla-module="LazyVideo" class="aspect-square rounded-[16px] object-cover block" muted="" autoplay="" loop="" playsinline="">
<source media="(min-width: 1024px)" data-src="/front-end/playground/field.webm" type="video/webm">
</video>
</div>
</div>
<div class="absolute inset-0 bg-white overflow-hidden px-12" data-image-panel>
<div class="w-full h-full flex items-center justify-center" data-image-inner>
<picture>
<source media="(min-width: 1024px)" srcset="/front-end/images/test-imagery/cta-3@1-1@783w.jpg">
<img class="lazyload aspect-square rounded-[16px] object-cover block" alt="" data-src="../../front-end/images/pixel.png" />
</picture>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 pt-14 pb-16 lg:pt-20 lg:pb-20 ">
<div class="absolute w-full h-full top-0 left-0 z-0">
<div class="aspect-[16/10]"></div>
<video preload="none" class="lazyload absolute object-cover w-full h-full top-0 left-0" muted autoplay loop playsinline>
<source src="/front-end/playground/GC-afx-Space-blur-tint-1920.webm" type="video/mp4">
</video>
</div>
<div class="container">
<div class="max-w-[950px] mx-auto px-6 md:px-28 rounded-[2.5rem] relative z-10 bg-grey-50 py-12 ">
<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">Not ready to buy yet?</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>Register your details and we'll keep in touch with our latest offers.</p>
</div>
</div>
</div>
<div>
<div class="flex flex-col gap-4">
<label class="block">
<span class="text-bravo-900 mb-2 block font-bold lg:text-lg">Name</span>
<input type="text" class="
block
w-full
rounded-lg
border-grey-400
p-4
default-focus focus-within:ring-black" placeholder="">
</label>
<label class="block">
<span class="text-bravo-900 mb-2 block font-bold lg:text-lg">Email</span>
<input type="text" class="
block
w-full
rounded-lg
border-grey-400
p-4
default-focus focus-within:ring-black" placeholder="">
</label>
<label class="block">
<span class="text-bravo-900 mb-2 block font-bold lg:text-lg">Contact Number</span>
<input type="text" class="
block
w-full
rounded-lg
border-grey-400
p-4
default-focus focus-within:ring-black" placeholder="">
</label>
<label class="block">
<span class="text-bravo-900 mb-2 block font-bold lg:text-lg">Postcode</span>
<input type="text" class="
block
w-full
rounded-lg
border-grey-400
p-4
default-focus focus-within:ring-black" placeholder="">
</label>
</div>
<div class="mt-14 text-center">
<button class="btn group bg-alpha text-white border-2 border-alpha">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Register interest
</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>
</div>
</div>
<div class="js-component relative z-0 overflow-hidden component-spacer-margin">
<div class="container ">
<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">"It's a gamechanger"</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>Cricket legend Darren Gough explains how Gigaclear's full fibre broadband makes rural life easier</p>
</div>
</div>
</div>
<div class="w-full splide" data-vanilla-module="Slider" data-splide='{"perPage":1,"mediaQuery":"min","pagination":false,"arrows":true,"gap":"1.5rem","padding":{"right":"4.5rem"},"breakpoints":{"768":{"perPage":3,"mediaQuery":"min","arrows":true,"gap":"1.5rem","padding":{"right":"0rem"}},"1024":{"perPage":4,"mediaQuery":"min","arrows":true,"gap":"1.5rem","padding":{"right":"0rem"}}}}'>
<div class="splide__track !overflow-visible">
<div class="splide__list">
<div class="splide__slide">
<button data-micromodal-trigger="1" class="w-full rounded-[20px] group transition-colors ease-in-out duration-300 bg-white hover:bg-grey-100 h-full relative z-10 border-transparent card-hover">
<div class="bg-grey rounded-[20px] aspect-[3/4] relative overflow-hidden">
<div class="js-frame">
<picture class="block overflow-hidden w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="400" height="533" data-sizes="auto" data-srcset="/front-end/images/test-imagery/video-list-1@12-16@400w.png 400w" data-src="/front-end/images/test-imagery/video-list-1@12-16@400w.png">
</picture>
<div class="absolute bottom-4 left-4 text-white text-xl flex items-center gap-2">
<div class="bg-white/40 group-hover:bg-alpha transition ease-in-out duration-300 w-10 h-10 rounded-full flex items-center justify-center">
<svg class="fill-current w-4 h-4 relative -mr-1">
<use href="/front-end/sprite.svg?v=1.2#icon-play"></use>
</svg>
</div>
</div>
</div>
</div>
<h2 class="text-xl lg:text-2xl xl:text-3xl text-left font-semibold px-4 xl:px-7 pt-5 pb-7 text-bravo">
How important is broadband to you? (Standard)
</h2>
</button>
</div>
<div class="fixed bg-black/70 z-50 -inset-0 hidden overflow-auto" id="1" aria-hidden="true" data-vanilla-module="Modal" data-video-modal data-prev-id="" data-next-id="2">
<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-xl 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 Video Modal</span>
</button>
</div>
<div class="relative aspect-[16/9] bg-black shadow-xl overflow-hidden rounded-md " data-video-container>
<iframe class="absolute top-0 left-0 w-full h-full js-iframe" data-src="https://www.youtube.com/embed/XiX8pZPLsGY?autoplay=true" frameborder="0" allow="autoplay"></iframe>
<button class="js-modal-next absolute right-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 bg-alpha shadow-lg rounded-full flex items-center justify-center" aria-label="Next video" data-target="2">
<svg class="fill-current text-white -rotate-90 w-4 h-4 relative -mr-1">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="splide__slide">
<button data-micromodal-trigger="2" class="w-full rounded-[20px] group transition-colors ease-in-out duration-300 bg-white hover:bg-grey-100 h-full relative z-10 border-transparent card-hover">
<div class="bg-grey rounded-[20px] aspect-[3/4] relative overflow-hidden">
<div class="js-frame">
<picture class="block overflow-hidden w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="400" height="533" data-sizes="auto" data-srcset="/front-end/images/test-imagery/video-list-2@12-16@400w.png 400w" data-src="/front-end/images/test-imagery/video-list-2@12-16@400w.png">
</picture>
<div class="absolute bottom-4 left-4 text-white text-xl flex items-center gap-2">
<div class="bg-white/40 group-hover:bg-alpha transition ease-in-out duration-300 w-10 h-10 rounded-full flex items-center justify-center">
<svg class="fill-current w-4 h-4 relative -mr-1">
<use href="/front-end/sprite.svg?v=1.2#icon-play"></use>
</svg>
</div>
</div>
</div>
</div>
<h2 class="text-xl lg:text-2xl xl:text-3xl text-left font-semibold px-4 xl:px-7 pt-5 pb-7 text-bravo">
What was life like before Gigaclear? (Mobile/Short)
</h2>
</button>
</div>
<div class="fixed bg-black/70 z-50 -inset-0 hidden overflow-auto" id="2" aria-hidden="true" data-vanilla-module="Modal" data-video-modal data-prev-id="1" data-next-id="3">
<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 max-w-[450px] 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 Video Modal</span>
</button>
</div>
<div class="relative aspect-[9/16] mx-auto bg-black shadow-xl overflow-hidden rounded-md max-h-[calc(100vh-9.5rem)]" data-video-container>
<button class="js-modal-prev absolute left-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 bg-alpha shadow-lg rounded-full flex items-center justify-center" aria-label="Previous video" data-target="1">
<svg class="fill-current text-white rotate-90 w-4 h-4 relative -ml-1">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</button>
<iframe class="absolute top-0 left-0 w-full h-full js-iframe" data-src="https://www.youtube.com/embed/FvssOT4EIU8?autoplay=true" frameborder="0" allow="autoplay"></iframe>
<button class="js-modal-next absolute right-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 bg-alpha shadow-lg rounded-full flex items-center justify-center" aria-label="Next video" data-target="3">
<svg class="fill-current text-white -rotate-90 w-4 h-4 relative -mr-1">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="splide__slide">
<button data-micromodal-trigger="3" class="w-full rounded-[20px] group transition-colors ease-in-out duration-300 bg-white hover:bg-grey-100 h-full relative z-10 border-transparent card-hover">
<div class="bg-grey rounded-[20px] aspect-[3/4] relative overflow-hidden">
<div class="js-frame">
<picture class="block overflow-hidden w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="400" height="533" data-sizes="auto" data-srcset="/front-end/images/test-imagery/video-list-3@12-16@400w.png 400w" data-src="/front-end/images/test-imagery/video-list-3@12-16@400w.png">
</picture>
<div class="absolute bottom-4 left-4 text-white text-xl flex items-center gap-2">
<div class="bg-white/40 group-hover:bg-alpha transition ease-in-out duration-300 w-10 h-10 rounded-full flex items-center justify-center">
<svg class="fill-current w-4 h-4 relative -mr-1">
<use href="/front-end/sprite.svg?v=1.2#icon-play"></use>
</svg>
</div>
</div>
</div>
</div>
<h2 class="text-xl lg:text-2xl xl:text-3xl text-left font-semibold px-4 xl:px-7 pt-5 pb-7 text-bravo">
How long have you been with us? (Standard)
</h2>
</button>
</div>
<div class="fixed bg-black/70 z-50 -inset-0 hidden overflow-auto" id="3" aria-hidden="true" data-vanilla-module="Modal" data-video-modal data-prev-id="2" data-next-id="4">
<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-xl 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 Video Modal</span>
</button>
</div>
<div class="relative aspect-[16/9] bg-black shadow-xl overflow-hidden rounded-md " data-video-container>
<button class="js-modal-prev absolute left-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 bg-alpha shadow-lg rounded-full flex items-center justify-center" aria-label="Previous video" data-target="2">
<svg class="fill-current text-white rotate-90 w-4 h-4 relative -ml-1">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</button>
<iframe class="absolute top-0 left-0 w-full h-full js-iframe" data-src="https://www.youtube.com/embed/XiX8pZPLsGY?autoplay=true" frameborder="0" allow="autoplay"></iframe>
<button class="js-modal-next absolute right-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 bg-alpha shadow-lg rounded-full flex items-center justify-center" aria-label="Next video" data-target="4">
<svg class="fill-current text-white -rotate-90 w-4 h-4 relative -mr-1">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="splide__slide">
<button data-micromodal-trigger="4" class="w-full rounded-[20px] group transition-colors ease-in-out duration-300 bg-white hover:bg-grey-100 h-full relative z-10 border-transparent card-hover">
<div class="bg-grey rounded-[20px] aspect-[3/4] relative overflow-hidden">
<div class="js-frame">
<picture class="block overflow-hidden w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="400" height="533" data-sizes="auto" data-srcset="/front-end/images/test-imagery/video-list-1@12-16@400w.png 400w" data-src="/front-end/images/test-imagery/video-list-1@12-16@400w.png">
</picture>
<div class="absolute bottom-4 left-4 text-white text-xl flex items-center gap-2">
<div class="bg-white/40 group-hover:bg-alpha transition ease-in-out duration-300 w-10 h-10 rounded-full flex items-center justify-center">
<svg class="fill-current w-4 h-4 relative -mr-1">
<use href="/front-end/sprite.svg?v=1.2#icon-play"></use>
</svg>
</div>
</div>
</div>
</div>
<h2 class="text-xl lg:text-2xl xl:text-3xl text-left font-semibold px-4 xl:px-7 pt-5 pb-7 text-bravo">
What do you use broadband for? (Mobile/Short)
</h2>
</button>
</div>
<div class="fixed bg-black/70 z-50 -inset-0 hidden overflow-auto" id="4" aria-hidden="true" data-vanilla-module="Modal" data-video-modal data-prev-id="3" data-next-id="5">
<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 max-w-[450px] 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 Video Modal</span>
</button>
</div>
<div class="relative aspect-[9/16] mx-auto bg-black shadow-xl overflow-hidden rounded-md max-h-[calc(100vh-9.5rem)]" data-video-container>
<button class="js-modal-prev absolute left-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 bg-alpha shadow-lg rounded-full flex items-center justify-center" aria-label="Previous video" data-target="3">
<svg class="fill-current text-white rotate-90 w-4 h-4 relative -ml-1">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</button>
<iframe class="absolute top-0 left-0 w-full h-full js-iframe" data-src="https://www.youtube.com/embed/FvssOT4EIU8?autoplay=true" frameborder="0" allow="autoplay"></iframe>
<button class="js-modal-next absolute right-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 bg-alpha shadow-lg rounded-full flex items-center justify-center" aria-label="Next video" data-target="5">
<svg class="fill-current text-white -rotate-90 w-4 h-4 relative -mr-1">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="splide__slide">
<button data-micromodal-trigger="5" class="w-full rounded-[20px] group transition-colors ease-in-out duration-300 bg-white hover:bg-grey-100 h-full relative z-10 border-transparent card-hover">
<div class="bg-grey rounded-[20px] aspect-[3/4] relative overflow-hidden">
<div class="js-frame">
<picture class="block overflow-hidden w-full">
<img class="lazyload transition ease-in-out duration-300 group-hover:scale-110 w-full" alt="" width="400" height="533" data-sizes="auto" data-srcset="/front-end/images/test-imagery/video-list-2@12-16@400w.png 400w" data-src="/front-end/images/test-imagery/video-list-2@12-16@400w.png">
</picture>
<div class="absolute bottom-4 left-4 text-white text-xl flex items-center gap-2">
<div class="bg-white/40 group-hover:bg-alpha transition ease-in-out duration-300 w-10 h-10 rounded-full flex items-center justify-center">
<svg class="fill-current w-4 h-4 relative -mr-1">
<use href="/front-end/sprite.svg?v=1.2#icon-play"></use>
</svg>
</div>
</div>
</div>
</div>
<h2 class="text-xl lg:text-2xl xl:text-3xl text-left font-semibold px-4 xl:px-7 pt-5 pb-7 text-bravo">
Lorem ipsum dolor sit amet? (timestamp)
</h2>
</button>
</div>
<div class="fixed bg-black/70 z-50 -inset-0 hidden overflow-auto" id="5" aria-hidden="true" data-vanilla-module="Modal" data-video-modal data-prev-id="4" data-next-id="">
<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-xl 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 Video Modal</span>
</button>
</div>
<div class="relative aspect-[16/9] bg-black shadow-xl overflow-hidden rounded-md " data-video-container>
<button class="js-modal-prev absolute left-4 top-1/2 -translate-y-1/2 z-20 w-10 h-10 bg-alpha shadow-lg rounded-full flex items-center justify-center" aria-label="Previous video" data-target="4">
<svg class="fill-current text-white rotate-90 w-4 h-4 relative -ml-1">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</button>
<iframe class="absolute top-0 left-0 w-full h-full js-iframe" data-src="https://www.youtube.com/embed/XiX8pZPLsGY?start=12&autoplay=true" frameborder="0" allow="autoplay"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex items-center w-auto xsm:w-100 mt-5 lg:mt-10">
<div class="splide__arrows flex justify-center items-center lg:block">
<div class="flex gap-3">
<button class="group splide__arrow splide__arrow--prev w-12 h-12 rounded-full flex items-center bg-bravo-800 border border-bravo-800 hover:bg-bravo-900 hover:border-bravo-900 text-white hover:text-white justify-center transition ease-in-out duration-300">
<div class="rotate-90">
<svg class="w-5 h-3 relative fill-current -mb-0.5" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
<span class="sr-only text-white">Previous</span>
</button>
<button class="group splide__arrow splide__arrow--next w-12 h-12 rounded-full flex items-center bg-bravo-800 border border-bravo-800 hover:bg-bravo-900 hover:border-bravo-900 text-white hover:text-white justify-center transition ease-in-out duration-300">
<div class="-rotate-90">
<svg class="w-5 h-3 relative fill-current -mb-0.5" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
<span class="sr-only text-white">Next</span>
</button>
</div>
</div>
<div class="flex flex-1 justify-center items-center pl-5 lg:pl-8 pr-4">
<div class="w-full">
<div class="bg-bravo-800/20 rounded-full splide-progress-bar overflow-hidden">
<div class="h-2 w-0 bg-bravo-800 transition-all ease-in-out duration-300 splide-progress-bar__step"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="container relative">
<div class="max-w-screen-xl mx-auto">
<div class="text-center mb-10 lg:mb-16">
<div>
<div class="uppercase text-grey-600 mb-3 font-semibold">
<p>Heading Label</p>
</div>
<h2 class="text-4xl lg:text-8xl block font-heading font-extrabold leading-tight text-bravo mb-4 lg:mb-6">Switching is easy</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>Find out more about One Touch Switch, where we contact your current provider for you.</p>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 gap-8 md:grid-cols-3 ">
<a href="" class="group flex flex-col items-center justify-start relative h-full border border-grey-200 shadow-card rounded-3xl card-hover bg-grey-50 px-6 lg:px-11 pb-14 lg:pb-12 ">
<div class="w-full flex justify-center overflow-hidden">
<div class="w-28 h-28 bg-alpha -mt-px relative z-0 flex rounded-b-[60px] justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInDown">
<div class="w-full h-16">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-shield"></use>
</svg>
</div>
</div>
</div>
<div>
<h2 class="text-center font-heading font-bold leading-[1.12] text-3xl lg:text-5xl text-bravo">Pick your broadband package</h2>
</div>
<div class="text-center text-grey-600 pt-4 leading-snug text-lg xl:text-xl">
Choose ultrafast or hyperfast speeds, with optional Smart WiFi and Home Phone
</div>
</a>
<a href="" class="group flex flex-col items-center justify-start relative h-full border border-grey-200 shadow-card rounded-3xl card-hover bg-grey-50 px-6 lg:px-11 pb-14 lg:pb-12 ">
<div class="w-full flex justify-center overflow-hidden">
<div class="w-28 h-28 bg-alpha -mt-px relative z-0 flex rounded-b-[60px] justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInDown">
<div class="w-full h-16">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-shield"></use>
</svg>
</div>
</div>
</div>
<div>
<h2 class="text-center font-heading font-bold leading-[1.12] text-3xl lg:text-5xl text-bravo">Pick an installation date</h2>
</div>
<div class="text-center text-grey-600 pt-4 leading-snug text-lg xl:text-xl">
So we know when to pop round and get your connection ready
</div>
</a>
<a href="" class="group flex flex-col items-center justify-start relative h-full border border-grey-200 shadow-card rounded-3xl card-hover bg-grey-50 px-6 lg:px-11 pb-14 lg:pb-12 ">
<div class="w-full flex justify-center overflow-hidden">
<div class="w-28 h-28 bg-alpha -mt-px relative z-0 flex rounded-b-[60px] justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInDown">
<div class="w-full h-16">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-shield"></use>
</svg>
</div>
</div>
</div>
<div>
<h2 class="text-center font-heading font-bold leading-[1.12] text-3xl lg:text-5xl text-bravo">We’ll get you connected</h2>
</div>
<div class="text-center text-grey-600 pt-4 leading-snug text-lg xl:text-xl">
Our engineers will connect your home and set up your WiFi
</div>
</a>
</div>
</div>
</div>
<div class="js-component relative z-0 my-12 lg:my-20">
<div class="bg-darkblue items-center p-6">
<div class="max-w-4xl mx-auto">
<div class="flex flex-col lg:flex-row items-center justify-center gap-2 lg:gap-7">
<div>
<h3 class="font-extrabold text-xl text-grey-800">Excellent</h3>
</div>
<div class="flex-shrink-0">
<!-- retrieve stars from business unit API -->
<img src="/front-end/images/trustpilot/stars/stars-5.svg" alt="Trustpilot 5 out of 5 stars" loading="lazy" width="165" height="31" />
<p class="text-grey-600 mt-2.5 text-center">
Over 31,000 reviews
</p>
</div>
<div class="flex-shrink-0">
<img width="130" height="32" src="/front-end/images/trustpilot/logo.svg" loading="lazy" alt="Trustpilot logo" />
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 overflow-hidden lg:overflow-visible component-spacer-margin">
<div class="container ">
<div class="text-center mb-10 lg:mb-16">
<div>
<div class="uppercase text-grey-600 mb-3 font-semibold">
<p>Heading Label</p>
</div>
<h2 class="text-4xl lg:text-8xl block font-heading font-extrabold leading-tight text-bravo mb-4 lg:mb-6">Headline copy</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>Lorem ipsum dolor sit amet consectetur. Nunc nunc pulvinar adipiscing vitae. Lorem convallis lorem diam ornare. Sed ornare et diam risus arcu id.</p>
</div>
</div>
</div>
<div class="w-full splide" data-vanilla-module="Slider" data-splide='{"perPage":1,"mediaQuery":"min","pagination":true,"arrows":false,"gap":"1.5rem","padding":{"right":"4.5rem"},"breakpoints":{"768":{"perPage":2,"mediaQuery":"min","pagination":true,"arrows":false,"gap":"1.5rem","padding":{"right":"0rem"}},"1024":{"destroy":true}}}'>
<div class="splide__track !overflow-visible">
<div class="lg:!grid lg:!gap-6 lg:!grid-cols-4 splide__list">
<div class="splide__slide">
<a class="h-full group relative flex items-stretch shadow-card border border-grey-200 card-hover rounded-2xl bg-grey-50 px-6 py-7 sm:px-4 sm:py-5 xl:px-6 xl:py-7 flex flex-col gap-7 items-stretch" href="#">
<div class="rounded-t-2xl bg-brand-gradient-2 absolute top-0 left-0 w-full h-28 angled-mask-mega-card z-0"></div>
<div class="relative z-10 rounded-md overflow-hidden shrink-0">
<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/example4@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example4@16-9@1200w.jpg">
</picture>
</div>
<div class="relative z-10 flex h-full flex-col justify-between">
<h2 class="text-bravo font-extrabold mb-2 text-xl xl:text-2xl leading-tight group-hover:underline">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
<p class="text-grey-600 text-base xl:text-lg leading-snug"></p>
<div class="mt-4">
<div class="tag bg-delta w-max py-1 px-1.5 rounded text-xs text-grey-800">
test
</div>
</div>
</div>
</a>
</div>
<div class="splide__slide">
<a class="h-full group relative flex items-stretch shadow-card border border-grey-200 card-hover rounded-2xl bg-grey-50 px-6 py-7 sm:px-4 sm:py-5 xl:px-6 xl:py-7 flex flex-col gap-7 items-stretch" href="#">
<div class="rounded-t-2xl bg-brand-gradient-2 absolute top-0 left-0 w-full h-28 angled-mask-mega-card z-0"></div>
<div class="relative z-10 rounded-md overflow-hidden shrink-0">
<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/example3@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example3@16-9@1200w.jpg">
</picture>
</div>
<div class="relative z-10 flex h-full flex-col justify-between">
<h2 class="text-bravo font-extrabold mb-2 text-xl xl:text-2xl leading-tight group-hover:underline">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
<p class="text-grey-600 text-base xl:text-lg leading-snug"></p>
<div class="mt-4">
<div class="tag bg-delta w-max py-1 px-1.5 rounded text-xs text-grey-800">
This is a tag
</div>
</div>
</div>
</a>
</div>
<div class="splide__slide">
<a class="h-full group relative flex items-stretch shadow-card border border-grey-200 card-hover rounded-2xl bg-grey-50 px-6 py-7 sm:px-4 sm:py-5 xl:px-6 xl:py-7 flex flex-col gap-7 items-stretch" href="#">
<div class="rounded-t-2xl bg-brand-gradient-2 absolute top-0 left-0 w-full h-28 angled-mask-mega-card z-0"></div>
<div class="relative z-10 rounded-md overflow-hidden shrink-0">
<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/example2@16-9@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/example2@16-9@1200w.jpg">
</picture>
</div>
<div class="relative z-10 flex h-full flex-col justify-between">
<h2 class="text-bravo font-extrabold mb-2 text-xl xl:text-2xl leading-tight group-hover:underline">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
<p class="text-grey-600 text-base xl:text-lg leading-snug"></p>
<div class="mt-4">
<div class="tag bg-delta w-max py-1 px-1.5 rounded text-xs text-grey-800">
This is a tag
</div>
</div>
</div>
</a>
</div>
<div class="splide__slide">
<a class="h-full group relative flex items-stretch shadow-card border border-grey-200 card-hover rounded-2xl bg-grey-50 px-6 py-7 sm:px-4 sm:py-5 xl:px-6 xl:py-7 flex flex-col gap-7 items-stretch" href="#">
<div class="rounded-t-2xl bg-brand-gradient-2 absolute top-0 left-0 w-full h-28 angled-mask-mega-card z-0"></div>
<div class="relative z-10 rounded-md overflow-hidden shrink-0">
<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/example2@16-9@1200w.jpg">
</picture>
</div>
<div class="relative z-10 flex h-full flex-col justify-between">
<h2 class="text-bravo font-extrabold mb-2 text-xl xl:text-2xl leading-tight group-hover:underline">Refer a friend </h2>
<p class="text-grey-600 text-base xl:text-lg leading-snug"></p>
<div class="mt-4">
<div class="tag bg-delta w-max py-1 px-1.5 rounded text-xs text-grey-800">
This is a tag
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="w-full">
<a href="" class="flex gap-1.5 justify-center items-center mt-8 group transition ease-in-out duration-300">
<span class="text-grey-700 relative z-10">View all</span>
<svg class="fill-current text-alpha w-4 h-4 relative z-10 group-hover:translate-x-1 transition ease-in-out duration-300">
<use href="/front-end/sprite.svg?v=1.2#icon-arrow"></use>
</svg>
</a>
</div>
</div>
</div>
{% render "@hero-variant-1", hero, true %}
{% for component in componentsList %}
{% render "@" + component.name, component.data, true %}
{% endfor %}
{
"siteName": "Gigaclear Pattern Library",
"pageName": "Home",
"activeSection": "personal",
"hero": {
"heading": [
"Faster",
"broadband for",
"rural britain"
],
"subHeading": " For the best speed, home connectivity and service ",
"fullHeight": true,
"showPostcodeLookup": true
},
"componentsList": [
{
"name": "story-stack-component--with-overlap"
},
{
"name": "packages-component--horizontal-display"
},
{
"name": "media-content-panel-style-1-component"
},
{
"name": "media-content-panel-style-1-component--contrast-bg"
},
{
"name": "cta-card-list-style-2-component"
},
{
"name": "story-scroll-component--boxed"
},
{
"name": "form-component--sign-up"
},
{
"name": "video-list"
},
{
"name": "summary-card-list-component",
"data": {
"headline": {
"heading": "Switching is easy",
"summary": "Find out more about One Touch Switch, where we contact your current provider for you."
},
"summaryList": [
{
"heading": "Pick your broadband package",
"copy": " Choose ultrafast or hyperfast speeds, with optional Smart WiFi and Home Phone",
"icon": "icon-shield"
},
{
"heading": "Pick an installation date",
"copy": " So we know when to pop round and get your connection ready",
"icon": "icon-shield"
},
{
"heading": "We’ll get you connected",
"copy": "Our engineers will connect your home and set up your WiFi",
"icon": "icon-shield"
}
]
}
},
{
"name": "trustpilot-component"
},
{
"name": "featured-article-card-list-component"
}
]
}
No notes defined.