{% extends 'base.html.twig' %}



{% block title %}
{{ app.environment }}
{% endblock %}


{% block body %}

    <section class="xs-screen-height xs-welcome-section xs-bg fundpress-welcome-section xs-home-bg" >
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="xs-welcome-content fundpress-welcome-content-v2">
                        <div class="xs-welcome-wraper">
                            <h4 style="color: white!important;">{{ 'home.main.title' | trans }}</h4>

                            <ul class="fundpress-welcome-list-content">
                                <li style="">"{{ 'home.main.subtitle' | trans }}"</li>
                            </ul>
                            <div class="xs-btn-wraper">
                                <a href="#" class="xs-btn btn btn-outline-primary round-btn">{{ 'home.main.createBanlal' | trans }}</a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>


    <section  class="xs-section-padding fundpress-cause-matters-v2" data-scrollax-parent="true">
        <div class="container">
            <div class="fundpress-heading-title-v3 text-center wow fadeInUp" data-wow-duration="1s">
                <div class="fundpress-heading-title-content">
                    <h2>{{ 'home.use.section.howToUse' | trans }}  <span>{{ siteName }}</span> ?</h2>
                    <p>{{ 'home.use.section.details'| trans({ '%siteName%': siteName }) }}</p>
                </div>
                <span class="parallax-title" data-scrollax="properties: { translateY: '-250px' }">{{ siteName }}</span>
            </div><!-- section heading -->
            <div class="row">
                <div class="col-md-3">
                    <div class="fundpress-icon-with-square-service-v2 wow fadeInUp" data-wow-duration="1.2s">
                        <i class="icon icon-shopping-cart xs-check-mark"></i>
                        <h4>{{ "home.use.section.action.first.title"|trans }}. </h4>
                        <p>
                            {{ "home.use.section.action.first.details"|trans }}
                        </p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="fundpress-icon-with-square-service-v2 wow fadeInUp" data-wow-duration="2s">
                        <i class="icon icon-users2 xs-check-mark"></i>
                        <h4>{{ "home.use.section.action.second.title"|trans }}</h4>
                        <p>{{ 'home.use.section.action.second.details'|trans }}</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="fundpress-icon-with-square-service-v2 wow fadeInUp" data-wow-duration="2s">
                        <i class="icon icon-money-3 xs-check-mark"></i>
                        <h4>{{ 'home.use.section.action.third.title'|trans}}</h4>
                        <p>{{ 'home.use.section.action.third.details'|trans}}</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="fundpress-icon-with-square-service-v2 wow fadeInUp" data-wow-duration="1.6s">
                        <i class="icon icon-commerce xs-check-mark"></i>
                        <h4>{{ 'home.use.section.action.fourth.title'|trans}}</h4>
                        <p>{{ 'home.use.section.action.fourth.details'|trans}}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section class="xs-gray-bg-2 xs-section-padding" data-scrollax-parent="true">
        <div class="container">
            <div class="fundpress-heading-title-v3 text-center wow fadeInUp" data-wow-duration="1s">
                <div class="fundpress-heading-title-content">
                    <h2> {{ 'home.infos.create' | trans }} {{siteName }} <span>{{ 'home.infos.occasions' | trans }}  </span></h2>
                    <p>
                          {{ 'home.infos.description' | trans }}.
                    </p>
                </div>
                <span class="parallax-title" data-scrollax="properties: { translateY: '-250px' }">{{ siteName }}</span>
            </div><!-- section heading -->

            {% if categories %}

            <div class="fundpress-tab-wraper">
                <div class="fundpress-tab-nav-v3 xs-tab-nav wow fadeInUp" data-wow-duration="1.3s">
                    <ul class="nav nav-tabs" role="tablist">

                        {% for category in categories %}
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url('category.show', { 'slug': category.slug, 'id': category.id }) }}" role="tab" >
                                {{ category.name }}
                            </a>
                        </li>
                        {% endfor %}

                    </ul>
                </div>
                <?php if (isset($banlals)): ?>
                <div class="tab-content wow fadeInUp" data-wow-duration="1.5s">
                    <div role="tabpanel" class="tab-pane fade in active show" >
                        <div class="row">

                            {% for banlal in banlals %}

                                {{ include('banlal/_banlal.html.twig',{'banlal': banlal}) }}
                            {% endfor %}

                        </div>
                    </div>

                </div>
                <?php endif; ?>
            </div>


            {% endif %}

        </div>
    </section>


