Gigaclear Pattern Library

Hero Variant 2 

<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 font-extrabold italic uppercase text-[clamp(2rem,8vw,88px)]  [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] block hero-text leading-[0.9]">Smart</span>

                        <span class="text-white font-extrabold italic uppercase text-[clamp(2rem,8vw,88px)]  [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] block hero-text leading-[0.9]">Wifi</span>

                    </h1>

                    <div class="mt-6 text-white font-extrabold italic text-[clamp(1rem,3vw,32px)] text-white hero-text leading-[0.9] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]">
                        <p>Connect up to 100 devices at once</p>
                    </div>

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

                <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/eros@16-10@1200w.png 1200w" data-src="/front-end/images/test-imagery/eros@16-10@1200w.png">

                </picture>

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


{% set headingClass = "font-extrabold italic uppercase text-[clamp(2rem,8vw,88px)]  [text-shadow:0_4px_4px_rgba(0,0,0,0.10)] block hero-text leading-[0.9]" %}

{% set captionClass = "font-extrabold italic text-[clamp(1rem,3vw,32px)] text-white hero-text leading-[0.9] [text-shadow:0_4px_4px_rgba(0,0,0,0.10)]" %}

{% if smallType %}
    {% set headingClass = "text-6xl lg:text-8xl font-bold" %}
    {% set captionClass = "text-lg prose prose-p:leading-normal prose-white prose-lg lg:prose-xl prose-a:font-bold prose-a:no-underline max-w-[460px]" %}
{% endif %}

<div class="js-component relative z-0 pt-26 lg:min-h-[600px]">
    {% 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-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">
                        {% if heading %}
                            <h1>
                                {% for word in heading %}
                                    <span class="text-white {{ headingClass }}">{{ word }}</span>
                                {% endfor %}
                            </h1>
                        {% endif %}
                    {% if caption %}
                        <div class="mt-6 text-white {{ captionClass }}">
                            <p>{{ caption | safe }}</p>
                        </div>
                    {% endif %}
                </div>
            </div>
            <div class="relative z-10 flex-1 flex lg:-mb-48">
                {% 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": [
    "Smart",
    "Wifi"
  ],
  "caption": "Connect up to 100 devices at once",
  "headerGradientOpacity": "opacity-25",
  "image": {
    "src": "images/test-imagery/eros@16-10@1200w.png",
    "srcSet": [
      {
        "url": "images/test-imagery/eros@16-10@1200w.png",
        "size": 1200
      }
    ]
  },
  "link": {
    "text": "Find out more",
    "url": "./"
  }
}

No notes defined.