<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="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="{{ imageType }}"
>
<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">
{% for item in list %}
<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>
{% if item.video %}
<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="{{ item.video }}" type="video/webm">
</video>
{% elseif item.image %}
<picture>
<source media="(max-width: 1023px)" srcset="{{ item.image | asset }}">
<img
class="lazyload w-full absolute top-0 left-0 h-full object-cover rounded-lg"
alt=""
data-src="{{ '/front-end/images/pixel.png' | path }}"
/>
</picture>
{% endif %}
<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">
{{ item.label }}
</p>
<h2 class="text-4xl 3xl:text-7xl text-bravo-800 font-bold mb-7 leading-tight">
{{ item.heading }}
</h2>
<div class="prose prose-p:leading-snug prose-ul:leading-snug prose-ol:leading-snug lg:prose-2xl">
{{ item.description | safe }}
</div>
</div>
</div>
{% endfor %}
</div>
<div class="flex-1 relative h-full overflow-hidden max-lg:hidden">
{% for item in list %}
<div
class="absolute inset-0 bg-white overflow-hidden {% if imageType === 'boxed' %}px-12{% endif %}"
data-image-panel
>
<div class="w-full h-full {% if imageType === 'boxed' %}flex items-center justify-center{% endif %}" data-image-inner>
{% if item.video %}
<video
data-vanilla-module="LazyVideo"
class="{% if imageType == 'boxed' %}aspect-square rounded-[16px]{% else %}w-full h-full{% endif %} object-cover block"
muted="" autoplay="" loop="" playsinline="">
<source media="(min-width: 1024px)" data-src="{{ item.video }}" type="video/webm">
</video>
{% elseif item.image %}
<picture>
<source media="(min-width: 1024px)" srcset="{{ item.image | asset }}">
<img
class="lazyload {% if imageType == 'boxed' %}aspect-square rounded-[16px]{% else %}w-full h-full{% endif %} object-cover block"
alt=""
data-src="{{ '/front-end/images/pixel.png' | path }}"
/>
</picture>
{% endif %}
</div>
{% if loop.first %}
<div class="absolute inset-0 bg-white pointer-events-none" data-image-reveal></div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{
"siteName": "Gigaclear Pattern Library",
"list": [
{
"label": "New Eero Router",
"heading": "Latest hardware to power your home.",
"description": "<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>",
"image": "images/test-imagery/cta-1@1-1@783w.jpg"
},
{
"label": "Smart WiFi guarantee",
"heading": "Blast off with powerful, intelligent WiFi",
"description": "<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>",
"video": "/front-end/playground/field.webm"
},
{
"label": "Professional installation",
"heading": "Seamless switching",
"description": "<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>",
"image": "images/test-imagery/cta-3@1-1@783w.jpg"
}
],
"imageType": "boxed"
}
No notes defined.