<div class="js-component relative z-0 pt-26 lg:min-h-[600px]">
<div class="h-[250px] absolute top-0 left-0 z-10 w-full hero-gradient pointer-events-none opacity-25"></div>
<div class="bg-gradient-to-l bg-brand-gradient absolute top-0 left-0 w-full h-[80%] lg:h-full z-0 mob-hero-slant-clip-path lg:hero-slant-clip-path"></div>
<div class="relative z-20">
<div class="container flex flex-col lg:flex-row lg:items-center lg:gap-6">
<div class="lg:min-h-[435px] flex-1 flex items-center pb-12 lg:pb-0 ">
<div class="text-left">
<h1>
<span class="text-white font-extrabold italic uppercase text-[clamp(2rem,8vw,88px)] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] block hero-text leading-[0.9]">Packages</span>
</h1>
<div class="mt-6 text-white font-extrabold italic text-[clamp(1rem,3vw,32px)] text-white hero-text leading-[0.9] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="relative z-10 flex-1 flex lg:-mb-48">
<picture class="block overflow-hidden rounded-[12px] w-full">
<img class="lazyload w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/eros@16-10@1200w.png 1200w" data-src="/front-end/images/test-imagery/eros@16-10@1200w.png">
</picture>
</div>
</div>
</div>
</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="./packages.html">
<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="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":{"perPage":3,"mediaQuery":"min","pagination":false,"arrows":false,"gap":"1.5rem","padding":{"right":"2.5rem"}},"1284":{"destroy":true}}}'>
<div class="splide__track !overflow-visible">
<div class="xl:!gap-7 xl:!flex xl:justify-center splide__list">
<div class="splide__slide xl:!flex-1 xl: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">Limited offer</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">300Mbps</span>
<span class="text-bravo text-sm leading-normal">avg. download/upload</span>
</div>
<div class="flex flex-col text-center gap-0.5">
<span class="font-bold text-bravo text-8xl">£19</span>
<span class="font-bold text-bravo text-sm lg:text-base">a month</span>
</div>
<div class="flex items-center justify-center mt-2">
<div data-vanilla-module="PackageButtonStep2" data-package-id="1">
<div class="hidden" data-package-action-wrapper>
<button class="btn btn--sm bg-bravo text-white 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">
Select package
</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>
</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 xl:!flex-1 xl: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--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-delta-500 rounded-lg text-grey-800 uppercase font-bold inline-block">Limited offer</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 flex-col text-center gap-0.5">
<span class="font-bold text-bravo text-8xl">£24</span>
<span class="font-bold text-bravo text-sm lg:text-base">a month</span>
</div>
<div class="flex items-center justify-center mt-2">
<div data-vanilla-module="PackageButtonStep2" data-package-id="2">
<div class="hidden" data-package-action-wrapper>
<button class="btn btn--sm bg-bravo text-white 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">
Select package
</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>
</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 xl:!flex-1 xl: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--900.png" width="112" height="112">
</div>
<div>
<img class="lazyload mt-5" 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">Limited offer</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">900Mbps</span>
<span class="text-bravo text-sm leading-normal">avg. download/upload</span>
</div>
<div class="flex flex-col text-center gap-0.5">
<span class="font-bold text-bravo text-8xl">£29</span>
<span class="font-bold text-bravo text-sm lg:text-base">a month</span>
</div>
<div class="flex items-center justify-center mt-2">
<div data-vanilla-module="PackageButtonStep2" data-package-id="3">
<div class="hidden" data-package-action-wrapper>
<button class="btn btn--sm bg-bravo text-white 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">
Select package
</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>
</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 class="splide__slide xl:!flex-1 xl: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--900.png" width="112" height="112">
</div>
<div>
<img class="lazyload mt-5" 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">Limited offer</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">900Mbps</span>
<span class="text-bravo text-sm leading-normal">avg. download/upload</span>
</div>
<div class="flex flex-col text-center gap-0.5">
<span class="font-bold text-bravo text-8xl">£32</span>
<span class="font-bold text-bravo text-sm lg:text-base">a month</span>
</div>
<div class="flex items-center justify-center mt-2">
<div data-vanilla-module="PackageButtonStep2" data-package-id="4">
<div class="hidden" data-package-action-wrapper>
<button class="btn btn--sm bg-bravo text-white 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">
Select package
</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>
</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>
<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">
Smart WIFI
</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>
{% render "@hero-variant-2", hero, true %}
{% for component in componentsList %}
{% render "@" + component.name, component.data, true %}
{% endfor %}
{% 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 detail.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 %}
<div class="relative w-full component-spacer-margin">
<div class="container relative z-10">
{% render "@package-availability-status", { textColourClass: textColourClass, redirectUrl: './packages' } %}
{% if detail.headline %}
{% render "@headline", {
heading: detail.headline.heading,
summary: detail.headline.summary
} %}
{% endif %}
{% if detail.features %}
{% render "@package-features", { features: detail.features } %}
{% endif %}
<div class="w-full splide" data-vanilla-module="Slider" data-splide='{{ sliderData | dump | safe }}'>
<div class="splide__track !overflow-visible">
{% if detail.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:!gap-12 2xl:!gap-24" %}
{% set gridItem = "lg:!flex-1 lg:max-w-[420px]" %}
{% endif %}
<div class="{{ gridCols }} splide__list">
{% for item in detail.packages %}
<div class="splide__slide {{ gridItem }}">
{% render "@package-card", item %}
</div>
{% endfor %}
</div>
</div>
</div>
{% if detail.terms %}
<p class="font-bold lg:text-center text-grey-500 mt-11 max-w-[790px] mx-auto text-xm lg:text-base">
{{ detail.terms }}
</p>
{% endif %}
</div>
</div>
{
"siteName": "Gigaclear Pattern Library",
"pageName": "Packages",
"activeSection": "personal",
"hero": {
"heading": [
"Packages"
],
"caption": "Lorem ipsum dolor sit amet",
"image": {
"src": "images/test-imagery/eros@16-10@1200w.png",
"srcSet": [
{
"url": "images/test-imagery/eros@16-10@1200w.png",
"size": 1200
}
]
}
},
"detail": {
"headline": null,
"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": [
{
"horizontalDisplay": true,
"step2": true,
"id": 1,
"name": "Explorer",
"speed": "300Mbps",
"badgeImage": "images/packages/badge--300.png",
"routerImage": "images/packages/eros--1.png",
"price": 19,
"offer": "Limited offer",
"offerDescription": "First 2000 customers only",
"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."
},
{
"horizontalDisplay": true,
"step2": true,
"id": 2,
"name": "Voyager",
"speed": "500Mbps",
"badgeImage": "images/packages/badge--500.png",
"routerImage": "images/packages/eros--1.png",
"price": 24,
"offer": "Limited offer",
"offerDescription": "First 2000 customers only",
"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."
},
{
"horizontalDisplay": true,
"step2": true,
"id": 3,
"name": "Gallileo",
"speed": "900Mbps",
"badgeImage": "images/packages/badge--900.png",
"routerImage": "images/packages/eros--2.png",
"price": 29,
"offer": "Limited offer",
"offerDescription": "First 2000 customers only",
"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."
},
{
"horizontalDisplay": true,
"step2": true,
"id": 4,
"name": "Gallileo",
"speed": "900Mbps",
"badgeImage": "images/packages/badge--900.png",
"routerImage": "images/packages/eros--2.png",
"price": 32,
"offer": "Limited offer",
"offerDescription": "First 2000 customers only",
"features": [
"2x Eero Pro 7 Routers",
"Free Activation",
"Smart WIFI"
],
"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.