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

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ title }}{% endblock %}
  5. {% block description %}Fidélisez vos nouveaux collaborateurs et clients grâce à un Pack de Bienvenue personnalisé, clé en main, conçu par l'agence des Experts-comptables.{% endblock %}
  7. {% block stylesheets %}
  8.     {{ encore_entry_link_tags('fidelisation') }}
  9. {% endblock %}
  11. {% block body %}
  13.     {# ============================================================= #}
  14.     {#  SECTION 2 — HERO                                             #}
  15.     {# ============================================================= #}
  16.     <section class="hero-area fidelisation-hero">
  17.         <div class="container">
  18.             <div class="hero-heading" data-aos="zoom-in">
  19.                 <span class="tagline">DÉFINIR ENSEMBLE</span>
  20.                 <h1 class="hero-title">
  21.                     Fidélisez vos nouveaux<br>
  22.                     <span class="text-secondary">collaborateurs</span> et <span class="text-secondary">clients</span> !
  23.                 </h1>
  24.                 <p class="hero-subtitle">
  25.                     Experts-comptables, offrez un onboarding mémorable dès le premier jour avec notre Pack de Bienvenue personnalisé.
  26.                 </p>
  27.                 <a href="#form__contact" class="btn regular secondary">
  28.                     <span>
  29.                         Prenons rendez-vous
  30.                         <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
  31.                             <path d="M7 2.9165V11.0832" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  32.                             <path d="M11.0827 7L6.99935 11.0833L2.91602 7" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  33.                         </svg>
  34.                     </span>
  35.                 </a>
  36.             </div>
  37.         </div>
  38.     </section>
  40.     {# --- Carrousel de logos clients (identique à la page index) --- #}
  41.     <section class="logo-area inline bg-secondary-light">
  42.         <div class="container-logo">
  43.             <span class="section-title__tagline" data-aos="fade-up">
  44.                 <span class="text-body">+550 cabinets</span>
  45.                 nous font déjà confiance
  46.             </span>
  47.             <div class="owl-carousel owl-custom" id="client-logos" data-aos="zoom-in" data-aos-delay="100">
  48.             </div>
  49.         </div>
  50.     </section>
  52.     {# ============================================================= #}
  53.     {#  SECTION 3 — UN KIT CLÉ EN MAIN + CARTES                      #}
  54.     {# ============================================================= #}
  55.     <section class="kit-area">
  56.         <div class="container">
  57.             <div class="kit-visual" data-aos="fade-up">
  58.                 <img src="{{ asset('/assets/images/agexv4/fidelisation/produits-derives.png') }}" alt="Kit de bienvenue et produits dérivés personnalisés">
  59.             </div>
  61.             <div class="kit-heading" data-aos="fade-up">
  62.                 <span class="sub-title text-secondary">Nous nous occupons de tout</span>
  63.                 <h2 class="kit-title">Un kit clé<br class="br-mobile"> en main</h2>
  64.                 <p class="kit-text">
  65.                     L'agence des Experts-comptables gère l'ensemble du projet, de la création de votre kit de bienvenue à la livraison dans votre cabinet .
  66.                 </p>
  67.             </div>
  69.             <div class="kit-cards">
  70.                 {# --- Carte 1 : collaborateurs --- #}
  71.                 <div class="feature-card" data-aos="fade-right" data-aos-delay="100">
  72.                     <div class="feature-header">
  73.                         <span class="feature-icon">
  74.                             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  75.                                 <path d="M9.5 11a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  76.                                 <path d="M3 20.25a6.5 6.5 0 0 1 13 0" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  77.                                 <path d="M19.5 8.25v5M22 10.75h-5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  78.                             </svg>
  79.                         </span>
  80.                         <h3 class="feature-title">
  81.                             Pourquoi offrir un Pack de Bienvenue <strong>à vos nouveaux collaborateurs ?</strong>
  82.                         </h3>
  83.                     </div>
  84.                     <ul class="feature-list">
  85.                         {% for item in [
  86.                             "Renforcez <strong>le sentiment d'appartenance</strong> dès leur arrivée.",
  87.                             "Affirmez <strong>les valeurs et la culture</strong> de votre cabinet.",
  88.                             "<strong>Démarquez-vous</strong> et soignez votre marque employeur.",
  89.                             "<strong>Faites plaisir</strong> à vos nouveaux collaborateurs."
  90.                         ] %}
  91.                             <li>
  92.                                 <svg class="check-icon" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
  93.                                     <circle cx="11" cy="11" r="11" fill="#FC6F1F"/>
  94.                                     <path d="M6 11.2 9.4 14.6 16 8" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
  95.                                 </svg>
  96.                                 <span>{{ item|raw }}</span>
  97.                             </li>
  98.                         {% endfor %}
  99.                     </ul>
  100.                 </div>
  102.                 {# --- Carte 2 : clients --- #}
  103.                 <div class="feature-card" data-aos="fade-left" data-aos-delay="200">
  104.                     <div class="feature-header">
  105.                         <span class="feature-icon">
  106.                             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  107.                                 <rect x="4.5" y="3" width="15.5" height="18" rx="2.5" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
  108.                                 <path d="M12.25 12a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  109.                                 <path d="M8.75 17a3.5 3.5 0 0 1 7 0" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  110.                                 <path d="M4.5 8H2.25M4.5 12H2.25M4.5 16H2.25" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
  111.                             </svg>
  112.                         </span>
  113.                         <h3 class="feature-title">
  114.                             Pourquoi offrir un Pack de Bienvenue <strong>à vos nouveaux clients ?</strong>
  115.                         </h3>
  116.                     </div>
  117.                     <ul class="feature-list">
  118.                         {% for item in [
  119.                             "<strong>Fidélisez</strong> vos nouveaux clients.",
  120.                             "<strong>Démarquez</strong> votre cabinet.",
  121.                             "<strong>Renforcez votre image</strong> professionnelle.",
  122.                             "Encouragez des collaborations <strong>durables</strong>."
  123.                         ] %}
  124.                             <li>
  125.                                 <svg class="check-icon" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
  126.                                     <circle cx="11" cy="11" r="11" fill="#FC6F1F"/>
  127.                                     <path d="M6 11.2 9.4 14.6 16 8" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
  128.                                 </svg>
  129.                                 <span>{{ item|raw }}</span>
  130.                             </li>
  131.                         {% endfor %}
  132.                     </ul>
  133.                 </div>
  134.             </div>
  136.             <div class="kit-cta" data-aos="fade-up" data-aos-delay="200">
  137.                 <a href="#form__contact" class="btn regular primary">
  138.                     <span>
  139.                         Je planifie un RDV
  140.                         <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
  141.                             <path d="M5.88477 2.7334L10.2001 6.85261L5.88477 10.9718" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  142.                             <path d="M10.1998 6.85266L1.7998 6.85266" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  143.                         </svg>
  144.                     </span>
  145.                 </a>
  146.             </div>
  147.         </div>
  148.     </section>
  150.     {# ============================================================= #}
  151.     {#  SECTION 4 — BANDEAU CTA ORANGE (+ smiley décoratif)          #}
  152.     {# ============================================================= #}
  153.     <section class="engagement-cta-area">
  154.         {# Smiley décoratif (image Figma) : absolu, incliné, à cheval sur les 2 sections #}
  155.         <span class="engagement-smiley" aria-hidden="true">
  156.             <img src="{{ asset('/assets/images/agexv4/fidelisation/smiley.png') }}" alt="">
  157.         </span>
  158.         <div class="container">
  159.             <div class="engagement-inner" data-aos="zoom-in">
  160.                 <h2 class="engagement-title">
  161.                     Des collaborateurs engagés dès le premier jour s'investissent et restent !
  162.                 </h2>
  163.                 <p class="engagement-subtitle">
  164.                     Envie de renforcer la fidélisation et la satisfaction de vos équipes et de vos clients ?
  165.                 </p>
  166.                 <a href="#form__contact" class="btn regular white">
  167.                     <span>
  168.                         Contactez-nous
  169.                         <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
  170.                             <path d="M5.88477 2.7334L10.2001 6.85261L5.88477 10.9718" stroke="#042F35" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  171.                             <path d="M10.1998 6.85266L1.7998 6.85266" stroke="#042F35" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  172.                         </svg>
  173.                     </span>
  174.                 </a>
  175.             </div>
  176.         </div>
  177.     </section>
  179.     {# ============================================================= #}
  180.     {#  SECTION 5 — COMMENT ÇA MARCHE (steps + macaron prix)         #}
  181.     {# ============================================================= #}
  182.     <section class="steps-timeline-area fidelisation-steps">
  183.         {# Macaron prix : absolu, incliné, haut-gauche, à cheval sur les sections #}
  184.         <div class="macaron primary">
  185.             <p class="light">À PARTIR DE</p>
  186.             <span class="price container-lighter">29€<span class="lighter">90 HT</span></span>
  187.         </div>
  188.         <div class="container">
  189.             <div class="steps-content">
  190.                 {# Colonne gauche : titre + flèche animée #}
  191.                 <div class="steps-left container-shape" data-aos="fade-right">
  192.                     <svg class="shape arrow" width="108" height="65" viewBox="0 0 113 57" fill="none" xmlns="http://www.w3.org/2000/svg">
  193.                         <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"/>
  194.                     </svg>
  195.                     <div class="steps-overline">COMMENT ÇA MARCHE ?</div>
  196.                     <h2 class="steps-title">
  197.                         <span class="steps-highlight">
  198.                             Pourquoi
  199.                             <svg width="232" height="9" viewBox="0 0 232 9" fill="none" xmlns="http://www.w3.org/2000/svg">
  200.                                 <path d="M2.5 6.5C80.5 1 150 1.5 229.5 2.5" stroke="#7CD325" stroke-width="4" stroke-linecap="round"/>
  201.                             </svg>
  202.                         </span>
  203.                         nous confier la gestion de vos Packs de Bienvenue ?
  204.                     </h2>
  205.                     <p class="steps-description">
  206.                         Chaque point de suivi permet d'ajuster les annonces, les mots-clés, les pages d'atterrissage et le budget pour <strong>renforcer progressivement la performance</strong>.
  207.                     </p>
  208.                 </div>
  210.                 {# Flèche décorative (mobile uniquement) : entre le texte et la timeline #}
  211.                 <span class="steps-arrow-mobile" aria-hidden="true">
  212.                     <svg width="108" height="65" viewBox="0 0 113 57" fill="none" xmlns="http://www.w3.org/2000/svg">
  213.                         <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"/>
  214.                     </svg>
  215.                 </span>
  217.                 {# Colonne droite : timeline (puces = validés) #}
  218.                 <div class="steps-right" data-aos="fade-left" data-aos-delay="300">
  219.                     <div class="steps-timeline">
  220.                         {% for step in [
  221.                             "Nous échangeons sur vos besoins et vos valeurs.",
  222.                             "Nous concevons et personnalisons votre Pack de Bienvenue.",
  223.                             "Nous produisons vos goodies et supports de qualité.",
  224.                             "Nous livrons votre kit directement dans votre cabinet."
  225.                         ] %}
  226.                             <div class="step-item">
  227.                                 <div class="step-number">
  228.                                     <svg width="26" height="20" viewBox="0 0 26 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  229.                                         <path d="M2 10.5L9.5 18L24 2" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
  230.                                     </svg>
  231.                                 </div>
  232.                                 <div class="step-content">
  233.                                     <div class="step-text">{{ step }}</div>
  234.                                 </div>
  235.                             </div>
  236.                         {% endfor %}
  237.                     </div>
  238.                 </div>
  239.             </div>
  240.         </div>
  241.     </section>
  243.     {# ============================================================= #}
  244.     {#  SECTION 6 — CTA FINAL + FORMULAIRE                           #}
  245.     {# ============================================================= #}
  246.     <section class="contact-area fidelisation-contact" id="form__contact">
  247.         <div class="container">
  248.             <div class="row align-items-center">
  249.                 <div class="col-xl-6 col-lg-6">
  250.                     <div class="section-title left">
  251.                         <span class="sub-title text-green">
  252.                             AVANÇONS ENSEMBLE
  253.                         </span>
  254.                         <h2 class="title container-shape small">
  255.                             <svg class="shape arrow d-lg-block d-none" width="113" height="57" viewBox="0 0 113 57" fill="none" xmlns="http://www.w3.org/2000/svg">
  256.                                 <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"/>
  257.                             </svg>
  258.                             Prêt à fidéliser vos collaborateurs et vos clients dès le début ?
  259.                         </h2>
  260.                         <p>
  261.                             Contactez Rudy et son équipe dès aujourd'hui pour discuter de votre projet et personnaliser vos packs de bienvenue !
  262.                         </p>
  263.                     </div>
  264.                 </div>
  265.                 {# Flèche décorative (mobile uniquement) : entre le texte et le formulaire #}
  266.                 <div class="col-12 d-lg-none">
  267.                     <span class="contact-arrow-mobile" aria-hidden="true">
  268.                         <svg width="108" height="65" viewBox="0 0 113 57" fill="none" xmlns="http://www.w3.org/2000/svg">
  269.                             <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"/>
  270.                         </svg>
  271.                     </span>
  272.                 </div>
  274.                 <div class="col-xl-6 col-lg-6" data-aos="fade-left">
  275.                     <div class="contact-form">
  276.                         <h2 class="title">
  277.                             Je demande à être
  278.                             <span class="text-green text-underline">
  279.                                 contacté !
  280.                                 <svg width="130" height="12" viewBox="0 0 130 12" fill="none" xmlns="http://www.w3.org/2000/svg">
  281.                                     <path d="M2.2998 9.07C52.459 2.41211 78.879 2.41211 127.7 2.41211" stroke="#7CD325" stroke-width="4" stroke-linecap="round"/>
  282.                                 </svg>
  283.                             </span>
  284.                         </h2>
  285.                         {{ form_start(form_contact) }}
  286.                         {{ form_errors(form_contact) }}
  287.                         <div id="form_contact">
  288.                             {{ form_row(form_contact.name) }}
  289.                             {{ form_row(form_contact.email) }}
  290.                             {{ form_row(form_contact.telephone) }}
  291.                             {{ form_row(form_contact.rgpd) }}
  292.                             {{ form_row(form_contact.page, { "value" : title }) }}
  293.                             {{ form_widget(form_contact.captcha, { 'id': 'captcha_fidelisation' }) }}
  294.                         </div>
  295.                         <button type="submit" class="btn regular primary">
  296.                             <span>
  297.                                 Envoyer votre demande
  298.                                 <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
  299.                                     <path d="M5.88477 2.7334L10.2001 6.85261L5.88477 10.9718" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  300.                                     <path d="M10.1998 6.85266L1.7998 6.85266" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  301.                                 </svg>
  302.                             </span>
  303.                         </button>
  304.                         {{ form_end(form_contact, { 'render_rest': false }) }}
  305.                     </div>
  306.                 </div>
  307.             </div>
  308.         </div>
  309.     </section>
  311.     {# ============================================================= #}
  312.     {#  SECTION 7 — NEWSLETTER (composant partagé)                   #}
  313.     {# ============================================================= #}
  314.     <section class="newsletter-area">
  315.         <div class="shape-agency">
  316.             <picture>
  317.                 <source srcset="{{ asset('assets/images/agexv4/shapes/logo3D.webp') }}" type="image/webp">
  318.                 <img src="{{ asset('assets/images/agexv4/shapes/logo3D.png') }}" alt="logo agence">
  319.             </picture>
  320.         </div>
  321.         <div class="container">
  322.             <div class="form-container">
  323.                 <h2 class="main-title" data-aos="fade-left">Abonnez-vous à <br> notre newsletter</h2>
  324.                 <p data-aos="fade-right" data-aos-delay="200">Un support indispensable pour les Experts-comptables !</p>
  325.                 {{ form_start(form_news2) }}
  326.                 <div class="input-newsletter" data-aos="fade-left" data-aos-delay="100">
  327.                     <div class="icon">
  328.                         <svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
  329.                             <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"/>
  330.                         </svg>
  331.                     </div>
  332.                     {{ form_row(form_news2.name) }}
  333.                 </div>
  334.                 <div class="input-newsletter" data-aos="fade-right" data-aos-delay="200">
  335.                     <div class="icon">
  336.                         <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
  337.                             <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.3363 9.85026 13.4274 10 13.4404C10.1497 13.4274 10.2799 13.3363 10.4102 13.2842L18.75 6.05762Z" fill="#042F35"/>
  338.                         </svg>
  339.                     </div>
  340.                     {{ form_row(form_news2.email) }}
  341.                 </div>
  342.                 <button type="submit" class="btn regular black" data-aos="fade-up" data-aos-delay="300">
  343.                     <span>Je m'incris à la newsletter</span>
  344.                 </button>
  345.                 {{ form_end(form_news2) }}
  346.             </div>
  347.         </div>
  348.     </section>
  350.     {# Les 3 cartes promo (« Un projet à nous partager ? » …) sont déjà rendues #}
  351.     {# par le .footer-top de base.html.twig, comme sur la page index.          #}
  353. {% endblock %}
  355. {% block js %}
  356.     <script src="{{ asset('/assets/js/carouselLogo.js') }}"></script>
  357. {% endblock %}