<div class="overflow-hidden ">
<section class="container" data-vanilla-module="StoryStackComponent">
<div class="js-slides flex flex-col gap-12">
<div class="js-item aspect-[12/16] sm:aspect-[16/12] lg:aspect-[16/9] rounded-xl overflow-hidden relative flex justify-start p-6 md:p-12 lg:px-16 lg:pt-16 xl:px-24 xl:pt-24 lg:pb-12">
<picture class="overflow-hidden">
<source srcset="../../front-end/images/test-imagery/slide-1@12-16@680w.webp" media="(max-width: 639px)">
<source srcset="../../front-end/images/test-imagery/slide-1@16-12@1024w.webp" media="(max-width: 1023px)">
<img src="../../front-end/images/test-imagery/slide-1@16-9@1792w.webp" class=" js-image absolute top-0 left-0 object-cover w-full h-full scale-[1.2] origin-center" alt="" fetchpriority="high" />
</picture>
<div class="flex flex-col">
<div class="flex-1">
<p class="js-line font-extrabold italic uppercase text-[44px] lg:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
Go fast
</p>
<p class="js-line font-extrabold italic uppercase text-[44px] lg:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
and save
</p>
<p class="js-line font-extrabold italic uppercase text-[44px] lg:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
this spring
</p>
<div class="js-line mt-6 font-extrabold italic text-[18px] lg:text-[24px] 3xl:text-[32px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
Your household deserves 100% full fibre.
</div>
</div>
<div style="visibility: hidden;" class="js-slide-description flex-shrink-0 bg-bravo p-5 3xl:p-10 lg:text-lg xl:text-xl 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-item aspect-[12/16] sm:aspect-[16/12] lg:aspect-[16/9] rounded-xl overflow-hidden relative flex justify-start p-6 md:p-12 lg:px-16 lg:pt-16 xl:px-24 xl:pt-24 lg:pb-12">
<picture class="overflow-hidden">
<source srcset="../../front-end/images/test-imagery/slide-2@12-16@680w.webp" media="(max-width: 639px)">
<source srcset="../../front-end/images/test-imagery/slide-2@16-12@1024w.webp" media="(max-width: 1023px)">
<img data-src="../../front-end/images/test-imagery/slide-2@16-9@1792w.webp" class="lazyload js-image absolute top-0 left-0 object-cover w-full h-full scale-[1.2] origin-center" alt="" fetchpriority="auto" />
</picture>
<div class="flex flex-col">
<div class="flex-1">
<p class="js-line font-extrabold italic uppercase text-[44px] lg:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
The best
</p>
<p class="js-line font-extrabold italic uppercase text-[44px] lg:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
home
</p>
<p class="js-line font-extrabold italic uppercase text-[44px] lg:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
connectivity
</p>
<div class="js-line mt-6 font-extrabold italic text-[18px] lg:text-[24px] 3xl:text-[32px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
Perfect wifi signal around your home
</div>
</div>
<div style="visibility: hidden;" class="js-slide-description flex-shrink-0 bg-bravo p-5 3xl:p-10 lg:text-lg xl:text-xl 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-item aspect-[12/16] sm:aspect-[16/12] lg:aspect-[16/9] rounded-xl overflow-hidden relative flex justify-start p-6 md:p-12 lg:px-16 lg:pt-16 xl:px-24 xl:pt-24 lg:pb-12">
<picture class="overflow-hidden">
<source srcset="../../front-end/images/test-imagery/slide-3@12-16@680w.webp" media="(max-width: 639px)">
<source srcset="../../front-end/images/test-imagery/slide-3@16-12@1024w.webp" media="(max-width: 1023px)">
<img data-src="../../front-end/images/test-imagery/slide-3@16-9@1792w.webp" class="lazyload js-image absolute top-0 left-0 object-cover w-full h-full scale-[1.2] origin-center" alt="" fetchpriority="auto" />
</picture>
<div class="flex flex-col">
<div class="flex-1">
<p class="js-line font-extrabold italic uppercase text-[44px] lg:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
The best
</p>
<p class="js-line font-extrabold italic uppercase text-[44px] lg:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
home set up
</p>
<p class="js-line font-extrabold italic uppercase text-[44px] lg:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
service
</p>
<div class="js-line mt-6 font-extrabold italic text-[18px] lg:text-[24px] 3xl:text-[32px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
Your household deserves 100% full fibre.
</div>
</div>
<div style="visibility: hidden;" class="js-slide-description flex-shrink-0 bg-bravo p-5 3xl:p-10 lg:text-lg xl:text-xl 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>
</section>
</div>
<div class="overflow-hidden {% if overlap %}-mt-20{%endif %}">
<section class="container" data-vanilla-module="StoryStackComponent">
<div class="js-slides flex flex-col gap-12">
{% for slide in slides %}
<div class="js-item aspect-[12/16] sm:aspect-[16/12] lg:aspect-[16/9] rounded-xl overflow-hidden relative flex justify-start p-6 md:p-12 lg:px-16 lg:pt-16 xl:px-24 xl:pt-24 lg:pb-12">
<picture class="overflow-hidden">
<source srcset="{{ slide.image.mobile | path }}" media="(max-width: 639px)">
<source srcset="{{ slide.image.tablet | path }}" media="(max-width: 1023px)">
<img {{ 'data-' if not loop.first }}src="{{ slide.image.desktop | path }}" class="{% if not loop.first %}lazyload{% endif %} js-image absolute top-0 left-0 object-cover w-full h-full scale-[1.2] origin-center" alt="" fetchpriority="{{ 'high' if loop.first else 'auto' }}" />
</picture>
<div class="flex flex-col">
<div class="flex-1">
{% for line in slide.lines %}
<p class="js-line font-extrabold italic uppercase text-[44px] lg:text-[66px] 3xl:text-[88px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
{{ line }}
</p>
{% endfor %}
{% if slide.subheading %}
<div class="js-line mt-6 font-extrabold italic text-[18px] lg:text-[24px] 3xl:text-[32px] text-white rotate-[-10.75deg] leading-[0.9] max-w-[700px] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] opacity-0 translate-y-10 invisible">
{{ slide.subheading }}
</div>
{% endif %}
</div>
{% if slide.description %}
<div style="visibility: hidden;" class="js-slide-description flex-shrink-0 bg-bravo p-5 3xl:p-10 lg:text-lg xl:text-xl text-white mt-auto lg:mt-26 max-w-[540px] rounded-lg">
{{ slide.description }}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</section>
</div>
{
"siteName": "Gigaclear Pattern Library",
"slides": [
{
"bg": "bg-alpha",
"image": {
"mobile": "/front-end/images/test-imagery/slide-1@12-16@680w.webp",
"tablet": "/front-end/images/test-imagery/slide-1@16-12@1024w.webp",
"desktop": "/front-end/images/test-imagery/slide-1@16-9@1792w.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."
},
{
"bg": "bg-bravo z-20",
"image": {
"mobile": "/front-end/images/test-imagery/slide-2@12-16@680w.webp",
"tablet": "/front-end/images/test-imagery/slide-2@16-12@1024w.webp",
"desktop": "/front-end/images/test-imagery/slide-2@16-9@1792w.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."
},
{
"bg": "bg-charlie",
"image": {
"mobile": "/front-end/images/test-imagery/slide-3@12-16@680w.webp",
"tablet": "/front-end/images/test-imagery/slide-3@16-12@1024w.webp",
"desktop": "/front-end/images/test-imagery/slide-3@16-9@1792w.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"
}
]
}
No notes defined.