templates/front/default/devenir-partenaire3.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Devenir Franchisé{% endblock %}
  5. {% block body %}
  7.     {{ include('front/navbar.html.twig') }}
  8. <main>
  10.     <img src="/images/devenir-partenaire.png" class="mobile-padding-top" style="margin: auto;width: 100%;display: block;">
  12.     <a href="{{ path('app_front_franchise_new') }}" class="button-formilaire-candida button-a-absolut">
  13.         ACCÈDER AU FORMULAIRE DE CANDIDATURE
  14.     </a>
  15. {#
  16.     {{ include('front/section/button-fixed-tel.html.twig') }}
  17. #}
  18.     <section class="section1-partenaire">
  19.         <div class="contain">
  20.             <h2 class="prestation-title h2-franchise title-fira titre-responsive-border">
  21.                 <iconify-icon icon="material-symbols:star" style="color: #d3c214;" width="50" class="icone-center mobile-none"></iconify-icon>
  23.                 LES 3 CLÉS DU SUCCÈS
  24.                 <iconify-icon icon="material-symbols:star" style="color: #d3c214;" width="50" class="icone-center mobile-none"></iconify-icon>
  26.             </h2>
  27.         </div>
  29.     </section>
  30.     <section class="container-small">
  31.         <div class="section-principal-devenir-franchise">
  32.             <div class="width-moitie" style="display: flex;">
  33.                 <div class="section-principal-devenir-franchise-bloc-text">
  34.                     <div class="img-prix-imbatable">
  35.                         <h3 class="titre-satisfy no-margin-bottom no-margin-top">Une Expérience Client</h3>
  37.                         <h3 class="titre-dm no-margin-top no-margin-bottom color-red-theme">
  38.                             <iconify-icon icon="material-symbols:star" style="color: #d3c214;" width="50" class="icone-center"></iconify-icon>
  39.                             HAUT DE GAMME
  40.                         </h3>
  41.                     </div>
  42.                     <div class="section-principal-devenir-franchise-text">
  43.                         <p>VSM à totalement révolutionné
  44.                             l'expérience client dans un garage.<br>
  45.                             Nos ateliers ont mis en place un niveau d'exigence
  46.                             d'accueil client jamais vu dans ce secteur d'activité.<br><br>
  47.                             Aussi, nous avons crée le VSM COFFEE.
  48.                             Privilège jamais vu dans un garage, VSM offre à ses clients
  49.                             un salon d'attente reposant et chic, inspiré de l'hôtellerie
  50.                             de luxe.</p>
  51.                     </div>
  52.                 </div>
  54.             </div>
  55.             <div class="width-moitie mobile-display image-mobile-width">
  56.                 <img src="/images/devenir-partenaire-photo3.jpg" class="img-noir-blanc">
  57.             </div>
  58.             <div class="width-moitie section-principal-devenir-franchise-img">
  59.                 <img src="/images/devenir-partenaire-photo3.jpg" class="img-noir-blanc">
  60.             </div>
  61.             <div class="width-moitie section-principal-devenir-franchise-img">
  62.                 <img src="/images/devenir-partenaire-photo2CC.png" class="img-noir-blanc">
  63.             </div>
  64.             <div class="width-moitie" style="display: flex;background-color: black;">
  65.                 <div class="section-principal-devenir-franchise-bloc-text">
  66.                     <div class="img-prix-imbatable">
  67.                         <h3 class="titre-satisfy no-margin-bottom color-white  no-margin-top">Une Révolution</h3>
  69.                         <h3 class="titre-dm no-margin-top no-margin-bottom color-red-theme">
  70.                             <iconify-icon icon="material-symbols:star" style="color: #d3c214;" width="50" class="icone-center"></iconify-icon>
  71.                             DIGITAL
  72.                         </h3>
  73.                     </div>
  74.                     <div class="section-principal-devenir-franchise-text">
  75.                         <p style="color:white;">VSM
  76.                             crée un service digital
  77.                             révolutionnaire qui permet à chaque client de suivre en
  78.                             temps réel à distance les travaux effectués, les pièces
  79.                             remplacées, les pièces usagées, ainsi que les futurs frais
  80.                             prévoir sur leurs véhicules de leur propres yeux.<br>
  81.                             Grace à cette innovation digitale le client retrouve enfin
  82.                             confiance en son garagiste.</p>
  83.                     </div>
  84.                 </div>
  86.             </div>
  87.             <div class="width-moitie mobile-display image-mobile-width">
  88.                 <img src="/images/devenir-partenaire-photo2CC.png" class="img-noir-blanc">
  89.             </div>
  91.             <div class="width-moitie" style="display: flex;">
  92.                 <div class="section-principal-devenir-franchise-bloc-text">
  93.                     <div class="img-prix-imbatable">
  94.                         <h3 class="titre-satisfy no-margin-bottom  no-margin-top">Des Prix</h3>
  96.                         <h3 class="titre-dm no-margin-top no-margin-bottom color-red-theme">
  97.                             <iconify-icon icon="material-symbols:star" style="color: #d3c214;" width="50" class="icone-center"></iconify-icon>
  98.                             IMBATTABLE
  99.                         </h3>
  100.                     </div>
  101.                     <div class="section-principal-devenir-franchise-text">
  102.                         <p>VSM à réussi un exploit très apprécié
  103.                             par nos clients :<br>
  104.                             Réduire drastiquement le coût de l'entretien d'un
  105.                             véhicule.<br>
  106.                             Cette révolution à eu lieu en supprimant tout les
  107.                             intermédiaires
  108.                             de l'approvisionnement
  109.                             en pièces
  110.                             détachées.</p>
  111.                     </div>
  112.                 </div>
  114.             </div>
  115.             <div class="width-moitie section-principal-devenir-franchise-img">
  116.                 <img src="/images/devenir-partenaire-photo1CC.png" class="img-noir-blanc">
  117.             </div>
  118.             <div class="width-moitie mobile-display image-mobile-width">
  119.                 <img src="/images/devenir-partenaire-photo1CC.png" class="img-noir-blanc">
  120.             </div>
  121.         </div>
  122.     </section>
  123.     <section class="section2-partenaire">
  124.         <div class="contain">
  125.             <h1 style="font-size: 2.0em; color: white;text-align: center;margin-top: 0;" >LE FRANCHISÉ <font color="#EA3737">VSM</font> IDÉAL</h1>
  126.             <div class="section2-partenaire-int">
  127.                 <div class="section2-partenaire-int-video">
  128.                     <img src="/images/devenir-partenaire-photo4.jpeg" alt="image partenaire">
  129.                 </div>
  130.                 <div class="section2-partenaire-int-info">
  131.                     <div class="section2-partenaire-int-info-width">
  132.                         <p><font color="#EA3737" style="font-weight: bold;">VSM</font> recherche des partenaires avec des qualités de management, de commerçant et surtout de <font color="#EA3737" style="font-weight: bold";>chef d’entreprise</font>, maîtrisant tous les aspects liés au fonctionnement d’une entreprise, prêt à endosser le rôle de garant de la rentabilité de leur entreprise et de l’image de VSM.
  133.                         </p>
  134.                         <p><font color="#EA3737"  style="font-weight: bold;">VSM</font> recrute des profils exploitants qui sauront s’impliquer à 100% dans leur établissement.</p>
  136.                         <a class="a-button" href="#">
  137.                             <span>RECEVOIR IMMÉDIATEMENT</span>
  138.                             <span>
  140.                         LE DOSSIER DE PRÉSENTATION
  141.                     </span>
  143.                         </a>
  144.                     </div>
  145.                 </div>
  146.             </div>
  148.         </div>
  149.     </section>
  150.     <section class="condition-partenaire" style="margin: 70px auto;">
  151.         <div class="contain">
  152.             <h1 class="title-h1">LES CONDITIONS D'ENTRÉES</h1>
  154.             <div class="condition-partenaire-icon">
  155.                 <div class="icon-block">
  156.                     <img src="/images/svg/dollard.svg" style="width: 105px;">
  157.                     <h4>APPORT</h4>
  158.                     <p>25 000 €</p>
  159.                 </div>
  160.                 <div class="icon-block">
  161.                     <img src="/images/svg/hand.svg" style="width: 105px;">
  162.                     <h4>DROIT D'ENTRÉES</h4>
  163.                     <p>15 000 €</p>
  164.                 </div>
  165.                 <div class="icon-block">
  166.                     <img src="/images/svg/dollards.svg" style="width: 105px;">
  167.                     <h4>INVEST. GLOBAL</h4>
  168.                     <p>120 000 €</p>
  169.                 </div>
  170.                 <div class="icon-block">
  171.                     <img src="/images/svg/growth.svg" style="width: 105px;">
  172.                     <h4>CA 2 ANS</h4>
  173.                     <p>600 000 €</p>
  174.                 </div>
  175.             </div>
  176.         </div>
  179.     </section>
  180.     <section style="width: 100%;text-align: center;">
  181.         <img src="/images/devenir-partenaire-photo5.png" class="image-devenir-partenaire" style="margin: auto;">
  182.         <a class="a-button-absolut" href="#">
  183.             <span>RECEVOIR IMMÉDIATEMENT</span>
  184.             <span>
  186.                         LE DOSSIER DE PRÉSENTATION
  187.                     </span>
  189.         </a>
  190.     </section>
  191.     <section style="width: 100%;text-align: center;background-color: black;box-shadow: 0px -15px 23px black;">
  192.             <h1 style="color: white;padding-top:50px;font-size: 2.5rem;text-align: left;margin-left: 30px;margin-bottom: 0;">DEVENEZ FRANCHISÉ</h1>
  193.             <img src="/images/partenaire-etape.png" class="img-notre-accompagnement" style="margin: auto;">
  194.     </section>
  195.     {#<section style="width: 100%;text-align: center;">
  196.         <img src="/images/devenir-partenaire.png" style="margin: auto;width: 100%;">
  197.     </section>#}
  198.     <a href="{{ path('app_front_franchise_new') }}" class="button-formilaire-candida button-a-absolut button-etape-partenaire">
  199.         ACCÈDER AU FORMULAIRE DE CANDIDATURE
  200.     </a>
  201.     {{ include('front/block/medias-vsm.html.twig') }}
  202.     <section style="background-color: black;padding-top: 30px;padding-bottom: 30px;}}">
  203.         <div class="offre">
  204.             <div style="width: 20%">
  205.                 <img src="images/logo-blanc.png">
  206.             </div>
  207.             <div style="text-align: center;display: block;margin-bottom: 20px;">
  208.                 <p style="font-size: 17px;margin:50px 0;">VOUS SEREZ CONTACTÉ DANS LES PLUS BREFS DÉLAIS PAR NOTRE SERVICE DÉVELOPPEMENT
  209.                 </p>
  210.                 <a href="{{ path('app_front_franchise_new') }}" class="mobile-none" style="font-size: 18px;padding: 18px;margin:0 30px;">
  211.                     ACCÈDER AU FORMULAIRE DE CANDIDATURE
  212.                 </a>
  213.                 <a class="a-button-mobile" href="{{ path('app_front_franchise_new') }}">
  214.                     <span>ACCÈDER AU FORMULAIRE</span>
  215.                     <span>
  217.                         DE CANDIDATURE
  218.                     </span>
  220.                 </a>
  221.             </div>
  222.         </div>
  223.     </section>
  224.     {#<section style="margin: 60px auto;">
  225.         <div class="contain">
  226.             <div class="section3-partenaire">
  227.                 <div style="display: flex;align-items: center;">
  228.                     <h1 style="font-size: 38px">
  229.                         VSM AUJOURD'HUI
  230.                     </h1>
  231.                 </div>
  232.                 <div class="section3-partenaire-info">
  233.                     <div class="section3-partenaire-info-icon">
  234.                         <iconify-icon icon="mdi:company" width="40px" style="color: #af0202;"></iconify-icon>
  235.                         <p>PRÈS DE 6 GARAGES OUVERTS À CE JOUR</p>
  236.                     </div>
  237.                     <div class="section3-partenaire-info-icon">
  238.                         <iconify-icon icon="material-symbols:new-label-outline" width="40px" style="color: #af0202;"></iconify-icon>
  239.                         <p>5 OUVERTURES EN 2021</p>
  240.                     </div>
  241.                     <div class="section3-partenaire-info-icon">
  242.                         <iconify-icon icon="material-symbols:location-on" width="40px" style="color: #af0202;"></iconify-icon>
  243.                         <p>PRÉSENCE SUR TOUT ILE-DE-FRANCE EN 2021</p>
  244.                     </div>
  246.                 </div>
  247.             </div>
  249.         </div>
  251.     </section>#}
  253.     {#<div class="separation"></div>#}
  254.     {{ include('front/section/partnaires.html.twig') }}
  255. </main>
  256.     <script>
  257.         let image = document.getElementById("article-journal");
  258.         let image2 = document.getElementById("article-journal2");
  259.         /*image.addEventListener("mouseover", function (){
  260.             document.getElementById("article-automoto").style.maxWidth= "200px";
  262.             setTimeout(function() {
  263.                 document.getElementById("article-automoto").style.maxWidth= "600px";
  264.             }, 500);
  265.         },false);*/
  266.         image.onmouseover=function (){
  267.             mouseOver();
  268.             LogoIdgarageOut();
  269.             LogoAutomotoOut();
  271.         };
  272.         image.onmouseout=function(){
  273.             mouseOut();
  274.             LogoIdgarageOn();
  275.             LogoAutomotoOn();
  276.         };
  277.         image2.onmouseover=function (){
  278.             mouseOver()
  279.             LogoAutomotoOut();
  280.             LogoGennevilliersOut();
  281.         };
  282.         image2.onmouseout=function(){
  283.             mouseOut();
  284.             LogoAutomotoOn();
  285.             LogoGennevilliersOn();
  287.         };
  289.         function mouseOver(){
  290.             document.getElementById("article-automoto").style.maxWidth= "200px";
  291.         }
  293.         function mouseOut(){
  294.             document.getElementById("article-automoto").style.maxWidth= "450px";
  295.         }
  297.         function LogoGennevilliersOut(){
  298.             document.getElementById("logo-gennevilliers").style.display="none";
  299.         }
  301.         function LogoGennevilliersOn(){
  302.             document.getElementById("logo-gennevilliers").style.display="inline";
  303.         }
  305.         function LogoIdgarageOut(){
  306.             document.getElementById("logo-idgarages").style.display="none";
  307.         }
  309.         function LogoIdgarageOn(){
  310.             document.getElementById("logo-idgarages").style.display="inline";
  311.         }
  313.         function LogoAutomotoOut(){
  314.             document.getElementById("logo-automoto").style.display="none";
  315.         }
  317.         function LogoAutomotoOn(){
  318.             document.getElementById("logo-automoto").style.display="inline";
  319.         }
  322.         function toggleMenu(){
  323.             var element = document.getElementById('section-navbar-center');
  324.             if(element.classList.contains('open')){
  325.                 document.getElementById("logo-vsm").src="images/logo-vsm.png";
  326.                 element.classList.remove('open');
  328.             }else{
  330.                 element.classList.add('open');
  331.                 setTimeout(()=>{
  332.                     document.getElementById("logo-vsm").src="images/logo-transparent.png";
  333.                 },'500');
  336.             }
  337.         }
  340.     </script>
  341.     {{ include('front/footer.html.twig') }}
  342. {% endblock %}