templates/Front/live-linkedin/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('live-linkedin') }}
  11. {% endblock %}
  13. {% block body %}
  15.     {# ===================== HERO ===================== #}
  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.                             Participez à notre <br>
  23.                             <span class="text-secondary">Live Linkedin</span>
  24.                         </h1>
  25.                         <p>
  26.                             Chaque premier mardi du mois, Rudy vous donne rendez-vous pour un Live LinkedIn
  27.                             dédié aux Experts-comptables. <br>
  28.                             60 minutes pour booster la com de votre cabinet.
  29.                         </p>
  30.                         <div class="container-btns">
  31.                             <a href="#form__contact" class="btn secondary regular">
  32.                                 <span>
  33.                                     Inscrivez-vous au prochain Live LinkedIn
  34.                                     <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
  35.                                         <path d="M5.88477 1.88086L10.2001 6.00007L5.88477 10.1193" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  36.                                         <path d="M10.1998 6L1.7998 6" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  37.                                     </svg>
  38.                                 </span>
  39.                             </a>
  40.                         </div>
  41.                     </div>
  42.                 </div>
  43.                 <div class="col-xl-6 col-lg-6 col-md-12 col-12 d-flex align-items-center">
  44.                     <div class="hero-linkedin-visual" data-aos="zoom-in" data-aos-delay="100">
  45.                         <picture>
  46.                             <source srcset="{{ asset('/assets/images/agexv4/live-linkedin/hero.webp') }}" type="image/webp">
  47.                             <img src="{{ asset('/assets/images/agexv4/live-linkedin/hero.png') }}" alt="Live LinkedIn de l'agence des Experts-comptables">
  48.                         </picture>
  49.                     </div>
  50.                 </div>
  51.             </div>
  52.         </div>
  53.     </section>
  55.     {# ===================== LOGOS DE CONFIANCE ===================== #}
  56.     <section class="logo-area inline bg-secondary-light">
  57.         <div class="container-logo">
  58.             <span class="section-title__tagline" data-aos="fade-up">
  59.                 <span class="text-body">+550 cabinets</span>
  60.                 nous font déjà confiance
  61.             </span>
  62.             <div class="owl-carousel owl-custom" id="client-logos" data-aos="zoom-in" data-aos-delay="100">
  64.             </div>
  65.         </div>
  66.     </section>
  68.     {# ===================== AVANTAGES (module why-section-area, sans macaron) ===================== #}
  69.     <section class="why-section-area no-top linkedin-why">
  70.         <div class="container">
  71.             <div class="why-content">
  72.                 <div class="why-left">
  73.                     <div class="section-overline">Pendant les 60 minutes du live</div>
  74.                     <h2 class="why-main-title">
  75.                         Posez toutes vos questions sur la communication et le développement
  76.                         <span class="green-highlight">
  77.                             de votre cabinet
  78.                             <svg width="320" height="14" viewBox="0 0 320 14" fill="none" xmlns="http://www.w3.org/2000/svg">
  79.                                 <path d="M2.30078 11.3325C132 2.33252 199 3.74841 317.701 2.33252" stroke="#7CD325" stroke-width="4" stroke-linecap="round"/>
  80.                             </svg>
  81.                         </span>
  82.                     </h2>
  83.                     <p class="why-sub">Rudy vous répond en direct, avec <strong>des conseils concrets et applicables</strong>.</p>
  84.                     <div class="decorative-curve">
  85.                         <svg width="113" height="57" viewBox="0 0 113 57" fill="none" xmlns="http://www.w3.org/2000/svg">
  86.                             <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"/>
  87.                         </svg>
  88.                     </div>
  89.                 </div>
  91.                 <div class="why-right">
  92.                     <ul class="benefits-list">
  93.                         <li class="benefit-item" data-aos="fade-left"><span class="benefit-check"><span class="check-inner"><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></span></span><h3>Stratégie</h3></li>
  94.                         <li class="benefit-item" data-aos="fade-left" data-aos-delay="100"><span class="benefit-check"><span class="check-inner"><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></span></span><h3>Visibilité sur LinkedIn</h3></li>
  95.                         <li class="benefit-item" data-aos="fade-left" data-aos-delay="200"><span class="benefit-check"><span class="check-inner"><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></span></span><h3>Acquisition de nouveaux clients</h3></li>
  96.                         <li class="benefit-item" data-aos="fade-left" data-aos-delay="300"><span class="benefit-check"><span class="check-inner"><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></span></span><h3>Marketing du cabinet</h3></li>
  97.                         <li class="benefit-item" data-aos="fade-left" data-aos-delay="400"><span class="benefit-check"><span class="check-inner"><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></span></span><h3>Positionnement et différenciation</h3></li>
  98.                         <li class="benefit-item" data-aos="fade-left" data-aos-delay="500"><span class="benefit-check"><span class="check-inner"><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></span></span><h3>L'offre et le pricing</h3></li>
  99.                         <li class="benefit-item" data-aos="fade-left" data-aos-delay="600"><span class="benefit-check"><span class="check-inner"><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></span></span><h3>Marque employeur</h3></li>
  100.                     </ul>
  101.                 </div>
  102.             </div>
  103.         </div>
  104.     </section>
  106.     {# ===================== BANDEAU ORANGE ===================== #}
  107.     <section class="band-contact-area linkedin-band">
  108.         <span class="linkedin-band-tablet">
  109.             <picture>
  110.                 <source srcset="{{ asset('/assets/images/agexv4/live-linkedin/tablette.webp') }}" type="image/webp">
  111.                 <img src="{{ asset('/assets/images/agexv4/live-linkedin/tablette.png') }}" alt="illustration LinkedIn">
  112.             </picture>
  113.         </span>
  114.         <div class="container">
  115.             <div class="d-flex flex-column align-items-center" data-aos="fade-up">
  116.                 <h2 class="band-title">Rendez-vous le premier mardi du mois</h2>
  117.                 <p class="tablet-section">60 minutes d'échanges et des réponses concrètes pour votre cabinet</p>
  118.                 <a href="#form__contact" class="btn regular primary">
  119.                     <span>
  120.                         Je pose mes questions
  121.                         <svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
  122.                             <path d="M5.38477 0.880859L9.70013 5.00007L5.38477 9.11928" stroke="white" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
  123.                             <path d="M9.69975 5L1.2998 5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  124.                         </svg>
  125.                     </span>
  126.                 </a>
  127.             </div>
  128.         </div>
  129.     </section>
  131.     {# ===================== UN RDV QUI PLAÎT (image + texte) ===================== #}
  132.     <section class="linkedin-plait">
  133.         <div class="container">
  134.             <div class="row align-items-center">
  135.                 <div class="col-xl-6 col-lg-6" data-aos="fade-right">
  136.                     <span class="section-overline">Pas de conférence théorique, uniquement des réponses utiles</span>
  137.                     <h2 class="plait-title">
  138.                         Un rendez-vous qui plaît aux
  139.                         <span class="text-secondary text-underline-orange">
  140.                             Experts-comptables
  141.                             <svg width="330" height="13" viewBox="0 0 330 13" fill="none" xmlns="http://www.w3.org/2000/svg">
  142.                                 <path d="M2 10.5879C110 2.58789 200 3.84646 328 2.58789" stroke="#FC6F1F" stroke-width="3" stroke-linecap="round"/>
  143.                             </svg>
  144.                         </span>
  145.                     </h2>
  146.                     <p>
  147.                         Chaque mois, entre 150 et 250 Experts-comptables participent en direct, sans compter
  148.                         les nombreuses vues en replay. Pourquoi ce format fonctionne ?
  149.                         Parce qu'il est <strong>simple et interactif</strong> !
  150.                     </p>
  151.                 </div>
  152.                 <div class="col-xl-6 col-lg-6 d-flex justify-content-center" data-aos="fade-left" data-aos-delay="150">
  153.                     <picture>
  154.                         <source srcset="{{ asset('/assets/images/agexv4/live-linkedin/experts-comptables.webp') }}" type="image/webp">
  155.                         <img class="plait-img" src="{{ asset('/assets/images/agexv4/live-linkedin/experts-comptables.png') }}" alt="Experts-comptables en direct">
  156.                     </picture>
  157.                 </div>
  158.             </div>
  159.         </div>
  160.     </section>
  162.     {# ===================== FORMULAIRE ===================== #}
  163.     <div id="form__contact"></div>
  164.     <section class="contact-area pt-50 linkedin-contact">
  165.         <div class="container">
  166.             <div class="row align-items-center">
  167.                 <div class="col-xl-6 col-lg-7">
  168.                     <div class="section-title left" data-aos="fade-right">
  169.                         <span class="linkedin-avatar">
  170.                             <picture>
  171.                                 <source srcset="{{ asset('/assets/images/agexv4/live-linkedin/avis-client.webp') }}" type="image/webp">
  172.                                 <img src="{{ asset('/assets/images/agexv4/live-linkedin/avis-client.png') }}" alt="Rudy, animateur du Live LinkedIn">
  173.                             </picture>
  174.                         </span>
  175.                         <span class="sub-title text-green">Je prends rendez-vous maintenant</span>
  176.                         <h2 class="title">
  177.                             Posez vos questions avant le prochain Live
  178.                         </h2>
  179.                         <p>
  180.                             Vous ne pouvez pas être présent le jour du live ? Vous souhaitez être sûr que votre
  181.                             question soit abordée ? Posez votre question, Rudy la sélectionnera et y répondra
  182.                             pendant le prochain Live LinkedIn.
  183.                         </p>
  184.                         <span class="contact-arrow" aria-hidden="true">
  185.                             <svg width="113" height="57" viewBox="0 0 113 57" fill="none" xmlns="http://www.w3.org/2000/svg">
  186.                                 <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="3" stroke-linecap="round"/>
  187.                             </svg>
  188.                         </span>
  189.                     </div>
  190.                 </div>
  191.                 <div class="col-xl-6 col-lg-5" data-aos="fade-left">
  192.                     <div class="contact-form" data-aos="fade-left" data-aos-delay="100">
  193.                         <h2 class="title">
  194.                             Je pose
  195.                             <span class="text-green text-underline">
  196.                                 mes questions
  197.                                 <svg width="180" height="13" viewBox="0 0 180 13" fill="none" xmlns="http://www.w3.org/2000/svg">
  198.                                     <path d="M2.2998 10.07C52.459 2.41211 100 2.41211 177.7 2.41211" stroke="#7CD325" stroke-width="3" stroke-linecap="round"/>
  199.                                 </svg>
  200.                             </span>
  201.                         </h2>
  202.                         {{ form_start(form_question) }}
  203.                         {{ form_row(form_question.page, { "value" : title }) }}
  204.                         {{ form_widget(form_question) }}
  206.                         <button type="submit" class="btn regular primary">
  207.                             <span>
  208.                                 Envoyer ma question
  209.                                 <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
  210.                                     <path d="M5.88477 2.7334L10.2001 6.85261L5.88477 10.9718" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  211.                                     <path d="M10.1998 6.85266L1.7998 6.85266" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  212.                                 </svg>
  213.                             </span>
  214.                         </button>
  216.                         {{ form_end(form_question) }}
  217.                     </div>
  218.                 </div>
  219.             </div>
  220.         </div>
  221.     </section>
  223.     {# ===================== NEWSLETTER ===================== #}
  224.     <section class="newsletter-area">
  225.         <div class="shape-agency">
  226.             <picture>
  227.                 <source srcset="{{ asset('assets/images/agexv4/shapes/logo3D.webp') }}" type="image/webp">
  228.                 <img src="{{ asset('assets/images/agexv4/shapes/logo3D.png') }}" alt="logo agence">
  229.             </picture>
  230.         </div>
  231.         <div class="container">
  232.             <div class="form-container">
  233.                 <h2 class="main-title" data-aos="fade-left">Abonnez-vous à <br> notre newsletter</h2>
  234.                 <p data-aos="fade-right" data-aos-delay="200">Un support indispensable pour les Experts-comptables !</p>
  235.                 {{ form_start(form_news2) }}
  236.                 <div class="input-newsletter" data-aos="fade-left" data-aos-delay="100">
  237.                     <div class="icon">
  238.                         <svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
  239.                             <g clip-path="url(#clip0_434_9342)">
  240.                                 <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"/>
  241.                             </g>
  242.                             <defs>
  243.                                 <clipPath id="clip0_434_9342">
  244.                                     <rect width="17.5" height="20" fill="white" transform="matrix(1 0 0 -1 0 20.1904)"/>
  245.                                 </clipPath>
  246.                             </defs>
  247.                         </svg>
  248.                     </div>
  249.                     {{ form_row(form_news2.name) }}
  250.                 </div>
  251.                 <div class="input-newsletter" data-aos="fade-right" data-aos-delay="200">
  252.                     <div class="icon">
  253.                         <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
  254.                             <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"/>
  255.                         </svg>
  256.                     </div>
  257.                     {{ form_row(form_news2.email) }}
  258.                 </div>
  259.                 <button type="submit" class="btn regular black" data-aos="fade-up" data-aos-delay="300">
  260.                     <span>Je m'inscris à la newsletter</span>
  261.                 </button>
  262.                 {{ form_end(form_news2) }}
  263.             </div>
  264.         </div>
  265.     </section>
  267.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  268.     <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'></script>
  269.     <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  270.     <script src="{{ asset('/assets/js/carouselLogo.js') }}"></script>
  272. {% endblock %}