{#    <section class="xs-side-by-side-product-v2">#}
{#        <div class="container-fluid">#}
{#            <div class="row">#}
{#                <div class="col-md-12 col-lg-6 xs-padding-0">#}
{#                    <div class="fundpress-full-width-wraper-v2" style="background-image: url('img/money.jpg')">#}
{#                        <div class="fundpress-product-hover-content-v2">#}
{#                            <div class="fundpress-sub-title">#}
{#                                <h2>Collectez</h2>#}
{#                            </div>#}
{#                            <div class="fundpress-product-text-content">#}
{#                                <p>Avec Banlal collectez plus facilement des fonds pour toutes les occasions</p>#}
{#                            </div>#}
{#                            <div class="xs-btn-wrapre">#}
{#                                <a href="<?=$this->Url->build(['controller'=>'banlals','action'=>'creation']) ?>" class="xs-btn btn xs-box-shadow btn-primary btn-lg round-btn">Créez Votre Banlal</a>#}
{#                            </div>#}
{#                        </div><!-- .fundpress-product-hover-content-v2 END -->#}
{#                        <div class="xs-solid-overlay xs-bg-black"></div>#}
{#                    </div><!-- .fundpress-full-width-wraper-v2 END -->#}
{#                </div>#}
{#                <div class="col-md-12 col-lg-6 xs-padding-0">#}
{#                    <div class="fundpress-full-width-wraper-v2" style='background-image: url("img/meeting.jpg")'>#}
{#                        <div class="fundpress-product-hover-content-v2">#}
{#                            <div class="fundpress-sub-title">#}
{#                                <h2>Mobilisez Du monde</h2>#}
{#                            </div>#}
{#                            <div class="fundpress-product-text-content">#}
{#                                <p>Banlal permet également de mobiliser des personnes et de collecter des fonds</p>#}
{#                            </div>#}
{#                            <div class="xs-btn-wrapre">#}
{#                                <a href="<?=$this->Url->build(['controller'=>'banlals','action'=>'creation']) ?>" class="xs-btn xs-box-shadow btn btn-primary btn-lg round-btn">Mobilisez</a>#}
{#                            </div>#}
{#                        </div><!-- .fundpress-product-hover-content-v2 END -->#}
{#                        <div class="xs-solid-overlay xs-bg-black"></div>#}
{#                    </div><!-- .fundpress-full-width-wraper-v2 END -->#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
{#    </section>#}





  {# pour la recharge#}
{#    <section  class="xs-navy-blue-gradient fundpress-square-service-section v3">#}
{#        <div class="container">#}
{#            <div class="fundpress-section-heading fundpress-heading-title fundpress-heading-title-v3 content-left">#}
{#                <h3 class="color-blue-v2">Envoyez de l'argent ou des recharges mobiles partout dans le monde à moindre coût. </h3>#}
{#            </div>#}
{#            <div class="row">#}
{#                <div class="col-md-6">#}
{#                    <div class="fundpress-icon-with-square-service">#}
{#                        <img src="img/money.png" alt="">#}
{#                        <a href="<?= $this->Url->build(['controller'=>'recharges','action'=>'index']) ?>" class="color-white">Recharge téléphonique </a>#}
{#                        <p>Réchargez les mobiles de vos proches partout dans le monde en moins de 2 min </p>#}
{#                    </div>#}
{#                </div>#}
{#                <div class="col-md-6">#}
{#                    <div class="fundpress-icon-with-square-service">#}
{#                        <img src="img/mobile-banking.png" alt="">#}
{#                        <a href="<?= $this->Url->build(['controller'=>'transferts','action'=>'index']) ?>" class="color-white">Mobile Money.</a>#}
{#                        <p>Envoyez de l'argent directement et instantanément sur le mobile mobile à travers le monde..</p>#}
{#                    </div>#}
{#                </div>#}

{#            </div>#}
{#        </div>#}
{#        <div class="xs-shape-background">#}
{#            <div class="xs-waves">#}
{#                <div class="xs-wave xs-wave_1"></div>#}
{#                <div class="xs-wave xs-wave_2"></div>#}
{#                <div class="xs-wave xs-wave_3"></div>#}
{#                <div class="xs-wave xs-wave_4"></div>#}
{#                <div class="xs-wave xs-wave_5"></div>#}
{#            </div>#}
{#        </div>#}
{#    </section>#}



{#    <section class="xs-gray-bg xs-bg xs-section-padding fundpress-sponsor-section" style="background-image: url(assets/images/background/sponsor_section_bg.jpg);">#}
{#        <div class="xs-solid-overlay xs-bg-white"></div>#}
{#        <div class="container fundpress-partners-wraper">#}
{#            <div class="fundpress-heading-title">#}
{#                <h2 class="color-navy-blue xs-mb-0">Ils parlent de nous</h2>#}
{#            </div>#}
{#            <div class="content-center">#}
{#                <ul class="fundpress-partners">#}
{#                    <li><a href="http://guineeinfos.org" class="full-round fundpress-single-partner"><img src="img/presses/guineeinfos.png" alt="logo guinéeinfos"></a></li>#}

{#                </ul>#}
{#            </div>#}

{#        </div>#}
{#    </section>#}

{% endblock %}