{{ $data := index site.Data.banner }}

{{ if $data.banner.enable }}
{{ with $data.banner }}
{{ "<!-- Welcome Slider -->" | safeHTML }}
<section class="hero-area" style='background-image: url("{{ .bg_image_webp | absURL }}")'>
    <!-- this image is for trigger this section fallback background image -->
    <img class="d-none" src="{{ .bg_image_webp | absURL }}" onerror="this.onerror=null;this.parentElement.style.backgroundImage= 'url({{ .bg_image | absURL }})'"/>

    <div class="block">
        {{ if .icon }}
        <div class="video-button">
            <i class="{{ .icon }}"></i>
        </div>
        {{ end }}
        <h1>{{ .title | markdownify }}</h1>
        <p>{{ .content | markdownify }}</p>
        {{ if .button.enable }}
        {{ with .button }}
        <a href="{{ .link }}" class="btn btn-transparent page-scroll">{{ .label }}</a>
        {{ end }}
        {{ end }}
    </div>
</section>
{{ "<!-- /Welcome Slider -->" | safeHTML }}
{{ end }}
{{ end }}