templates/Front/whatsapp/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ title }}{% endblock %}
  5. {% block meta_noindex %}
  6. <meta name="robots" content="noindex, nofollow">
  7. {% endblock %}
  9. {% block stylesheets %}
  10.     {{ encore_entry_link_tags('whatsapp') }}
  11. {% endblock %}
  13. {% block body %}
  15.     {# ===================== HERO (module index) ===================== #}
  16.     <section class="hero-area" data-aos="fade-up">
  17.         <div class="container">
  18.             <div class="row">
  19.                 <div class="col-xl-6 col-lg-6 col-md-12 col-12">
  20.                     <div class="container-content" data-aos="fade-right" data-aos-delay="50">
  21.                         <h1 class="main-title">
  22.                             Un <span class="text-secondary">contact direct</span> <br>
  23.                             avec vos prospects, <br>
  24.                             en un clic
  25.                         </h1>
  26.                         <p>
  27.                             Vos prospects ont des questions rapides. Avec le widget WhatsApp,
  28.                             vous facilitez les échanges tout en renforçant votre proximité.
  29.                         </p>
  30.                         <div class="container-btns">
  31.                             <a href="#form__contact" class="btn secondary regular">
  32.                                 <span>
  33.                                     J'active WhatsApp sur mon site
  34.                                     <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
  35.                                          xmlns="http://www.w3.org/2000/svg">
  36.                                         <path d="M5.88477 1.88086L10.2001 6.00007L5.88477 10.1193" stroke="white"
  37.                                               stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  38.                                         <path d="M10.1998 6L1.7998 6" stroke="white" stroke-width="1.5"
  39.                                               stroke-linecap="round" stroke-linejoin="round"/>
  40.                                     </svg>
  41.                                 </span>
  42.                             </a>
  43.                         </div>
  44.                     </div>
  45.                 </div>
  46.                 <div class="col-xl-6 col-lg-6 col-md-12 col-12 d-flex align-items-center">
  47.                     <div id="containerVideoHp" class="container-video" data-aos="zoom-in" data-aos-delay="100">
  48.                         <picture>
  49.                             <source srcset="{{ asset('/assets/images/agexv4/whatsapp/miniature-video-presentation.webp') }}" type="image/webp">
  50.                             <img src="{{ asset('/assets/images/agexv4/whatsapp/miniature-video-presentation.png') }}"
  51.                                  alt="miniature vidéo présentation">
  52.                         </picture>
  53.                         <div id="openModalVideoAgence" class="play-video-agence">
  54.                             <svg width="27" height="35" viewBox="0 0 27 35" fill="none"
  55.                                  xmlns="http://www.w3.org/2000/svg">
  56.                                 <path d="M5.13281 2.66612C4.00781 2.0281 2.88281 2.00531 1.75781 2.59776C0.632812 3.23578 0.046875 4.19281 0 5.46885V29.5313C0.046875 30.8074 0.632812 31.7644 1.75781 32.4024C2.88281 32.9949 4.00781 32.9721 5.13281 32.3341L25.3828 20.3028C26.4141 19.6648 26.9531 18.7306 27 17.5001C26.9531 16.3152 26.4141 15.381 25.3828 14.6974L5.13281 2.66612Z"
  57.                                       fill="white"/>
  58.                             </svg>
  59.                         </div>
  60.                     </div>
  61.                 </div>
  62.             </div>
  63.         </div>
  64.     </section>
  66.     {# ===================== LOGOS DE CONFIANCE (carrousel de base) ===================== #}
  67.     <section class="logo-area inline bg-secondary-light">
  68.         <div class="container-logo">
  69.             <span class="section-title__tagline" data-aos="fade-up">
  70.                 <span class="text-body">+550 cabinets</span>
  71.                 nous font déjà confiance
  72.             </span>
  73.             <div class="owl-carousel owl-custom" id="client-logos" data-aos="zoom-in" data-aos-delay="100">
  75.             </div>
  76.         </div>
  77.     </section>
  79.     {# ===================== AVANTAGES (module why-section-area) ===================== #}
  80.     <section class="why-section-area no-top whatsapp-why">
  81.         <span class="shape-traits">
  82.             <picture>
  83.                 <source srcset="{{ asset('assets/images/agexv4/whatsapp/logo3D-traits.webp') }}" type="image/webp">
  84.                 <img src="{{ asset('assets/images/agexv4/whatsapp/logo3D-traits.png') }}" alt="traits décoratifs L'agence des Experts-comptables">
  85.             </picture>
  86.         </span>
  87.         <div class="container">
  88.             <div class="why-content">
  89.                 <!-- Colonne de gauche -->
  90.                 <div class="why-left">
  91.                     <div class="macaron primary macaron--whatsapp">
  92.                         <span class="price">49€<span class="lighter">HT</span></span>
  93.                         <p class="light">PAR AN</p>
  94.                     </div>
  95.                     <div class="section-overline">Ce que vous apporte WhatsApp</div>
  96.                     <h2 class="why-main-title">
  97.                         Quels sont les
  98.                         <span class="green-highlight">
  99.                             avantages
  100.                             <svg width="235" height="14" viewBox="0 0 235 14" fill="none" xmlns="http://www.w3.org/2000/svg">
  101.                                 <path d="M2.30078 11.3325C96.8008 2.33252 145.846 3.74841 232.701 2.33252" stroke="#7CD325" stroke-width="4" stroke-linecap="round"/>
  102.                             </svg>
  103.                         </span>
  104.                         rapides et concrets pour votre cabinet
  105.                     </h2>
  106.                     <div class="decorative-curve">
  107.                         <svg width="113" height="57" viewBox="0 0 113 57" fill="none" xmlns="http://www.w3.org/2000/svg">
  108.                             <path d="M2.90483 40.1211C13.7262 21.3028 41.1389 -11.1755 64.7944 8.77893C81.6316 22.9818 54.2602 67.284 39.6992 50.9064C25.1381 34.5288 64.2039 -15.5958 108.106 30.5035M96.5749 29.2609L109.697 32.4313L106.667 17.2963" stroke="#FC6F1F" stroke-width="4" stroke-linecap="round"/>
  109.                         </svg>
  110.                     </div>
  111.                 </div>
  113.                 <!-- Colonne de droite -->
  114.                 <div class="why-right">
  115.                     <ul class="benefits-list">
  116.                         <li class="benefit-item" data-aos="fade-left">
  117.                             <div class="benefit-check">
  118.                                 <span class="check-inner">
  119.                                     <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12.5L10 17.5L19 7.5" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
  120.                                 </span>
  121.                             </div>
  122.                             <div class="benefit-text">
  123.                                 <h3>Restez accessible sans alourdir votre quotidien</h3>
  124.                                 <p>Répondez aux demandes simples rapidement, sans passer par des échanges d'emails interminables.</p>
  125.                             </div>
  126.                         </li>
  127.                         <li class="benefit-item" data-aos="fade-left" data-aos-delay="150">
  128.                             <div class="benefit-check">
  129.                                 <span class="check-inner">
  130.                                     <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12.5L10 17.5L19 7.5" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
  131.                                 </span>
  132.                             </div>
  133.                             <div class="benefit-text">
  134.                                 <h3>Simplifiez la prise de contact</h3>
  135.                                 <p>Vos prospects vous écrivent en un clic, directement depuis votre site.</p>
  136.                             </div>
  137.                         </li>
  138.                         <li class="benefit-item" data-aos="fade-left" data-aos-delay="300">
  139.                             <div class="benefit-check">
  140.                                 <span class="check-inner">
  141.                                     <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12.5L10 17.5L19 7.5" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
  142.                                 </span>
  143.                             </div>
  144.                             <div class="benefit-text">
  145.                                 <h3>Renforcez votre relation client</h3>
  146.                                 <p>Un échange plus direct, plus humain, qui crée de la confiance.</p>
  147.                             </div>
  148.                         </li>
  149.                         <li class="benefit-item" data-aos="fade-left" data-aos-delay="450">
  150.                             <div class="benefit-check">
  151.                                 <span class="check-inner">
  152.                                     <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12.5L10 17.5L19 7.5" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
  153.                                 </span>
  154.                             </div>
  155.                             <div class="benefit-text">
  156.                                 <h3>Captez plus facilement de nouveaux clients</h3>
  157.                                 <p>Un visiteur hésitant passe plus facilement à l'action via un message instantané.</p>
  158.                             </div>
  159.                         </li>
  160.                         <li class="benefit-item" data-aos="fade-left" data-aos-delay="600">
  161.                             <div class="benefit-check">
  162.                                 <span class="check-inner">
  163.                                     <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12.5L10 17.5L19 7.5" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
  164.                                 </span>
  165.                             </div>
  166.                             <div class="benefit-text">
  167.                                 <h3>Donnez une image moderne de votre cabinet</h3>
  168.                                 <p>Vous montrez que vous êtes disponible, réactif et en phase avec les usages actuels.</p>
  169.                             </div>
  170.                         </li>
  171.                     </ul>
  172.                 </div>
  173.             </div>
  174.         </div>
  175.     </section>
  177.     {# ===================== BANDEAU ORANGE (module index, tablette) ===================== #}
  178.     <section class="band-contact-area whatsapp-band">
  179.         <span class="whatsapp-band-bubbles">
  180.             <picture>
  181.                 <source srcset="{{ asset('/assets/images/agexv4/whatsapp/bulles.webp') }}" type="image/webp">
  182.                 <img class="bubble-main" src="{{ asset('/assets/images/agexv4/whatsapp/bulles.png') }}" alt="bulle WhatsApp">
  183.             </picture>
  184.             <picture>
  185.                 <source srcset="{{ asset('/assets/images/agexv4/whatsapp/bulles-2.webp') }}" type="image/webp">
  186.                 <img class="bubble-small" src="{{ asset('/assets/images/agexv4/whatsapp/bulles-2.png') }}" alt="">
  187.             </picture>
  188.         </span>
  189.         <div class="container">
  190.             <div class="d-flex flex-column align-items-center" data-aos="fade-up">
  191.                 <h2 class="band-title">
  192.                     Simplifiez vos échanges dès aujourd'hui !
  193.                 </h2>
  194.                 <p>Nous intégrons pour vous WhatsApp directement sur le site de votre cabinet.</p>
  195.                 <a href="#form__contact" class="btn regular black">
  196.                     <span>
  197.                         Je souhaite intégrer WhatsApp
  198.                         <svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
  199.                             <path d="M5.38477 0.880859L9.70013 5.00007L5.38477 9.11928" stroke="white"
  200.                                   stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  201.                             <path d="M9.69975 5L1.2998 5" stroke="white" stroke-width="1.5" stroke-linecap="round"
  202.                                   stroke-linejoin="round"/>
  203.                         </svg>
  204.                     </span>
  205.                 </a>
  206.             </div>
  207.         </div>
  208.     </section>
  210.     {# ===================== AUDIT / FORMULAIRE (module index) ===================== #}
  211.     <div id="form__contact"></div>
  212.     <section class="contact-area pt-50 whatsapp-contact">
  213.         <div class="container">
  214.             <div class="row align-items-center">
  215.                 <div class="col-xl-6 col-lg-7">
  216.                     <div class="section-title left" data-aos="fade-right">
  217.                         <span class="sub-title text-green">
  218.                             JE SOUHAITE ACTIVER WHATSAPP SUR MON SITE
  219.                         </span>
  220.                         <h2 class="title container-shape">
  221.                             <svg class="shape arrow" width="113" height="57" viewBox="0 0 113 57" fill="none"
  222.                                  xmlns="http://www.w3.org/2000/svg">
  223.                                 <path d="M2.90483 40.1211C13.7262 21.3028 41.1389 -11.1755 64.7944 8.77893C81.6316 22.9818 54.2602 67.284 39.6992 50.9064C25.1381 34.5288 64.2039 -15.5958 108.106 30.5035M96.5749 29.2609L109.697 32.4313L106.667 17.2963"
  224.                                       stroke="#FC6F1F" stroke-width="4" stroke-linecap="round"/>
  225.                             </svg>
  226.                             Prêt à faciliter les échanges avec vos prospects ?
  227.                         </h2>
  228.                         <p>
  229.                             Remplissez le formulaire ci-contre, on s'occupe de tout
  230.                         </p>
  231.                     </div>
  232.                 </div>
  233.                 <div class="col-xl-6 col-lg-5" data-aos="fade-left">
  234.                     <div class="contact-form" data-aos="fade-left" data-aos-delay="100">
  235.                         <h2 class="title">
  236.                             Ce widget
  237.                             <span class="text-green text-underline">
  238.                             m'intéresse
  239.                             <svg width="121" height="13" viewBox="0 0 121 13" fill="none"
  240.                                  xmlns="http://www.w3.org/2000/svg">
  241.                                 <path d="M2.2998 10.07C52.459 2.41211 78.8787 2.41211 118.7 2.41211" stroke="#7CD325"
  242.                                       stroke-width="4" stroke-linecap="round"/>
  243.                             </svg>
  244.                         </span>
  245.                         </h2>
  246.                         {{ form_start(form_audit) }}
  247.                         {{ form_row(form_audit.page, { "value" : title }) }}
  249.                         {{ form_widget(form_audit) }}
  251.                         <button type="submit" class="btn regular primary">
  252.                             <span>
  253.                                 Envoyer votre demande
  254.                                 <svg width="12" height="13" viewBox="0 0 12 13" fill="none"
  255.                                      xmlns="http://www.w3.org/2000/svg">
  256.                                     <path d="M5.88477 2.7334L10.2001 6.85261L5.88477 10.9718" stroke="white"
  257.                                           stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  258.                                     <path d="M10.1998 6.85266L1.7998 6.85266" stroke="white" stroke-width="1.5"
  259.                                           stroke-linecap="round" stroke-linejoin="round"/>
  260.                                 </svg>
  261.                             </span>
  262.                         </button>
  264.                         {{ form_end(form_audit) }}
  265.                     </div>
  266.                 </div>
  267.             </div>
  268.         </div>
  269.     </section>
  271.     {# ===================== NEWSLETTER (standard) ===================== #}
  272.     <section class="newsletter-area">
  273.         <div class="shape-agency">
  274.             <picture>
  275.                 <source srcset="{{ asset('assets/images/agexv4/shapes/logo3D.webp') }}" type="image/webp">
  276.                 <img src="{{ asset('assets/images/agexv4/shapes/logo3D.png') }}" alt="logo agence">
  277.             </picture>
  278.         </div>
  279.         <div class="container">
  280.             <div class="form-container">
  281.                 <h2 class="main-title" data-aos="fade-left">Abonnez-vous à <br> notre newsletter</h2>
  282.                 <p data-aos="fade-right" data-aos-delay="200">Un support indispensable pour les Experts-comptables !</p>
  283.                 {{ form_start(form_news2) }}
  284.                 <div class="input-newsletter" data-aos="fade-left" data-aos-delay="100">
  285.                     <div class="icon">
  286.                         <svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
  287.                             <g clip-path="url(#clip0_434_9342)">
  288.                                 <path d="M8.75 10.1904C10.1562 10.1644 11.3411 9.68262 12.3047 8.74512C13.2422 7.78158 13.724 6.59668 13.75 5.19043C13.724 3.78418 13.2422 2.59928 12.3047 1.63574C11.3411 0.698242 10.1562 0.216471 8.75 0.19043C7.34375 0.216471 6.15885 0.698242 5.19531 1.63574C4.25781 2.59928 3.77604 3.78418 3.75 5.19043C3.77604 6.59668 4.25781 7.78158 5.19531 8.74512C6.15885 9.68262 7.34375 10.1644 8.75 10.1904ZM10.7422 12.0654H6.75781C4.85677 12.1175 3.26823 12.7816 1.99219 14.0576C0.716146 15.3337 0.0520833 16.9222 0 18.8232C0 19.2139 0.130208 19.5394 0.390625 19.7998C0.651042 20.0602 0.976562 20.1904 1.36719 20.1904H16.1328C16.5234 20.1904 16.849 20.0602 17.1094 19.7998C17.3698 19.5394 17.5 19.2139 17.5 18.8232C17.4479 16.9222 16.7839 15.3337 15.5078 14.0576C14.2318 12.7816 12.6432 12.1175 10.7422 12.0654Z" fill="#042F35"/>
  289.                             </g>
  290.                             <defs>
  291.                                 <clipPath id="clip0_434_9342">
  292.                                     <rect width="17.5" height="20" fill="white" transform="matrix(1 0 0 -1 0 20.1904)"/>
  293.                                 </clipPath>
  294.                             </defs>
  295.                         </svg>
  296.                     </div>
  297.                     {{ form_row(form_news2.name) }}
  298.                 </div>
  299.                 <div class="input-newsletter" data-aos="fade-right" data-aos-delay="200">
  300.                     <div class="icon">
  301.                         <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
  302.                             <path d="M18.125 3.44043H1.875C1.35417 3.44043 0.911458 3.62272 0.546875 3.9873C0.182292 4.35189 0 4.7946 0 5.31543V16.5654C0 17.0863 0.182292 17.529 0.546875 17.8936C0.911458 18.2581 1.35417 18.4404 1.875 18.4404H18.125C18.6458 18.4404 19.0885 18.2581 19.4531 17.8936C19.8177 17.529 20 17.0863 20 16.5654V5.31543C20 4.7946 19.8177 4.35189 19.4531 3.9873C19.0885 3.62272 18.6458 3.44043 18.125 3.44043ZM18.75 6.05762V16.5654C18.75 16.7347 18.6882 16.8812 18.5645 17.0049C18.4408 17.1286 18.2943 17.1904 18.125 17.1904H1.875C1.70573 17.1904 1.55924 17.1286 1.43555 17.0049C1.31185 16.8812 1.25 16.7347 1.25 16.5654V6.05762L9.58984 13.2842C9.72005 13.3884 9.85026 13.4404 10 13.4404C10.1497 13.4404 10.28 13.3884 10.4102 13.2842L18.75 6.05762Z" fill="#042F35"/>
  303.                         </svg>
  304.                     </div>
  305.                     {{ form_row(form_news2.email) }}
  306.                 </div>
  307.                 <button type="submit" class="btn regular black" data-aos="fade-up" data-aos-delay="300">
  308.                     <span>
  309.                         Je m'inscris à la newsletter
  310.                     </span>
  311.                 </button>
  312.                 {{ form_end(form_news2) }}
  313.             </div>
  314.         </div>
  315.     </section>
  317.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  318.     <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'></script>
  319.     <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  320.     <script src="{{ asset('/assets/js/carouselLogo.js') }}"></script>
  322.     <script>
  323.         document.addEventListener("DOMContentLoaded", function () {
  324.             var btnOpenVideo = document.getElementById('openModalVideoAgence');
  325.             var containerVideo = document.getElementById('containerVideoHp');
  326.             var videoId = 'oAaZryOL3u0';
  328.             if (btnOpenVideo && containerVideo) {
  329.                 btnOpenVideo.addEventListener('click', function () {
  330.                     if (!containerVideo.querySelector('iframe')) {
  331.                         var iframe = document.createElement('iframe');
  332.                         iframe.className = 'video-agence';
  333.                         iframe.src = 'https://www.youtube.com/embed/' + videoId + '?autoplay=1&rel=0';
  334.                         iframe.setAttribute('frameborder', '0');
  335.                         iframe.setAttribute('allow', 'autoplay; encrypted-media; picture-in-picture');
  336.                         iframe.setAttribute('allowfullscreen', '');
  338.                         containerVideo.innerHTML = '';
  339.                         containerVideo.classList.add('active');
  340.                         containerVideo.appendChild(iframe);
  341.                     }
  342.                 });
  343.             }
  344.         });
  345.     </script>
  347. {% endblock %}