<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 class="py-12">
<div
class="max-w-[1600px] mx-auto relative bg-white lg:opacity-0"
data-vanilla-module="CTAStickyScroll"
data-image-transition="{{ imageType }}"
data-snap="{{ snap }}"
>
<div class="relative lg:h-screen lg:flex max-lg:px-6" 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>
<img
class="w-full absolute top-0 left-0 h-full object-cover rounded-lg"
src="{{ item.image | asset }}"
/>
<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">
{{ item.label }}
</p>
<h2 class="text-[25px] 3xl:text-[45px] text-[#161616] mb-12 leading-tight">
{{ item.heading }}
</h2>
<div class="3xl:text-[23px] text-[#8F8F8F] prose 3xl:prose-p:text-[23px] prose-p:tracking-tight">
{{ 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 === 'fade' %}p-12{% endif %}"
data-image-panel
>
<div class="w-full h-full {% if imageType === 'fade' %}flex items-center justify-center{% endif %}" data-image-inner>
<img
class="{% if imageType == 'fade' %}aspect-square rounded-lg{% else %}w-full h-full{% endif %} object-cover block"
src="{{ item.image | asset }}"
/>
</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": "playground/cta/cta-1.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>",
"image": "playground/cta/cta-2.jpg"
},
{
"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": "playground/cta/cta-3.jpg"
}
],
"imageType": "fade",
"snap": false
}
No notes defined.