<div class="js-component relative z-0 container component-spacer-margin">
<div class="flex flex-col gap-12 lg:flex-row lg:items-center rounded-3xl w-full bg-brand-gradient-2 px-6 py-11 lg:p-14">
<div class="lg:flex-1">
<h2 class="text-3xl lg:text-5xl text-bravo font-heading font-bold leading-tight text-center lg:text-left text-white">
Any questions about the switching process?
</h2>
<p class="hidden lg:block text-lg text-grey-600 mt-6 text-white">Any questions about the switching process?</p>
</div>
<div class="flex flex-col lg:row gap-4 items-center lg:items-end">
<div class="text-center lg:text-right">
<a href="./.html" class="btn group bg-white text-bravo border-2 border-white">
<div class="relative z-10 group-hover:-translate-x-2 transition ease-in-out duration-300">
Enquire now
</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>
</a>
</div>
<div class="flex flex-col lg:flex-row items-center gap-2 mt-2 lg:mt-0">
<div class="font-bold text-1xl lg:text-1xl text-white">Or call </div>
<div class="text-5xl lg:text-4xl font-bold text-white">01865 591 131</div>
</div>
</div>
</div>
</div>
{% if theme %}
{% set bgColourClass = theme.bgColour + ' px-6 py-11 lg:p-14' %}
{% set textColourClass = theme.textColour %}
{% set richTextColourClass = theme.richTextColour %}
{% endif %}
{% if buttonColour %}
{% set buttonModifier = buttonColour %}
{% else %}
{% set buttonModifier = 'default' %}
{% endif %}
<div class="js-component relative z-0 container component-spacer-margin">
<div class="flex flex-col gap-12 lg:flex-row lg:items-center rounded-3xl w-full {{ bgColourClass }}">
<div class="lg:flex-1">
<h2 class="text-3xl lg:text-5xl text-bravo font-heading font-bold leading-tight text-center lg:text-left {{ textColourClass }}">
{{ heading }}
</h2>
{% if copy %}
<p class="hidden lg:block text-lg text-grey-600 mt-6 {{ textColourClass }}">{{ copy }}</p>
{% endif %}
</div>
<div class="flex flex-col lg:row gap-4 items-center lg:items-end">
{% if link %}
<div class="text-center lg:text-right">
{% render "@button--" + buttonModifier, link, true %}
</div>
{% endif %}
<div class="flex flex-col lg:flex-row items-center gap-2 mt-2 lg:mt-0">
<div class="font-bold text-1xl lg:text-1xl {% if textColourClass %}{{ textColourClass }}{% else %}text-grey-600{% endif %}">Or call </div>
<div class="text-5xl lg:text-4xl font-bold {% if textColourClass %}{{ textColourClass }}{% else %}text-alpha{% endif %}">01865 591 131</div>
</div>
</div>
</div>
</div>
{
"siteName": "Gigaclear Pattern Library",
"heading": "Any questions about the switching process?",
"copy": "Any questions about the switching process?",
"buttonColour": "white",
"link": {
"text": "Enquire now",
"url": "./"
},
"theme": {
"bgColour": "bg-brand-gradient-2",
"textColour": "text-white",
"richTextColour": "prose-white"
}
}
No notes defined.