<div class="min-h-[440px] lg:min-h-[max(calc(100vh-160px),700px)] lg:min-h-[max(100vh,700px)] z-0 grid w-full relative overflow-hidden pt-[100px] lg:pt-[130px] pb-26 lg:pb-44">
<div class="h-[250px] absolute top-0 left-0 z-10 w-full hero-gradient pointer-events-none opacity-25"></div>
<div class="bg-brand-gradient absolute w-full left-0 top-0 h-full z-5"></div>
<video data-vanilla-module="VideoMQSwitcher" data-breakpoint="(max-width: 1023px)" preload="auto" class="opacity-0 transition-opacity duration-1000 absolute z-5 object-cover w-full h-full top-0 left-0 max-lg:object-right" muted="" autoplay="" loop="" playsinline="">
<source media="(max-width: 1023px)" src="/front-end/playground/business-mob.webm" type="video/webm">
<source media="(min-width: 1024px)" src="/front-end/playground/business.webm" type="video/webm">
</video>
<div class="z-20 w-full">
<div class="container flex h-full flex-col justify-between mx-auto">
<div class="flex-1 py-24 lg:pt-[10%] lg:pb-[7%]">
<h1>
<span class="block max-w-[900px] hero-text font-extrabold italic uppercase text-[clamp(2.4rem,8vw,88px)] text-white leading-[0.9] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">Faster</span>
<span class="block max-w-[900px] hero-text font-extrabold italic uppercase text-[clamp(2.4rem,8vw,88px)] text-white leading-[0.9] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">broadband for</span>
<span class="block max-w-[900px] hero-text font-extrabold italic uppercase text-[clamp(2.4rem,8vw,88px)] text-white leading-[0.9] js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">rural business</span>
</h1>
<div class="max-w-[900px] hero-text mt-6 font-extrabold italic text-[clamp(1.2rem,3vw,32px)] text-white leading-snug js-line [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
Upgrade your business to full fibre
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="container relative">
<div class="max-w-screen-xl mx-auto">
<div class="text-center mb-10 lg:mb-16">
<div>
<div class="uppercase text-grey-600 mb-3 font-semibold">
<p>Heading Label</p>
</div>
<h2 class="text-4xl lg:text-8xl block font-heading font-extrabold leading-tight text-bravo mb-4 lg:mb-6">Switching is easy</h2>
</div>
<div class="">
<div class="prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-xl lg:prose-2xl max-w-screen-sm mx-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 gap-8 md:grid-cols-3 ">
<a href="" class="group flex flex-col items-center justify-start relative h-full border border-grey-200 shadow-card rounded-3xl card-hover bg-grey-50 px-6 lg:px-11 pb-14 lg:pb-12 ">
<div class="w-full flex justify-center overflow-hidden">
<div class="w-28 h-28 bg-alpha -mt-px relative z-0 flex rounded-b-[60px] justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInDown">
<div class="w-full h-16">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<h2 class="text-center font-heading font-bold leading-[1.12] text-3xl lg:text-5xl text-bravo">Lorem ipsum dolor</h2>
</div>
<div class="text-center text-grey-600 pt-4 leading-snug text-lg xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
</div>
</a>
<a href="" class="group flex flex-col items-center justify-start relative h-full border border-grey-200 shadow-card rounded-3xl card-hover bg-grey-50 px-6 lg:px-11 pb-14 lg:pb-12 ">
<div class="w-full flex justify-center overflow-hidden">
<div class="w-28 h-28 bg-alpha -mt-px relative z-0 flex rounded-b-[60px] justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInDown">
<div class="w-full h-16">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<h2 class="text-center font-heading font-bold leading-[1.12] text-3xl lg:text-5xl text-bravo">Lorem ipsum dolor</h2>
</div>
<div class="text-center text-grey-600 pt-4 leading-snug text-lg xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
</div>
</a>
<a href="" class="group flex flex-col items-center justify-start relative h-full border border-grey-200 shadow-card rounded-3xl card-hover bg-grey-50 px-6 lg:px-11 pb-14 lg:pb-12 ">
<div class="w-full flex justify-center overflow-hidden">
<div class="w-28 h-28 bg-alpha -mt-px relative z-0 flex rounded-b-[60px] justify-center mb-2 md:mb-4 items-center transition ease-in-out duration-300" data-vanilla-module="AnimateOnScroll" data-animation-type="scroll-fadeInDown">
<div class="w-full h-16">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-pin"></use>
</svg>
</div>
</div>
</div>
<div>
<h2 class="text-center font-heading font-bold leading-[1.12] text-3xl lg:text-5xl text-bravo">Lorem ipsum dolor</h2>
</div>
<div class="text-center text-grey-600 pt-4 leading-snug text-lg xl:text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod nunc ut ante tempus dictum sed eget turpis.
</div>
</a>
</div>
</div>
</div>
{% render "@hero-variant-1", hero, true %}
{% for component in componentsList %}
{% render "@" + component.name, component.data, true %}
{% endfor %}
{
"siteName": "Gigaclear Pattern Library",
"pageName": "Home",
"activeSection": "business",
"hero": {
"heading": [
"Faster",
"broadband for",
"rural business"
],
"subHeading": "Upgrade your business to full fibre",
"video": {
"desktop": "/front-end/playground/business.webm",
"mobile": "/front-end/playground/business-mob.webm"
},
"showPostcodeLookup": false
},
"componentsList": [
{
"name": "summary-card-list-component"
}
]
}
No notes defined.