<div class="js-component relative z-0 pt-26 lg:min-h-[600px]">
<div class="h-[250px] absolute top-0 left-0 z-10 w-full hero-gradient pointer-events-none opacity-25"></div>
<div class="bg-gradient-to-l bg-brand-gradient absolute top-0 left-0 w-full h-[80%] lg:h-full z-0 mob-hero-slant-clip-path lg:hero-slant-clip-path"></div>
<div class="relative z-20">
<div class="container flex flex-col lg:flex-row lg:items-center lg:gap-6">
<div class="lg:min-h-[435px] flex-1 flex items-center pb-12 lg:pb-0 ">
<div class="text-left">
<h1>
<span class="text-white text-6xl lg:text-8xl font-bold">Register your interest (business)</span>
</h1>
<div class="mt-6 text-white text-lg prose prose-p:leading-normal prose-white prose-lg lg:prose-xl prose-a:font-bold prose-a:no-underline max-w-[460px]">
<p>Register your interest and we'll let you know when we're on our way to your area</p>
</div>
</div>
</div>
<div class="relative z-10 flex-1 flex lg:-mb-48">
<picture class="block overflow-hidden rounded-[12px] w-full">
<img class="lazyload w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/gigaclear1@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/gigaclear1@16-10@1200w.jpg">
</picture>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="container">
<div class="max-w-screen-lg mx-auto">
<div class="prose prose-rte max-w-none">
<p style='text-align: center'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra sed odio sagittis tristique. Proin interdum nunc magna. Praesent imperdiet magna et euismod scelerisque. In sollicitudin nulla quis accumsan auctor. Morbi at ultrices orci. In eu tristique est, ut laoreet nisl. Mauris sit amet neque non sem cursus accumsan et ut erat.</p>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 pt-14 pb-16 lg:pt-20 lg:pb-20 ">
<div class="absolute w-full h-full top-0 left-0 z-0">
<div class="aspect-[16/10]"></div>
<video preload="none" class="lazyload absolute object-cover w-full h-full top-0 left-0" muted autoplay loop playsinline>
<source src="/front-end/playground/GC-afx-Space-blur-tint-1920.webm" type="video/mp4">
</video>
</div>
<div class="container">
<div class="max-w-[950px] mx-auto px-6 md:px-28 rounded-[2.5rem] relative z-10 bg-grey-50 py-12 ">
<div class="text-center mb-10 lg:mb-16">
<div>
<h2 class="text-4xl lg:text-8xl block font-heading font-extrabold leading-tight text-bravo mb-4 lg:mb-6">Not ready to buy yet?</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>Register your details and we'll keep in touch with our latest offers.</p>
</div>
</div>
</div>
<div>
<div class="flex flex-col gap-4">
<label class="block">
<span class="text-bravo-900 mb-2 block font-bold lg:text-lg">Name</span>
<input type="text" class="
block
w-full
rounded-lg
border-grey-400
p-4
default-focus focus-within:ring-black" placeholder="">
</label>
<label class="block">
<span class="text-bravo-900 mb-2 block font-bold lg:text-lg">Email</span>
<input type="text" class="
block
w-full
rounded-lg
border-grey-400
p-4
default-focus focus-within:ring-black" placeholder="">
</label>
<label class="block">
<span class="text-bravo-900 mb-2 block font-bold lg:text-lg">Contact Number</span>
<input type="text" class="
block
w-full
rounded-lg
border-grey-400
p-4
default-focus focus-within:ring-black" placeholder="">
</label>
<label class="block">
<span class="text-bravo-900 mb-2 block font-bold lg:text-lg">Postcode</span>
<input type="text" class="
block
w-full
rounded-lg
border-grey-400
p-4
default-focus focus-within:ring-black" placeholder="">
</label>
</div>
<div class="mt-14 text-center">
<button class="btn group bg-alpha text-white border-2 border-alpha">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Register interest
</div>
<div class="w-3.5 h-3.5 absolute right-2 top-2/4 translate-x-2 -translate-y-2/4 -rotate-90 transition-all ease-in-out duration-300 fill-current opacity-0 group-hover:-translate-x-2 group-hover:opacity-100">
<svg class="w-full h-full fill-current" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-chevron"></use>
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
{% render "@hero-variant-2", hero, true %}
{% for component in componentsList %}
{% render "@" + component.name, component.data, true %}
{% endfor %}
{
"siteName": "Gigaclear Pattern Library",
"pageName": "Register your interest",
"activeSection": "business",
"hero": {
"heading": [
"Register your interest (business)"
],
"caption": "Register your interest and we'll let you know when we're on our way to your area",
"smallType": true,
"image": {
"src": "images/test-imagery/gigaclear1@16-10@1200w.jpg",
"srcSet": [
{
"url": "images/test-imagery/gigaclear1@16-10@1200w.jpg",
"size": 1200
}
]
}
},
"componentsList": [
{
"name": "rich-text-component",
"data": {
"text": "<p style='text-align: center'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra sed odio sagittis tristique. Proin interdum nunc magna. Praesent imperdiet magna et euismod scelerisque. In sollicitudin nulla quis accumsan auctor. Morbi at ultrices orci. In eu tristique est, ut laoreet nisl. Mauris sit amet neque non sem cursus accumsan et ut erat.</p>"
}
},
{
"name": "form-component--sign-up"
}
]
}
No notes defined.