Gigaclear Pattern Library

Hero Variant 3: Square Image 

<div class="js-component relative z-0 pt-[104px] lg:pt-[153px] lg:min-h-[520px]">
    <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-alt-clip-path"></div>
    <div class="relative z-20">
        <div class="container flex flex-col lg:flex-row lg:items-center lg:gap-12">
            <div class="lg:min-h-[300px] lg:w-7/12 flex items-center pb-12 lg:pb-0 ">
                <div class="text-left lg:max-w-[640px]">

                    <h1>

                        <span class="text-white text-4xl lg:text-7xl font-bold">Gigaclear goes further with professionally installed smart Wi-Fi</span>

                    </h1>

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

                <picture class="block overflow-hidden rounded-[12px] w-full">

                    <img class="lazyload  w-full" alt="" width="1200" height="750" data-sizes="auto" data-srcset="/front-end/images/test-imagery/gigaclear1@16-10@1200w.jpg 1200w" data-src="/front-end/images/test-imagery/gigaclear1@16-10@1200w.jpg">

                </picture>

            </div>
        </div>
    </div>
</div>
 
{% if buttonColour %}
    {% set buttonModifier = buttonColour %}
{% else %}
    {% set buttonModifier = 'default' %}
{% endif %}

{% set headingClass = "text-4xl lg:text-7xl font-bold" %}

<div class="js-component relative z-0 pt-[104px] lg:pt-[153px] lg:min-h-[520px]">
    {% render "@hero-gradient", { opacity: headerGradientOpacity } %}
    <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-alt-clip-path"></div>
    <div class="relative z-20">
        <div class="container flex flex-col lg:flex-row lg:items-center lg:gap-12">
            <div class="lg:min-h-[300px] lg:w-7/12 flex items-center pb-12 lg:pb-0 ">
                <div class="text-left lg:max-w-[640px]">
                    {% if heading %}
                        <h1>
                            {% for word in heading %}
                                <span class="text-white {{ headingClass }}">{{ word }}</span>
                            {% endfor %}
                        </h1>
                    {% endif %}
                </div>
            </div>
            <div class="relative z-10 flex-1 flex lg:w-5/12 lg:-mb-12">
                {% if image %}
                    {% render "@image-frame", { src: image.src, srcSet: image.srcSet, smMax: image.smMax, mdMax: image.mdMax, modifier: '', frameModifier: 'rounded-[12px]', width: 1200, height: 750 } %}
                {% endif %}
            </div>
        </div>
    </div>
</div>
 
{
  "siteName": "Gigaclear Pattern Library",
  "heading": [
    "Gigaclear goes further with professionally installed smart Wi-Fi"
  ],
  "headerGradientOpacity": "opacity-25",
  "image": {
    "src": "images/test-imagery/gigaclear1@16-10@1200w.jpg",
    "srcSet": [
      {
        "url": "images/test-imagery/gigaclear1@16-10@1200w.jpg",
        "size": 1200
      }
    ]
  },
  "link": {
    "text": "Find out more",
    "url": "./"
  },
  "smallType": true
}

No notes defined.