<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>
<div class="flex flex-col gap-4">
<label class="block">
<span class="text-bravo-900 mb-2 block font-bold lg:text-lg">Full 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 font-semibold">
<span class="text-bravo-900 mb-2 block font-bold lg:text-lg">Email</span>
<input type="email" class="
block
w-full
rounded-lg
border-grey-400
shadow-sm
p-4
default-focus focus-within:ring-black" placeholder="john@hotmail.com">
</label>
<label class="block">
<span class="text-bravo-900 mb-2 block font-bold lg:text-lg">When is your event?</span>
<div class="relative">
<input type="text" class="
block
w-full
rounded-lg
border-grey-400
shadow-sm
p-4
default-focus focus-within:ring-black">
<div class="absolute w-6 h-6 right-2 top-2/4 -translate-y-2/4 pointer-events-none">
<svg class="fill-current w-full h-full text-grey" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-calendar"></use>
</svg>
</div>
</div>
</label>
<fieldset>
<legend class="text-bravo-900 mb-2 block font-bold lg:text-lg">Do you agree?</legend>
<div class="flex gap-x-4">
<label class="inline-flex items-center">
<input type="radio" class=" text-alpha default-focus focus-within:ring-black" name="Do you agree?" value="Yes">
<span class="ml-2">Yes</span>
</label>
<label class="inline-flex items-center">
<input type="radio" class=" text-alpha default-focus focus-within:ring-black" name="Do you agree?" value="No">
<span class="ml-2">No</span>
</label>
</div>
</fieldset>
<label class="block">
<span class="text-bravo-900 mb-2 block font-bold lg:text-lg">What type of event is it?</span>
<select class="block
w-full
rounded-lg
border-grey-400
shadow-sm
p-4
default-focus focus-within:ring-black">
<option>Corporate event</option>
<option>Wedding</option>
<option>Birthday</option>
<option>Other</option>
</select>
</label>
<fieldset>
<legend class="text-bravo-900 mb-2 block font-bold lg:text-lg">Select multiple options</legend>
<div class="space-y-2">
<label class="flex items-center">
<input type="checkbox" class="rounded
border-grey-400
text-alpha
shadow-sm
default-focus focus-within:ring-black" value="Option 1">
<span class="ml-2">Option 1</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="rounded
border-grey-400
text-alpha
shadow-sm
default-focus focus-within:ring-black" value="Option 2">
<span class="ml-2">Option 2</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="rounded
border-grey-400
text-alpha
shadow-sm
default-focus focus-within:ring-black" value="Option 3">
<span class="ml-2">Option 3</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="rounded
border-grey-400
text-alpha
shadow-sm
default-focus focus-within:ring-black" value="Other">
<span class="ml-2">Other</span>
</label>
</div>
</fieldset>
<label class="block">
<span class="text-bravo-900 mb-2 block font-bold lg:text-lg">Additional details</span>
<textarea class="
block
w-full
rounded-lg
border-grey-400
p-4
default-focus focus-within:ring-black" rows="3"></textarea>
</label>
<div class="block">
<div>
<label class="inline-flex items-center font-bold lg:text-lg text-bravo-900">
<input type="checkbox" class="rounded
border-grey-400
text-alpha
shadow-sm
default-focus focus-within:ring-black" checked="">
<span class="ml-2">Sign up to our newsletter</span>
</label>
</div>
</div>
</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>
{% if theme %}
{% set bgColourClass = theme.bgColour %}
{% else %}
{% set bgColourClass = 'bg-brand-gradient-2' %}
{% endif %}
<div class="js-component relative z-0 {% if backgroundColour %} {{ bgColourClass }} pt-14 pb-16 lg:pt-20 lg:pb-20 {% elseif backgroundImage or video %} pt-14 pb-16 lg:pt-20 lg:pb-20 {% else %} component-spacer-margin {% endif %}">
<div class="absolute w-full h-full top-0 left-0 z-0">
{% if backgroundImage %}
{% render "@image-frame", { src: image.src, srcSet: image.srcSet, width: image.width, height: image.height, modifier: 'object-cover h-full', frameModifier: 'object-cover h-full' } %}
{% elseif video %}
<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="{{backgroundVideo.src}}" type="video/mp4">
</video>
{% endif %}
</div>
<div class="container">
<div class="max-w-[950px] mx-auto px-6 md:px-28 rounded-[2.5rem] relative z-10 {% if backgroundColour %} bg-grey-50 py-12 {% elseif backgroundImage or video %} bg-grey-50 py-12 {% endif %}">
{% if headline %}
{% render "@headline", headline %}
{% endif %}
<div>
<div class="flex flex-col gap-4">
{% for field in fields %}
{% if field.component == "text-input" %}
{% render "@text-input", field %}
{% elif field.component == "email-input" %}
{% render "@email-input", field %}
{% elif field.component == "date-input" %}
{% render "@date-input", field %}
{% elif field.component == "radio-box-input" %}
{% render "@radio-box-input", field %}
{% elif field.component == "select-input" %}
{% render "@select-input", field %}
{% elif field.component == "check-box-list-input" %}
{% render "@check-box-list-input", field %}
{% elif field.component == "text-area-input" %}
{% render "@text-area-input", field %}
{% elif field.component == "check-box-input" %}
{% render "@check-box-input", field %}
{% endif %}
{% endfor %}
</div>
<div class="mt-14 text-center">
{% render "@button", { renderAsButton: true, text: 'Register interest' }, true %}
</div>
</div>
</div>
</div>
</div>
{
"siteName": "Gigaclear Pattern Library",
"fields": [
{
"component": "text-input",
"label": "Full name"
},
{
"component": "email-input",
"label": "Email",
"placeholder": "john@hotmail.com"
},
{
"component": "date-input",
"label": "When is your event?"
},
{
"component": "radio-box-input",
"label": "Do you agree?",
"options": [
"Yes",
"No"
]
},
{
"component": "select-input",
"label": "What type of event is it?",
"options": [
"Corporate event",
"Wedding",
"Birthday",
"Other"
]
},
{
"component": "check-box-list-input",
"label": "Select multiple options",
"options": [
"Option 1",
"Option 2",
"Option 3",
"Other"
]
},
{
"component": "text-area-input",
"label": "Additional details"
},
{
"component": "check-box-input",
"label": "Sign up to our newsletter"
}
],
"video": true,
"backgroundVideo": {
"src": "/front-end/playground/GC-afx-Space-blur-tint-1920.webm"
}
}
No notes defined.