templates/front/default/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Véhicule Sur Mesure{% endblock %}
  5. {% block body %}
  6.     {{ include('front/navbar.html.twig') }}
  7.     <main>
  8.         {{ include('front/section-principal.html.twig') }}
  9. {#
  10.         {{ include('front/section/button-fixed-tel.html.twig') }}
  11. #}
  12.         <section class="avantage">
  13.             <div class="item">
  14.                 <img src="images/icon/Group-3.svg">
  15.                 <div class="item-mobile">
  16.                     <p>
  17.                         Devis en temps réel et
  18.                     </p>
  19.                     <strong>
  20.                         RDV immédiats
  21.                     </strong>
  22.                 </div>
  24.             </div>
  25.             <div class="item">
  26.                 <img src="images/icon/Group-2.svg">
  27.                 <div class="item-mobile">
  28.                     <p>
  29.                         Remises exclusives
  30.                     </p>
  31.                     <strong>
  32.                         jusqu'à -80%
  33.                     </strong>
  34.                 </div>
  36.             </div>
  37.             <div class="item">
  38.                 <img src="images/icon/Group.svg">
  39.                 <div class="item-mobile">
  40.                     <p>
  41.                         Pièces et main-d'oeuvre
  42.                     </p>
  43.                     <strong>
  44.                         Garantie 1 AN
  45.                     </strong>
  46.                 </div>
  47.             </div>
  48.             <div class="item">
  49.                 <img src="images/icon/Group-1.svg">
  50.                 <div class="item-mobile">
  51.                     <p>
  52.                         Clients Satisfaits
  53.                     </p>
  54.                     <strong>
  55.                         +18 000 Clients / AN
  56.                     </strong>
  57.                 </div>
  58.             </div>
  59.         </section>
  60.         <section class="prestation">
  61.             <div class="padding-mobile">
  62.                 <h2 class="prestation-title">Les prestations d'entretien et de réparations</h2>
  63.                 <p class="prestation-paraph">L'entretien de votre voiture n'a jamais été aussi simple avec VSM ! Retrouvez l'ensemble des interventions disponibles sur notre site avec des remises pouvant atteindre jusqu'à -80% pour un budget auto maîtrisé.</p>
  65.             </div>
  66.              <div class="container">
  68.                 <div class="prestation-item">
  69.                     <a href="{{ path('rdv') }}">
  70.                         <div class="prestation-image">
  71.                             <img src="images/revision.png">
  72.                         </div>
  73.                         <div class="prestation-item-title">
  74.                             <h3>
  75.                                 RÉVISION / VIDANGE
  76.                             </h3>
  77.                             <p>
  78.                                 à partir de 69 €
  79.                             </p>
  80.                         </div>
  81.                         <div class="prestation-item-carateristique">
  82.                             <div class="flex-box prestation-item-carateristique-item">
  83.                                 <iconify-icon icon="carbon:checkmark-filled" style="color: #26d368;" width="20"></iconify-icon>
  84.                                 <p>Vidange et remplacement huile</p>
  85.                             </div>
  86.                             <div class="flex-box prestation-item-carateristique-item" >
  87.                                 <iconify-icon icon="carbon:checkmark-filled" style="color: #26d368;" width="20"></iconify-icon>
  88.                                 <p>Joint bouchon vidange</p>
  89.                             </div>
  90.                             <div class="flex-box prestation-item-carateristique-item" >
  91.                                 <iconify-icon icon="carbon:checkmark-filled" style="color: #26d368;" width="20"></iconify-icon>
  92.                                 <p>Changement filtre à huile</p>
  93.                             </div>
  94.                             <div class="flex-box prestation-item-carateristique-item" >
  95.                                 <iconify-icon icon="carbon:checkmark-filled" style="color: #26d368;" width="20"></iconify-icon>
  96.                                 <p>Changement filtre à air</p>
  97.                             </div>
  98.                             <div class="flex-box prestation-item-carateristique-item" >
  99.                                 <iconify-icon icon="carbon:checkmark-filled" style="color: #26d368;" width="20"></iconify-icon>
  100.                                 <p>Remplacement filtre à gasoil (diesel) ou bougies allumage (essence)</p>
  101.                             </div>
  102.                             <div class="flex-box prestation-item-carateristique-item">
  103.                                 <iconify-icon icon="carbon:checkmark-filled" style="color: #26d368;" width="20"></iconify-icon>
  104.                                 <p>Contrôles : éclairage, disques, plaquettes, suspensions, rotules, roulements, pneus (état et pression)</p>
  105.                             </div>
  106.                             <div class="flex-box prestation-item-carateristique-item" >
  107.                                 <iconify-icon icon="carbon:checkmark-filled" style="color: #26d368;" width="20"></iconify-icon>
  108.                                 <p>Mises à niveau lave-glace, liquide de refroidissement, pression des pneus</p>
  109.                             </div>
  110.                             <div class="flex-box prestation-item-carateristique-item" >
  111.                                 <iconify-icon icon="carbon:checkmark-filled" style="color: #26d368;" width="20"></iconify-icon>
  112.                                 <p>Contrôle du véhicule et remise à zéro du témoin d'entretien</p>
  113.                             </div>
  115.                         </div>
  116.                     </a>
  117.                 </div>
  119.                 <div class="prestation-item">
  120.                     <a href="{{ path('rdv') }}">
  121.                         <div class="prestation-image">
  122.                             <img src="images/courroie.png">
  123.                         </div>
  124.                         <div class="prestation-item-title">
  125.                             <h3>
  126.                                 COURROIE DE DISTRIBUTION
  128.                             </h3>
  129.                             <p>
  130.                                 à partir de 399 €
  131.                             </p>
  132.                         </div>
  133.                         <div class="prestation-item-carateristique">
  134.                             <div class="flex-box prestation-item-carateristique-item">
  135.                                 <iconify-icon icon="carbon:checkmark-filled" style="color: #26d368;" width="20"></iconify-icon>
  136.                                 <p>Remplacement de courroie de distribution</p>
  137.                             </div>
  138.                             <div class="flex-box prestation-item-carateristique-item">
  139.                                 <iconify-icon icon="carbon:checkmark-filled" style="color: #26d368;" width="20"></iconify-icon>
  140.                                 <p>Changement des galets de distribution</p>
  141.                             </div>
  142.                             <div class="flex-box prestation-item-carateristique-item">
  143.                                 <iconify-icon icon="carbon:checkmark-filled" style="color: #26d368;" width="20"></iconify-icon>
  144.                                 <p>Changement de la pompe à eau</p>
  145.                             </div>
  146.                             <div class="flex-box prestation-item-carateristique-item">
  147.                                 <iconify-icon icon="carbon:checkmark-filled" style="color: #26d368;" width="20"></iconify-icon>
  148.                                 <p>Remplacement du liquide de refroidissement</p>
  149.                             </div>
  150.                             <div class="flex-box prestation-item-carateristique-item">
  151.                                 <iconify-icon icon="carbon:checkmark-filled" style="color: #26d368;" width="20"></iconify-icon>
  152.                                 <p>Changement de la courroie d’accessoires</p>
  153.                             </div>
  154.                             <div class="flex-box prestation-item-carateristique-item">
  155.                                 <iconify-icon icon="carbon:checkmark-filled" style="color: #26d368;" width="20"></iconify-icon>
  156.                                 <p>Changement des galets d’accessoires (non compris dans le devis, le garage peut vous conseiller et si besoin vous proposer un devis séparément)</p>
  157.                             </div>
  158.                         </div>
  159.                     </a>
  160.                 </div>
  162.                 <div class="prestation-item">
  163.                     <a href="{{ path('rdv') }}">
  164.                         <div class="prestation-image">
  165.                             <img src="images/plaquette.png">
  166.                         </div>
  167.                         <div class="prestation-item-title">
  168.                             <h3>
  169.                                 PLAQUETTES DE FREINS
  170.                             </h3>
  171.                             <p>
  172.                                 à partir de 89 €
  173.                             </p>
  174.                         </div>
  175.                         <div class="prestation-item-carateristique">
  176.                             <div class="flex-box prestation-item-carateristique-item">
  177.                                 <iconify-icon icon="carbon:checkmark-filled" style="color: #26d368;" width="20"></iconify-icon>
  178.                                 <p>Remplacement des plaquettes de freins</p>
  179.                             </div>
  180.                             <div class="flex-box prestation-item-carateristique-item">
  181.                                 <iconify-icon icon="carbon:checkmark-filled" style="color: #26d368;" width="20"></iconify-icon>
  182.                                 <p>Changement des disques</p>
  183.                             </div>
  184.                             <div class="flex-box prestation-item-carateristique-item">
  185.                                 <iconify-icon icon="carbon:checkmark-filled" style="color: #26d368;" width="20"></iconify-icon>
  186.                                 <p>Intervention sur les mâchoires</p>
  187.                             </div>
  188.                         </div>
  189.                     </a>
  190.                 </div>
  192.                 {#<div class="prestation-item">
  193.                     <a href="">
  194.                         <div class="prestation-image">
  195.                             <img src="images/parallelisme.png">
  196.                         </div>
  197.                         <div class="prestation-item-title">
  198.                             <h3>
  199.                                 PARALLÉLISME
  200.                             </h3>
  201.                             <p>
  202.                                 à partir de 45 €
  203.                             </p>
  204.                         </div>
  205.                     </a>
  206.                 </div>
  208.                 <div class="prestation-item">
  209.                     <a href="">
  210.                         <div class="prestation-image">
  211.                             <img src="images/amortisseur.png">
  212.                         </div>
  213.                         <div class="prestation-item-title">
  214.                             <h3>
  215.                                 AMORTISSEURES
  216.                             </h3>
  217.                             <p>
  218.                                 à partir de 165 €
  219.                             </p>
  220.                         </div>
  221.                     </a>
  222.                 </div>
  224.                 <div class="prestation-item">
  225.                     <a href="">
  226.                         <div class="prestation-image">
  227.                             <img src="images/echappement.png">
  228.                         </div>
  229.                         <div class="prestation-item-title">
  230.                             <h3>
  231.                                 ECHAPPEMENT
  232.                             </h3>
  233.                             <p>
  234.                                 à partir de 101 €
  235.                             </p>
  236.                         </div>
  237.                     </a>
  238.                 </div>
  240.                 <div class="prestation-item">
  241.                     <a href="">
  242.                         <div class="prestation-image">
  243.                             <img src="images/embrayage.jpg">
  244.                         </div>
  245.                         <div class="prestation-item-title">
  246.                             <h3>
  247.                                 EMBRAYAGE
  248.                             </h3>
  249.                             <p>
  250.                                 à partir de 499 €
  251.                             </p>
  252.                         </div>
  253.                     </a>
  254.                 </div>
  256.                 <div class="prestation-item">
  257.                     <a href="">
  258.                         <div class="prestation-image">
  259.                             <img src="images/climatisation.jpg">
  260.                         </div>
  261.                         <div class="prestation-item-title">
  262.                             <h3>
  263.                                 CLIMATISATION
  264.                             </h3>
  265.                             <p>
  266.                                 à partir de 42 €
  267.                             </p>
  268.                         </div>
  269.                     </a>
  270.                 </div>
  272.                 <div class="prestation-item">
  273.                     <a href="">
  274.                         <div class="prestation-image">
  275.                             <img src="images/decalaminage.jpg">
  276.                         </div>
  277.                         <div class="prestation-item-title">
  278.                             <h3>
  279.                                 DÉCALAMINAGE
  280.                             </h3>
  281.                             <p>
  282.                                 à partir de 39 €
  283.                             </p>
  284.                         </div>
  285.                     </a>
  286.                 </div>#}
  288.             </div>
  289.             <div class="action">
  290.                 <div class="action-button">
  291.                     <a href="{{ path('entretien_meca_repa') }}">VOIR PLUS DE PRESTATIONS</a>
  292.                 </div>
  293.             </div>
  294.         </section>
  295.         <section style="background-color: black;padding-top: 30px;padding-bottom: 30px;}}">
  296.             <div class="offre">
  297.                 <div style="width: 25%">
  298.                     <img src="images/logo-blanc.png">
  299.                 </div>
  300.                 <div style="text-align: center;display: block;margin-bottom: 20px;">
  301.                     <p>Profitez d'un diagnostique offert</p>
  302.                     <a href="{{ path('contact') }}">
  303.                         -> En savoir plus
  304.                     </a>
  305.                 </div>
  306.             </div>
  307.         </section>
  308.         <section>
  309.             <h2 class="prestation-title">VSM en 1 minute</h2>
  310.             <div class="presentation-vsm">
  311.                 <div class="presentation-vsm-video">
  312.                     <video controls>
  313.                         <source src="video/presentation-vsm.mp4" type="video/mp4">
  314.                     </video>
  316.                 </div>
  318.                 <div class="presentation-vsm-detail">
  319.                     <div class="flex-box" style="margin-bottom: 40px">
  321.                         <img src="images/icon/loupe.svg" width="80px" height="auto" style="margin-right: 20px">
  323.                         <div style="max-width: 450px;">
  324.                             <h3 style="margin: 8px 0;">
  325.                                 Transparence
  326.                             </h3>
  327.                             <p style="margin: 0;">
  328.                                 Suivez vos travaux à distance en temps réel par photo et vidéo. Demandez également la restitution de vos anciennes pièces remplacées.
  329.                             </p>
  330.                         </div>
  331.                     </div>
  332.                     <div class="flex-box" style="margin-bottom: 40px">
  334.                             <img src="images/icon/Group-2.svg" width="80px" height="auto" style="margin-right: 20px">
  337.                         <div style="max-width: 450px;">
  338.                             <h3 style="margin: 8px 0;">
  339.                                 Prix
  340.                             </h3>
  341.                             <p style="margin: 0;">
  342.                                 Grossiste de pièces , nous avons supprimé un intermédiaire pour réduire la facture de nos clients .
  343.                             </p>
  344.                         </div>
  345.                     </div>
  346.                     <div class="flex-box">
  348.                             <img src="images/icon/Group-1.svg" width="80px" height="auto" style="margin-right: 20px">
  351.                         <div>
  352.                             <h3 style="margin: 8px 0;">
  353.                                 Satisfaction client
  355.                             </h3>
  356.                             <p style="margin: 0;">
  357.                                 Plus de 18 000 clients satisfaits chaque année .
  360.                             </p>
  361.                         </div>
  362.                     </div>
  363.                 </div>
  365.             </div>
  368.         </section>
  369.         <section style="background-color: black;color: white;">
  370.             <div>
  371.                 <h1 style="text-align: center;font-weight: 700;font-size: 40px;line-height: 1.2;padding-top: 40px;">
  372.                     Pourquoi choisir<br>
  373.                     Véhicule Sur Mesure ?
  374.                 </h1>
  375.                 <div class="flex-box padding-mobile section-transparence">
  376.                     <div class="flex-box text-size" style="flex-direction: column;">
  377.                         <h3 style="font-weight: 700;font-size: 2em;border-bottom: 8px solid #AF0202;padding-bottom: 10px;">
  378.                             TRANSPARENCE
  379.                         </h3>
  380.                         <span class="flex-box hoverrouge" style="align-items: center;">
  381.                             <p style="font-size: 50px;color: #AF0202;margin: 0;"> > </p> Vidéo des travaux
  382.                         </span>
  383.                         <span class="flex-box hoverrouge" style="align-items: center;">
  384.                             <p style="font-size: 50px;color: #AF0202;margin: 0;"> > </p> Restitution des pièces
  385.                         </span>
  386.                         <span class="flex-box hoverrouge" style="align-items: center;">
  387.                             <p style="font-size: 50px;color: #AF0202;margin: 0;"> > </p> Explication en détail
  388.                         </span>
  389.                     </div>
  390.                     <div class="mobile-presentation-image">
  391.                         <img class="presentation-image" src="images/presentation-3.jpeg">
  392.                     </div>
  393.                 </div>
  394.                 <div class="flex-box padding-mobile section-transparence">
  395.                     <div  class="mobile-presentation-image mobile-inverse">
  396.                         <img class="presentation-image" src="images/prensentation4.jpeg">
  397.                     </div>
  398.                     <div class="flex-box text-size" style="flex-direction: column;">
  399.                         <h3 style="font-weight: 700;font-size: 2em;border-bottom: 8px solid #AF0202;padding-bottom: 10px;">
  400.                             LE PRIX
  401.                         </h3>
  402.                         <span class="flex-box hoverrouge" style="align-items: center;">
  403.                             <p style="font-size: 50px;color: #AF0202;margin: 0;"> > </p> Origine Constructeur
  404.                         </span>
  405.                         <span class="flex-box hoverrouge" style="align-items: center;">
  406.                             <p style="font-size: 50px;color: #AF0202;margin: 0;"> > </p> Moins d'intermédiaire
  407.                         </span>
  408.                         <span class="flex-box hoverrouge" style="align-items: center;">
  409.                             <p style="font-size: 50px;color: #AF0202;margin: 0;"> > </p> Prix compétitif
  410.                         </span>
  411.                     </div>
  412.                 </div>
  413.             </div>
  414.         </section>
  415.         <section class="centre">
  416.             <div class="padding-mobile">
  417.                 <h2 class="prestation-title">Trouvez un garage près de chez vous</h2>
  418.                 <p class="prestation-paraph">VSM le premier réseau de garage digne de confiance . Retrouver la transparence grâce au suivi digitalisé de vos réparations, et nos tarifs imbattable près de chez vous.
  419.                 </p>
  420.             </div>
  421.             <div class="container">
  422.                 <div class="centre-item">
  423.                     <a href="">
  424.                         <img src="images/logo-blanc.png">
  425.                         <div class="centre-img-1">
  426.                             {#<img src="images/centre/gennevilliers.jpg">#}
  428.                         </div>
  429.                         <div class="centre-item-title">
  430.                             <h3>
  431.                                 GENNEVILLIERS
  432.                             </h3>
  433.                         </div>
  434.                         <div class="prestation-item-carateristique">
  435.                             <div class="prestation-item-carateristique-centre presentation-vsm-detail">
  436.                                 <p>Adresse : 13 Av. de la Gare, 92230 Gennevilliers</p>
  437.                                 <a href="tel:0179753300" class="button-navbar">
  438.                                     <button>
  439.                                         <span style="font-weight: 600;font-size: 16px;">
  440.                                         01 79 75 33 00
  441.                                         </span>
  442.                                     </button>
  443.                                 </a>
  444.                             </div>
  445.                         </div>
  446.                     </a>
  447.                 </div>
  449.                 <div class="centre-item">
  450.                     <a href="">
  451.                         <img src="images/logo-blanc.png">
  452.                         <div class="centre-img-2">
  453.                             {#<img src="images/centre/sartrouville.jpg">#}
  454.                         </div>
  455.                         <div class="centre-item-title">
  456.                             <h3>
  457.                                 SARTROUVILLE
  458.                             </h3>
  459.                         </div>
  460.                         <div class="prestation-item-carateristique">
  461.                             <div class="prestation-item-carateristique-centre presentation-vsm-detail">
  462.                                 <p>Adresse : 145 Rue Léon Jouhaux, 78500 Sartrouville</p>
  463.                                 <a href="tel:0179753232" class="button-navbar">
  464.                                     <button>
  465.                                         <span style="font-weight: 600;font-size: 16px;">
  466.                                         01 79 75 32 32
  467.                                         </span>
  468.                                     </button>
  469.                                 </a>
  470.                             </div>
  471.                         </div>
  472.                     </a>
  473.                 </div>
  475.                 <div class="centre-item">
  476.                     <a href="">
  477.                         <img src="images/logo-blanc.png">
  478.                         <div class="centre-img-3">
  479.                             {#<img src="images/centre/champigny.jpg">#}
  480.                         </div>
  481.                         <div class="centre-item-title">
  482.                             <h3>
  483.                                 CHAMPIGNY-SUR-MARNE
  484.                             </h3>
  485.                         </div>
  486.                         <div class="prestation-item-carateristique">
  487.                             <div class="prestation-item-carateristique-centre presentation-vsm-detail">
  488.                                 <p>Adresse : 4 Rue Juliette de Wils, 94500 Champigny-sur-Marne</p>
  489.                                 <a href="tel:0179753636" class="button-navbar">
  490.                                     <button>
  491.                                         <span style="font-weight: 600;font-size: 16px;">
  492.                                         01 79 75 36 36
  493.                                         </span>
  494.                                     </button>
  495.                                 </a>
  496.                             </div>
  497.                         </div>
  498.                     </a>
  499.                 </div>
  501.                 <div class="centre-item">
  502.                     <a href="">
  503.                         <img src="images/logo-blanc.png">
  504.                         <div class="centre-img-4">
  505.                             {#<img src="images/centre/chelles.jpg">#}
  506.                         </div>
  507.                         <div class="centre-item-title">
  508.                             <h3>
  509.                                 CHELLES
  510.                             </h3>
  511.                         </div>
  512.                         <div class="prestation-item-carateristique">
  513.                             <div class="prestation-item-carateristique-centre presentation-vsm-detail">
  514.                                 <p>Adresse : 6 Rue du Dr Calmette, 77500 Chelles</p>
  515.                                 <a href="tel:0179753131" class="button-navbar">
  516.                                     <button>
  517.                                         <span style="font-weight: 600;font-size: 16px;">
  518.                                         01 79 75 31 31
  519.                                         </span>
  520.                                     </button>
  521.                                 </a>
  522.                             </div>
  523.                         </div>
  524.                     </a>
  525.                 </div>
  527.                 <div class="centre-item">
  528.                     <a href="">
  529.                         <img src="images/logo-blanc.png">
  530.                         <div class="centre-img-5">
  531.                             {#<img src="images/centre/issy.jpg">#}
  532.                         </div>
  533.                         <div class="centre-item-title">
  534.                             <h3>
  535.                                 ISSY-LES-MOULINEAUX
  536.                             </h3>
  537.                         </div>
  538.                         <div class="prestation-item-carateristique">
  539.                             <div class="prestation-item-carateristique-centre presentation-vsm-detail">
  540.                                 <p>Adresse : 15 Bis Rue Auguste Gervais, 92130 Issy-les-Moulineaux</p>
  541.                                 <a href="tel:0179753838" class="button-navbar">
  542.                                     <button>
  543.                                         <span style="font-weight: 600;font-size: 16px;">
  544.                                         01 79 75 38 38
  545.                                         </span>
  546.                                     </button>
  547.                                 </a>
  548.                             </div>
  549.                         </div>
  551.                     </a>
  552.                 </div>
  554.                 <div class="centre-item">
  555.                     <a href="">
  556.                         <img src="images/logo-blanc.png">
  557.                         <div class="centre-img-6">
  558.                             {#<img src="images/centre/lbm.jpg">#}
  559.                         </div>
  560.                         <div class="centre-item-title">
  561.                             <h3>
  562.                                 LE-BLANC-MESNIL
  563.                             </h3>
  564.                         </div>
  565.                         <div class="prestation-item-carateristique">
  566.                             <div class="prestation-item-carateristique-centre presentation-vsm-detail">
  567.                                 <p>Adresse : 56 Av. du 8 Mai 1945, 93150 Le Blanc-Mesnil</p>
  568.                                 <a href="tel:0179753939" class="button-navbar">
  569.                                     <button>
  570.                                         <span style="font-weight: 600;font-size: 16px;">
  571.                                         01 79 75 39 39
  572.                                         </span>
  573.                                     </button>
  574.                                 </a>
  575.                             </div>
  576.                         </div>
  577.                     </a>
  578.                 </div>
  580.             </div>
  581.             <div class="liste-garage" style="margin-top: 35px">
  582.                 <div class="liste-garage-item">
  583.                     <a href="#">Garage Gennevilliers</a>
  584.                 </div>
  586.                 <div class="liste-garage-item">
  587.                     <a href="#">Garage Sartrouville</a>
  588.                 </div>
  589.                 <div class="liste-garage-item">
  590.                     <a href="#">Garage Le Blanc-Mesnil</a>
  591.                 </div>
  592.                 <div class="liste-garage-item">
  593.                     <a href="#">Garage Chelles</a>
  594.                 </div>
  595.                 <div class="liste-garage-item">
  596.                     <a href="#">Garage Issy-Les-Moulineaux</a>
  597.                 </div>
  598.                 <div class="liste-garage-item">
  599.                     <a href="#">Garage Champingy-sur-marne</a>
  600.                 </div>
  601.             </div>
  602.         </section>
  603.         {{ include('front/block/medias-vsm.html.twig') }}
  604.         {#<section class="bg-bleu">
  605.             <div class="critaire-left">
  606.                 <h3 style="color: white;padding: 30px ; font-size: 40px;font-weight: 400;border-bottom: 5px solid white; border-right: 5px solid white;border-bottom-right-radius: 50px;">TRANSPARENCE</h3>
  607.                 <div class="critaire-right-item">
  608.                     <div class="item-svg">
  609.                         <img src="images/video.svg" style="width: 50px">
  610.                         <p style="font-size: 18px;color: white;padding: 20px">Vidéo des travaux</p>
  611.                     </div>
  612.                     <div class="item-svg">
  613.                         <img src="images/retunr.svg" style="width: 50px">
  614.                         <p style="font-size: 18px;color: white;padding: 20px">Restitution des pièces</p>
  615.                     </div>
  616.                     <div class="item-svg">
  617.                         <img src="images/explication.svg" style="width: 50px">
  618.                         <p style="font-size: 18px;color: white;padding: 20px">Explication en détail</p>
  619.                     </div>
  620.                 </div>
  621.             </div>
  622.             <div class="critaire-left">
  623.                 <h3 style="color: white;padding: 30px ; font-size: 40px;font-weight: 400;border-bottom: 5px solid white; border-right: 5px solid white;border-bottom-right-radius: 50px;">Le Prix</h3>
  624.                 <div class="critaire-right-item">
  625.                     <div class="item-svg">
  626.                         <img src="images/video.svg" style="width: 50px">
  627.                         <p style="font-size: 18px;color: white;padding: 20px">Origine constructeur</p>
  628.                     </div>
  629.                     <div class="item-svg">
  630.                         <img src="images/retunr.svg" style="width: 50px">
  631.                         <p style="font-size: 18px;color: white;padding: 20px">Moins d'intermédiaire</p>
  632.                     </div>
  633.                     <div class="item-svg">
  634.                         <img src="images/explication.svg" style="width: 50px">
  635.                         <p style="font-size: 18px;color: white;padding: 20px">Prix compétitif</p>
  636.                     </div>
  637.                 </div>
  638.             </div>
  641.         </section>#}
  642.         {{ include('front/block/satisfaction.html.twig') }}
  643.         {{ include('front/section/partnaires.html.twig') }}
  644.     </main>
  645.     <script>
  646.         let image = document.getElementById("article-journal");
  647.         let image2 = document.getElementById("article-journal2");
  648.         /*image.addEventListener("mouseover", function (){
  649.             document.getElementById("article-automoto").style.maxWidth= "200px";
  651.             setTimeout(function() {
  652.                 document.getElementById("article-automoto").style.maxWidth= "600px";
  653.             }, 500);
  654.         },false);*/
  655.         image.onmouseover=function (){
  656.             mouseOver();
  657.             LogoIdgarageOut();
  658.             LogoAutomotoOut();
  660.         };
  661.         image.onmouseout=function(){
  662.             mouseOut();
  663.             LogoIdgarageOn();
  664.             LogoAutomotoOn();
  665.         };
  666.         image2.onmouseover=function (){
  667.             mouseOver()
  668.             LogoAutomotoOut();
  669.             LogoGennevilliersOut();
  670.         };
  671.         image2.onmouseout=function(){
  672.             mouseOut();
  673.             LogoAutomotoOn();
  674.             LogoGennevilliersOn();
  676.         };
  678.         function mouseOver(){
  679.             document.getElementById("article-automoto").style.maxWidth= "200px";
  680.         }
  682.         function mouseOut(){
  683.             document.getElementById("article-automoto").style.maxWidth= "600px";
  684.         }
  686.         function LogoGennevilliersOut(){
  687.             document.getElementById("logo-gennevilliers").style.display="none";
  688.         }
  690.         function LogoGennevilliersOn(){
  691.             document.getElementById("logo-gennevilliers").style.display="inline";
  692.         }
  694.         function LogoIdgarageOut(){
  695.             document.getElementById("logo-idgarages").style.display="none";
  696.         }
  698.         function LogoIdgarageOn(){
  699.             document.getElementById("logo-idgarages").style.display="inline";
  700.         }
  702.         function LogoAutomotoOut(){
  703.             document.getElementById("logo-automoto").style.display="none";
  704.         }
  706.         function LogoAutomotoOn(){
  707.             document.getElementById("logo-automoto").style.display="inline";
  708.         }
  711.         function toggleMenu(){
  712.             var element = document.getElementById('section-navbar-center');
  713.             if(element.classList.contains('open')){
  714.                 document.getElementById("logo-vsm").src="images/logo-vsm.png";
  715.                 element.classList.remove('open');
  717.             }else{
  719.                 element.classList.add('open');
  720.                 setTimeout(()=>{
  721.                     document.getElementById("logo-vsm").src="images/logo-transparent.png";
  722.                 },'500');
  725.             }
  726.         }
  729.     </script>
  730.     {{ include('front/footer.html.twig') }}
  731. {% endblock %}