Gigaclear Pattern Library

Payment 

<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">Need to make a payment?</span>

                    </h1>

                </div>
            </div>
            <div class="relative z-10 flex-1 flex lg:-mb-48">

            </div>
        </div>
    </div>
</div>

<div class="component-spacer-margin">
    <div class="container">
        <div class="max-w-screen-sm mx-auto">
            <div class="mb-6">
                <h2 class="text-4xl block font-heading font-extrabold leading-tight text-alpha  mb-4 lg:mb-6">Make an online payment here</h2>
                <div class="prose max-w-full">
                    <p>
                        To make a payment to your account, please use your customer number, which you can find on your bill.
                    </p>
                    <p>
                        Please enter the amount in this format: XX.XX (without a £ symbol)
                    </p>
                </div>
            </div>
            <form>
                <div class="flex flex-col gap-4">
                    <label class="block">
                        <span class="text-bravo-900 mb-2 block font-bold lg:text-lg">Amount</span>
                        <input type="text" required class="
                    block
                    w-full
                    rounded-lg
                    border-grey-400
                    p-4
                    default-focus focus-within:ring-black" placeholder="35.00">
                    </label>
                    <label class="block">
                        <span class="text-bravo-900 mb-2 block font-bold lg:text-lg">Customer Number</span>
                        <input type="text" required class="
                    block
                    w-full
                    rounded-lg
                    border-grey-400
                    p-4
                    default-focus focus-within:ring-black" placeholder="13278833">
                    </label>
                </div>
                <div class="mt-8 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">

                            Pay 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>

                    </button>

                </div>
            </form>
        </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": "Need to make a payment?",
  "activeSection": "personal",
  "hero": {
    "heading": [
      "Need to make a payment?"
    ],
    "caption": "",
    "smallType": true,
    "image": null
  },
  "componentsList": [
    {
      "name": "payment-form"
    }
  ]
}

No notes defined.