Deprecated: Constant E_STRICT is deprecated in /var/www/tunnel-afrique/preprod/vendor/symfony/error-handler/ErrorHandler.php on line 58

Deprecated: Constant E_STRICT is deprecated in /var/www/tunnel-afrique/preprod/vendor/symfony/error-handler/ErrorHandler.php on line 76
Symfony Profiler

templates/home/home.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
    
    {% block title %}{% trans %}Mether - Rejoignez-nous et générez un revenu récurrent grâce au web 3.0{% endtrans %}{% endblock %}
    
    {% block metas %}
        <meta name="title" content="{% trans %}Mether - Rejoignez-nous et générez un revenu récurrent grâce au web 3.0{% endtrans %}">
        <meta name="description" content="{% trans %}Mether, une plateforme qui vous permet de participer à l'ère du Web 3.0, d'apprendre et de gagner un revenu en ligne. Découvrez comment Mether vous offre une chance de générer des revenus dynamiques et de travailler selon vos conditions.{% endtrans %}">
    {% endblock %}
    
    {% block stylesheets %}
        {{ parent() }}
        <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
        <link rel="stylesheet" href="{{ asset('assets/inc/assets/css/lite-yt-embed.min.css') }}" rel="preload" as="style">
        <link rel="stylesheet" href="{{ asset('assets/css/home.css?date=202406171414') }}" rel="preload" as="style">
         <style>
        .centered-link {
          display: inline-flex;
          align-items: center;
          text-decoration: none; /* Remove underline */
          color: inherit; /* Inherit color from parent */
        }
    
        .centered-link i {
          margin-right: 8px; /* Space between icon and text */
        }
        
      </style>
    {% endblock %}
    
    {% block body %}
        <main>
            {# <h1 class="d-none">{% trans %}Participez à la révolution du web 3.0 en Afrique - Découvrez Mether{% endtrans %}</h1> #}
            <!-- slider area start -->
            <div class="bd-slider__section">
                <div class="bd-slider__active bd-slider__wrapper swiper-container">
                    <div class="swiper-wrapper">
                        <div class=" position-relative background-overlay swiper-slide bd-slider__item bd-slider__height include-bg d-flex align-items-center">
                            <img src="{{ asset('/assets/images/compressed/tunnel-afrique/pexels-gustavo-fring-6699286.jpg') }}" class="img-fluid" alt="Image de fond">
                            <div class="overlay position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-75"></div>
                            <div class="container bd-slider__container  position-absolute top-50 start-50 translate-middle text-white text-center">
                                <div class="row ">
                                    <div class="col-12 text-center  mt-200">
                                        <div class="bd-slider__content pt-50">
                                            <h2 class="bd-slider__title_banner text-white" data-animation="fadeInUp" data-delay=".5s">{% trans from 'messages.home' %}PARTICIPEZ À  <br> LA RÉVOLUTION DU WEB 3.0  <br> EN AFRIQUE{% endtrans %}
                                                <div class="position-relative">
                                                    <br><span class="text-secondary ff-rumaniaya p-absolute-title-banner">{% trans from 'messages.home' %}Découvrez Mether{% endtrans %}</h2>
                                                </div>
                                            <p class="mx-md-5 h4 mb-4 fs-5" data-animation="fadeInUp" data-delay=".7s" >{% trans from 'messages.home' %}DEVENEZ UN LEADER DU FUTUR ET GÉNÉREZ DES REVENUS RÉCURRENTS GRÂCE À UNE ÉCONOMIE DÉCENTRALISÉE{% endtrans %}.</p>
                                                <div class="col-md-6 offset-md-3 countdown">
                                                    {# <p  class="font-weight-bold fs-3">
                                                    {{ datetime.format('F j, Y | h:iA') }} <!-- Formatage de la date -->
                                                    </p> #}
                                                    <p class="fs-5"><span >Temps restant avant la conférence :</span><br/></p>
                                                    <div class="container">
                                                        <table class="table table-borderless text-white">
                                                            <tbody>
                                                                <tr>
                                                                    <td id="countdown-d" class="fw-bold fs-4"></td>
                                                                    <td class="fw-bold fs-4">:</td>
                                                                    <td id="countdown-h" class="fw-bold fs-4"></td>
                                                                    <td class="fw-bold fs-4">:</td>
                                                                    <td id="countdown-m" class="fw-bold fs-4"></td>
                                                                    <td class="fw-bold fs-4">:</td>
                                                                    <td id="countdown-s" class="fw-bold fs-4"></td>
                                                                </tr>
                                                                <tr class="full-text-timer">
                                                                    <td>Jour(s)</td>
                                                                    <td></td>
                                                                    <td>Heure(s)</td>
                                                                    <td></td>
                                                                    <td>Minute(s)</td>
                                                                    <td></td>
                                                                    <td>Seconde(s)</td>
                                                                </tr>
                                                                <tr class="short-text-timer">
                                                                    <td>J(s)</td>
                                                                    <td></td>
                                                                    <td>H(s)</td>
                                                                    <td></td>
                                                                    <td>Min(s)</td>
                                                                    <td></td>
                                                                    <td>Sec(s)</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
    
                                                </div>
                                            {% if prospection == 1  %}
                                                <a class=" bd-btn home-button mt-3" href="#section_inscription">{% trans from 'messages.home' %}Inscrivez-vous maintenant et démarrez votre aventure avec Mether {% endtrans %}</a>
                                            {% else %}
                                                <button class="bd-btn home-button mt-3 btn-calendly-appointment">{% trans from 'messages.home' %} Inscrivez-vous maintenant et démarrez votre aventure avec Mether {% endtrans %}</button>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    
            {# <div class="container-fluid video-under-banner pt-100">
                <div class="row">
                    <div class="col-12">
                        <div class="bd-video_container ">
                            <lite-youtube videoid="1iK9mCPDC1w" playlabel="Révolutionnez votre avenir numérique avec Mether : votre passerelle vers le Web 3.0" class="rounded-3"></lite-youtube>
                        </div>
                    </div>
                </div>
            </div> #}
    
            <!-- slider area end -->
            
        
            {# {% for label, messages in app.flashes %}
                {% for message in messages %}
                    <div class="alert alert-{{label}} mt-3" role="alert">
                        <div class="alert-body">
                            {{message}}
                        </div>
                    </div>
                {% endfor %}
            {% endfor %} #}
            {% if events|length > 0 %}
                <div class="col-md-12 pt-60">
                    <div class="postbox-4__wrapper">
                        <div class="row mb-55">
                            <div class="col-12">
                                <div class="bd-section__title-wrapper text-center wow fadeInUp">
                                    <div class="container text-center">
                                        <h3 class="text-secondary bd-slider__title ">Les évènements à venir</h3>
                                    </div>    
                                </div>
                            </div>
                        </div>
                        <div class="row justify-content-around ms-5 me-5">
                        {% for event in events %}
                            <div class="col-md-4">
                                <article class="postbox-4__item format-image mb-50 transition-3 ">
                                    <div class="postbox-4__thumb w-img p-relative">
                                        <img class="img_blog " src=" {{ asset( files_directory_relative ~ event.image) }}" alt="{{event.titre}}" />
                                    </div>
                                    <div class="postbox-4__meta d-flex justify-content-center align-items-center">
                                        <a href="{{ path('app_evenement_index',{ id : event.id })}}" class="btn btn-primary">S'inscrire</a>                               
                                    </div>
                                </article>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% endif %}
        
            <div class="bd-services__area  pt-60 pb-60">
                <div class="container">
                    <div class="row mb-55">
                        <div class="col-12">
                            <div class="bd-section__title-wrapper text-center wow fadeInUp">
                                <div class="container text-center">
                                    <h3 class="text-secondary bd-slider__title ">{% trans from 'messages.home' %}Pourquoi <br> rejoindre Mether{% endtrans %}</h3>
                                    <p class="bd-services__p">{% trans from 'messages.home' %}<span class="fw-bolder">Mether</span>, c’est une chance unique d’entrer dans l’ère du Web 3.0 et de générer des revenus récurrents{% endtrans %}</p>
                                </div>    
                            </div>
                        </div>
                    </div>
                    <div class="d-none d-md-block mb-3">
                        <div class="d-flex justify-content-center mt-4">
                            <div class="card card-custom">
                                <img src="{{ asset('assets/images/compressed/tunnel-afrique/pexels-edmond-dantes-8547282.jpg') }}" class="card-img-top" alt="...">
                                <div class="card-body p-4">
                                    <h4 class="card-pourquoi-soustitre bd-services__advantage__advantage-item-title mb-3">{% trans from 'messages.home' %}Se former avec l’accès à Mether Academy{% endtrans %}</h4>
                                    <p class="text-dark ">{% trans from 'messages.home' %}Des cours complets sur le Web 3.0 et une expérience d’apprentissage immersive pour vous préparer au succès dans le monde numérique. Vous bénéficiez aussi d’un soutien dédié et la possibilité de rejoindre une nouvelle génération de leaders africains dans l’économie décentralisée{% endtrans %}.</p>
                                </div>
                            </div>
                            <div class="card card-custom">
                                <img src="{{ asset('assets/images/compressed/tunnel-afrique/pexels-picha-stock-2210122-3894378.jpg') }}" class="card-img-top" alt="...">
                                <div class="card-body p-4">
                                    <h4 class="texte-secondaire bd-services__advantage__advantage-item-title mb-3">{% trans from 'messages.home' %}Une réelle opportunité de revenus dynamique{% endtrans %}</h4>
                                    <p> {% trans from 'messages.home' %}Rejoindre Mether, c’est s’ouvrir des portes à une source de revenus considérable. En participant à la croissance de cet écosystème, vous pourriez bénéficier de revenus récurrents{% endtrans %}.</p>
                                </div>
                            </div>
    
                            <div class="card card-custom">
                                <img src="{{ asset('assets/images/compressed/tunnel-afrique/pexels-edmond-dantes-8553867.jpg') }}" class="card-img-top" alt="...">
                                <div class="card-body p-4">
                                    <h4 class="texte-secondaire bd-services__advantage__advantage-item-title mb-3">{% trans from 'messages.home' %}Un réseau mondial de soutien{% endtrans %}</h4>
                                    <p>{% trans from 'messages.home' %}Devenez membre de notre communauté internationale. Une occasion inestimable de réseautage et de collaboration avec des personnes partageant les mêmes idées dans le monde entier{% endtrans %}.</p>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-center mt-4">
                            <div class="card card-custom">
                                <img src="{{ asset('assets/images/compressed/groupe-de-masques-20.webp') }}" class="card-img-top" alt="...">
                                <div class="card-body p-4">
                                    <h4 class="texte-secondaire bd-services__advantage__advantage-item-title mb-3">{% trans from 'messages.home' %}Avoir une influence sur le futur du Web{% endtrans %}</h4>
                                    <p class="text-dark ">{% trans from 'messages.home' %}En rejoignant Mether, vous prenez part activement au développement du Web 3.0. Votre travail et votre investissement contribuent à façonner le futur d’Internet{% endtrans %}.</p>
                                </div>
                            </div>
                            <div class="card card-custom">
                                <img src="{{ asset('assets/images/compressed/tunnel-afrique/pexels-diva-plavalaguna-5711038.jpg') }}" class="card-img-top" alt="...">
                                <div class="card-body p-4">
                                    <h4 class="texte-secondaire bd-services__advantage__advantage-item-title mb-3">{% trans from 'messages.home' %}Devenez flexible et indépendant{% endtrans %}</h4>
                                    <p class="text-dark ">{% trans from 'messages.home' %}Mether vous offre la liberté de travailler selon vos propres conditions. Que vous préférez travailler à temps plein ou à temps partiel, vous pouvez adapter votre engagement à Mether selon votre mode de vie.{% endtrans %}.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-block d-md-none mb-3">
                        <div class="swiper-container bd-advantage-swiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="wow fadeInLeft">
                                        <div class="bd-services__advantage-image">
                                            <img class="w-100 h-100 object-fit-contain br-20px" alt="img" src="{{ asset('assets/images/compressed/tunnel-afrique/pexels-edmond-dantes-8547282.jpg') }}"
                                                srcset="{{ asset('assets/images/compressed/tunnel-afrique/pexels-edmond-dantes-8547282.jpg') }} 480w,
                                                {{ asset('assets/images/compressed/tunnel-afrique/pexels-edmond-dantes-8547282.jpg') }} 768w,
                                                {{ asset('assets/images/compressed/tunnel-afrique/pexels-edmond-dantes-8547282.jpg') }} 1200w">
                                        </div>
                                        <div class="mt-3">
                                            <div>
                                                <h4 class="text-white text-primary bd-services__advantage__advantage-item-title">{% trans from 'messages.home' %}Se former avec l’accès à Mether Academy{% endtrans %}</h4>
                                                <p>{% trans from 'messages.home' %}Des cours complets sur le Web 3.0 et une expérience d’apprentissage immersive pour vous préparer au succès dans le monde numérique. Vous bénéficiez aussi d’un soutien dédié et la possibilité de rejoindre une nouvelle génération de leaders africains dans l’économie décentralisée{% endtrans %}.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="wow fadeInLeft">
                                        <div class="bd-services__advantage-image">
                                            <img class="w-100 h-100 object-fit-contain br-20px" alt="img" src="{{ asset('assets/images/compressed/groupe-de-masques-19.webp') }}"
                                                srcset="{{ asset('assets/images/compressed/groupe-de-masques-19.webp') }} 480w,
                                                {{ asset('assets/images/compressed/groupe-de-masques-19.webp') }} 768w,
                                                {{ asset('assets/images/compressed/groupe-de-masques-19.webp') }} 1200w">
                                        </div>
                                        <div class="mt-3">
                                            <div>
                                                <h4 class="text-white text-primary bd-services__advantage__advantage-item-title">{% trans from 'messages.home' %}Une réelle opportunité de revenus dynamique{% endtrans %}</h4>
                                                <p> {% trans from 'messages.home' %}Rejoindre Mether, c’est s’ouvrir des portes à une source de revenus considérable. En participant à la croissance de cet écosystème, vous pourriez bénéficier de revenus récurrents{% endtrans %}.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="wow fadeInLeft">
                                        <div class="bd-services__advantage-image">
                                            <img class="w-100 h-100 object-fit-contain br-20px" alt="img" src="{{ asset('assets/images/compressed/tunnel-afrique/pexels-edmond-dantes-8553867.jpg') }}"
                                                srcset="{{ asset('assets/images/compressed/tunnel-afrique/pexels-edmond-dantes-8553867.jpg') }} 480w,
                                                {{ asset('assets/images/compressed/tunnel-afrique/pexels-edmond-dantes-8553867.jpg') }} 768w,
                                                {{ asset('assets/images/compressed/tunnel-afrique/pexels-edmond-dantes-8553867.jpg') }} 1200w">
                                        </div>
                                        <div class="mt-3">
                                            <div>
                                                <h4 class="text-white text-primary bd-services__advantage__advantage-item-title">{% trans from 'messages.home' %}Un réseau mondial de soutien{% endtrans %}</h4>
                                                <p>{% trans from 'messages.home' %}Devenez membre de notre communauté internationale. Une occasion inestimable de réseautage et de collaboration avec des personnes partageant les mêmes idées dans le monde entier{% endtrans %}.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="wow fadeInLeft">
                                        <div class="bd-services__advantage-image">
                                            <img class="w-100 h-100 object-fit-contain br-20px" alt="img" src="{{ asset('assets/images/compressed/groupe-de-masques-21.webp') }}"
                                            srcset="{{ asset('assets/images/compressed/groupe-de-masques-21.webp') }} 480w,
                                            {{ asset('assets/images/compressed/groupe-de-masques-21.webp') }} 768w,
                                            {{ asset('assets/images/compressed/groupe-de-masques-21.webp') }} 1200w">
                                        </div>
                                        <div class="mt-3">
                                            <div>
                                                <h4 class="text-white text-primary bd-services__advantage__advantage-item-title">{% trans from 'messages.home' %}Avoir une influence sur le futur du Web{% endtrans %}</h4>
                                                <p>{% trans from 'messages.home' %}En rejoignant Mether, vous prenez part activement au développement du Web 3.0. Votre travail et votre investissement contribuent à façonner le futur d’Internet{% endtrans %}.<p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="wow fadeInLeft">
                                        <div class="bd-services__advantage-image">
                                            <img class="w-100 h-100 object-fit-contain br-20px" alt="img" src="{{ asset('assets/images/compressed/tunnel-afrique/pexels-diva-plavalaguna-5711038.jpg') }}"
                                                srcset="{{ asset('assets/images/compressed/tunnel-afrique/pexels-diva-plavalaguna-5711038.jpg') }} 480w,
                                                {{ asset('assets/images/compressed/tunnel-afrique/pexels-diva-plavalaguna-5711038.jpg') }} 768w,
                                                {{ asset('assets/images/compressed/tunnel-afrique/pexels-diva-plavalaguna-5711038.jpg') }} 1200w">
                                        </div>
                                        <div class="mt-3">
                                            <div>
                                                <h4 class="text-white text-primary bd-services__advantage__advantage-item-title">{% trans from 'messages.home' %}Devenez flexible et indépendant{% endtrans %}</h4>
                                                <p> {% trans from 'messages.home' %}Mether vous offre la liberté de travailler selon vos propres conditions. Que vous préférez travailler à temps plein ou à temps partiel, vous pouvez adapter votre engagement à Mether selon votre mode de vie{% endtrans %}.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-60">
                        <div class="col-0 col-md-2">
                        </div>
                        <div class="col-12 col-md-8 text-center">
                            <p class="bd-services__p">{% trans from 'messages.home' %}Inscrivez-vous dès aujourd’hui et transformez votre passion pour le Web 3.0 et la blockchain en une source de revenus dynamique. Préparez-vous pour une aventure riche en apprentissage {% endtrans %}!</p>
                        </div>
                        <div class="col-0 col-2">
                        </div>
                    </div>
                </div>
            </div>
    
            {# {% if 1 == 1  %} #}
            {% if prospection == 1  %}
                <div class="col-md-12 mb-20" id="section_inscription">
                    <div class="postbox-4__wrapper">
                        <div class="row mb-30">
                            <div class="col-12">
                                <div class="bd-section__title-wrapper text-center wow fadeInUp">
                                    <div class="container text-center">
                                        <h3 class="text-secondary bd-slider__title ">Inscrivez-vous</h3>
                                    </div>    
                                </div>
                            </div>
                        </div>
                        <div class="d-flex text-white align-items-center justify-content-center mb-30">
                            <a href="https://www.facebook.com/metherexperiencefrancophone"><i class="fa-brands fa-facebook fa-3x me-4"></i></a>
                            <a href="https://instagram.com/mether_experience"><i class="fa-brands fa-instagram fa-3x me-4"></i></a>
                            <a href="https://t.me/+dJxNPzq1Bi1iMDFh"><i class="fa-brands fa-telegram fa-3x"></i></a>
                        </div>
                        <div class="row justify-content-center ms-5 me-5">
                            <div class="col-md-6">
                                {{ form_start(form, {'attr': { 'id': 'category-form'}}) }}
                                    <div class="col-md-12">
                                        <div class="row">
                                            <div class="col-md-12 col-sm-12 mb-4">
                                                <div class="form-group">
                                                    {{form_label(form.agent_username)}}
                                                    {{form_widget(form.agent_username,{ 'attr': {'class': 'form-control '} })}}
                                                    {{form_errors(form.agent_username)}}
                                                </div>
                                            </div>
                                        </div>
                                      </div>
                                    <div class="col-md-12">
                                        <div class="row">
                                            <div class="col-md-6 col-sm-6 mb-4">
                                                <div class="form-group">
                                                    {{form_label(form.nom)}}
                                                    {{form_widget(form.nom,{ 'attr': {'class': 'form-control '} })}}
                                                    {{form_errors(form.nom)}}
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-6 mb-4">
                                                <div class="form-group">
                                                    {{form_label(form.prenom)}}
                                                    {{form_widget(form.prenom,{ 'attr': {'class': 'form-control '} })}}
                                                    {{form_errors(form.prenom)}}
                                                </div>
                                            </div>
                                        </div>
                                      </div>
    
                                        <div class="col-md-12">
                                        <div class="row">
                                            <div class="col-md-6 col-sm-6 mb-4">
                                                <div class="form-group">
                                                    {{form_label(form.email)}}
                                                    {{form_widget(form.email,{ 'attr': {'class': 'form-control '} })}}
                                                    {{form_errors(form.email)}}
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-sm-6 mb-4">
                                                <div class="form-group">
                                                    {{form_label(form.telephone)}}
                                                    {{form_widget(form.telephone,{ 'attr': {'class': 'form-control '} })}}
                                                    {{form_errors(form.telephone)}}
                                                </div>
                                            </div>
                                        </div>
                                      </div>
    
                            
                                    <div class="col-md-12 text-center">
                                        <button type="submit" class=" mt-3 bd-btn home-button mt-3 mb-4 w-100">S'inscrire</button>
                                    </div>
                                {{ form_end(form) }}
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
    
            <div class=" bg-gradient bd-step pb-120">
                <div class="container">
                     <div class="row ">
                        <div class="col-12 text-center">
                            <div class="bd-section__title-wrapper text-center wow fadeInUp">
                                <h3 class="bd-slider__title mt-70 text-secondary">{% trans from 'messages.home' %}Votre voyage <br> avec  Mether{% endtrans %}</h3>
                                <p class="text-white">{% trans from 'messages.home' %}Suivez ces étapes simples et démarrez votre parcours vers le succès avec <strong class="text-white">Mether</strong>{% endtrans %}</p>
                            </div>
                            <div class="row my-6">
                                <img src="/assets/images/parcours/Tracé-48.png" alt="step-line-img" class="step-line d-none d-md-block" 
                                    srcset="{{ asset('assets/images/parcours/Tracé-48.png') }} 480w,
                                    {{ asset('assets/images/parcours/Tracé-48.png') }} 768w,
                                    {{ asset('assets/images/parcours/Tracé-48.png') }} 1200w">
                                <div class="col-12 col-md-3 z-index-1 mb-4">
                                    <img src="{{ asset('assets/images/parcours/Groupe-74.png') }}" class="bd-step-img" width="170" height="170"  alt="icon" 
                                        srcset="{{ asset('assets/images/parcours/Groupe-74.png') }} 480w,
                                        {{ asset('assets/images/parcours/Groupe-74.png') }} 768w,
                                        {{ asset('assets/images/parcours/Groupe-74.png') }} 1200w">
                                    <h4 class="fw-bolder text-white step-item-title">{% trans from 'messages.home' %}L’inscription{% endtrans %}</h4>
                                    <p class="text-white step-item-p mx-2 d-none d-md-block">
                                        {% trans from 'messages.home' %}Commencez votre parcours en vous inscrivant. Une démarche simple et rapide, et le premier pas vers le succès du monde du Web 3.0{% endtrans %}.
                                    </p>
                                </div>
                                <div class="col-12 col-md-3 z-index-1 mb-4">
                                    <img src="{{ asset('assets/images/parcours/Groupe-77.png') }}" class="bd-step-img" alt="icon" width="170" height="170"
                                        srcset="{{ asset('assets/images/parcours/Groupe-77.png') }} 480w,
                                        {{ asset('assets/images/parcours/Groupe-77.png') }} 768w,
                                        {{ asset('assets/images/parcours/Groupe-77.png') }} 1200w">
                                    <h4 class="fw-bolder text-white step-item-title">{% trans from 'messages.home' %}Rencontre Virtuelle{% endtrans %}</h4>
                                    <p class="text-white step-item-p mx-2 d-none d-md-block">
                                        {% trans from 'messages.home' %}Une fois inscrit, vous aurez l’occasion d’échanger avec un membre actif de la communauté à une heure qui vous convient. Une première opportunité de discuter de vos objectifs et de vos attentes{% endtrans %}.
                                    </p>
                                </div>
                                <div class="col-12 col-md-3 z-index-1 mb-4">
                                    <img src="{{ asset('assets/images/parcours/Groupe-76.png') }}" class="bd-step-img" alt="icon" width="170" height="170"
                                        srcset="{{ asset('assets/images/parcours/Groupe-76.png') }} 480w,
                                        {{ asset('assets/images/parcours/Groupe-76.png') }} 768w,
                                        {{ asset('assets/images/parcours/Groupe-76.png') }} 1200w">
                                    <h4 class="fw-bolder text-white step-item-title">{% trans from 'messages.home' %}Devenir Metherian{% endtrans %}</h4>
                                    <p class="text-white step-item-p mx-2 d-none d-md-block">
                                        {% trans from 'messages.home' %}Il vous sera possible de démarrer directement et de faire partie de la grande communauté Mether{% endtrans %}!
                                    </p>
                                </div>
                                <div class="col-12 col-md-3 z-index-1 mb-4">
                                    <img src="{{ asset('assets/images/parcours/Groupe-80.png') }}" class="bd-step-img" alt="icon" width="170" height="170"
                                            srcset="{{ asset('assets/images/parcours/Groupe-80.png') }} 480w,
                                            {{ asset('assets/images/parcours/Groupe-80.png') }} 768w,
                                            {{ asset('assets/images/parcours/Groupe-80.png') }} 1200w">
                                    <h4 class="fw-bolder text-white step-item-title">{% trans from 'messages.home' %}Commencer l’aventure{% endtrans %}</h4>
                                    <p class="text-white step-item-p mx-2 d-none d-md-block">
                                        {% trans from 'messages.home' %}Une fois membre, vous aurez accès à la plateforme et aux dernières actualités de l’évolution de Mether. Soyez prêt à explorer le monde du Web 3.0 et à travailler activement pour votre réussite{% endtrans %}.
                                    </p>
                                </div>
                            </div>
                            <p class="text-white my-6">{% trans from 'messages.home' %}Seriez-vous prêt à explorer les opportunités offertes par Mether? Bénéficiez de formations, de soutien et de revenus potentiels dans le Web 3.0. N’attendez plus {% endtrans %}!</p>
    
                            {% if prospection == 1  %}
                                <a class=" bd-btn home-button mt-3" href="#section_inscription">{% trans from 'messages.home' %}Inscrivez-vous maintenant {% endtrans %}</a>
                            {% else %}
                                <button class="bd-btn home-button mt-3 btn-calendly-appointment">{% trans from 'messages.home' %} Inscrivez-vous maintenant {% endtrans %}</button>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- bd testimonial start  -->
            <div id="section_opportunite" class="bd-services__area text-white pt-30 pb-60 " >
                <div class="container">
                    <div class="row text-center">
                        <div class="col-12">
                            <h3 class="mb-4 text-secondary bd-slider__title mt-50 mb-40"> {% trans from 'messages.home' %}Accéder au Web 3.0 avec Mether{% endtrans %} :</h3>
                            <h4 class="h2 text-primary mb-50">{% trans from 'messages.home' %}UN INVESTISSEMENT SUR ET RENTABLE{% endtrans %}</h4>
                            <P class="mb-4">{% trans from 'messages.home' %}Découvrez les chemins de participation qui s'offrent à vous{% endtrans %}</P>
                            <P class="px-md-95">{% trans from 'messages.home' %}Chez Mether, nous croyons que le monde du Web 3.0 devrait être accessible à tous, et non réservé à ceux qui peuvent se permettre des investissements importants. C'est pourquoi nous avons créé une plateforme qui vous donne la possibilité de vous immerger dans cette nouvelle ère de l'internet sans dépenser une fortune{% endtrans %}.</P>
                            
                            <h4 class="text-secondary h2 my-6">{% trans from 'messages.home' %}METHER VOUS OFFRE 2 OPPORTUNITÉS{% endtrans %}</h4>
    
                            <div class="pricing__list position-relative row">
                                <div class="pricing__item col-md-6">
                                    <div class="pricing__header">
                                    <h3 class="pricing__title">{% trans from 'messages.home' %}<span class="h3">Opportunité</span><br><span class="custom-title">Passive{% endtrans %}</span></h3>
                                    <!-- <small class="pricing__title-description">CA 1 000€ (récurrent) >1 mois</small> -->
                                    </div>
                                    <div class="pricing__content p-10">
                                        <p class="h6">
                                            {% trans from 'messages.home' %}
                                                Avec Mether, vous pouvez opter pour une approche passive. 
                                            {% endtrans %}
                                        </p>
                                        <p class="h6">
                                            {% trans from 'messages.home' %}
                                                En achetant un de nos packages, vous devenez détenteur de Riser, la cryptomonnaie de notre entreprise. Vous bénéficiez ainsi des avantages uniques que Mether offre. 
                                                
                                            {% endtrans %}
                                        </p>
                                        <p class="h6">
                                            {% trans from 'messages.home' %}
                                                C'est une excellente façon de vous initier au monde du Web 3.0 et de profiter de ses avantages.
                                            {% endtrans %}
                                        </p>
                                        <!-- <div class="pricing__price">250<sub class="pricing__price-symbol">€</sub></div>
                                        <div class="pricing__period">Par Mois</div>
                                        <hr>
                                        <ul>
                                            <li><b>Bonus</b></li>
                                            <li>Carte de visite</li>
                                            <li>+ Plaque de récompense tableau vinyle LED</li>
                                        </ul> -->
                                    </div>
                                </div>
                                <div class="pricing__item col-md-6">
                                    <div class="pricing__header">
                                    <h4 class="pricing__title">{% trans from 'messages.home' %}<span class="h3">Opportunité</span><br><span class="custom-title">Active</span>{% endtrans %}</h4>
                                    <!-- <small class="pricing__title-description">CA 1 000€ (récurrent) >1 mois</small> -->
                                    </div>
                                    <div class="pricing__content">
                                        <p class="h6">
                                            {% trans from 'messages.home' %}
                                                Si vous souhaitez être plus actif et augmenter vos revenus, Mether offre également des possibilités de contribution.{% endtrans %}.
                                        </p>
                                        <p class="h6">
                                            {% trans from 'messages.home' %} Agrandissez votre réseau, gagnez des bonus et  générez des revenus substantiels.
                                            {% endtrans %}.
                                        </p>
                                        <p class="h6">
                                            {% trans from 'messages.home' %}
                                                Et ce n'est pas tout ! En aidant les membres de votre équipe à réussir, vous grimpez dans notre système de rangs, débloquant des récompenses exceptionnelles.
                                            {% endtrans %}.
                                        </p>
                                        <!-- <div class="pricing__price">250<sub class="pricing__price-symbol">€</sub></div>
                                        <div class="pricing__period">Par Mois</div>
                                        <hr>
                                        <ul>
                                            <li><b>Bonus</b></li>
                                            <li>Carte de visite</li>
                                            <li>+ Plaque de récompense tableau vinyle LED</li>
                                        </ul> -->
                                    </div>
                                </div>
                            </div>
    
                            <p class="my-4 h4">{% trans from 'messages.home' %}Choisissez le chemin qui vous convient le mieux et commencez votre voyage dans le monde du Web 3.0 avec Mether{% endtrans %}.</p>
                            
                            {% if prospection == 1  %}
                                <a class=" bd-btn home-button mt-3" href="#section_inscription">{% trans from 'messages.home' %}Découvrez les opportunités d’investissement {% endtrans %}</a>
                            {% else %}
                                <button class="bd-btn home-button mt-3 btn-calendly-appointment">{% trans from 'messages.home' %} Découvrez les opportunités d’investissement {% endtrans %}</button>
                            {% endif %}
    
                        </div>
                    </div>
                </div>
            </div>
    
    
            <div class="bd-testimonial__area bg-gradient text-white">
                <div class="container">
                    <div class="p-relative text-center">
                        <br>
                        <h3 class="mb-4 text-secondary bd-slider__title mt-50 mb-40">{% trans from 'messages.home' %}Les Metherians Témoignent{% endtrans %}</h3>
    
                        <p class="text-center text-white">{% trans from 'messages.home' %}"Découvrez les expériences de ceux qui façonnent déjà leur avenir avec <span class="fw-bolder">Mether</span>{% endtrans %}."</p>
                        <div class="swiper-container bd-testimonial-1">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="bd-testimonial__item wow fadeInLeft">
                                        <div class="bd-testimonial__revirwer-avata">
                                            <img src="{{ asset('assets/images/compressed/groupe-de-masques-26.webp') }}" alt="Testimonial Author" width="150" class="rounded-circle" width="150" height="150"
                                                srcset="{{ asset('assets/images/compressed/groupe-de-masques-26.webp') }} 480w,
                                                {{ asset('assets/images/compressed/groupe-de-masques-26.webp') }} 768w,
                                                {{ asset('assets/images/compressed/groupe-de-masques-26.webp') }} 1200w">
                                        </div>
                                        <div class="bd-testimonial__review">
                                            <p class="text-white testimonial-speech-p">
                                                {% trans from 'messages.home' %}"Rejoindre Mether a été la meilleure décision que j'ai prise. Cela m'a non seulement permis de générer un revenu supplémentaire, mais aussi de comprendre le potentiel du Web 3.0. Merci, Mether!"{% endtrans %}
                                            </p>
                                        </div>
                                        <div class="bd-testimonial__reviewer d-flex align-items-center justify-content-center">
                                            
                                            <div class="text-center">
                                                <h3 class="text-secondary">Julie</h3>
                                                <span>{% trans from 'messages.home' %}Paris, France{% endtrans %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="bd-testimonial__item wow fadeInLeft">
                                        <div class="bd-testimonial__revirwer-avata">
                                                <img src="{{ asset('assets/images/compressed/groupe-de-masques-25.webp') }}" alt="Testimonial Author" class="rounded-circle" width="150" height="150"
                                                    srcset="{{ asset('assets/images/compressed/groupe-de-masques-25.webp') }} 480w,
                                                    {{ asset('assets/images/compressed/groupe-de-masques-25.webp') }} 768w,
                                                    {{ asset('assets/images/compressed/groupe-de-masques-25.webp') }} 1200w">
                                            </div>
                                        <div class="bd-testimonial__review">
                                            <p class="text-white testimonial-speech-p">
                                                {% trans from 'messages.home' %}"Je suis un Metherian depuis six mois maintenant, et je suis étonné de voir à quel point il est facile d'entrer dans le monde du Web 3.0 grâce à Mether. Le bonus de parrainage est aussi un énorme avantage."{% endtrans %}
                                            </p>
                                        </div>
                                        <div class="bd-testimonial__reviewer d-flex align-items-center justify-content-center">
                                            
                                            <div class="text-center">
                                                <h3 class="text-secondary">Alexandre</h3>
                                                <span>{% trans from 'messages.home' %}Québec, Canada{% endtrans %}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="bd-testimonial__item wow fadeInLeft">
                                        <div class="bd-testimonial__revirwer-avata">
                                                <img src="{{ asset('assets/images/compressed/groupe-de-masques-24.webp') }}" alt="Testimonial Author" class="rounded-circle" width="150" height="150"
                                                    srcset="{{ asset('assets/images/compressed/groupe-de-masques-24.webp') }} 480w,
                                                    {{ asset('assets/images/compressed/groupe-de-masques-24.webp') }} 768w,
                                                    {{ asset('assets/images/compressed/groupe-de-masques-24.webp') }} 1200w">
                                            </div>
                                        <div class="bd-testimonial__review">
                                            <p class="text-white testimonial-speech-p">
                                                {% trans from 'messages.home' %}"J'étais sceptique au début, mais j'ai vite compris que Mether n'était pas une simple entreprise tech. C'est une communauté qui vous soutient et vous guide à chaque étape de votre voyage dans le Web 3.0. Très impressionnant !"{% endtrans %}
                                            </p>
                                        </div>
                                        <div class="bd-testimonial__reviewer d-flex align-items-center justify-content-center">
                                            
                                            <div class="text-center">
                                                <h3 class="text-secondary">Fatima</h3>
                                                <span>{% trans from 'messages.home' %}Abidjan, Côte d'Ivoire{% endtrans %}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bd-testimonial__nav mt-50">
                            <div class="container-fluid">
                                <div class="bd-testimonial__nav-wrapper d-flex justify-content-center">
                                    <div class="testimonial-slider-button-prev">
                                        <span>
                                            <i class="fa-thin fa-angle-left"></i>
                                        </span>
                                    </div>
                                    <div class="testimonial-slider-button-next">
                                        <span>
                                            <i class="fa-thin fa-angle-right"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- bd testimonial end  -->
            {% include "partials/faq.html.twig" %}
        </main>
    
    {% endblock %}
    
    {% block javascripts %}
        {{ parent() }}
        <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
        <script src="{{ asset('assets/inc/assets/js/lite-yt-embed.min.js') }}" defer></script>
    
        <script type="text/javascript">
            const swiper_experience_area = new Swiper('.swiper.swiper-experience-area', {
                // Optional parameters
                direction: 'horizontal',
                loop: true,
                pagination: false,
                navigation: false,
                scrollbar: false,
                autoplay: {
                    delay: 3000
                },
                centeredSlides: true,
                slidesPerView: 1,
                spaceBetween: 10,
                // Responsive breakpoints
                breakpoints: { // when window width is >= 320px
                    320: {
                        slidesPerView: 1,
                        spaceBetween: 20
                    },
                    // when window width is >= 480px
                    480: {
                        slidesPerView: 2,
                        spaceBetween: 30
                    },
                    // when window width is >= 640px
                    640: {
                        slidesPerView: 4,
                        spaceBetween: 40
                    }
                }
            });
    
            const swiper_google_badge = new Swiper('.swiper.swiper-google-badge', {
                // Optional parameters
                direction: 'horizontal',
                loop: true,
                pagination: false,
                navigation: false,
                scrollbar: false,
                autoplay: {
                    delay: 5500
                },
                centeredSlides: true,
                slidesPerView: 1,
                spaceBetween: 10,
                // Responsive breakpoints
                breakpoints: { // when window width is >= 320px
                    320: {
                        slidesPerView: 1,
                        spaceBetween: 20
                    },
                    // when window width is >= 480px
                    480: {
                        slidesPerView: 2,
                        spaceBetween: 30
                    },
                    // when window width is >= 640px
                    640: {
                        slidesPerView: 4,
                        spaceBetween: 40
                    }
                }
            });
    
            
    
    
    
    
            let classLoad = '.my-spinner';
            function load(btn, is = true){
                if(is){
                    $(btn).find(classLoad).removeClass('d-none');
                } else{
                    $(btn).find(classLoad).addClass('d-none');
                }
                $(btn).attr('disabled', is);
            }
    
            $(document).ready(function (){
                let btn =  $('.btn-calendly-appointment');
                function isCalendlyEvent(e) {
                    return e.origin === "https://calendly.com" && e.data.event && e.data.event.indexOf("calendly.") === 0;
                };
    
                window.addEventListener("message", function(e) {
                    if(isCalendlyEvent(e)) {
                        if(e.data.event == 'calendly.event_scheduled'){
                            Calendly.closePopupWidget();
                            load(btn);
                            let params = {
                                inviteeLink: e.data.payload.invitee.uri,
                                eventLink: e.data.payload.event.uri,
                            };
                            let request = $.ajax({
                                url:        "{{path('app_appointment_save')}}",
                                type:       'POST',
                                data: JSON.stringify(params),
                                contentType: 'application/json; charset=utf-8',
                                dataType: "json"
                            });
                            request.done(function(data) {
                                load(btn, false);
                                window.location.pathname="{{path('app_home')}}";
                            });
                            request.fail(function(jqXHR, textStatus) {
                                load(btn, false);
                                let data = jqXHR.responseJSON;
                                console.log(data, textStatus);
                                alert('Erreur: '+data.message);
                            });
                            
                        }
                    }
                });
    
                $(btn).click(function (){
                    Calendly.initPopupWidget({
                        url: `{{calendly_link}}`
                    });
                });
            });
        </script>
        <script>
            timer('{{ datetime|date('c') }}','countdown') ;
        </script>
    {% endblock %}