{% extends 'core/front/front.layout.html.twig' %}
{% block title %}{{ 'home_page.title'|trans({}, 'app') }}{% endblock %}
{% block bodyClass %}{{ 'home_page.body_class'|trans({}, 'app') }}{% endblock %}
{% block front %}

    {{ render(controller("App\\Blog\\Controller\\Public\\EmbedController::slide")) }}

    <section class="section section-services-products bg-white pt-5">
        <div class="container">
            <div class="section-head text-center pb-5">
                <h2>{{ 'home_page.section_products.heading'|trans({}, 'app') }}</h2>
                <p class="m-0">{{ 'home_page.section_products.subtitle'|trans({}, 'app') }}</p>
                <a href="{{ path('app_business_public_products') }}" class="btn btn-green">
                    {{ 'home_page.section_products.button_all_products'|trans({}, 'app') }}
                </a>
            </div>
        </div>
        <div class="container container-custom">
            <div class="listing-services d-flex justify-content-center pb-3">
                <div class="service">
                    <div class="service-content position-relative d-flex flex-column gap-3 align-items-center">
                        <a href="{{ path('app_business_public_product_bank_account') }}" class="link-overlay" title="{{ 'home_page.section_products.products.bank_accounts'|trans({}, 'app') }}"></a>
                        <div class="service-icon">
                            <img alt="" src="{{ asset('vendors/assets/img/icon-compte.svg') }}"/>
                        </div>
                        <h3>{{ 'home_page.section_products.products.bank_accounts'|trans({}, 'app') }}</h3>
                    </div>
                </div>
                <div class="service">
                    <div class="service-content position-relative d-flex flex-column gap-3 align-items-center">
                        <a href="{{ path('app_business_public_product_bank_card') }}" class="link-overlay" title="{{ 'home_page.section_products.products.bank_cards'|trans({}, 'app') }}"></a>
                        <div class="service-icon">
                            <img alt="" src="{{ asset('vendors/assets/img/icon-cards.svg') }}"/>
                        </div>
                        <h3>{{ 'home_page.section_products.products.bank_cards'|trans({}, 'app') }}</h3>
                    </div>
                </div>
                <div class="service">
                    <div class="service-content position-relative d-flex flex-column gap-3 align-items-center">
                        <a href="{{ path('app_business_public_product_credit') }}" class="link-overlay" title="{{ 'home_page.section_products.products.credits'|trans({}, 'app') }}"></a>
                        <div class="service-icon">
                            <img alt="" src="{{ asset('vendors/assets/img/icon-credit.svg') }}"/>
                        </div>
                        <h3>{{ 'home_page.section_products.products.credits'|trans({}, 'app') }}</h3>
                    </div>
                </div>
                <div class="service">
                    <div class="service-content position-relative d-flex flex-column gap-3 align-items-center">
                        <a href="{{ path('app_business_public_product_ebanking') }}" class="link-overlay" title="{{ 'home_page.section_products.products.ebanking'|trans({}, 'app') }}"></a>
                        <div class="service-icon">
                            <img alt="" src="{{ asset('vendors/assets/img/icon-ebanking.svg') }}"/>
                        </div>
                        <h3>{{ 'home_page.section_products.products.ebanking'|trans({}, 'app') }}</h3>
                    </div>
                </div>
                <div class="service">
                    <div class="service-content position-relative d-flex flex-column gap-3 align-items-center">
                        <a href="{{ path('app_business_public_product_bankinsurance') }}" class="link-overlay" title="{{ 'home_page.section_products.products.bancassurances'|trans({}, 'app') }}"></a>
                        <div class="service-icon">
                            <img alt="" src="{{ asset('vendors/assets/img/icon-bancassurances.svg') }}"/>
                        </div>
                        <h3>{{ 'home_page.section_products.products.bancassurances'|trans({}, 'app') }}</h3>
                    </div>
                </div>
                <div class="service">
                    <div class="service-content position-relative d-flex flex-column gap-3 align-items-center">
                        <a href="{{ path('app_business_public_product_transferts') }}" class="link-overlay" title="{{ 'home_page.section_products.products.transfers'|trans({}, 'app') }}"></a>
                        <div class="service-icon">
                            <img alt="" src="{{ asset('vendors/assets/img/icon-transfert.svg') }}"/>
                        </div>
                        <h3>{{ 'home_page.section_products.products.transfers'|trans({}, 'app') }}</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{ render(controller("App\\Business\\Controller\\Public\\EmbedController::keys")) }}

    <section class="section section-agencies bg-white pt-5">
        <div class="container">
            <div class="section-head text-center">
                <h2>{{ 'home_page.section_agencies.heading'|trans({}, 'app') }}</h2>
                <p>{{ 'home_page.section_agencies.subtitle'|trans({}, 'app') }}</p>
                <a href="{{ path('app_business_public_agencies') }}" class="btn btn-green">
                    {{ 'home_page.section_agencies.button_agencies'|trans({}, 'app') }}
                </a>
            </div>
        </div>
        <div class="listing-agencies pt-5">
            <div class="container container-custom">
                {{ render(controller("App\\Business\\Controller\\Public\\EmbedController::agencies")) }}
            </div>
        </div>
    </section>
{% endblock %}

{% block javascriptBottom %}
    {{ parent() }}
    <script>
        // slideshow  main
        jQuery('#slideHome').slick({
            infinite: true,
            dots: true,
            arrows: true,
            autoplay: true,
            autoplaySpeed: 2500
        });
    </script>
{% endblock %}