<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-grey-50 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 ">
Any questions about the switching process?
</h2>
<p class="hidden lg:block text-lg text-grey-600 mt-6 ">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 btn--no-border text-grey-800 bg-brand-gradient-4">
<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-grey-600">Or call </div>
<div class="text-5xl lg:text-4xl font-bold text-alpha">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": "gradient",
"link": {
"text": "Enquire now",
"url": "./"
},
"theme": {
"bgColour": "bg-grey-50",
"textColour": "",
"richTextColour": ""
}
}
No notes defined.