{{#if this.theme.enable_welcome_banner}}
{{#unless (eq this.theme.banner_position "below_header")}}
<section class="above-main-container-outlet welcome-card">
    <div class="hero-section">
        <div class="hero-deco"></div>
        <div class="hero-content">
            <h2 class="hero-title">
                {{{this.theme.hero_title_html}}}
            </h2>
            <div class="hero-description">
                {{{this.theme.hero_content_html}}}
            </div>
            {{#if this.theme.enable_hero_search}}
            <div class="search-container" aria-label="Search"></div>
            {{/if}}
        </div>
    </div>

    <div class="cta-section">
        <ul class="cta-list">
            {{#if this.theme.cta_card_1_enabled}}
            <li>
                <a
                    href="{{this.theme.cta_card_1_url}}"
                    class="cta-card"
                    aria-label="{{this.theme.cta_card_1_title}}"
                >
                    <div class="cta-icon">
                        {{#if (eq this.theme.cta_card_1_icon_type "font_awesome")}}
                            <i class="fas fa-{{this.theme.cta_card_1_icon_font_awesome}}"></i>
                        {{else}}
                            {{this.theme.cta_card_1_icon_emoji}}
                        {{/if}}
                    </div>
                    <div class="cta-content">
                        <span class="cta-title">{{this.theme.cta_card_1_title}}</span>
                        <span class="cta-desc">{{this.theme.cta_card_1_description}}</span>
                        <span class="cta-cta">
                            <i class="fas fa-angle-double-right"></i>
                            {{this.theme.cta_card_1_cta_text}}
                        </span>
                    </div>
                </a>
            </li>
            {{/if}}

            {{#if this.theme.cta_card_2_enabled}}
            <li>
                <a
                    href="{{this.theme.cta_card_2_url}}"
                    class="cta-card"
                    aria-label="{{this.theme.cta_card_2_title}}"
                >
                    <div class="cta-icon">
                        {{#if (eq this.theme.cta_card_2_icon_type "font_awesome")}}
                            <i class="fas fa-{{this.theme.cta_card_2_icon_font_awesome}}"></i>
                        {{else}}
                            {{this.theme.cta_card_2_icon_emoji}}
                        {{/if}}
                    </div>
                    <div class="cta-content">
                        <span class="cta-title">{{this.theme.cta_card_2_title}}</span>
                        <span class="cta-desc">{{this.theme.cta_card_2_description}}</span>
                        <span class="cta-cta">
                            <i class="fas fa-angle-double-right"></i>
                            {{this.theme.cta_card_2_cta_text}}
                        </span>
                    </div>
                </a>
            </li>
            {{/if}}

            {{#if this.theme.cta_card_3_enabled}}
            <li>
                <a
                    href="{{this.theme.cta_card_3_url}}"
                    class="cta-card"
                    aria-label="{{this.theme.cta_card_3_title}}"
                >
                    <div class="cta-icon">
                        {{#if (eq this.theme.cta_card_3_icon_type "font_awesome")}}
                            <i class="fas fa-{{this.theme.cta_card_3_icon_font_awesome}}"></i>
                        {{else}}
                            {{this.theme.cta_card_3_icon_emoji}}
                        {{/if}}
                    </div>
                    <div class="cta-content">
                        <span class="cta-title">{{this.theme.cta_card_3_title}}</span>
                        <span class="cta-desc">{{this.theme.cta_card_3_description}}</span>
                        <span class="cta-cta">
                            <i class="fas fa-angle-double-right"></i>
                            {{this.theme.cta_card_3_cta_text}}
                        </span>
                    </div>
                </a>
            </li>
            {{/if}}

            {{#if this.theme.cta_card_4_enabled}}
            <li>
                <a
                    href="{{this.theme.cta_card_4_url}}"
                    class="cta-card"
                    aria-label="{{this.theme.cta_card_4_title}}"
                >
                    <div class="cta-icon">
                        {{#if (eq this.theme.cta_card_4_icon_type "font_awesome")}}
                            <i class="fas fa-{{this.theme.cta_card_4_icon_font_awesome}}"></i>
                        {{else}}
                            {{this.theme.cta_card_4_icon_emoji}}
                        {{/if}}
                    </div>
                    <div class="cta-content">
                        <span class="cta-title">{{this.theme.cta_card_4_title}}</span>
                        <span class="cta-desc">{{this.theme.cta_card_4_description}}</span>
                        <span class="cta-cta">
                            <i class="fas fa-angle-double-right"></i>
                            {{this.theme.cta_card_4_cta_text}}
                        </span>
                    </div>
                </a>
            </li>
            {{/if}}
        </ul>
    </div>
</section>
{{/unless}}
{{/if}}