templates/pro/accueilNew.html.twig line 1

Open in your IDE?
  1. {% extends "/pro/base2.html.twig" %}
  3. {% block stylesheets %}
  4.     {{ parent() }}
  5.     <link rel="stylesheet" type="text/css" href="/assets/lib/slick-1.8.1/slick.css"/>
  6.     <link rel="stylesheet" type="text/css" href="/assets/lib/slick-1.8.1/slick-theme.css"/>
  7.     <link rel="stylesheet" href="/assets/css/pro/accueil.css">
  9. {% endblock %}
  11. {% block javascripts %}
  12.     {{ parent() }}
  13.     <script type="text/javascript" src="/assets/lib/slick-1.8.1/slick.js"></script>
  14.     <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
  17.     <script type="text/javascript" src="/assets/js/acceuil.js"></script>
  19.     <script>
  20.         document.addEventListener('DOMContentLoaded', function () {
  21. var imgCover = document.getElementById('imgCover');
  22. var video = document.getElementById('videoPro');
  24. if (imgCover && video) {
  25. imgCover.addEventListener('click', function () {
  26. video.style.display = 'block';
  27. video.play();
  28. this.style.display = 'none';
  29. });
  31. video.addEventListener('ended', function () {
  32. video.style.display = 'none';
  33. imgCover.style.display = 'block';
  34. });
  35. }
  36. });
  37.     </script>
  39. {% endblock %}
  41. {% block body %}
  42.     {{ parent() }}
  43. {% endblock %}
  44. {% block meta %}
  45.     <title>My Audio Pro - Optimisez organisation et booster votre centre auditif</title>
  46.     <meta name="description" content="Booster votre centre auditif - My Audio est la 1ère plateforme spécialisée d'information et de mise en relation entre un audio et ses futurs patients">
  47. {% endblock %}
  48. {% block content %}
  49.     {{ parent() }}
  50.     <section id="firstSection" class="first-section">
  51.         <div class="container">
  52.             <div class="row">
  53.                 <div class="col-md-6 container-header" style="text-align:left;">
  54.                     <h1 class="home_title">Boostez votre croissance avec MyAudio</h1>
  55.                     <h2 class="subtitle">MyAudio booste l'acquisition de patients avec ses campagnes digitales locales, un logiciel conçu par et pour les audioprothésistes, offrant un outil métier pour augmenter vos revenus et transformer les rendez-vous en ventes.</h2>
  56.                     <div class="d-flex container-buttons" style="gap: 15px;">
  57.                         <a href="/pro/contactez-nous">
  58.                             <button class="btn btn-vert btn-outline-light fw-bold">Bookez une demo</button>
  59.                         </a>
  60.                         <a href="/pro/nos-tarifs-new">
  61.                             <button class="btn btn-jaune-inverse">Commencez à booster mes ventes</button>
  62.                         </a>
  63.                     </div>
  64.                 </div>
  65.                 <div class="col-md-6 container-presentation">
  66.                     <img src="/assets/img/pro/presentation.svg" width="500" alt="My Audio">
  67.                 </div>
  68.             </div>
  69.         </div>
  70.     </section>
  72.     <!-- Stats -->
  73.     <section class="number_stat mt-5" id="number_stat">
  74.         <div class="container">
  75.             <div class="row stats_home justify-content-evenly">
  76.                 <div class="col-6 col-md-2 d-flex flex-column gap-3">
  77.                     <div class="container-value">
  78.                         <h3 class="compteurPartenaire">...</h3>
  79.                     </div>
  80.                     <h5>PARTENAIRES AUDIOPROTHÉSISTES</h5>
  81.                 </div>
  82.                 <div class="col-6 col-md-2 d-flex flex-column gap-3">
  83.                     <div class="container-value">
  84.                         <h3 class="compteurTest">...</h3>
  85.                     </div>
  86.                     <h5>TEST AUDITIFS RÉALISÉS</h5>
  87.                 </div>
  88.                 <div class="col-6 col-md-2 d-flex flex-column gap-3">
  89.                     <div class="container-value">
  90.                         <h3 class="compteurAdherent">...</h3>
  91.                     </div>
  92.                     <h5>ADHÉRENTS AU RÉSEAU</h5>
  93.                 </div>
  94.                 <div class="col-6 col-md-2 d-flex flex-column gap-3">
  95.                     <div class="container-value">
  96.                         <h3>
  97.                             <span class="compteurSatisfaction">...</span>%</h3>
  98.                     </div>
  99.                     <h5>SATISFACTION</h5>
  100.                 </div>
  101.                 <div class="col-6 col-md-2 d-flex flex-column gap-3">
  102.                     <div class="container-value">
  103.                         <h3>
  104.                             <span class="compteurAudioReference">...</span>
  105.                         </h3>
  106.                     </div>
  107.                     <h5>NOMBRE D'AUDIOPROTHÉSISTES RÉFÉRENCÉS</h5>
  108.                 </div>
  109.             </div>
  111.         </div>
  112.     </section>
  114.     <section class="section-discover-myaudio">
  115.         <div class="container d-flex justify-content-center" style="gap: 100px">
  116.             <div class="container-video">
  117.                 <img class="img-cover" id="imgCover" width="100%" height="250px" src="/assets/img/storage/pagesimages/pro-17.png" alt="Pro">
  118.                 <video class="videoaccueil" id="videoPro" controls controlslist="nodownload" style="margin: 0; display: none;" poster="/assets/img/pro/posterproaccueil2.png">
  119.                     <source src="/assets/videos/accueilpro.m4v" type="video/mp4">
  120.                 </video>
  121.             </div>
  122.             <div class="container-text">
  123.                 <h3 class="titleSection">Découvrez MyAudio, la solution sur mesure pour transformer vos centres</h3>
  124.                 <p>MyAudio est une solution dédiée aux audioprothésistes pour gérer tout le parcours patient, de l’acquisition à la fidélisation. Centralisez vos rendez-vous avec des notifications en temps réel et bénéficiez de campagnes marketing digitales ciblées, prises en charge à 100%. Grâce au CRM intégré, suivez vos interactions, fidélisez vos patients et boostez vos ventes.</p>
  125.                 <p>Découvrez le pouvoir d’une solution conçue sur mesure par et pour des audioprothésistes.</p>
  126.                 <div class="d-flex container-buttons" style="gap: 15px;">
  127.                     <a href="/pro/contactez-nous">
  128.                         <button class="btn btn-vert btn-outline-light fw-bold">Bookez une demo</button>
  129.                     </a>
  130.                     <a href="/pro/nos-tarifs-new">
  131.                         <button class="btn btn-vert-inverse">Commencez à booster mes ventes</button>
  132.                     </a>
  133.                 </div>
  134.             </div>
  136.         </div>
  137.     </section>
  139.     <section class="container-solutions">
  140.         <div class="container d-flex flex-column">
  141.             <div class="container-text d-flex flex-column">
  142.                 <h3>Des solutions pour tous les Audioprothésistes</h3>
  143.                 <p>Découvrez le pouvoir d’une solution conçue sur mesure par et pour les audioprothésistes</p>
  144.             </div>
  145.             <div class="container-cards d-flex">
  146.                 <div class="card d-flex flex-column">
  147.                     <img class="img-solution" src="/assets/img/storage/pagesimages/pro-5.png" alt="Pro">
  148.                     <div class="container-text">
  149.                         <h4>Gérer efficacement vos patients et votre temps</h3>
  150.                         <p>Suivez chaque interaction avec vos patients et profitez de nos campagnes marketing digitales ciblées pour attirer de nouveaux patients.</p>
  151.                     </div>
  152.                     <div class="btn-action">
  153.                         <button class="btn btn-vert-inverse">En savoir plus</button>
  154.                     </div>
  155.                 </div>
  156.                 <div class="card d-flex flex-column">
  157.                     <img class="img-solution" src="/assets/img/storage/pagesimages/pro-6.png" alt="Pro">
  158.                     <div class="container-text">
  159.                         <h4>Augmenter les ventes et accélérer votre croissance</h3>
  160.                         <p>Boostez vos ventes et accélérez votre croissance avec My Audio, solution CRM et d’acquisition de patients dédiée aux audioprothésistes.</p>
  161.                     </div>
  162.                     <div class="btn-action">
  163.                         <button class="btn btn-vert-inverse">En savoir plus</button>
  164.                     </div>
  165.                 </div>
  166.                 <div class="card d-flex flex-column">
  167.                     <img class="img-solution" src="/assets/img/storage/pagesimages/pro-7.png" alt="Pro">
  168.                     <div class="container-text">
  169.                         <h4>Une expérience patient simple et soignée</h3>
  170.                         <p>Offrez une expérience simple et soignée avec My Audio, la solution CRM pour optimiser la gestion, fidéliser vos patients et faciliter leur accompagnement.
  171.                         </p>
  172.                     </div>
  173.                     <div class="btn-action">
  174.                         <button class="btn btn-vert-inverse">En savoir plus</button>
  175.                     </div>
  176.                 </div>
  177.             </div>
  178.         </div>
  179.     </section>
  182.     <section class="container-partners">
  183.         <div class="container">
  184.             <h3 class="partners-title">Nos partenaires exclusifs</h3>
  185.             <p class="partners-subtitle">Profitez d'offres spéciales négociées pour nos partenaires</p>
  187.             <div
  188.                 class="partners-cards">
  189.                 <!-- Card CDA -->
  190.                 <div class="partner-card">
  191.                     <div class="partner-logo">
  192.                         <a href="/pro/nos-tarifs-cda"><img src="/assets/img/storage/pagesimages/pro-8.png" alt="CDA"></a>
  193.                     </div>
  194.                     <div class="partner-content">
  195.                         <h4>Êtes-vous adhérent de la CDA ?</h4>
  196.                         <p>La CDA et MyAudio ont conclu un partenariat offrant à leurs adhérents une offre exclusive, spécialement conçue pour répondre à leurs besoins.</p>
  197.                         <a href="/pro/nos-tarifs-cda">
  198.                             <button class="btn btn-violet-cda">Je profite de l'offre</button>
  199.                         </a>
  200.                     </div>
  201.                 </div>
  203.                 <!-- Card Atol Audition -->
  204.                 <div class="partner-card">
  205.                     <div class="partner-logo">
  206.                         <a href="/pro/nos-tarifs-audition-group"><img style="width: 300px;" src="/assets/img/pro/atol-myaudio.png" alt="Atol Audition"></a>
  207.                     </div>
  208.                     <div class="partner-content">
  209.                         <h4>Êtes-vous adhérent Audition Group ?</h4>
  210.                         <p>Audition Group et MyAudio ont conclu un partenariat offrant à leurs adhérents une offre exclusive, spécialement conçue pour répondre à leurs besoins.</p>
  211.                         <a href="/pro/nos-tarifs-audition-group">
  212.                             <button class="btn btn-violet-cda">Je profite de l'offre</button>
  213.                         </a>
  214.                     </div>
  215.                 </div>
  217.                 <!-- Card AudioLibre -->
  218.                 <div class="partner-card">
  219.                     <div class="partner-logo">
  220.                         <a href="/pro/nos-tarifs-audiolibre"><img style="width: 300px;" src="/assets/img/pro/audiolibre-myaudio.png" alt="AudioLibre"></a>
  221.                     </div>
  222.                     <div class="partner-content">
  223.                         <h4>Êtes-vous adhérent AudioLibre ?</h4>
  224.                         <p>AudioLibre et MyAudio ont conclu un partenariat offrant à leurs adhérents une offre exclusive, spécialement conçue pour répondre à leurs besoins.</p>
  225.                         <a href="/pro/nos-tarifs-audiolibre">
  226.                             <button class="btn btn-violet-cda">Je profite de l'offre</button>
  227.                         </a>
  228.                     </div>
  229.                 </div>
  230.             </div>
  231.         </div>
  232.     </section>
  234.     <section class="container-logiciel">
  235.         <div class="container d-flex flex-column">
  236.             <div class="container-text d-flex flex-column">
  237.                 <h3>Un logiciel simple d'utilisation et une équipe à votre disposition.</h3>
  238.                 <p>MyAudio propose divers outils, ressources et programmes qui permettent à votre équipe de rester au fait des dernières innovations tout au long de sa croissance.</p>
  239.             </div>
  240.             <div class="container-cards">
  241.                 <div class="card-img d-flex border-shadow">
  242.                     <img class="img-card" src="/assets/img/storage/pagesimages/pro-9.png" alt="Pro">
  243.                     <h4>Support client en continu</h4>
  244.                     <p>Demandez de l’aide à notre équipe par téléphone, par chat ou par e-mail.</p>
  245.                 </div>
  246.                 <div class="card-img d-flex border-shadow">
  247.                     <img class="img-card" src="/assets/img/storage/pagesimages/pro-10.png" alt="Pro">
  248.                     <h4>Services MyAudio</h4>
  249.                     <p>Faites vos premiers pas rapidement en bénéficiant d’un processus d’onboarding personnalisé.</p>
  250.                 </div>
  251.                 <div class="card-img d-flex border-shadow">
  252.                     <span class="coming-soon-flag">Bientôt disponible</span>
  253.                     <img class="img-card" src="/assets/img/storage/pagesimages/pro-11.png" alt="Pro">
  254.                     <h4>Certifications et formations gratuites</h4>
  255.                     <p>Développez votre expertise grâce aux formations et certifications gratuites de MyAudio Academy.</p>
  256.                 </div>
  257.                 <div class="card-img d-flex border-shadow">
  258.                     <img class="img-card" src="/assets/img/storage/pagesimages/pro-12.png" alt="Pro">
  259.                     <h4>Marketing digital en local</h4>
  260.                     <p>Bénéficiez de campagnes marketing digitales ciblées, prises en charge à 100%.</p>
  261.                 </div>
  262.                 <div class="card-img d-flex border-shadow">
  263.                     <img class="img-card" src="/assets/img/storage/pagesimages/pro-13.png" alt="Pro">
  264.                     <h4>MyAudio pour les nouveaux centres auditifs</h4>
  265.                     <p>Bénéficiez de ressources variées et d’un accompagnement personnalisé pour les jeunes centres.</p>
  266.                 </div>
  267.                 <div class="card-img d-flex border-shadow">
  268.                     <span class="coming-soon-flag">Bientôt disponible</span>
  269.                     <img class="img-card" src="/assets/img/storage/pagesimages/pro-14.png" alt="Pro">
  270.                     <h4>Articles, guides et modèles</h4>
  271.                     <p>Consultez les différentes publications, guides et articles de la bibliothèque des ressources MyAudio</p>
  272.                 </div>
  273.             </div>
  274.         </div>
  275.     </section>
  277.     <section class="container-bottom">
  278.         <div class="container d-flex">
  279.             <div class="container-left">
  280.                 <h3>Accélérez votre croissance dès aujourd'hui avec MyAudio</h3>
  281.                 <div class="d-flex container-buttons" style="gap: 15px;">
  282.                     <a href="/pro/contactez-nous">
  283.                         <button class="btn btn-vert btn-outline-light fw-bold">Bookez une demo</button>
  284.                     </a>
  285.                     <a href="/pro/nos-tarifs-new">
  286.                         <button class="btn btn-vert-inverse">Commencez à booster mes ventes</button>
  287.                     </a>
  288.                 </div>
  289.             </div>
  290.             <img class="img-right" src="/assets/img/storage/pagesimages/pro-16.png" alt="Pro">
  291.         </div>
  292.     </section>
  296.     <!-- Carousel & card-->
  297.     {% if articles | length > 0 %}
  298.         <section class="title-news">
  299.             <div class="container">
  300.                 <div>
  301.                     <h2 class="Tableau_title">
  302.                         <a href="/actualite-de-l-audition" style="text-decoration:none ; color:#434343; font-weight: bold ;">Actualité de l'audition</a>
  303.                     </h2>
  304.                 </div>
  305.             </div>
  306.         </section>
  308.         <section class="news_card mb-5">
  309.             <div class="container">
  310.                 <div class="carousel">
  312.                     {% for article in articles %}
  313.                         <div class="card_section petitecard">
  314.                             <div class="card_article">
  315.                                 <div class="header-card">
  317.                                     {% if article.imgUrl is not null and article.externalId is not null %}
  318.                                         <img class="card-img-top petite" src="{{article.imgUrl }}" alt="Card image cap">
  319.                                     {% else %}
  320.                                         <img class="card-img-top petite" src="{{BASE_API}}article/image/{{article.slug}}" alt="Card image cap">
  321.                                     {% endif %}
  322.                                     <div class="card-body">
  323.                                         <p class="card_ontitle">{{article.categoryTitle}}</p>
  324.                                         <h2 class="card-title">{{article.title}}</h2>
  325.                                         <p class="card_date">
  326.                                             <span class="material-icons">
  327.                                                 today
  328.                                             </span>
  329.                                             {{article.date |format_datetime(pattern="d MMMM Y",locale='fr')}}</p>
  330.                                         <p class="card-text">{{article.description |raw}}</p>
  331.                                         {% if article.source is not null %}
  332.                                             {% if article.source is same as 'Ouïe Magazine' %}
  333.                                                 <p class="card-text" style="margin: 0px; height: auto;">Source : L'{{article.source}}</p>
  334.                                             {% else %}
  335.                                                 <p class="card-text" style="margin: 0px; height: auto;">Source :
  336.                                                     {{article.source}}</p>
  337.                                             {% endif %}
  338.                                         {% endif %}
  339.                                     </div>
  340.                                 </div>
  341.                                 {% if article.externalLink is not null %}
  342.                                     <div class="card-footer">
  343.                                         <a class="btn btn-vert btn-outline-light me-2" href="{{article.externalLink}}" target="_blank">VOIR
  344.                                                                                                                         PLUS</a>
  345.                                     </div>
  346.                                 {% else %}
  347.                                     <div class="card-footer">
  348.                                         <a class="btn btn-vert btn-outline-light me-2" href="/actualite-de-l-audition/{{article.slug}}">VOIR
  349.                                                                                                                         PLUS</a>
  350.                                     </div>
  351.                                 {% endif %}
  353.                             </div>
  354.                         </div>
  355.                     {% endfor %}
  357.                 </div>
  358.             </div>
  360.         </section>
  362.         <script src="/assets/js/script.js"></script>
  363.     {% endif %}
  364. {% endblock %}
  366. {% block modals %}{% endblock %}