{% extends 'base.html.twig' %}
{% block csslinks %}
    <style>
        body {
            background-image: url("/assets/img/landing/sad_2.png");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: 80% -50%;
        }
    </style>
{% endblock %}

{% block content %}
    <h1 class="text-front pt20px" data-animation="fadeInUp" data-delay=".6s">Vous êtes <label
                class="animate__animated animate__pulse animate__infinite infinite animate__slow animate__delay-1s">Survivante</label><br>
        d'une <label
                class="animate__animated animate__pulse animate__infinite infinite animate__slow animate__delay-2s">Violence</label>
        basée sur<br> le genre <label
                class="animate__animated animate__pulse animate__infinite infinite animate__slow animate__delay-3s">(VBG)</label> ?</h1>
    <p class="confiance-text" data-animation="fadeInUp" data-delay=".8s">Le soutien existe pour vous, l'anonymat et
        votre protection nous sont chèrs.<br>
        Alors permettez-nous de vous soutenir.
    </p>
    <div class="hero_btn">
        <a href="{{ path('signalement-form') }}" class="button text-status">Signaler <i class="fa fa-hands-helping"
                                                                                        aria-hidden="true"></i></a>
    </div>
    <div class="row join-numbers">
        <div class="col col-lg-5">
            <div class="row">
                <div class="col col-lg-4">
                    <img width="32" src="/assets/img/flags/square/burkina.png">
                    <label>Burkina Faso</label>
                    <label class="number">+226 77 777 77 77</label>
                </div>
                <div class="col col-lg-">
                    <img width="32" src="/assets/img/flags/square/mali.png">
                    <label>Mali</label>
                    <label class="number">+223 77 777 77 77</label>
                </div>
                <div class="col col-lg-4">
                    <img width="32" src="/assets/img/flags/square/mauritanie.png">
                    <label>Mauritanie</label>
                    <label class="number">+222 77 777 77 77</label>
                </div>
            </div>
            <div class="row" style="margin-top: 1rem">
                <div class="col col-lg-4">
                    <img width="32" src="/assets/img/flags/square/niger.png">
                    <label>Niger</label>
                    <label class="number">+227 77 777 77 77</label>
                </div>
                <div class="col col-lg-4">
                    <img width="32" src="/assets/img/flags/square/tchad.png">
                    <label>Tchad</label>
                    <label class="number">+235 77 777 77 77</label>
                </div>
                <div class="col col-lg-4">
                    <img width="32" src="/assets/img/flags/square/senegal.png">
                    <label>Sénégal</label>
                    <label class="number">+221 77 777 77 77</label>
                </div>
            </div>
        </div>
        <div class="col col-lg-4">
            <img src="/assets/img/output.png" width="70" style="position: relative;margin-bottom:0;opacity: .6">
            <span style="position: absolute;font-size: 15px;font-weight: bold">
                <div style="display: block;margin-left: 15px; margin-top: 45px">
                    <i class="text-success fab fa-whatsapp fa-3x"></i>
                    <label>Vous pouvez aussi nous contacter<br> sur WhatsApp...</label>
                </div>
            </span>
        </div>
    </div>
{% endblock %}