templates/Front/calendly/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('calendly') }}
  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.                             Activez la prise de <br>
  23.                             <span class="text-secondary">
  24.                                 rendez-vous en ligne
  25.                             </span>
  26.                         </h1>
  27.                         <p>
  28.                             Simplifiez votre organisation et évitez les échanges inutiles pour fixer un rendez-vous.
  29.                             Avec Calendly, vos prospects réservent un créneau en toute autonomie.
  30.                         </p>
  31.                         <div class="container-btns">
  32.                             <a href="#form__contact" class="btn secondary regular">
  33.                                 <span>
  34.                                     Échangez-en dès maintenant avec notre équipe
  35.                                     <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
  36.                                          xmlns="http://www.w3.org/2000/svg">
  37.                                         <path d="M5.88477 1.88086L10.2001 6.00007L5.88477 10.1193" stroke="white"
  38.                                               stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  39.                                         <path d="M10.1998 6L1.7998 6" stroke="white" stroke-width="1.5"
  40.                                               stroke-linecap="round" stroke-linejoin="round"/>
  41.                                     </svg>
  42.                                 </span>
  43.                             </a>
  44.                         </div>
  45.                     </div>
  46.                 </div>
  47.                 <div class="col-xl-6 col-lg-6 col-md-12 col-12 d-flex align-items-center">
  48.                     <div id="containerVideoHp" class="container-video" data-aos="zoom-in" data-aos-delay="100">
  49.                         <picture>
  50.                             <source srcset="{{ asset('/assets/images/agexv4/calendly/miniature-video-presentation.webp') }}" type="image/webp">
  51.                             <img src="{{ asset('/assets/images/agexv4/calendly/miniature-video-presentation.png') }}"
  52.                                  alt="miniature vidéo présentation">
  53.                         </picture>
  54.                         <div id="openModalVideoAgence" class="play-video-agence">
  55.                             <svg width="27" height="35" viewBox="0 0 27 35" fill="none"
  56.                                  xmlns="http://www.w3.org/2000/svg">
  57.                                 <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"
  58.                                       fill="white"/>
  59.                             </svg>
  60.                         </div>
  61.                     </div>
  62.                 </div>
  63.             </div>
  64.         </div>
  65.     </section>
  67.     {# ===================== LOGOS DE CONFIANCE (carrousel de base) ===================== #}
  68.     <section class="logo-area inline bg-secondary-light">
  69.         <div class="container-logo">
  70.             <span class="section-title__tagline" data-aos="fade-up">
  71.                 <span class="text-body">+550 cabinets</span>
  72.                 nous font déjà confiance
  73.             </span>
  74.             <div class="owl-carousel owl-custom" id="client-logos" data-aos="zoom-in" data-aos-delay="100">
  76.             </div>
  77.         </div>
  78.     </section>
  80.     {# ===================== AVANTAGES (module why-section-area) ===================== #}
  81.     <section class="why-section-area no-top calendly-why">
  82.         <span class="shape-traits">
  83.             <picture>
  84.                 <source srcset="{{ asset('assets/images/agexv4/calendly/logo3D-traits.webp') }}" type="image/webp">
  85.                 <img src="{{ asset('assets/images/agexv4/calendly/logo3D-traits.png') }}" alt="traits décoratifs L'agence des Experts-comptables">
  86.             </picture>
  87.         </span>
  88.         <div class="container">
  89.             <div class="why-content">
  90.                 <!-- Colonne de gauche -->
  91.                 <div class="why-left">
  92.                     <div class="macaron primary macaron--calendly">
  93.                         <span class="price">50€<span class="lighter">HT</span></span>
  94.                         <p class="light">ONE SHOT</p>
  95.                     </div>
  96.                     <div class="section-overline">Ce que vous apporte Calendly</div>
  97.                     <h2 class="why-main-title">
  98.                         Quels sont les
  99.                         <span class="green-highlight">
  100.                             avantages
  101.                             <svg width="235" height="14" viewBox="0 0 235 14" fill="none" xmlns="http://www.w3.org/2000/svg">
  102.                                 <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"/>
  103.                             </svg>
  104.                         </span>
  105.                         rapides et concrets pour votre cabinet
  106.                     </h2>
  107.                     <div class="decorative-curve">
  108.                         <svg width="113" height="57" viewBox="0 0 113 57" fill="none" xmlns="http://www.w3.org/2000/svg">
  109.                             <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"/>
  110.                         </svg>
  111.                     </div>
  112.                 </div>
  114.                 <!-- Colonne de droite -->
  115.                 <div class="why-right">
  116.                     <ul class="benefits-list">
  117.                         <li class="benefit-item" data-aos="fade-left">
  118.                             <div class="benefit-check">
  119.                                 <span class="check-inner">
  120.                                     <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>
  121.                                 </span>
  122.                             </div>
  123.                             <div class="benefit-text">
  124.                                 <h3>Moins d'allers-retours</h3>
  125.                                 <p>Fini les échanges pour trouver un créneau. Tout est automatisé.</p>
  126.                             </div>
  127.                         </li>
  128.                         <li class="benefit-item" data-aos="fade-left" data-aos-delay="150">
  129.                             <div class="benefit-check">
  130.                                 <span class="check-inner">
  131.                                     <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>
  132.                                 </span>
  133.                             </div>
  134.                             <div class="benefit-text">
  135.                                 <h3>Un agenda mieux organisé</h3>
  136.                                 <p>Vous maîtrisez vos disponibilités et évitez les doublons.</p>
  137.                             </div>
  138.                         </li>
  139.                         <li class="benefit-item" data-aos="fade-left" data-aos-delay="300">
  140.                             <div class="benefit-check">
  141.                                 <span class="check-inner">
  142.                                     <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>
  143.                                 </span>
  144.                             </div>
  145.                             <div class="benefit-text">
  146.                                 <h3>Une expérience client fluide</h3>
  147.                                 <p>Vos prospects réservent en quelques secondes, quand ils le souhaitent.</p>
  148.                             </div>
  149.                         </li>
  150.                         <li class="benefit-item" data-aos="fade-left" data-aos-delay="450">
  151.                             <div class="benefit-check">
  152.                                 <span class="check-inner">
  153.                                     <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>
  154.                                 </span>
  155.                             </div>
  156.                             <div class="benefit-text">
  157.                                 <h3>Plus de rendez-vous qualifiés</h3>
  158.                                 <p>Vous facilitez le passage à l'action de vos prospects.</p>
  159.                             </div>
  160.                         </li>
  161.                         <li class="benefit-item" data-aos="fade-left" data-aos-delay="600">
  162.                             <div class="benefit-check">
  163.                                 <span class="check-inner">
  164.                                     <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>
  165.                                 </span>
  166.                             </div>
  167.                             <div class="benefit-text">
  168.                                 <h3>Une image moderne et professionnelle</h3>
  169.                                 <p>Vous montrez un cabinet structuré, accessible et efficace.</p>
  170.                             </div>
  171.                         </li>
  172.                     </ul>
  173.                 </div>
  174.             </div>
  175.         </div>
  176.     </section>
  178.     {# ===================== BANDEAU ORANGE (module index, tablette) ===================== #}
  179.     <section class="band-contact-area calendly-band">
  180.         <picture>
  181.             <source srcset="{{ asset('/assets/images/agexv4/calendly/agenda.webp') }}" type="image/webp">
  182.             <img class="calendly-band-tablet" src="{{ asset('/assets/images/agexv4/calendly/agenda.png') }}" alt="illustration agenda Calendly">
  183.         </picture>
  184.         <div class="container">
  185.             <div class="d-flex flex-column align-items-center" data-aos="fade-up">
  186.                 <h2 class="band-title">
  187.                     Gagnez du temps dès aujourd'hui !
  188.                 </h2>
  189.                 <p>Simplifiez votre gestion de rendez-vous en activant la prise de RDV en ligne</p>
  190.                 <a href="#form__contact" class="btn regular black">
  191.                     <span>
  192.                         Demandez l'intégration Calendly
  193.                         <svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
  194.                             <path d="M5.38477 0.880859L9.70013 5.00007L5.38477 9.11928" stroke="white"
  195.                                   stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  196.                             <path d="M9.69975 5L1.2998 5" stroke="white" stroke-width="1.5" stroke-linecap="round"
  197.                                   stroke-linejoin="round"/>
  198.                         </svg>
  199.                     </span>
  200.                 </a>
  201.             </div>
  202.         </div>
  203.     </section>
  205.     {# ===================== AUDIT / FORMULAIRE (module index) ===================== #}
  206.     <div id="form__contact"></div>
  207.     <section class="contact-area pt-50 calendly-contact">
  208.         <div class="container">
  209.             <div class="row align-items-center">
  210.                 <div class="col-xl-6 col-lg-7">
  211.                     <div class="section-title left" data-aos="fade-right">
  212.                         <span class="sub-title text-green">
  213.                             JE SOUHAITE ACTIVER CALENDLY SUR MON SITE
  214.                         </span>
  215.                         <h2 class="title container-shape">
  216.                             <svg class="shape arrow" width="113" height="57" viewBox="0 0 113 57" fill="none"
  217.                                  xmlns="http://www.w3.org/2000/svg">
  218.                                 <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"
  219.                                       stroke="#FC6F1F" stroke-width="4" stroke-linecap="round"/>
  220.                             </svg>
  221.                             Prêt à activer la prise de rendez-vous en ligne ?
  222.                         </h2>
  223.                         <p>
  224.                             Remplissez le formulaire ci-contre, on s'occupe de tout
  225.                         </p>
  226.                     </div>
  227.                 </div>
  228.                 <div class="col-xl-6 col-lg-5" data-aos="fade-left">
  229.                     <div class="contact-form" data-aos="fade-left" data-aos-delay="100">
  230.                         <h2 class="title">
  231.                             Ce widget
  232.                             <span class="text-green text-underline">
  233.                             m'intéresse
  234.                             <svg width="121" height="13" viewBox="0 0 121 13" fill="none"
  235.                                  xmlns="http://www.w3.org/2000/svg">
  236.                                 <path d="M2.2998 10.07C52.459 2.41211 78.8787 2.41211 118.7 2.41211" stroke="#7CD325"
  237.                                       stroke-width="4" stroke-linecap="round"/>
  238.                             </svg>
  239.                         </span>
  240.                         </h2>
  241.                         {{ form_start(form_audit) }}
  242.                         {{ form_row(form_audit.page, { "value" : title }) }}
  244.                         {{ form_widget(form_audit) }}
  246.                         <button type="submit" class="btn regular primary">
  247.                             <span>
  248.                                 Envoyer votre demande
  249.                                 <svg width="12" height="13" viewBox="0 0 12 13" fill="none"
  250.                                      xmlns="http://www.w3.org/2000/svg">
  251.                                     <path d="M5.88477 2.7334L10.2001 6.85261L5.88477 10.9718" stroke="white"
  252.                                           stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  253.                                     <path d="M10.1998 6.85266L1.7998 6.85266" stroke="white" stroke-width="1.5"
  254.                                           stroke-linecap="round" stroke-linejoin="round"/>
  255.                                 </svg>
  256.                             </span>
  257.                         </button>
  259.                         {{ form_end(form_audit) }}
  260.                     </div>
  261.                 </div>
  262.             </div>
  263.         </div>
  264.     </section>
  266.     {# ===================== NEWSLETTER (standard) ===================== #}
  267.     <section class="newsletter-area">
  268.         <div class="shape-agency">
  269.             <picture>
  270.                 <source srcset="{{ asset('assets/images/agexv4/shapes/logo3D.webp') }}" type="image/webp">
  271.                 <img src="{{ asset('assets/images/agexv4/shapes/logo3D.png') }}" alt="logo agence">
  272.             </picture>
  273.         </div>
  274.         <div class="container">
  275.             <div class="form-container">
  276.                 <h2 class="main-title" data-aos="fade-left">Abonnez-vous à <br> notre newsletter</h2>
  277.                 <p data-aos="fade-right" data-aos-delay="200">Un support indispensable pour les Experts-comptables !</p>
  278.                 {{ form_start(form_news2) }}
  279.                 <div class="input-newsletter" data-aos="fade-left" data-aos-delay="100">
  280.                     <div class="icon">
  281.                         <svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
  282.                             <g clip-path="url(#clip0_434_9342)">
  283.                                 <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"/>
  284.                             </g>
  285.                             <defs>
  286.                                 <clipPath id="clip0_434_9342">
  287.                                     <rect width="17.5" height="20" fill="white" transform="matrix(1 0 0 -1 0 20.1904)"/>
  288.                                 </clipPath>
  289.                             </defs>
  290.                         </svg>
  291.                     </div>
  292.                     {{ form_row(form_news2.name) }}
  293.                 </div>
  294.                 <div class="input-newsletter" data-aos="fade-right" data-aos-delay="200">
  295.                     <div class="icon">
  296.                         <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
  297.                             <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"/>
  298.                         </svg>
  299.                     </div>
  300.                     {{ form_row(form_news2.email) }}
  301.                 </div>
  302.                 <button type="submit" class="btn regular black" data-aos="fade-up" data-aos-delay="300">
  303.                     <span>
  304.                         Je m'inscris à la newsletter
  305.                     </span>
  306.                 </button>
  307.                 {{ form_end(form_news2) }}
  308.             </div>
  309.         </div>
  310.     </section>
  312.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  313.     <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'></script>
  314.     <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  315.     <script src="{{ asset('/assets/js/carouselLogo.js') }}"></script>
  317.     <script>
  318.         document.addEventListener("DOMContentLoaded", function () {
  319.             var btnOpenVideo = document.getElementById('openModalVideoAgence');
  320.             var containerVideo = document.getElementById('containerVideoHp');
  321.             var videoId = 'ISf4GpeEPhE';
  323.             if (btnOpenVideo && containerVideo) {
  324.                 btnOpenVideo.addEventListener('click', function () {
  325.                     if (!containerVideo.querySelector('iframe')) {
  326.                         var iframe = document.createElement('iframe');
  327.                         iframe.className = 'video-agence';
  328.                         iframe.src = 'https://www.youtube.com/embed/' + videoId + '?autoplay=1&rel=0';
  329.                         iframe.setAttribute('frameborder', '0');
  330.                         iframe.setAttribute('allow', 'autoplay; encrypted-media; picture-in-picture');
  331.                         iframe.setAttribute('allowfullscreen', '');
  333.                         containerVideo.innerHTML = '';
  334.                         containerVideo.classList.add('active');
  335.                         containerVideo.appendChild(iframe);
  336.                     }
  337.                 });
  338.             }
  339.         });
  340.     </script>
  342. {% endblock %}