templates/partials/slider.html.twig line 1

<!-- Slider Start -->
    <div class="container-fluid bg-primary py-5 mb-5 hero-header">
    <div class="container py-5">
        <div class="row justify-content-start">
            <div class="col-lg-8 text-center text-lg-start">

                <h4 class="font-secondary text-primary mb-3">
                    La solution de paiement digital
                </h4>

                <h1 class="display-1 text-uppercase text-white mb-4">
                    BPay
                </h1>

                <h2 class="text-uppercase text-white mb-4">
                    Payez. Encaissez. Transférez.
                </h2>

                <p class="text-white fs-5 mb-4">
                    BPay permet aux particuliers, marchands et entreprises
                    d’effectuer des paiements sécurisés, de gérer des wallets électroniques
                    et d’accepter des paiements en ligne et en point de vente partout en Afrique.
                </p>

                <div class="d-flex align-items-center justify-content-center justify-content-lg-start pt-4">

                    <a href=""
                       class="btn btn-primary border-inner py-3 px-5 me-4">
                        Créer un compte
                    </a>

                    <a href="{{ path('about') }}"
                       class="btn btn-outline-light py-3 px-5 me-4">
                        Découvrir BPay
                    </a>

                    <button type="button"
                            class="btn-play"
                            data-bs-toggle="modal"
                            data-src="https://www.youtube.com/embed/VIDEO_BPAY"
                            data-bs-target="#videoModal">
                        <span></span>
                    </button>

                    <h5 class="font-weight-normal text-white m-0 ms-3 d-none d-sm-block">
                        Voir la présentation
                    </h5>

                </div>

            </div>
        </div>
    </div>
</div>
    <!-- Slider End -->

    <!-- Video Modal Start -->
    <div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content rounded-0">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Youtube Video</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- 16:9 aspect ratio -->
                    <div class="ratio ratio-16x9">
                        <iframe class="embed-responsive-item" src="" id="video" allowfullscreen allowscriptaccess="always"
                            allow="autoplay"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Video Modal End -->