<div class="w-full px-6 3xl:px-24 relative -mt-20 xl:-mt-44 max-xl:pb-[80px]" data-vanilla-module="ScrollSlider" data-start-width="1392" data-end-width="1728">
<div class="relative flex justify-center z-20 overflow-hidden aspect-[12/15] sm:aspect-[16/12] lg:aspect-video" style="max-width: 1728px">
<div class="js-container w-full overflow-hidden relative aspect-[12/15] sm:aspect-[16/12] lg:aspect-video" style="max-width: 1392px">
<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%);">
<picture>
<source srcset="/front-end/playground/slide-1-mob.webp" media="(max-width: 639px)">
<source srcset="/front-end/playground/slide-1-tablet.webp" media="(max-width: 1023px)">
<img src="/front-end/playground/slide-1.webp" class="absolute top-0 left-0 object-cover w-full h-full" alt="" fetchpriority="high" />
</picture>
<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%);">
<picture>
<source srcset="/front-end/playground/slide-2-mob.webp" media="(max-width: 639px)">
<source srcset="/front-end/playground/slide-2-tablet.webp" media="(max-width: 1023px)">
<img src="/front-end/playground/slide-2.webp" class="absolute top-0 left-0 object-cover w-full h-full" alt="" fetchpriority="auto" loading="lazy" />
</picture>
<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%);">
<picture>
<source srcset="/front-end/playground/slide-3-mob.webp" media="(max-width: 639px)">
<source srcset="/front-end/playground/slide-3-tablet.webp" media="(max-width: 1023px)">
<img src="/front-end/playground/slide-3.webp" class="absolute top-0 left-0 object-cover w-full h-full" alt="" fetchpriority="auto" loading="lazy" />
</picture>
<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">
<title>Pause</title>
<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">
<title>Play</title>
<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>
{% set slides = [
{
image: '/front-end/playground/slide-1.webp',
lines: ['Go fast', 'and save', 'this spring'],
subheading: 'Your household deserves 100% full fibre.',
description: 'We’re delivering faster broadband for rural Britain that’s up to 15x faster and up to 5x more reliable than part fibre.'
},
{
image: '/front-end/playground/slide-2.webp',
lines: ['The best', 'home', 'connectivity'],
subheading: 'Perfect wifi signal around your home',
description: 'No more searching for signals around your home, thanks to our professionally installed Smart WiFi systems by eero.'
},
{
image: '/front-end/playground/slide-3.webp',
lines: ['The best', 'home set up', 'service'],
subheading: 'Your household deserves 100% full fibre.',
description: 'Our engineers go beyond to ensure everything is perfectly set up in your home'
}
] %}
{% set pipSmall = 8 %}
{% set pipLarge = 68 %}
{% set pipGap = 8 %}
{% set pipCount = slides | length %}
{% set pipsWidth = (pipCount - 1) * pipSmall + pipLarge + (pipCount - 1) * pipGap %}
{% set startWidth = 1392 %}
{% set endWidth = 1728 %}
<div class="w-full px-6 3xl:px-24 relative -mt-20 xl:-mt-44 max-xl:pb-[80px]" data-vanilla-module="ScrollSlider" data-start-width="{{ startWidth }}" data-end-width="{{ endWidth }}">
<div class="relative flex justify-center z-20 overflow-hidden aspect-[12/15] sm:aspect-[16/12] lg:aspect-video" style="max-width: {{ endWidth }}px">
<div class="js-container w-full overflow-hidden relative aspect-[12/15] sm:aspect-[16/12] lg:aspect-video" style="max-width: {{ startWidth }}px">
<div class="js-slides-track relative w-full aspect-[12/15] sm:aspect-[16/12] lg:aspect-video rounded-xl overflow-hidden bg-black">
{% for slide in slides %}
<div class="js-slide absolute inset-0 {{ slide.bg }} flex items-start px-6 xl:px-12 py-10 2xl:py-30"
style="transform: translateX({{ '0%' if loop.first else '100%' }});">
<picture>
<source srcset="{{ slide.image | replace('.webp', '-mob.webp') }}" media="(max-width: 639px)">
<source srcset="{{ slide.image | replace('.webp', '-tablet.webp') }}" media="(max-width: 1023px)">
<img src="{{ slide.image }}" class="absolute top-0 left-0 object-cover w-full h-full" alt="" fetchpriority="{{ 'high' if loop.first else 'auto' }}" {{ 'loading="lazy"' if not loop.first }} />
</picture>
<div style="visibility: hidden;" class="js-slide-text flex h-full flex-col 3xl:max-w-[80%] mx-auto w-full">
<div>
{% for line in slide.lines %}
<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)]">
{{ line }}
</p>
{% endfor %}
{% if slide.subheading %}
<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)]">
{{ slide.subheading }}
</div>
{% endif %}
</div>
{% if slide.description %}
<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">
{{ slide.description }}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</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: {{ slides | length * pipSmall + (slides | length - 1) * pipGap + pipLarge + 48 }}px;">
{% for slide in slides %}
<div class="js-pip h-2 rounded-full bg-white xl:bg-alpha-700 flex-shrink-0" style="width: {{ pipSmall }}px; min-width: {{ pipSmall }}px;"></div>
{% endfor %}
</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">
<title>Pause</title>
<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">
<title>Play</title>
<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>
{
"siteName": "Gigaclear Pattern Library"
}
No notes defined.