<div class="min-h-[400px] lg:min-h-[600px] h-[70vh] lg:h-screen flex items-center justify-center w-full relative overflow-hidden pb-48 xl:pb-64">
<div class="bg-gradient-to-r from-alpha to-alpha-700 absolute w-full left-0 top-0 h-full z-10 mix-blend-color"></div>
<div class="z-20 w-full flex justify-center px-6 lg:px-24">
<div class="w-[85%] mx-auto">
<p class="max-w-[900px] font-extrabold italic uppercase text-[clamp(2rem,8vw,88px)] text-white rotate-[-10.75deg] leading-[0.9] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
Faster
</p>
<p class="max-w-[900px] font-extrabold italic uppercase text-[clamp(2rem,8vw,88px)] text-white rotate-[-10.75deg] leading-[0.9] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
broadband for
</p>
<p class="max-w-[900px] font-extrabold italic uppercase text-[clamp(2rem,8vw,88px)] text-white rotate-[-10.75deg] leading-[0.9] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
rural britain
</p>
<div class="max-w-[900px] mt-6 font-extrabold italic text-[clamp(1rem,3vw,32px)] text-white rotate-[-10.75deg] leading-[0.9] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
For the best speed, home connectivity and service
</div>
</div>
</div>
</div>
<div class="w-full px-6 lg:px-24 relative -mt-20 xl:-mt-44 max-xl:pb-[80px]" data-vanilla-module="ScrollSlider">
<div class="relative flex justify-center z-20 overflow-hidden aspect-[12/15] sm:aspect-[16/12] lg:aspect-video">
<div class="js-container overflow-hidden relative aspect-[12/15] sm:aspect-[16/12] lg:aspect-video" style="width: 85%;">
<div class="js-slides-track relative w-full aspect-[12/15] sm:aspect-[16/12] lg:aspect-video rounded-xl overflow-hidden bg-black">
<div class="js-slide absolute inset-0 flex items-start px-6 xl:px-12 py-10 2xl:py-30" style="transform: translateX(0%);">
<img src="/front-end/playground/slide-1.jpg" class="absolute top-0 left-0 object-cover w-full h-full" />
<div style="visibility: hidden;" class="js-slide-text flex h-full flex-col 3xl:max-w-[80%] mx-auto w-full">
<div>
<p class="font-extrabold italic uppercase text-[48px] xl:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
Go fast
</p>
<p class="font-extrabold italic uppercase text-[48px] xl:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
and save
</p>
<p class="font-extrabold italic uppercase text-[48px] xl:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
this spring
</p>
<div class="mt-6 font-extrabold italic text-[18px] xl:text-[24px] 3xl:text-[32px] text-white rotate-[-10.75deg] leading-[0.9] js-line max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
Your household deserves 100% full fibre.
</div>
</div>
<div style="visibility: hidden;" class="js-slide-description bg-bravo p-5 3xl:p-10 3xl:text-2xl 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-slide absolute inset-0 flex items-start px-6 xl:px-12 py-10 2xl:py-30" style="transform: translateX(100%);">
<img src="/front-end/playground/slide-2.jpg" class="absolute top-0 left-0 object-cover w-full h-full" />
<div style="visibility: hidden;" class="js-slide-text flex h-full flex-col 3xl:max-w-[80%] mx-auto w-full">
<div>
<p class="font-extrabold italic uppercase text-[48px] xl:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
The best
</p>
<p class="font-extrabold italic uppercase text-[48px] xl:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
home
</p>
<p class="font-extrabold italic uppercase text-[48px] xl:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
connectivity
</p>
<div class="mt-6 font-extrabold italic text-[18px] xl:text-[24px] 3xl:text-[32px] text-white rotate-[-10.75deg] leading-[0.9] js-line max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
Perfect wifi signal around your home
</div>
</div>
<div style="visibility: hidden;" class="js-slide-description bg-bravo p-5 3xl:p-10 3xl:text-2xl 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-slide absolute inset-0 flex items-start px-6 xl:px-12 py-10 2xl:py-30" style="transform: translateX(100%);">
<img src="/front-end/playground/slide-3.jpg" class="absolute top-0 left-0 object-cover w-full h-full" />
<div style="visibility: hidden;" class="js-slide-text flex h-full flex-col 3xl:max-w-[80%] mx-auto w-full">
<div>
<p class="font-extrabold italic uppercase text-[48px] xl:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
The best
</p>
<p class="font-extrabold italic uppercase text-[48px] xl:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
home set up
</p>
<p class="font-extrabold italic uppercase text-[48px] xl:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
service
</p>
<div class="mt-6 font-extrabold italic text-[18px] xl:text-[24px] 3xl:text-[32px] text-white rotate-[-10.75deg] leading-[0.9] js-line max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
Your household deserves 100% full fibre.
</div>
</div>
<div style="visibility: hidden;" class="js-slide-description bg-bravo p-5 3xl:p-10 3xl:text-2xl 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>
</div>
</div>
<div class="absolute bottom-0 xl:bottom-6 left-1/2 -translate-x-1/2 flex gap-4 z-20">
<div class="js-pips flex items-center gap-2 justify-center bg-alpha-700 xl:bg-white py-2 rounded-full px-6" style="width: 156px;">
<div class="js-pip h-2 rounded-full bg-white xl:bg-alpha-700 flex-shrink-0" style="width: 8px; min-width: 8px;"></div>
<div class="js-pip h-2 rounded-full bg-white xl:bg-alpha-700 flex-shrink-0" style="width: 8px; min-width: 8px;"></div>
<div class="js-pip h-2 rounded-full bg-white xl:bg-alpha-700 flex-shrink-0" style="width: 8px; min-width: 8px;"></div>
</div>
<button class="js-pause text-white xl:text-alpha">
<svg xmlns="http://www.w3.org/2000/svg" width="59" height="56" viewBox="0 0 59 56" fill="none" class="js-pause-icon hidden">
<ellipse cx="29.1417" cy="28" rx="29.1417" ry="28" class="fill-white" />
<path d="M37.1024 26.0963C38.452 26.8371 38.4937 28.7611 37.1773 29.5596L26.8108 35.8474C25.4945 36.6459 23.8074 35.7199 23.7741 34.1806L23.5119 22.0591C23.4786 20.5199 25.1241 19.5218 26.4737 20.2626L37.1024 26.0963Z" class="fill-alpha-700" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="59" height="56" viewBox="0 0 59 56" fill="none" class="js-play">
<ellipse cx="29.1417" cy="28" rx="29.1417" ry="28" class="fill-alpha-700 xl:fill-white" />
<rect x="22" y="18" width="5" height="20" rx="2" class="fill-white xl:fill-alpha-700" />
<rect x="32" y="18" width="5" height="20" rx="2" class="fill-white xl:fill-alpha-700" />
</svg>
</button>
</div>
</div>
<section class="relative bg-grey-100 component-spacer-padding opacity-0" data-vanilla-module="HeroAnimationRevealBlock">
<div>
<div class="js-hero-grid grid h-full grid-rows-[1fr_auto] gap-12">
<div class="flex items-end justify-center">
<div class="js-copy-wrap">
<div class="js-copy mx-auto max-w-4xl px-6 text-center">
<p class="js-eyebrow mb-3 text-lg uppercase tracking-[2px] text-grey-600">
Ultrafast Speeds
</p>
<h2 class="js-heading mx-auto max-w-2xl text-5xl font-medium leading-tight text-black md:text-5xl">
Full fibre speeds are much faster than regular part fibre
</h2>
<p class="js-body mx-auto mt-6 max-w-xl text-xl text-grey-600">
Full fibre runs directly to your house, giving you the fastest and most
reliable speeds. Most rural properties do not have full fibre installed —
that's where we make the difference.
</p>
</div>
</div>
</div>
<div class="flex justify-center pb-0">
<div class="js-speed-wrap relative h-[730px] w-[1300px]">
<div class="js-speed relative flex h-full w-full origin-top items-center justify-center overflow-hidden">
<div class="js-speed-text absolute top-2/4 left-2/4 z-20 -translate-2/4 text-[90px] font-extrabold text-white opacity-0">
Super speeds
</div>
<video class="js-video absolute left-0 top-0 z-0 h-full w-full object-cover" muted playsinline autoplay loop preload="auto" disablepictureinpicture>
<source src="/front-end/playground/grad.webm" type="video/webm" />
</video>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="relative bg-black overflow-hidden" data-vanilla-module="ScrollContainer">
<div class="js-bg absolute w-full top-0 left-0 max-lg:h-full">
<img src="/front-end/playground/bg-offers.jpg" class="w-full max-lg:h-full max-lg:object-cover" />
</div>
<div class="lg:flex container relative">
<div class="lg:w-1/2 flex flex-col pt-24 js-text-pin relative justify-between h-screen">
<div class="opacity-0" data-vanilla-module="TextReveal">
<p class="font-extrabold italic uppercase text-[clamp(2rem,8vw,88px)] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] js-line">
Go fast
</p>
<p class="font-extrabold italic uppercase text-[clamp(2rem,8vw,88px)] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] js-line">
and save
</p>
<p class="font-extrabold italic uppercase text-[clamp(2rem,8vw,88px)] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] js-line">
this spring
</p>
</div>
<div>
<img src="/front-end/playground/fg-offers.png" />
</div>
</div>
<div class="lg:w-1/2">
<div class="js-offers-track grid grid-cols-1 md:grid-cols-2 gap-y-20 gap-x-10 lg:pt-24 pb-24">
<div class="md:col-start-2 md:row-start-1 bg-white rounded-lg h-[657px] flex items-center justify-center">
Offer 1
</div>
<div class="md:col-start-1 md:row-start-1 md:mt-[350px] md:z-10 relative bg-white rounded-lg h-[650px] flex items-center justify-center">
Offer 2
</div>
<div class="md:col-start-2 md:row-start-2 md:-mt-[350px] bg-white rounded-lg h-[650px] flex items-center justify-center">
Offer 3
</div>
</div>
</div>
</div>
</div>
<section class="relative z-0 pb-24" data-vanilla-module="HeroVideoScrub">
<div class="top-0 overflow-hidden" data-pin-track>
<div class="grid h-full grid-rows-[1fr_auto]">
<div class="flex items-center justify-center py-12">
<div class="mx-auto max-w-4xl px-6 text-center">
<p class="mb-3 text-lg uppercase tracking-[2px] text-grey-600">
Ultrafast Speeds
</p>
<h2 class="mx-auto max-w-2xl text-5xl font-medium leading-tight text-black md:text-5xl">
Full fibre speeds are much faster than regular part fibre
</h2>
</div>
</div>
<div class="flex justify-center">
<video class="js-video" muted playsinline preload="auto" disablepictureinpicture>
<source src="/front-end/playground/scrub-video/output.mp4" type="video/mp4" />
</video>
</div>
</div>
</div>
</section>
<div class="py-12">
<div class="max-w-[1600px] mx-auto relative bg-white lg:opacity-0" data-vanilla-module="CTAStickyScroll" data-image-transition="fade" data-snap="false">
<div class="relative lg:h-screen lg:flex max-lg:px-6" 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>
<img class="w-full absolute top-0 left-0 h-full object-cover rounded-lg" src="/front-end/playground/cta/cta-1.jpg" />
<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-[4px] bg-[#F60] origin-top" data-border-line></span>
<p class="text-[#8F8F8F] 3xl:text-[19px] tracking-[2px] mb-6 uppercase">
New Eero Router
</p>
<h2 class="text-[25px] 3xl:text-[45px] text-[#161616] mb-12 leading-tight">
Latest hardware to power your home.
</h2>
<div class="3xl:text-[23px] text-[#8F8F8F] prose 3xl:prose-p:text-[23px] prose-p:tracking-tight">
<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>
<img class="w-full absolute top-0 left-0 h-full object-cover rounded-lg" src="/front-end/playground/cta/cta-2.jpg" />
<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-[4px] bg-[#F60] origin-top" data-border-line></span>
<p class="text-[#8F8F8F] 3xl:text-[19px] tracking-[2px] mb-6 uppercase">
Smart WiFi guarantee
</p>
<h2 class="text-[25px] 3xl:text-[45px] text-[#161616] mb-12 leading-tight">
Blast off with powerful, intelligent WiFi
</h2>
<div class="3xl:text-[23px] text-[#8F8F8F] prose 3xl:prose-p:text-[23px] prose-p:tracking-tight">
<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>
<img class="w-full absolute top-0 left-0 h-full object-cover rounded-lg" src="/front-end/playground/cta/cta-3.jpg" />
<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-[4px] bg-[#F60] origin-top" data-border-line></span>
<p class="text-[#8F8F8F] 3xl:text-[19px] tracking-[2px] mb-6 uppercase">
Professional installation
</p>
<h2 class="text-[25px] 3xl:text-[45px] text-[#161616] mb-12 leading-tight">
Seamless switching
</h2>
<div class="3xl:text-[23px] text-[#8F8F8F] prose 3xl:prose-p:text-[23px] prose-p:tracking-tight">
<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 p-12" data-image-panel>
<div class="w-full h-full flex items-center justify-center" data-image-inner>
<img class="aspect-square rounded-lg object-cover block" src="/front-end/playground/cta/cta-1.jpg" />
</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 p-12" data-image-panel>
<div class="w-full h-full flex items-center justify-center" data-image-inner>
<img class="aspect-square rounded-lg object-cover block" src="/front-end/playground/cta/cta-2.jpg" />
</div>
</div>
<div class="absolute inset-0 bg-white overflow-hidden p-12" data-image-panel>
<div class="w-full h-full flex items-center justify-center" data-image-inner>
<img class="aspect-square rounded-lg object-cover block" src="/front-end/playground/cta/cta-3.jpg" />
</div>
</div>
</div>
</div>
</div>
</div>
<div data-vanilla-module="HorizontalScroll" class="horizontal-scroll-section">
<div class="horizontal-scroll-pin h-screen overflow-hidden">
<div class="component-spacer-padding h-full">
<div class="horizontal-scroll-mask w-full h-full overflow-hidden">
<div class="horizontal-scroll-track flex gap-8 w-max h-full">
<div class="shrink-0 w-[70vw] md:w-[840px] flex items-center justify-center">
<img class="aspect-[16/12] block object-cover" src="/front-end/playground/cta/cta-1.jpg" />
</div>
<div class="shrink-0 w-[70vw] md:w-[840px] flex items-center justify-center">
<img class="aspect-[16/12] block object-cover" src="/front-end/playground/cta/cta-2.jpg" />
</div>
<div class="shrink-0 w-[70vw] md:w-[840px] flex items-center justify-center">
<img class="aspect-[16/12] block object-cover" src="/front-end/playground/cta/cta-3.jpg" />
</div>
<div class="shrink-0 w-[70vw] md:w-[840px] flex items-center justify-center">
<img class="aspect-[16/12] block object-cover" src="/front-end/playground/cta/cta-1.jpg" />
</div>
<div class="shrink-0 w-[70vw] md:w-[840px] flex items-center justify-center">
<img class="aspect-[16/12] block object-cover" src="/front-end/playground/cta/cta-1.jpg" />
</div>
<div class="shrink-0 w-[70vw] md:w-[840px] flex items-center justify-center">
<img class="aspect-[16/12] block object-cover" src="/front-end/playground/cta/cta-1.jpg" />
</div>
</div>
</div>
</div>
</div>
</div>
{% render "@hero-simple" %}
{% render "@scroll-slider" %}
{% render "@hero-reveal-animate-block" %}
{% render "@offers-scroll" %}
{% render "@hero-video-scrub" %}
{% render "@cta-sticky-scroll--fade-no-snap" %}
{% render "@horizontal-scroll" %}
{
"siteName": "Gigaclear Pattern Library"
}
No notes defined.