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

{% block title %}Mon Coaching{% endblock %}

{% block body %}

    <div class="headerMonCoaching"> <!-- header monCoaching -->
        <div class="container-lg">
            <div class="bordure-top bordure-bot">
                <div class="containerHeaderMonCoaching">

                    <div class="no-display-phone">
                        <h2 class="uppercase color-pink4 titre-bold titreHeaderMonCoaching">Le seul coaching 1:1</h2>
                        <div class="mt-3">
                            <p class=" m-0 titre-bold texteHeaderMonCoaching">qui t'apprend à créer ton tunnel de vente</p>
                            <p class="texteHeaderMonCoaching"><strong class="changing-text titre-bold"></strong></p>
                            <p class="texteHeaderMonCoaching">Déploie un système automatisé qui convertit<br>
                                pour gagner du temps et obtenir<br>
                                x2 sur ton chiffre d’affaires</p>
                        </div>
                        <div class="mt-5">
                            <a href="https://calendly.com/floreflipo/45min" class="btn bouton-rose">Je prends ma place</a>
                        </div>
                    </div>

                    <div class="col-6">
                        <img class="imgBase imgHeaderMonCoaching" src="images/ressources/3.png" alt="I make my funnel">
                    </div>

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

        <div class="no-display-computer">
            <div class="containerHeaderTexteMonCoaching">
                <div class="bordure-top bordure-bot texte-center-phone">
                    <h2 class="uppercase color-pink1 titre-bold">Le seul coaching 1:1</h2>
                    <div class="mt-3">
                        <p class="m-0">qui t'apprend à créer ton tunnel de vente</p>
                        <p class="">sans t’épuiser, sans prospecter et sans <br>connaissance technique</p>
                    </div>
                    <div class="mt-5 center-phone">
                        <a href="https://calendly.com/floreflipo/45min" class="btn bouton-blanc-appel-strategique">Je prends ma place</a>
                    </div>
                </div>
            </div>
        </div>

    </div> <!-- header monCoaching -->

    <div class=""> <!-- section 1 monCoaching -->
        <div class="container-lg">
            <div class="bordure-top bordure-bot">
                <div class="">

                    <div class="containerTitreSection1MonCoaching">
                        <div class="containerContentTitreSection1MonCoaching">
                            <h3 class="text-center">Si tu es  coach, formateur ou prestataire de service et <br class="no-display-phone">que tu vis de ton business, tu rêves sûrement ...</h3>
                        </div>
                        <img class="imgDecorationTitre imgDecorationTitreSection1MonCoaching" src="images/ressources/7.png" alt="decoration titre">
                    </div>


                    <div class="containerContentCasesObjectifsImage">

                        <div class="containerCasesObjectifs">
                            <div class="caseObjectifs">
                                <img class="iconCheckboxMC" src="images/ressources/12.png" alt="checkbox">
                                <h5 class="color-pink4">De gagner du temps</h5>
                            </div>
                            <div class="caseObjectifs caseObjectifsDecaler">
                                <img class="iconCheckboxMC" src="images/ressources/12.png" alt="checkbox">
                                <h5 class="color-pink4">D'attirer plus de clients</h5>
                            </div>
                            <div class="caseObjectifs caseObjectifsDecaler">
                                <img class="iconCheckboxMC" src="images/ressources/12.png" alt="checkbox">
                                <h5 class="color-pink4">De trouver plus de sens <br class="no-display-phone">dans ton activité</h5>
                            </div>
                            <div class="caseObjectifs">
                                <img class="iconCheckboxMC" src="images/ressources/12.png" alt="checkbox">
                                <h5 class="color-pink4">De scaler ton business</h5>
                            </div>
                        </div>

                        <div class="containerImageSection1MonCoaching">
                            <img class="imgBase imageChatSection1MonCoaching" src="images/ressources/23.png" alt="chat avec lunettes">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- section 1 monCoaching -->

    <div class=""> <!-- section 2 monCoaching -->
        <div class="container-lg">
            <div class="bordure-top bordure-bot">
                <div class="containerSection2MonCoaching">

                    <div class="">
                        <h2 class="color-pink4 texte-center-phone titre-semibold">Avant de te parler plus en détail du coaching.</h2>
                        <h2 class="color-pink4 texte-center-phone">Je vais te partager la frustration qui m'a poussée à lancer ce programme !</h2>
                    </div>

                    <div class="containerContentSection2MonCoaching mt-5">

                        <div class="containerTexteSection2MonCoaching">
                            <p>En 2021, j’ai lancé mon activité.<br>
                                Et comme chaque entrepreneur qui débute, j’étais éparpillée, perdue <br class="no-display-phone">dans un océan d’informations.<br>
                                Je ne savais pas <strong>par où commencer</strong> ni quoi faire.</p>
                            <p>J’ai mis en place tout un tas d’étapes manuelles qui m’ont <strong>permis de <br class="no-display-phone">trouver mes premiers clients</strong> mais rapidement <strong class="color-pink4">j’étais épuisée</strong> par toutes ces tâches.</p>
                            <p>Au bout de 3 mois, j’ai décidé d’<strong>appliquer l’automatisation</strong> dans mon <br class="no-display-phone">business.</p>
                            <p>J’ai automatisé l’acquisition et la conversion pour pouvoir <strong class="color-pink4">me libérer <br class="no-display-phone">du temps.</strong></p>
                            <p>Un temps qui était <span class="color-pink4">précieux</span> pour moi.</p>
                            <p>Celui qui me permet d’être libre, d’être entrepreneur comme je <br class="no-display-phone">l’entends.<br>
                                Grâce à cette stratégie, je peux enfin attirer des prospects qualifiés, <br class="no-display-phone">avoir plus de temps pour mes loisirs ou pour prendre plus de clients.</p>
                            <p>J’ai une <strong>vision long terme de mon business</strong> et je sais où je vais. J’y <br>trouve plus de sens et je m'épanouie au quotidien.</p>
                            <p>Alors j’ai conçu <strong class="color-pink4">I make my funnel</strong> pour les entrepreneurs qui ont un <br class="no-display-phone">projet à impact positif et qui veulent réussir en prenant beaucoup de plaisir. ✨</p>
                        </div>

                        <div class="divImageSection2MonCoaching">
                            <img class="imgBase w-100p" src="images/ressources/38.png" alt="Flore Flipo">
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div> <!-- section 2 monCoaching -->

    <div class=""> <!-- section 3 monCoaching -->
        <div class="container-lg">
            <div class="bordure-top bordure-bot">
                <div class="d-flex flex-column">

                    <div class="d-flex justify-content-center">
                        <div class="containerTitreSection3MonCoaching">
                            <img class="imgBase imgDecoration" src="images/ressources/26.png" alt="chat qui vole">
                            <div class="d-flex flex-column">
                                <h2 class="uppercase titre-bold color-pink4 text-center">Les + du programme</h2>
                                <h2 class="text-center uppercase">que l'on va faire ensemble</h2>
                            </div>
                        </div>
                    </div>

                    <!-- version ordi 3 Apropos -->
                    <div class="no-display-phone">
                        <div class="containerSection3MonCoaching">

                            <div class="carteProgrammeSection3MonCoaching carteProgramme1">
                                <h4 class="uppercase color-pink4 titre-bold text-center titre-surligner">3 mois</h4>
                                <p class="color-grey text-center">pour apprendre, comprendre <br>et être autonome dans la <br>mise en place de ton tunnel</p>
                            </div>

                            <div class="carteProgrammeSection3MonCoaching carteProgramme2">
                                <h4 class="uppercase color-pink4 titre-bold text-center titre-surligner">100% à distance</h4>
                                <p class="color-grey text-center">suis nos séances depuis le <br>bout du monde</p>
                            </div>

                            <div class="carteProgrammeSection3MonCoaching carteProgramme3">
                                <h4 class="uppercase color-pink4 titre-bold text-center titre-surligner">Replay</h4>
                                <p class="color-grey text-center">de toutes nos séances<br> disponible à vie</p>
                            </div>

                            <div class="carteProgrammeSection3MonCoaching carteProgramme4">
                                <h4 class="uppercase color-pink4 titre-bold text-center titre-surligner">Des exercices</h4>
                                <p class="color-grey text-center">à appliquer tout au<br> long du coaching</p>
                            </div>

                            <div class="carteProgrammeSection3MonCoaching carteProgramme5">
                                <h4 class="uppercase color-pink4 titre-bold text-center titre-surligner">Un espace membre</h4>
                                <p class="color-grey text-center">où retrouver tout ce qui est<br> relatif au coaching</p>
                            </div>

                            <div class="carteProgrammeSection3MonCoaching carteProgramme6">
                                <h4 class="uppercase color-pink4 titre-bold text-center titre-surligner">Une conversation dédiée</h4>
                                <p class="color-grey text-center">pour me joindre pendant<br> toute la durée du programme</p>
                            </div>

                            <div class="carteProgrammeSection3MonCoaching carteProgramme7">
                                <h4 class="uppercase color-pink1 titre-decorer-Section3MonCoaching titre-bold text-center m-0">🎁  En bonus</h4>
                                <p class="color-grey text-center">Une masterclass avec<br> Pierre Cauchois <br>(expert en publicité digital)</p>
                            </div>

                            <div class="imageSection3GridMonCoaching">
                                <img class="imgBase w-100p" src="images/ressources/31.png" alt="parcours programme">
                            </div>

                        </div>
                    </div>

                    <!-- version mobile 3 Apropos -->
                    <div class="no-display-computer w-90p mt-5">
                        <div class="d-flex justify-content-center">
                            <img class="w-90p" src="images/ressources/48.png" alt="programme">
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div> <!-- section 3 monCoaching -->

    <div class="section4MonCoaching"> <!-- section 4 monCoaching -->
        <div class="container-lg">
            <div class="bordure-top bordure-bot">

                <div class="containerSection4MonCoaching">

                    <div class="containerTitreSection4MonCoaching">
                        <div class="d-flex flex-column justify-content-center">
                            <h2 class="uppercase titre-bold color-pink4 text-center">Le programme du coaching</h2>
                            <h3 class="color-grey text-center">Ce que tu vas apprendre. Prépare-toi.</h3>
                        </div>
                        <div class="d-flex justify-content-center">
                            <p class="text-center">Durant 12 semaines, je vais t'enseigner les principes <br> de la stratégie d'acquisition et de conversion automatisée.</p>
                        </div>
                    </div>

                    <div class="containerContentSection4MonCoaching">
                        <div class="containerCarteProgrammeSection4MonCoaching containerPhaseStrategique">
                            <div class="">
                                <h3 class="titre-bold uppercase color-pink4 titre-surligner text-center titreCarteProgrammeSection4MonCoaching">Phase stratégique</h3>

                                <div class="d-flex flex-column gap-3">
                                    <div class="mt-5">
                                        <h4 class="titre-bold uppercase color-white">🧲  Les fondamentaux</h4>
                                        <p class="m-0 color-pink3">- 4 séances -</p>
                                        <p class="m-0 color-pink2">Création de ta stratégie d'acquisition pour <br class="no-display-phone">faire entrer du trafic et le convertir.</p>
                                    </div>

                                    <div class="">
                                        <h4 class="titre-bold uppercase color-white">🎨  Le design</h4>
                                        <p class="m-0 color-pink3">- 1 séance -</p>
                                        <p class="m-0 color-pink2">Designer ton tunnel  de vente sur Miro pour <br class="no-display-phone">une vision claire et long terme.</p>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="containerCarteProgrammeSection4MonCoaching containerPhaseOperationnelle">
                            <div class="">
                                <h3 class="titre-bold uppercase color-pink4 text-center titre-surligner titreCarteProgrammeSection4MonCoaching">Phase opérationnelle</h3>

                                <div class="d-flex flex-column gap-3">
                                    <div class="mt-5">
                                        <h4 class="titre-bold uppercase color-white">💌  Deep work</h4>
                                        <p class="m-0 color-pink3">- 3 séances -</p>
                                        <p class="m-0 color-pink2">Construire les message clefs (copywriting) <br class="no-display-phone">et les implémenter.</p>
                                    </div>


                                    <div class="">
                                        <h4 class="titre-bold uppercase color-white">💌  Vendre avec succès</h4>
                                        <p class="m-0 color-pink3">- 2 séances -</p>
                                        <p class="m-0 color-pink2">Maîtriser son processus de vente organique <br class="no-display-phone">et payant.</p>
                                    </div>

                                    <div class="">
                                        <h4 class="titre-bold uppercase color-white">🗓️  Lancement réussi</h4>
                                        <p class="m-0 color-pink3">- 2 séances -</p>
                                        <p class="m-0 color-pink2">Planifier ses actions et analyser les <br class="no-display-phone">retombées.</p>
                                    </div>
                                </div>

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

                    <div class="containerBoutonSection4MonCoaching">
                        <a class="btn btn-carteProgrammeMonCoaching" href="https://calendly.com/floreflipo/45min">J'automatise mon business maintenant  🚀</a>
                    </div>

                    <img class="imgBase etoileSection4MonCoaching no-display-phone" src="images/ressources/30.png" alt="étoiles">
                    <img class="imgBase flecheSection4MonCoaching no-display-phone" src="images/ressources/29.png" alt="flèche">

                </div>
            </div>
        </div>
    </div> <!-- section 4 monCoaching -->

    <div class="section5MonCoaching"> <!-- section 5 monCoaching -->
        <div class="container-lg">
            <div class="bordure-top bordure-bot">
                <div class="bordure-top bordure-bot">
                    <h2 class="uppercase titre-bold color-pink4 texte-center-phone m-0">Ton investissement</h2>
                    <div class="containerSection5MonCoaching">
                        <div class="containerContentSection5MonCoaching">
                            <div class="containerTitreSection5">
                                <div class="">
                                    <p class="titre-semibold m-0">Un coaching très privé</p>
                                    <p class="m-0">Un nombre de places limitées</p>
                                    <p class="m-0">J'accompagne uniquement <span class="color-pink4">6 clients</span>/mois</p>
                                </div>
                                <p class="">Feras-tu partie des <span class="color-pink4">chanceux</span> ?</p>
                            </div>
                            <div class="containerContentVersementSection5MonCoaching">

                                <div class="no-display-phone">
                                    <div class="d-flex align-items-center justify-content-center">
                                        <h4 class="m-0 color-grey">6 versements</h4>
                                        <div class="d-flex justify-content-center align-items-center ms-3 me-3">
                                            <input class="inputMC" type="checkbox" id="checkVersement">
                                            <label for="checkVersement" class="buttonToggleSection5PageMonCoaching"></label>
                                        </div>
                                        <h4 class="m-0 color-grey">1 versement</h4>
                                    </div>
                                </div>

                                <div class="d-flex justify-content-center w-100p mt-3">

                                    <div class="containerCarteVersementMonCoaching">

                                        <div id="carteVersement4MonCoaching" class="carteVersementMonCoaching carteVersement4MonCoaching carteVersementMonCoachingSelected">
                                            <h2 class="titre-bold">{{ (price.0.content/6)|round(0, 'ceil') }} €<span class="ms-3 fs-5">TTC</span></h2>
                                            <div class="sepaCarteVersement4MonCoaching sepaCarteVersementMonCoachingSelected"></div>
                                            <h4 class="">x6 versements</h4>
                                        </div>

                                        <div id="carteVersement1MonCoaching" class="carteVersementMonCoaching">
                                            <h2 class="titre-bold">{{ price.0.content }} €<span class="ms-3 fs-5">TTC</span></h2>
                                            <div class="sepaCarteVersement1MonCoaching"></div>
                                            <h4 class="">x1 versement</h4>
                                        </div>
                                    </div>

                                </div>

                                <img class="decorationChatSection5MonCoaching no-display-computer" src="images/ressources/25.png" alt="decoration chat">

                            </div>
                            <div class="no-display-computer">
                                <div class="mt-5">
                                    <a class="btn bouton-rose" href="https://calendly.com/floreflipo/45min">Je réserve ma place</a>
                                </div>
                            </div>
                        </div>
                        <div class="containerBoutonSection5MonCoaching no-display-phone">
                            <a class="btn bouton-rose" href="https://calendly.com/floreflipo/45min">Je prends le temps de gagner du temps ✅</a>
                        </div>
                        <img class="imgDecorationTitre decorationTitreSection5MonCoaching no-display-phone" src="images/ressources/7.png" alt="decoration titre">
                        <img class="decorationChatSection5MonCoaching no-display-phone" src="images/ressources/25.png" alt="decoration chat">
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- section 5 monCoaching -->

    <div class=""> <!-- section 6 monCoaching -->
        <div class="container-lg">
            <div class="bordure-top bordure-bot">
                <div class="containerGridSection6MonCoaching">
                    <div class="containerSection6MonCoaching">

                        <div class="containerContentSection6MonCoaching">

                            <div class="">
                                <h4 class="uppercase color-grey">Témoignages</h4>
                                <h2 class="uppercase titre-bold color-pink4">Ils te donnent leurs avis</h2>
                                <h2 class="uppercase color-grey">sur notre travail ensemble</h2>
                            </div>

                            <div class="">
                                <p>J'ai à cœur d'accompagner chacun de mes clients de façon personnalisée <br class="no-display-phone">afin de les voir s'épanouir dans chacun de leurs projets.</p>
                            </div>

                            <div class="d-flex justify-content-start align-items-center gap-5">

                                <div class="">
                                    <h2 class="titre-bold color-pink4 chiffresSection6MonCoaching">+ 50</h2>
                                    <h4 class="color-grey">Clients satisfaits</h4>
                                </div>

                                <div class="">
                                    <h2 class="titre-bold color-pink4 chiffresSection6MonCoaching">+ 100</h2>
                                    <h4 class="color-grey">Étudiants accompagnés</h4>
                                </div>
                            </div>

                        </div>

                        <div class="containerContentAvisSection6MonCoaching">

                            <div class="carteTemoignage">

                                <div id="carouselExampleCaptions" class="carousel slide">

                                    <div class="carousel-indicators">
                                        {% for index, avi in avis %}
                                            {% if index == 1 %}
                                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="{{ index }}" aria-current="true" aria-label="Slide {{ index }}" class="active"></button>
                                            {% else %}
                                                <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="{{ index }}" aria-label="Slide {{ index }}"></button>
                                            {% endif %}
                                        {% endfor %}
                                    </div>

                                    <div class="carousel-inner">
                                        {% for index, avi in avis %}
                                            {% if index == 1 %}
                                                <div class="carousel-item active">
                                                    <div class="carousel-caption">
                                                        <div class="carousel-caption align-items-center">
                                                            <img class="imgProfil" src="{{ vich_uploader_asset(avi.image, 'imageFile') }}" alt="image Profile">
                                                            <h5 style="color: var(--pink4)">{{ avi.name }}</h5>
                                                            <p class="txtContentAvis">{{ avi.content }}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% else %}
                                                <div class="carousel-item">
                                                    <div class="carousel-caption">
                                                        <div class="carousel-caption align-items-center">
                                                            <img class="imgProfil" src="{{ vich_uploader_asset(avi.image, 'imageFile') }}" alt="image Profile">
                                                            <h5 style="color: var(--pink4)">{{ avi.name }}</h5>
                                                            <p class="txtContentAvis">{{ avi.content }}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endif %}
                                        {% endfor %}
                                    </div>

                                    <div class="no-display-phone">
                                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
                                            <span style="transform: rotate(180deg)" class="carousel-control-prev-icon" aria-hidden="true"></span>
                                            <span class="visually-hidden">Previous</span>
                                        </button>
                                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                            <span class="visually-hidden">Next</span>
                                        </button>
                                    </div>

                                </div>
                            </div>

                        </div>

                    </div>
                    <img class="imgBase decorationSection6MonCoaching no-display-phone" src="images/ressources/13.png" alt="decoration">

                </div>
            </div>
        </div>
    </div> <!-- section 6 monCoaching -->

    <div class=""> <!-- section 7 monCoaching -->
        <div class="container-lg">
            <div class="bordure-top bordure-top">
                <div class="bordure-top bordure-top">
                    <div class="mt-5">
                        <div class="text-center">
                            <h2 class="uppercase titre-bold color-pink4">Je réponds aux questions</h2>
                            <h2 class="uppercase color-grey">que tu peux te poser</h2>
                        </div>

                        <div class="accordion mt-5 mb-5">

                            {% for faq in faqs %}
                                <div class="contentElementAccordion">
                                    <div class="labelElementAccordion">
                                        <div class="w-10p containerFleche">
                                            <div class="imgBase iconFlecheAccordion"></div>
                                        </div>
                                        <h4 class="uppercase titre-bold titreLabelElementAccordion">{{ faq.question }}</h4>
                                    </div>
                                    <div class="contentTexteElementAccordion">
                                        {% for paragraph in faq.answer|split('<br>') %}
                                            <p><br>{{ paragraph|raw }}</p>
                                        {% endfor %}
                                    </div>
                                </div>
                            {% endfor %}

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div> <!-- section 7 monCoaching -->

    <div class=""> <!-- section 8 monCoaching -->
        <div class="container-lg">
            <div class="bordure-top bordure-bot">
                <div class="">


                    <div class="text-center">
                        <h2 class="uppercase titre-bold color-pink4">💬 Ils se sont lancés</h2>
                        <h2 class="uppercase color-grey">ils te parlent du coaching</h2>
                    </div>

                    <div class="swiper slideContainerVideos">



                        <!-- Additional required wrapper -->
                        <div class="swiper-wrapper">

                            <!-- Slides -->
                            {% for video in videos %}
                                <div class="swiper-slide slideVideo">
                                    <iframe height="100%" width="100%" src="{{ video.url }}" title="YouTube video player" frameborder="0" allow="web-share" allowfullscreen></iframe>
                                </div>
                            {% endfor %}

                        </div>

                        <!-- If we need pagination -->
                        <div class="swiper-pagination"></div>

                        <!-- If we need navigation buttons -->
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                    </div>

                </div>
            </div>
        </div>
    </div> <!-- section 8 monCoaching -->


    <div class="no-display-computer">
        <div class="sectionAppelStrategique"> <!-- Appel Stratégique -->
            <div class="container-lg">
                <div class="bordure-top bordure-bot">
                    <div class="d-flex flex-column align-items-center">
                        <div>
                            <h3 class="text-center color-white titre-semibold">OBTIENS TON SYSTÈME AUTOMATISÉ EN 90 JOURS<br> POUR GAGNER 2 FOIS PLUS DE TEMPS</h3>
                        </div>
                        <div>
                            <p class="text-center color-white">sans t’épuiser, sans prospecter et sans aucune connaissance technique</p>
                        </div>
                        <div class="d-flex justify-content-center align-items-center gap-3">
                            <img style="transform: rotate(180deg)" class="decoBoutonAccueil" src="images/ressources/10.png" alt="élément de décoration">
                            <a class="btn bouton-blanc-appel-strategique" href="https://calendly.com/floreflipo/45min">Je réserve mon appel stratégique</a>
                            <img class="decoBoutonAccueil" src="images/ressources/10.png" alt="élément de décoration">
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- Appel Stratégique -->
    </div>

{% endblock %}