templates/front_v4/mca/homepage/homepage.html.twig line 127

Open in your IDE?
  1. {% extends 'front_v4/base.html.twig' %}
  3. {% block meta_title %}Trouvez les centres auditifs à proximité de chez vous{% endblock meta_title %}
  4. {% block meta_description %}Prenez rendez-vous avec les centres auditifs proches de chez vous afin de réaliser un bilan auditif gratuit.{% endblock meta_description %}
  6. {% block meta_custom %}
  7.     <meta name="author" content="Mon centre auditif">
  8.     <meta property="og:type" content="business.business">
  9.     <meta property="og:title" content="Mon centre Auditif">
  10.     <meta property="og:description"
  11.           content="Prenez rendez-vous avec les centres auditifs proches de chez vous afin de réaliser un bilan auditif gratuit.">
  12.     <meta property="og:image" content="https://mon-centre-auditif.com/build/mon_centre_auditif_facebook_og.png">
  13.     <script type="application/ld+json">
  14.         {
  15.             "@context": "https://schema.org",
  16.             "@type": "Corporation",
  17.             "name": "Mon-centre-auditif",
  18.             "alternateName": "MCA",
  19.             "url": "https://www.mon-centre-auditif.com",
  20.             "logo": "https://mon-centre-auditif.com/build/mca_logo_horizontal.png",
  21.             "contactPoint": {
  22.                 "@type": "ContactPoint",
  23.                 "telephone": "0484268197",
  24.                 "contactType": "customer service",
  25.                 "areaServed": "FR",
  26.                 "availableLanguage": "fr"
  27.             },
  28.             "sameAs": [
  29.                 "https://www.facebook.com/MonCentreAuditif/",
  30.                 "https://fr.linkedin.com/company/auditif"
  31.             ]
  32.         }
  34.     </script>
  35. {% endblock meta_custom %}
  37. {% block stylesheets %}
  38.     {{ encore_entry_link_tags('homepage') }}
  39. {% endblock stylesheets %}
  41. {% set hideNavbar = true %}
  43. {% block content %}
  44.     {% include 'front_v4/mca/partials/_navbar_sticky_toggle.html.twig' %}
  45.     <!-- Hero -->
  46.     <div class="bg-img-hero">
  47.         <div class="gradient-overlay-half-dark-v2">
  48.             <div class="container px-5 px-md-1">
  49.                 <div class="row justify-content-lg-between">
  50.                     <div class="col-12 col-lg-8 mb-5 mb-md-0 content-space-t-2 content-space-md-3 content-space-xl-4">
  51.                         <div class="mb-3">
  52.                             <h1 id="main-title-home" class="text-white">Trouvez un <span
  53.                                         class="fw-semibold text-warning">centre auditif</span> proche de chez
  54.                                 vous</h1>
  55.                         </div>
  56.                         <form id="finder-form" data-url="{{ path('find_nearest_store') }}">
  57.                             <!-- Input Card -->
  58.                             <div class="d-block input-card input-card-pill input-card-sm border p-1 mb-3">
  59.                                 <div class="row align-items-center justify-content-between">
  60.                                     <div class="col-10 col-md-7">
  61.                                         <div class="border-0 d-flex align-content-center">
  62.                                             <label for="searchAnswersForm" class="form-label visually-hidden">Search for
  63.                                                 answers</label>
  64.                                             <input id="search-term"
  65.                                                    class="form-control rounded shadow-none rounded-5" name="finder"
  66.                                                    ref="autocomplete" v-model="form.address" type="text"
  67.                                                    data-postal-code="null"
  68.                                                    data-redirect-path="{{ path('find_nearest_store') }}"
  69.                                                    placeholder="Entrez votre adresse postale" aria-label="Code postal">
  70.                                         </div>
  71.                                     </div>
  72.                                     <div class="col-2 col-md-1 d-flex justify-content-md-end">
  73.                                         <button type="submit" class="btn btn-white btn-rounded border-0 p-0 text-primary"
  74.                                                 id="geolocation-btn" aria-label="Localisation">
  75.                                             <span class="bi bi-crosshair"></span>
  76.                                         </button>
  77.                                     </div>
  78.                                     <div class="col-12 col-md-4">
  79.                                         <button id="search-btn" type="submit"
  80.                                                 class="btn btn-lg btn-block btn-primary w-100 btn-home-rd fw-semibold rounded-pill px-5">
  81.                                             Rechercher
  82.                                         </button>
  83.                                     </div>
  84.                                 </div>
  88.                             </div>
  89.                             <!-- End Input Card -->
  90.                             {#                            <!-- Links --> #}
  91.                             {#                            <div class="d-flex form-text small"> #}
  92.                             {#                                <p class="text-nowrap">Rercherchez parmis plus de 5400 centres auditifs</p> #}
  93.                             {#                            </div> #}
  94.                             {#                            <!-- End Links --> #}
  95.                         </form>
  96.                     </div>
  97.                     <!-- End Col -->
  98.                     <div class="col-12 col-lg-4 align-self-end justify-content-end float-end">
  99.                         <div class="float-end my-5">
  100.                             <a class="text-white fw-semibold" href="{{ path('lp_freelancer') }}"><i
  101.                                         class="bi bi-arrow-right"></i>
  102.                                 Indexer un nouveau centre auditif</a>
  103.                         </div>
  104.                     </div>
  105.                     <!-- End Col -->
  106.                 </div>
  107.                 <!-- End Row -->
  108.             </div>
  109.         </div>
  110.     </div>
  111.     <!-- End Hero -->
  112.     <!-- Clients Section -->
  113.     <div class="container content-space-t-1">
  114.         <h2 class="text-center text-secondary mb-3 font-size-md-down-3">Mon Centre Auditif référence les plus
  115.             grandes enseignes</h2>
  117.     </div>
  118.     <div class="content-space-b-1">
  119.         <!-- Swiper -->
  120.         <div class="hearing-brand-swiper swiper">
  121.             <div class="swiper-wrapper align-items-center">
  122.                 {% for hearingBrand in hearingBrands %}
  123.                     {% if hearingBrand.presentable and hearingBrand.logoPath != "" %}
  124.                         <div class="swiper-slide">
  125.                             {# Dimension image : 200px x (valeur de la hauteur dépend du logo)px #}
  126.                             <picture class="avatar avatar-xl avatar-4x3 avatar-centered">
  127.                                 <source srcset="{{ vich_uploader_asset(hearingBrand, 'logoFile') | imagine_filter('brand_logo_carrousel_webp') }}"
  128.                                         type="image/webp">
  129.                                 <source srcset="{{ vich_uploader_asset(hearingBrand, 'logoFile') | imagine_filter('brand_logo_carrousel_png') }}"
  130.                                         type="image/png">
  131.                                 <img src="{{ vich_uploader_asset(hearingBrand, 'logoFile') | imagine_filter('brand_logo_carrousel') }}"
  132.                                      class="avatar avatar-xl avatar-4x3 avatar-centered" width="200" height="80"
  133.                                      alt="Bilan Auditif {{ hearingBrand.name }}">
  134.                             </picture>
  135.                         </div>
  136.                     {% endif %}
  137.                 {% endfor %}
  138.             </div>
  139.         </div>
  140.         <!-- End Swiper -->
  141.     </div>
  143.     <!-- End Clients Section -->
  144.     <div class="container content-space-1">
  145.         <div class="mb-5">
  146.             <h2 class="text-center">Comment être dépisté rapidement ?</h2>
  147.             <p class="h4 text-center">3 solutions simples à votre disposition :</p>
  148.         </div>
  149.         <div class="row justify-content-lg-center">
  150.             <div class="col-md-4 mb-7 mb-lg-0">
  151.                 <!-- Content Spar -->
  152.                 <div class="text-center px-md-3 px-lg-4 h-100">
  153.                     <div class="d-flex justify-content-center u-indicator-steps__inner mr-3 btn btn-icon btn-soft-primary rounded-circle mb-3 mx-auto">
  154.                         <span class="display-4 text-primary ">1.</span>
  155.                     </div>
  156.                     <h3 class="h5 mb-7">Appelez-nous directement !</h3>
  157.                     <hr>
  159.                     <a id="hp-phone-number-call-mca" href="tel:{{ phoneNumberCallMca }}">
  160.                         <p class="mb-0"><span
  161.                                     class="h4 text-primary fw-semibold"><i class="bi bi-telephone-fill"></i>
  162.                                     {{ phoneNumberCallMca|format_french_phone_number }}</span>
  163.                         </p>
  164.                     </a>
  165.                 </div>
  166.                 <!-- End Content Spar -->
  167.             </div>
  168.             <div class="col-md-4 mb-7 mb-lg-0">
  169.                 <!-- Content Spar -->
  170.                 <div class="text-center px-md-3 px-lg-4 h-100">
  171.                     <div class="d-flex mr-3 justify-content-center u-indicator-steps__inner btn btn-icon btn-soft-primary rounded-circle mb-3 mx-auto">
  172.                         <span class="display-4 text-primary ">2.</span>
  173.                     </div>
  174.                     <h3 class="h5 mb-7">Demandez un rappel gratuit</h3>
  175.                     <hr>
  176.                     <form class="homepageForm" id="form-custom-witsmedia" method="post">
  177.                         <div class="form-group mb-3">
  178.                             <label for="lastname" class="d-none">Nom :</label>
  179.                             <input type="text" id="lastname" name="lastname" class="form-control" placeholder="Nom"
  180.                                    required>
  181.                         </div>
  182.                         <div class="form-group mb-3">
  183.                             <label for="firstname" class="d-none">Prénom :</label>
  184.                             <input type="text" id="firstname" name="firstname" class="form-control"
  185.                                    placeholder="Prénom" required>
  186.                         </div>
  187.                         <div class="form-group mb-3">
  188.                             <label for="phoneNumber" class="d-none">Téléphone :</label>
  189.                             <input type="tel" id="phoneNumber" name="phoneNumber"
  190.                                    class="form-control cleave-phone-number" placeholder="Téléphone" required>
  191.                         </div>
  192.                         <button id="hp-submit-form-custom-witsmedia" type="submit" class="btn btn-warning w-100"><i
  193.                                     class="bi bi-headset"></i> Rappelez-moi
  194.                         </button>
  195.                     </form>
  196.                     <p id="success-callback-request" class="d-none text-success">Vous allez être recontacté par
  197.                         notre équipe !
  198.                     </p>
  199.                 </div>
  200.                 <!-- End Content Spar -->
  201.             </div>
  202.             <div class="col-md-4">
  203.                 <!-- Stats -->
  204.                 <div class="text-center px-md-3 px-lg-7">
  205.                     <div class="-flex u-indicator-steps__inner mr-3 justify-content-center btn btn-icon btn-soft-primary rounded-circle mb-3 mx-auto">
  206.                         <span class="display-4 text-primary ">3.</span>
  207.                     </div>
  208.                     <h3 class="h5">Prenez RDV dans un centre partenaire</h3>
  209.                     <hr>
  210.                     <a id="hp-link-to-lp" class="btn btn-warning transition-3d-hover w-100"
  211.                        href="{{ url('index_acquisition_seo') }}">
  212.                         <i class="bi bi-shop-window"></i> Je prends RDV
  213.                         <span class="fas fa-angle-right ml-2"></span>
  214.                     </a>
  215.                 </div>
  216.                 <!-- End Stats -->
  217.             </div>
  218.         </div>
  219.     </div>
  222.     {% if freelancers is defined and freelancers is not empty %}
  223.         <hr>
  224.         <!-- Freelancer logo Section -->
  225.         <div class="container content-space-t-1">
  226.             <!-- Heading -->
  227.             <div class="w-md-85 w-lg-75 text-center mx-md-auto mb-6">
  228.                 <h2 class="font-size-md-down-1">Nous travaillons aussi avec plus de 200 audioprothésistes
  229.                     indépendants.</h2>
  230.                 <a href="{{ path('lp_freelancer') }}">Rejoignez la communauté</a>
  231.             </div>
  232.         </div>
  233.         <div class="content-space-b-2">
  234.             <!-- Freelancer Logo Swiper  -->
  235.             <div class="freelancer-swiper swiper">
  236.                 <div class="swiper-wrapper align-items-center">
  237.                     {% for freelancer in freelancers %}
  238.                         {% if freelancer.logoPath is defined and freelancer.logoPath is not null %}
  239.                             <div class="swiper-slide">
  240.                                 <picture class="avatar avatar-xl avatar-4x3 avatar-centered">
  241.                                     <source srcset="{{ vich_uploader_asset(freelancer, 'logoFile') | imagine_filter('brand_logo_carrousel_webp') }}"
  242.                                             type="image/webp">
  243.                                     <source srcset="{{ vich_uploader_asset(freelancer, 'logoFile') | imagine_filter('brand_logo_carrousel_png') }}"
  244.                                             type="image/png">
  245.                                     <img src="{{ vich_uploader_asset(freelancer, 'logoFile') | imagine_filter('brand_logo_carrousel') }}"
  246.                                          class="avatar avatar-xl avatar-4x3 avatar-centered" width="200" height="80"
  247.                                          alt="Bilan Auditif {{ freelancer.name }}">
  248.                                 </picture>
  249.                             </div>
  250.                         {% endif %}
  251.                     {% endfor %}
  252.                 </div>
  253.             </div>
  254.             <!-- End Freelancer Logo Swiper  -->
  255.         </div>
  256.         <!-- End Freelancer Logo Section -->
  257.     {% endif %}
  259.     <hr class="my-0">
  261.     <!-- Mockup Block Section -->
  262.     <div class="container content-space-1">
  263.         <!-- Title -->
  264.         <div class="w-md-85 w-lg-65 text-center mx-md-auto mb-5">
  265.             <h2 class="text-primary">Réalisez un <span
  266.                         class="fw-bold">bilan auditif<sup>(1)</sup></span> gratuit</h2>
  267.             <p>Mon centre auditif facilite vos démarches et vous met en relation avec les centres auditifs proches
  268.                 de chez vous.</p>
  269.         </div>
  270.         <!-- End Title -->
  271.         <div class="row justify-content-lg-between align-items-center">
  272.             <div class="col-md-6 mb-7 mb-md-0">
  273.                 <div class="pr-md-4">
  274.                     <!-- Step -->
  275.                     <ul class="step">
  276.                         <li class="step-item">
  277.                             <div class="step-content-wrapper">
  278.                                 <span class="step-icon step-icon-soft-primary">1</span>
  279.                                 <div class="step-content">
  280.                                     <h4>Recherchez un centre</h4>
  281.                                     <p class="step-text">Localisez les centres auditifs proches de chez vous.</p>
  282.                                 </div>
  283.                             </div>
  284.                         </li>
  286.                         <li class="step-item">
  287.                             <div class="step-content-wrapper">
  288.                                 <span class="step-icon step-icon-soft-primary">2</span>
  289.                                 <div class="step-content">
  290.                                     <h4>Bilan Auditif</h4>
  291.                                     <p class="step-text"> Obtenez un bilan auditif<sup>(1)</sup> gratuit rapidement dans
  292.                                         un centre près de
  293.                                         chez vous (dispositif non médical).</p>
  294.                                 </div>
  295.                             </div>
  296.                         </li>
  298.                         <li class="step-item">
  299.                             <div class="step-content-wrapper">
  300.                                 <span class="step-icon step-icon-soft-primary">3</span>
  301.                                 <div class="step-content">
  302.                                     <h4>Accompagnement</h4>
  303.                                     <p class="step-text">Les centres partenaires vous accompagnent jusqu’à l’équipement
  304.                                         de l’appareil le
  305.                                         plus adapté à vos besoins.</p>
  306.                                 </div>
  307.                             </div>
  308.                         </li>
  309.                     </ul>
  310.                     <!-- End Step -->
  311.                     <a class="btn btn-primary btn-wide btn-pill transition-3d-hover"
  312.                        href="{{ url('index_acquisition_seo') }}">Commencez ici <span
  313.                                 class="bi bi-arrow-right-short ml-2"></span></a>
  314.                 </div>
  315.             </div>
  316.             <div class="col-md-6">
  317.                 <div class="d-flex justify-content-center">
  318.                     <div class="position-relative w-md-65">
  319.                         <img class="img-fluid rounded-2"
  320.                              src="{{ asset('build/landing-page/homepage/mon_centre_auditif_depistage_auditif_gratuit_650x750.webp') }}"
  321.                              alt="Image Description">
  322.                         <!-- SVG Shape -->
  323.                         <div class="position-absolute top-0 start-0 mt-n6 ms-n7 d-none d-lg-block" style="width: 10rem;">
  324.                             <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 335.2 335.2"
  325.                                  width="100" height="100">
  326.                                 <circle fill="#FFC107" opacity=".7" cx="167.6" cy="167.6" r="130.1"></circle>
  327.                             </svg>
  328.                         </div>
  329.                         <!-- End SVG Shape -->
  331.                         <!-- SVG Shape -->
  332.                         <div class="position-absolute bottom-0 end-0 zi-n1 mb-n6 me-n10 d-none d-lg-block" style="width: 10rem;">
  333.                             <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 335.2 335.2"
  334.                                  width="120" height="120">
  335.                                 <circle fill="none" stroke="#377dff" stroke-width="75" cx="167.6" cy="167.6"
  336.                                         r="130.1"></circle>
  337.                             </svg>
  338.                         </div>
  339.                         <!-- End SVG Shape -->
  340.                     </div>
  341.                 </div>
  342.             </div>
  343.         </div>
  344.     </div>
  345.     <!-- End Mockup Block Section -->
  346.     <hr class="my-0">
  348.     <!-- What We Do Section -->
  349.     <div class="container content-space-1">
  350.         <div class="row justify-content-lg-between">
  351.             <div class="col-lg-4 mb-7 mb-lg-0">
  352.                 <!-- Title -->
  353.                 <small class="text-secondary text-uppercase fw-semibold mb-5">
  354.                     Vous ressentez des problèmes d'audition ?
  355.                 </small>
  356.                 <h3 class="fw-semibold">Les appareils du marché s’adaptent à votre quotidien</h3>
  357.                 <p>Il existe plusieurs gammes d'appareils qui s'adaptent parfaitement à vos problèmes d'audition
  358.                     et à votre budget.
  359.                 </p>
  360.                 <!-- End Title -->
  361.             </div>
  362.             <div class="col-lg-7">
  363.                 <div class="row">
  364.                     <div class="col-sm-6 mb-3">
  365.                         <!-- Icon Blocks -->
  366.                         <figure class="w-100 max-width-8 mb-3">
  367.                             <img
  368.                                     src="{{ asset('build/front_v4/svg/custom_icons/011-antenna.svg') }}"
  369.                                     alt="Mon Centre Auditif - Bilan auditif gratuit"
  370.                                     width="50" height="50">
  371.                         </figure>
  372.                         <h4 class="h5">Connectivité avancée</h4>
  373.                         <span class="badge bg-success rounded-pill fw-small ml-1 my-1">Top tendance</span>
  374.                         <p class="font-size-1">Connectez vos aides
  375.                             auditives à votre smartphone
  376.                             pour passer vos appels ou à
  377.                             votre télé pour entendre le
  378.                             son directement dans vos
  379.                             appareils. Surveillez leur
  380.                             fonctionnement depuis des
  381.                             applications mobiles dédiées.</p>
  382.                         <!-- End Icon Blocks -->
  383.                     </div>
  384.                     <div class="col-sm-6 mb-3">
  385.                         <!-- Icon Blocks -->
  386.                         <figure class="w-100 max-width-8 mb-3">
  387.                             <img
  388.                                     src="{{ asset('build/front_v4/svg/custom_icons/012-transmitter-1.svg') }}"
  389.                                     alt="Mon Centre Auditif - Bilan auditif gratuit"
  390.                                     width="50" height="50">
  391.                         </figure>
  392.                         <h4 class="h5">Qualité sonore exceptionnelle</h4>
  393.                         <p class="font-size-1">Avec les gammes d’appareils ultra-modernes, retrouvez le confort
  394.                             d’entendre et de vous reconnecter à votre environnement et à vos
  395.                             proches. </p>
  396.                         <!-- End Icon Blocks -->
  397.                     </div>
  398.                     <div class="w-100"></div>
  399.                     <div class="col-sm-6 mb-3 mb-sm-0">
  400.                         <!-- Icon Blocks -->
  401.                         <figure class="w-100 max-width-8 mb-3">
  402.                             <img
  403.                                     src="{{ asset('build/front_v4/svg/custom_icons/017-loading.svg') }}"
  404.                                     alt="Mon Centre Auditif - Bilan auditif gratuit"
  405.                                     width="50" height="50">
  406.                         </figure>
  407.                         <h4 class="h5">Batteries rechargeables</h4>
  408.                         <p class="font-size-1">Avec les gammes d’appareils
  409.                             rechargeables, fini les piles à
  410.                             remplacer et à emporter dans
  411.                             tous vos déplacements. Un
  412.                             gain de simplicité et un geste
  413.                             pour la planète. </p>
  414.                         <!-- End Icon Blocks -->
  415.                     </div>
  416.                     <div class="col-sm-6">
  417.                         <!-- Icon Blocks -->
  418.                         <figure class="w-100 max-width-8 mb-3">
  419.                             <img
  420.                                     src="{{ asset('build/front_v4/svg/custom_icons/002-ear.svg') }}"
  421.                                     alt="Mon Centre Auditif - Bilan auditif gratuit"
  422.                                     width="50" height="50">
  423.                         </figure>
  424.                         <h4 class="h5">Discrétion</h4>
  425.                         <p class="font-size-1">Les appareils auditifs se font de plus en plus discrets. Il sont
  426.                             confortables et s'adaptent parfaitement à votre oreille afin de vous fournir tout le
  427.                             confort d'une bonne audition.</p>
  428.                         <!-- End Icon Blocks -->
  429.                     </div>
  430.                 </div>
  431.             </div>
  432.         </div>
  433.     </div>
  435.     {% include 'front_v4/mca/components/_cta_full_size_wave.html.twig' %}
  437.     <!-- 100% Santé Section -->
  438.     <div class="container content-space-1">
  439.         <div class="row">
  440.             <div class="col-md-8">
  441.                 <h2 class="h3 text-success fw-bold mb-5">100% santé Audition<br>
  442.                     Des soins pour tous, pris en charge à 100%</h2>
  443.                 <p>Il existe depuis le 1er janvier 2021 <a class="text-primary fw-bold"
  444.                                                            href="{{ path('blog_post_show', {'slug': '100-sante-audiologie'}) }}">des
  445.                         audioprothèses 100 % remboursées</a>. Cette réforme concerne toute personne bénéficiant d’un
  446.                     contrat responsable par sa mutuelle ou son assurance santé.<br><br>
  447.                     Le contrat responsable prévoit des encadrements dans la prise en charge et incite les patients à
  448.                     respecter les parcours de soins.
  449.                 </p>
  450.             </div>
  451.             <!-- Title -->
  452.             <div class="col-md-4 mb-7">
  453.                 <picture class="img-fluid float-end">
  454.                     <source srcset="{{ asset('build/100%_sante_mon_centre_auditif.jpg') | imagine_filter('default_webp') }}"
  455.                             type="image/webp">
  456.                     <source srcset="{{ asset('build/100%_sante_mon_centre_auditif.jpg') }}" type="image/png">
  457.                     <img src="{{ asset('build/100%_sante_mon_centre_auditif.jpg') }}"
  458.                          alt="Découvrez 100% Santé Audition" width="300" height="204">
  459.                 </picture>
  460.             </div>
  461.             <!-- End Title -->
  462.         </div>
  463.         <div class="row justify-content-lg-between align-items-center">
  464.             <div class="col-md-6 col-lg-5">
  465.                 <div class="pr-md-4 my-5">
  466.                     <!-- Step -->
  467.                     <ul class="step step-dashed">
  468.                         <li class="step-item">
  469.                             <div class="step-content-wrapper">
  470.                                 <span class="step-icon step-icon-xs step-icon-soft-success"><i class="bi bi-check"></i></span>
  471.                                 <div class="step-content">
  472.                                     <p class="step-text">
  473.                                         Pour chaque <a class="text-primary fw-bold"
  474.                                                        href="{{ path('blog_post_show', {'slug': 'devis-normalise-audioprothesiste'}) }}">devis
  475.                                             réalisé</a>
  476.                                         par un audioprothésiste, au moins un des équipements
  477.                                         proposés doit faire partie du 100% santé.
  478.                                     </p>
  479.                                 </div>
  480.                             </div>
  481.                         </li>
  483.                         <li class="step-item">
  484.                             <div class="step-content-wrapper">
  485.                                 <span class="step-icon step-icon-xs step-icon-soft-success"><i class="bi bi-check"></i></span>
  486.                                 <div class="step-content">
  487.                                     <p class="step-text">
  488.                                         Vous restez cependant libre de choisir un appareil ou un soin non inclus dans le
  489.                                         100% santé.
  490.                                     </p>
  491.                                 </div>
  492.                             </div>
  493.                         </li>
  495.                         <li class="step-item">
  496.                             <div class="step-content-wrapper">
  497.                                 <span class="step-icon step-icon-xs step-icon-soft-success"><i class="bi bi-check"></i></span>
  498.                                 <div class="step-content">
  499.                                     <p class="step-text">
  500.                                         Le financement des appareils issus du 100 % santé sont pris en charge par
  501.                                         l’assurance maladie et les complémentaires santé. </p>
  502.                                 </div>
  503.                             </div>
  504.                         </li>
  505.                     </ul>
  506.                     <!-- End Step -->
  507.                 </div>
  508.             </div>
  509.             <div class="col-md-6 col-lg-5">
  510.                 <div class="pr-md-4 my-5">
  512.                     <!-- Step -->
  513.                     <ul class="step step-dashed">
  514.                         <li class="step-item">
  515.                             <div class="step-content-wrapper">
  516.                                 <span class="step-icon step-icon-xs step-icon-soft-success"><i class="bi bi-check"></i></span>
  517.                                 <div class="step-content">
  518.                                     <p class="step-text">
  519.                                         Un large choix d’aides auditives est prévu par ce dispositif gouvernemental
  520.                                         alors n’hésitez pas à demander les gammes concernées à votre audioprothésiste
  521.                                     </p>
  522.                                 </div>
  523.                             </div>
  524.                         </li>
  526.                         <li class="step-item">
  527.                             <div class="step-content-wrapper">
  528.                                 <span class="step-icon step-icon-xs step-icon-soft-success"><i class="bi bi-check"></i></span>
  529.                                 <div class="step-content">
  530.                                     <p class="step-text">
  531.                                         Il ne s’agit pas d’appareils bas de gammes ou peu efficaces, ils possèdent de
  532.                                         nombreuses options et fonctionnalités (anti-acouphène, réducteur de bruit du
  533.                                         vent, anti-Larsen, Bluetooth…).
  534.                                     </p>
  535.                                 </div>
  536.                             </div>
  537.                         </li>
  539.                     </ul>
  540.                     <!-- End Step -->
  541.                 </div>
  542.             </div>
  543.         </div>
  544.         <h3 class="h5 text-black-50 text-center mt-3">
  545.             Alors n’attendez plus pour réaliser un <a class="text-primary fw-bold"
  546.                                                       href="{{ url('index_acquisition_seo') }}">bilan
  547.                 auditif</a> et découvrir le confort d’une audition retrouvée.
  548.         </h3>
  549.     </div>
  550.     <!-- End 100% Santé Section -->
  552.     <!-- Audioprothésistes indépendants et sous enseignes Section -->
  553.     <div class="position-relative gradient-overlay-half-primary-v1"
  554.          style="background-image: url('{{ asset('build/landing-page/homepage/audioprothesistes_independants.jpg') }}');
  555.                  background-size: cover; background-position: center;">
  556.         <div class="container content-space-1 w-lg-65">
  557.             <!-- Title -->
  558.             <div class="col-12 my-2 my-lg-5 text-left">
  559.                 <h2 class="text-warning">Les audioprothésistes <span
  560.                             class="fw-semibold">indépendants</span> et <span
  561.                             class="fw-semibold">sous enseignes</span>
  562.                 </h2>
  563.             </div>
  564.             <!-- End Title -->
  565.             <!-- Content -->
  566.             <div class="d-flex justify-content-lg-center align-items-center">
  567.                 <div class="pr-md-4">
  568.                     <p class="text-light">Plusieurs typologies d’audioprothésistes sont à votre service pour vous
  569.                         proposer des soins adaptés à vos problèmes auditifs. Mon centre auditif en répertorie déjà
  570.                         plus de<span class="text-warning fw-bold"> 5400 </span> partout en France.<br><br>
  572.                         Nous indexons des <span
  573.                                 class="text-warning fw-bold">audioprothésistes sous enseignes</span>
  574.                         (Audika, Amplifon, Afflelou Acousticien ou encore Optical center), mais également des
  575.                         <span class="text-warning fw-bold"> audioprothésistes indépendants</span>
  576.                         qui ont leur propre enseigne. Ces derniers peuvent vous proposer les même marques et modèles
  577.                         d’appareils, parfois des différents mais ils ont en général tous la possibilité de vous
  578.                         proposer un modèle adapté à vos besoins.<br><br>
  580.                         Si une enseigne peut faire la différence sur le service et la qualité du suivi normalisé
  581.                         par un groupe les indépendants peuvent aussi faire partie de groupement
  582.                         (CDA, Maître audio, …) et appliquer des chartes de qualité toutes aussi sérieuses.<br><br>
  584.                         Notre conseil pour vous aider à bien choisir votre professionnel et de comparer au moins
  585.                         deux audioprothésistes avant de faire votre choix.
  586.                     </p>
  587.                 </div>
  588.             </div>
  589.             <!-- End Content -->
  590.         </div>
  591.     </div>
  592.     <!-- End audioprothésistes indépendants et sous enseignes Section -->
  594.     <!-- Blog Lasted Post -->
  595.     <div class="container content-space-2">
  596.         <!-- Heading -->
  597.         <div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5">
  598.             <h2>Découvrez nos derniers articles</h2>
  599.         </div>
  600.         <!-- End Heading -->
  602.         <div class="overflow-hidden d-flex justify-content-center">
  603.             <div class="row gx-lg-7 w-lg-85 justify-content-around">
  604.                 {% for post in blogPosts %}
  605.                   {% include 'front_v4/mca/blog/_blog_card.html.twig' with {'post': post} %}
  606.                 {% endfor %}
  607.             </div>
  608.             <!-- End Row -->
  609.         </div>
  611.         <!-- Card Info -->
  612.         <div class="text-center">
  613.             <div class="card card-info-link card-sm">
  614.                 <div class="card-body">
  615.                     Vous souhaitez découvrir tous nos articles ? <a class="card-link ms-2"
  616.                                                                     href="{{ path('blog_post_all') }}">Visitez
  617.                         le blog<span class="bi-chevron-right small ms-1"></span></a>
  618.                 </div>
  619.             </div>
  620.         </div>
  621.         <!-- End Card Info -->
  622.     </div>
  623.     <!-- End Card Grid -->
  625.     {% include 'front_v4/mca/components/_cta_full_size_circle.html.twig' %}
  627.     <!-- Clients -->
  628.     <div class="container content-space-2">
  629.         <div class="row">
  630.             <div class="col-12 col-md-4 pt-7 pt-md-0">
  631.                 <!-- Card -->
  632.                 <div class="card bg-primary shadow-lg mt-md-n1" data-aos="fade-up">
  633.                     <div class="card-body">
  634.                         <div class="mb-7">
  635.                             <span class="card-subtitle text-warning">Les fabricants d'audioprothèses</span>
  636.                             <h2 class="h3 card-title text-white">Découvrez comment bien choisir votre appareil
  637.                                 auditif.</h2>
  638.                         </div>
  639.                         <div class="d-grid">
  640.                             <a class="btn btn-soft-light btn-transition"
  641.                                href="{{ path('blog_post_show', {'slug': 'les-differences-entre-les-protheses-auditives'}) }}">En
  642.                                 savoir plus</a>
  643.                         </div>
  644.                     </div>
  645.                 </div>
  646.                 <!-- End Card -->
  647.             </div>
  648.             <!-- End Col -->
  650.             <div class="d-none d-md-block col-md-8 pt-2">
  651.                 <div class="row">
  652.                     <div class="col-4 py-3 align-self-center">
  653.                         <img class="avatar avatar-xl avatar-4x3 avatar-centered"
  654.                              src="{{ asset('build/logo_constructeur/bernafon.png') | imagine_filter('brand_logo_medium') }}"
  655.                              alt="Mon Centre Auditif - Prothèse auditive Bernafon" width="200" height="72*">
  656.                     </div>
  657.                     <!-- End Col -->
  659.                     <div class="col-4 py-3 align-self-center">
  660.                         <img class="avatar avatar-xl avatar-4x3 avatar-centered"
  661.                              src="{{ asset('build/logo_constructeur/signia-siemens.png') | imagine_filter('brand_logo_medium') }}"
  662.                              alt="Mon Centre Auditif - Prothèse auditive Siemens" width="200" height="70">
  663.                     </div>
  664.                     <!-- End Col -->
  666.                     <div class="col-4 py-3 align-self-center">
  667.                         <img class="avatar avatar-xl avatar-4x3 avatar-centered"
  668.                              src="{{ asset('build/logo_constructeur/oido.png') | imagine_filter('brand_logo_medium') }}"
  669.                              alt="Mon Centre Auditif - Prothèse Oido" width="200" height="121">
  670.                     </div>
  671.                     <!-- End Col -->
  673.                     <div class="col-4 py-3 align-self-center">
  674.                         <img class="avatar avatar-xl avatar-4x3 avatar-centered"
  675.                              src="{{ asset('build/logo_constructeur/oticon.png') | imagine_filter('brand_logo_medium') }}"
  676.                              alt="Mon Centre Auditif - Prothèse Oticon" width="200" height="74">
  677.                     </div>
  678.                     <!-- End Col -->
  680.                     <div class="col-4 py-3 align-self-center">
  681.                         <img class="avatar avatar-xl avatar-4x3 avatar-centered"
  682.                              src="{{ asset('build/logo_constructeur/phonak.png') | imagine_filter('brand_logo_medium') }}"
  683.                              alt="Mon Centre Auditif - Prothèse auditive Phonak" width="200" height="40">
  684.                     </div>
  685.                     <!-- End Col -->
  687.                     <div class="col-4 py-3 align-self-center">
  688.                         <img class="avatar avatar-xl avatar-4x3 avatar-centered"
  689.                              src="{{ asset('build/logo_constructeur/resound.png') | imagine_filter('brand_logo_medium') }}"
  690.                              alt="Mon Centre Auditif - Prothèse auditive Resound" width="200" height="65">
  691.                     </div>
  692.                     <!-- End Col -->
  694.                     <div class="col-4 py-3 align-self-center">
  695.                         <img class="avatar avatar-xl avatar-4x3 avatar-centered"
  696.                              src="{{ asset('build/logo_constructeur/starkey.png') | imagine_filter('brand_logo_medium') }}"
  697.                              alt="Mon Centre Auditif - Prothèse auditive Starkey" width="200" height="97">
  698.                     </div>
  699.                     <!-- End Col -->
  701.                     <div class="col-4 py-3 align-self-center">
  702.                         <img class="avatar avatar-xl avatar-4x3 avatar-centered"
  703.                              src="{{ asset('build/logo_constructeur/unitron.png') | imagine_filter('brand_logo_medium') }}"
  704.                              alt="Mon Centre Auditif - Prothèse auditive Unitron" width="200" height="47">
  705.                     </div>
  706.                     <!-- End Col -->
  708.                     <div class="col-4 py-3 align-self-center">
  709.                         <img class="avatar avatar-xl avatar-4x3 avatar-centered"
  710.                              src="{{ asset('build/logo_constructeur/widex.png') | imagine_filter('brand_logo_medium') }}"
  711.                              alt="Mon Centre Auditif - Prothèse auditive Widex" width="200" height="100">
  712.                     </div>
  713.                     <!-- End Col -->
  714.                 </div>
  715.                 <!-- End Row -->
  716.             </div>
  717.             <!-- End Col -->
  718.         </div>
  719.         <!-- End Row -->
  720.     </div>
  721.     <!-- End Clients -->
  724.     <!-- Subscribe -->
  725.     <div class="bg-light">
  726.         <div class="container py-3">
  727.             <div class="w-md-75 w-lg-50 text-center mx-md-auto">
  728.                 <div class="row justify-content-lg-between">
  729.                     <!-- Heading -->
  730.                     <div class="mb-2">
  731.                         <span class="text-cap">Newsletter</span>
  732.                         <h2 class="text-primary">Restez <span class="fw-bold">informés</span></h2>
  733.                     </div>
  734.                     <!-- End Heading -->
  736.                     {{ form_start(newsLetterForm) }}
  737.                     <!-- Input Card -->
  738.                     <div class="input-card input-card-pill input-card-sm border p-1 mb-3">
  739.                         <div class="input-card-form d-flex align-content-center rounded-5">
  740.                             <label for="subscribeFormEg2" class="form-label visually-hidden">Entrez votre email</label>
  741.                             {{ form_widget(newsLetterForm.email, {'attr': {'id': 'subscribeSrEmail', 'class': 'rounded-5'}}) }}
  742.                         </div>
  743.                         <button id="subscribeButton" type="submit" class="btn btn-primary btn-lg rounded-pill">
  744.                             S'inscrire
  745.                         </button>
  746.                     </div>
  747.                     <!-- End Input Card -->
  748.                     <!-- Wrong email format div -->
  749.                     <div id="invalidEmailField" class="d-none alert alert-soft-danger mt-3" role="alert">
  750.                         <span>L'adresse email saisie est invalide.</span>
  751.                     </div>
  752.                     <!-- Success Div -->
  753.                     <div id="subscriptionSuccess"
  754.                          class="d-none alert alert-dismissible fade show alert-soft-success mt-3" role="alert">
  755.                         Merci pour votre inscription à notre newsletter.
  756.                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  757.                     </div>
  758.                     <!-- Already subscribed div -->
  759.                     <div id="alreadySubscribed" class="d-none alert alert-soft-warning mt-3" role="alert">
  760.                         <span>Il semblerait que cette adresse email soit déjà utilisée.</span>
  761.                     </div>
  762.                     {{ form_end(newsLetterForm) }}
  763.                     <p class="small">Vous pouvez vous désinscrire à tout moment. <br> Lire notre <a
  764.                                 href="{{ path('privacy') }}">politique de confidentialité</a></p>
  765.                 </div>
  766.             </div>
  767.         </div>
  768.     </div>
  769.     <!-- End Subscribe -->
  770. {% endblock content %}
  772. {% block javascripts %}
  773.     {{ encore_entry_script_tags('homepage') }}
  774.     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
  775.     <!-- Google place API -->
  776.     <script type="text/javascript"
  777.             src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyAJFMY4h2rwiDVFydKeK6l1eLgMpH5iV-0&libraries=places"></script>
  778.     <script
  779.             src="https://code.jquery.com/jquery-3.7.1.min.js"
  780.             integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  781.             crossorigin="anonymous"></script>
  782.     {{ encore_entry_script_tags('google_places_api') }}
  783.     {{ encore_entry_script_tags('send_callback_request') }}
  784.     {{ encore_entry_script_tags('newsletter_subscribe') }}
  785.     {{ encore_entry_script_tags('home_front_v3') }}
  786. {% endblock javascripts %}