<div class="js-component md:bg-grey-50 relative block md:grid grid-cols-1 auto-rows-auto md:grid-cols-1 md:grid-rows-1 overflow-hidden z-0 bg-bravo-900 ">
<div class="md:col-start-1 md:col-end-md:row-start-1 md:row-end-2 relative hero-clip md:clip-path-none">
<picture class="block overflow-hidden h-full w-full">
<source media="(max-width: 1023px)" width="1200" height="750" srcset="/front-end/images/test-imagery/example9@16-10@1200w.jpg 1200w">
<img class="lazyload h-full object-cover w-full" alt="" width="1920" height="720" data-sizes="auto" data-srcset=",/front-end/images/test-imagery/example9@16-6@2000w.jpg 1200w" data-src="/front-end/images/test-imagery/example9@16-6@2000w.jpg">
</picture>
</div>
<div class="md:col-start-1 md:col-end-1 md:row-start-1 md:row-end-2 md:flex md:items-center relative -mt-3/10 md:mt-0">
<div class="mx-auto max-xsm:max-w-screen-xsm max-sm:max-w-screen-sm md:container">
<div class="px-6 py-7 lg:px-12 lg:py-13 md:w-96 lg:w-[420px] xl:w-[580px] relative rounded-3xl bg-bravo-900">
<div class="relative flex flex-col justify-center z-20">
<h1 class="text-5xl xl:text-9xl font-medium font-heading leading-none text-white ">What we're about...</h1>
<div class="block prose prose-p:font-light prose-lg lg:prose:xl prose-p:leading-normal prose-ul:leading-normal prose-ol:leading-normal lg:prose-xl mt-6 prose-white">
<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>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="container">
<div class="max-w-screen-md mx-auto">
<div class="prose prose-rte max-w-none">
<h2>Contacting us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>uisque ullamcorper, neque at consequat laoreet, magna nulla ultricies elit, vitae luctus nisl lorem eu nunc.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-margin">
<div class="container relative z-20">
<div class="max-w-[950px] mx-auto bg-grey-100 px-13 py-6 lg:px-28 lg:py-13 rounded-3xl">
<h2 class="text-3xl lg:text-9xl font-font-medium text-bravo-900 text-center">Contact us</h2>
<div class="text-center mb-8 lg:mb-12 prose prose-p:leading-snug prose-ul:leading-normal prose-ol:leading-normal prose-lg lg:prose-xl mt-4 lg:mt-6 mx-auto max-w-lg ">
<p>Register your details and we'll keep in touch with our latest offers.</p>
</div>
<div class="mt-8">
<div class="flex flex-col gap-8">
<label class="block">
<span class="text-bravo-900 mb-2 block font-bold text-lg">Full name</span>
<input type="text" class="
block
w-full
rounded-lg
border-grey-400
shadow-sm
default-focus focus-within:ring-black" placeholder="">
</label>
<label class="block font-medium">
<span class="text-bravo-900 mb-2 block font-bold text-lg">Email</span>
<input type="email" class="
block
w-full
rounded-lg
border-grey-400
shadow-sm
default-focus focus-within:ring-black" placeholder="john@hotmail.com">
</label>
<label class="block">
<span class="text-bravo-900 mb-2 block font-bold text-lg">When is your event?</span>
<div class="relative">
<input type="text" class="
block
w-full
rounded-lg
border-grey-400
shadow-sm
default-focus focus-within:ring-black">
<div class="absolute w-5 h-5 right-2 top-2/4 -translate-y-2/4 pointer-events-none">
<svg class="fill-current w-full h-full text-bravo-900" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-calendar"></use>
</svg>
</div>
</div>
</label>
<fieldset>
<legend class="text-bravo-900 mb-2 block font-bold text-lg">Do you agree?</legend>
<div class="flex gap-x-4">
<label class="inline-flex items-center">
<input type="radio" class=" text-bravo-900 default-focus focus-within:ring-black" name="Do you agree?" value="Yes">
<span class="ml-2 text-bravo-900">Yes</span>
</label>
<label class="inline-flex items-center">
<input type="radio" class=" text-bravo-900 default-focus focus-within:ring-black" name="Do you agree?" value="No">
<span class="ml-2 text-bravo-900">No</span>
</label>
</div>
</fieldset>
<label class="block">
<span class="text-bravo-900 mb-2 block font-bold text-lg">What type of event is it?</span>
<select class="block
w-full
rounded-lg
border-grey-400
shadow-sm
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 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-bravo-900
focus:border-alpha
focus:ring-alpha
shadow-sm
default-focus focus-within:ring-black" value="Option 1">
<span class="ml-2 text-bravo-900">Option 1</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="rounded
border-grey-400
text-bravo-900
focus:border-alpha
focus:ring-alpha
shadow-sm
default-focus focus-within:ring-black" value="Option 2">
<span class="ml-2 text-bravo-900">Option 2</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="rounded
border-grey-400
text-bravo-900
focus:border-alpha
focus:ring-alpha
shadow-sm
default-focus focus-within:ring-black" value="Option 3">
<span class="ml-2 text-bravo-900">Option 3</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="rounded
border-grey-400
text-bravo-900
focus:border-alpha
focus:ring-alpha
shadow-sm
default-focus focus-within:ring-black" value="Other">
<span class="ml-2 text-bravo-900">Other</span>
</label>
</div>
</fieldset>
<label class="block">
<span class="text-bravo-900 mb-2 block font-bold text-lg">Additional details</span>
<textarea class="
block
w-full
rounded-lg
border-grey-400
shadow-sm
default-focus focus-within:ring-black" rows="3"></textarea>
</label>
<div class="block">
<div>
<label class="inline-flex items-center">
<input type="checkbox" class="rounded
border-grey-400
text-bravo-900
focus:border-alpha
focus:ring-alpha/50
shadow-sm
default-focus focus-within:ring-black" checked="">
<span class="ml-2 text-bravo-900">Sign up to our newsletter</span>
</label>
</div>
</div>
</div>
<div class="my-8 text-center">
<button class="btn group bg-bravo-900 text-white border-2 border-bravo-900">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Submit
</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#icon-chevron"></use>
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
{% render "@hero-variant-2--bravo-background", hero, true %}
{% for component in componentsList %}
{% render "@" + component.name, component.data, true %}
{% endfor %}
{
"siteName": "BIR Pattern Library",
"pageName": "Contact Us",
"hero": {
"heading": "What we're about...",
"caption": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
"link": null,
"image": {
"src": "images/test-imagery/example9@16-6@2000w.jpg",
"srcSet": [
{
"url": "images/test-imagery/example9@16-6@2000w.jpg",
"size": 1200
}
],
"mdMax": {
"srcSet": [
{
"url": "images/test-imagery/example9@16-10@1200w.jpg",
"size": 1200
}
]
}
}
},
"breadcrumbs": [
{
"text": "Lorem",
"url": "./"
},
{
"text": "Ipsum",
"url": "./"
},
{
"text": "Dolor",
"url": "./"
}
],
"componentsList": [
{
"name": "rich-text-component",
"data": {
"text": "<h2>Contacting us</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p><ul><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li><li>uisque ullamcorper, neque at consequat laoreet, magna nulla ultricies elit, vitae luctus nisl lorem eu nunc.</li></ul>"
}
},
{
"name": "form-component"
}
]
}
No notes defined.