templates/main/home.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Cover Design - Préparateur esthétique et mécanique automobile depuis 2005 - Chambéry{% endblock %}
  5. {% block description %}
  6.     <meta name="description" content="La référence dans la préparation, la rénovation et la personnalisation de tous types de véhicule. Préparateur esthétique et mécanique automobile pour les entreprises et les particuliers.">
  7. {% endblock %}
  9. {% block body %}
  11. <div class="page page-home">
  13.     {% if is_mobile %}
  15.         {# https://github.com/stamat/jquery.youtube-background #}
  16.         {# OPTION VIDEO
  17.         <div class="entete-video bg-trame">
  18.             <div data-ytbg-load-background data-ytbg-mute-button="true" data-ytbg-mobile="true" data-youtube="https://www.youtube.com/watch?v=vugHCa1T0bM"></div>
  19.             <div class="content">
  20.                 <div class="anim-intro-txt">
  21.                     <h1 class="element --first --mobile typo-white">
  22.                         <span class="typo-180">Saw What,</span>
  23.                         <br><span class="typo-color-site">créateur de vidéos</span>
  24.                     </h1>
  25.                 </div>
  26.             </div>
  27.         </div>
  28.         #}
  31.         {# mobile > OPTION : BG BIG image  #}
  32.         <div class="entete-home bg-trame" style="background-image: url({{ asset('build/images/fond-cover-design-01.jpg') }});">
  33.             <div class="content">
  34.                 <h1 class="typo-white typo-300">
  35.                     <span class="typo-principale-light typo-80 majuscule">Cover Design</span>
  36.                     <br>Préparateur esthétique <br>et mécanique automobile
  37.                 </h1>
  38.                 <span class="typo-principale-light typo-gray-500 typo-140">Depuis 2005 | Chambéry</span>
  39.             </div>
  40.             <div class="overlay"></div>
  41.         </div>
  44.     {% else %}
  46.         {# https://github.com/stamat/jquery.youtube-background #}
  47.         {# screen > OPTION VIDEO
  48.         <div class="entete-video bg-trame">
  50.             <div data-ytbg-load-background data-ytbg-mute-button="true" data-ytbg-play-button="true" data-youtube="https://www.youtube.com/watch?v=vugHCa1T0bM"></div>
  51.             <div class="content">
  52.                 <div class="anim-intro-txt">
  53.                     <h1 class="element --second typo-white">
  54.                         Saw What, <span class="typo-color-site">créateur de vidéos</span>
  55.                     </h1>
  56.                     <p class="element --first center typo-110 max-width-500 text-left typo-white typo-principale-bold">
  57.                         <span class="typo-principale-bold typo-color-site typo-150">Depuis 2005,</span>
  58.                         <br>Nous vous écoutons pour raconter votre histoire la plus authentique possible, sur votre produit, votre marque, votre entreprise, votre aventure...
  59.                     </p>
  60.                 </div>
  61.             </div>
  62.             <svg style="pointer-events: none" class="transition-part" width="100%" height="50px" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 75"><defs><style>.a{fill:none}.b{clip-path:url(#a)}.c,.d {fill: #ffffff;)}.d{opacity:0.5;isolation:isolate;}</style><clipPath id="a"><rect class="a" width="1920" height="75"></rect></clipPath></defs><g class="b"><path class="c" d="M1963,327H-105V65A2647.49,2647.49,0,0,1,431,19c217.7,3.5,239.6,30.8,470,36,297.3,6.7,367.5-36.2,642-28a2511.41,2511.41,0,0,1,420,48"></path></g><g class="b"><path class="d" d="M-127,404H1963V44c-140.1-28-343.3-46.7-566,22-75.5,23.3-118.5,45.9-162,64-48.6,20.2-404.7,128-784,0C355.2,97.7,341.6,78.3,235,50,86.6,10.6-41.8,6.9-127,10"></path></g><g class="b"><path class="d" d="M1979,462-155,446V106C251.8,20.2,576.6,15.9,805,30c167.4,10.3,322.3,32.9,680,56,207,13.4,378,20.3,494,24"></path></g><g class="b"><path class="d" d="M1998,484H-243V100c445.8,26.8,794.2-4.1,1035-39,141-20.4,231.1-40.1,378-45,349.6-11.6,636.7,73.8,828,150"></path></g></svg>
  63.         </div>
  64.         #}
  66.         {# screen > OPTION : BG BIG image  #}
  67.         <div class="entete-home bg-trame" style="background-image: url({{ asset('build/images/fond-cover-design-01.jpg') }});">
  68.             <div class="content">
  69.                 <h1 class="typo-white typo-300">
  70.                     <span class="typo-principale-light typo-80 majuscule">Cover Design</span>
  71.                     <br>Préparateur esthétique <br>et mécanique automobile
  72.                 </h1>
  73.                 <span class="typo-principale-light typo-gray-500 typo-140">Depuis 2005 | Chambéry</span>
  74.             </div>
  75.             <div class="overlay"></div>
  76.         </div>
  79.         {# screen > entete page - img small
  80.         <div class="entete-page entete-bg" style="background-image: url({{ asset('build/images/fond-cover-design-vide.png') }});">
  81.             <div class="relative text-center mt-50" style="z-index: 10;">
  82.                 <h1 class="typo-white typo-200">
  83.                     <span class="typo-principale-light-italic">Cover Design</span>
  84.                     <br>Votre préparateur auto, moto
  85.                 </h1>
  86.                 <span class="typo-principale-light-italic typo-color-site typo-130">Depuis 2005</span>
  87.             </div>
  88.             <div class="overlay fond-cover-animate-neon"></div>
  89.         </div>
  90.         #}
  92.     {% endif %}
  94.     <div id="part2" class="full-container">
  95.         <div class="container pa-20 pb-30">
  97.             {# <h2 class="mt-10 mb-20 majuscule text-center">Préparation / Rénovation / Personnalisation</h2> #}
  99.             <h2 class="mb-20 majuscule text-center">Préparation</h2>
  101.             <div class="grid-2-small-1 has-gutter start-grid-mb-10">
  103.                 <a href="{{ path('nettoyage-et-cryogenie') }}">
  104.                     <div class="cat-thumb">
  105.                         <div class="content">
  106.                             <h3 class="typo-white lh-1-1">
  107.                                 <span class="typo-120 typo-principale-bold-italic">Nettoyage</span>
  108.                                 <br><span class="typo-80 typo-principale-light">intérieur / extérieur / cryogénie</span></h3>
  109.                             <div class="btn btn-border --white majuscule mt-20 medium-ma-0" role="button">
  110.                                 <span class="fl-button-text">Découvrir</span>
  111.                             </div>
  112.                         </div>
  113.                         <div class="photo-masque"></div>
  114.                         <img src="{{ asset('build/images/cat/thumbs_nettoyage.jpg') }}" alt="Nettoyage et cryogénie">
  115.                     </div>
  116.                 </a>
  118.                 <a href="{{ path('produits-entretien') }}">
  119.                     <div class="cat-thumb">
  120.                         <div class="content">
  121.                             <h3 class="typo-white lh-1-1">
  122.                                 <span class="typo-120 typo-principale-bold-italic">Produits d'entretien</span>
  123.                                 <br><span class="typo-80 typo-principale-light">intérieur / extérieur / cuir / roues...</span></h3>
  124.                             </h3>
  125.                             <div class="btn btn-border --white majuscule mt-20 medium-ma-0" role="button">
  126.                                 <span class="fl-button-text">Découvrir</span>
  127.                             </div>
  128.                         </div>
  129.                         <div class="photo-masque"></div>
  130.                         <img src="{{ asset('build/images/cat/thumbs_produits-entretien.jpg') }}" alt="Produits d'entretien">
  131.                     </div>
  132.                 </a>
  134.             </div>
  136.             <h2 class="mt-30 mb-20 majuscule text-center">Rénovation</h2>
  138.             <div class="grid-2-small-1 has-gutter start-grid-mb-10">
  140.                 <a href="{{ path('detailing') }}">
  141.                     <div class="cat-thumb">
  142.                         <div class="content">
  143.                             <h3 class="typo-white lh-1-1">
  144.                                 <span class="typo-120 typo-principale-bold-italic">Detailing</span>
  145.                                 <br><span class="typo-80 typo-principale-light">certifié Gyeon</span></h3>
  146.                             <div class="btn btn-border --white majuscule mt-20 medium-ma-0" role="button">
  147.                                 <span class="fl-button-text">Découvrir</span>
  148.                             </div>
  149.                         </div>
  150.                         <div class="photo-masque"></div>
  151.                         <img src="{{ asset('build/images/cat/thumbs_detailing.jpg') }}" alt="Detailing">
  152.                     </div>
  153.                 </a>
  155.                 <a href="{{ path('regeneration-surface') }}">
  156.                     <div class="cat-thumb">
  157.                         <div class="content">
  158.                             <h3 class="typo-white lh-1-1">
  159.                                 <span class="typo-120 typo-principale-bold-italic">Régénération de surface</span>
  160.                                 <br><span class="typo-80 typo-principale-light">certifié Restor FX</span></h3>
  161.                             </h3>
  162.                             <div class="btn btn-border --white majuscule mt-20 medium-ma-0" role="button">
  163.                                 <span class="fl-button-text">Découvrir</span>
  164.                             </div>
  165.                         </div>
  166.                         <div class="photo-masque"></div>
  167.                         <img src="{{ asset('build/images/cat/thumbs_regeneration-surface.jpg') }}" alt="Régénération de surface">
  168.                     </div>
  169.                 </a>
  170.             </div>
  172.             <h2 class="mt-30 mb-20 majuscule text-center">Personnalisation </h2>
  174.             <div class="grid-2-small-1 has-gutter start-grid-mb-10">
  175.                 <a href="{{ path('covering') }}">
  176.                     <div class="cat-thumb">
  177.                         <div class="content">
  178.                             <h3 class="typo-white lh-1-1">
  179.                                 <span class="typo-120 typo-principale-bold-italic">Covering</span>
  180.                                 <br><span class="typo-80 typo-principale-light">partiel / total</span></h3>
  181.                             </h3>
  182.                             <div class="btn btn-border --white majuscule mt-20 medium-ma-0" role="button">
  183.                                 <span class="fl-button-text">Découvrir</span>
  184.                             </div>
  185.                         </div>
  186.                         <div class="photo-masque"></div>
  187.                         <img src="{{ asset('build/images/cat/thumbs_covering.jpg') }}" alt="Covering">
  188.                     </div>
  189.                 </a>
  191.                 <a href="{{ path('ppf') }}">
  192.                     <div class="cat-thumb">
  193.                         <div class="content">
  194.                             <h3 class="typo-white lh-1-1">
  195.                                 <span class="typo-120 typo-principale-bold-italic">PPF</span>
  196.                                 <br><span class="typo-80 typo-principale-light">certifié XPel</span></h3>
  197.                             </h3>
  198.                             <div class="btn btn-border --white majuscule mt-20 medium-ma-0" role="button">
  199.                                 <span class="fl-button-text">Découvrir</span>
  200.                             </div>
  201.                         </div>
  202.                         <div class="photo-masque"></div>
  203.                         <img src="{{ asset('build/images/cat/thumbs_ppf.jpg') }}" alt="PPF">
  204.                     </div>
  205.                 </a>
  207.                 <a href="{{ path('vitres-teintees') }}">
  208.                     <div class="cat-thumb">
  209.                         <div class="content">
  210.                             <h3 class="typo-white lh-1-1">
  211.                                 <span class="typo-120 typo-principale-bold-italic">Vitres teintées</span>
  212.                                 <br><span class="typo-80 typo-principale-light">Johnson Window Films</span></h3>
  213.                             </h3>
  214.                             <div class="btn btn-border --white majuscule mt-20 medium-ma-0" role="button">
  215.                                 <span class="fl-button-text">Découvrir</span>
  216.                             </div>
  217.                         </div>
  218.                         <div class="photo-masque"></div>
  219.                         <img src="{{ asset('build/images/cat/thumbs_vitres-teintees.jpg') }}" alt="Vitres teintées">
  220.                     </div>
  221.                 </a>
  223.                 <a href="{{ path('reprogrammation-moteur') }}">
  224.                     <div class="cat-thumb">
  225.                         <div class="content">
  226.                             <h3 class="typo-white lh-1-1">
  227.                                 <span class="typo-120 typo-principale-bold-italic">Reprogrammation moteur</span>
  228.                                 <br><span class="typo-80 typo-principale-light">BR-Performance</span></h3>
  229.                             </h3>
  230.                             <div class="btn btn-border --white majuscule mt-20 medium-ma-0" role="button">
  231.                                 <span class="fl-button-text">Découvrir</span>
  232.                             </div>
  233.                         </div>
  234.                         <div class="photo-masque"></div>
  235.                         <img src="{{ asset('build/images/cat/thumbs_reprogrammation-moteur.jpg') }}" alt="Reprogrammation moteur">
  236.                     </div>
  237.                 </a>
  239.                 <a href="{{ path('jantes-et-pneus') }}">
  240.                     <div class="cat-thumb">
  241.                         <div class="content">
  242.                             <h3 class="typo-white lh-1-1">
  243.                                 <span class="typo-120 typo-principale-bold-italic">Jantes & pneus</span>
  244.                                 <br><span class="typo-80 typo-principale-light">Un choix ciblé !</span></h3>
  245.                             </h3>
  246.                             <div class="btn btn-border --white majuscule mt-20 medium-ma-0" role="button">
  247.                                 <span class="fl-button-text">Découvrir</span>
  248.                             </div>
  249.                         </div>
  250.                         <div class="photo-masque"></div>
  251.                         <img src="{{ asset('build/images/cat/thumbs_jantes-pneus.jpg') }}" alt="Jantes et pneus">
  252.                     </div>
  253.                 </a>
  255.                 <a href="{{ path('accessoires') }}">
  256.                     <div class="cat-thumb">
  257.                         <div class="content">
  258.                             <h3 class="typo-white lh-1-1">
  259.                                 <span class="typo-120 typo-principale-bold-italic">Accessoires</span>
  260.                                 <br><span class="typo-80 typo-principale-light">Maxton Design / Green Drive / ...</span></h3>
  261.                             </h3>
  262.                             <div class="btn btn-border --white majuscule mt-20 medium-ma-0" role="button">
  263.                                 <span class="fl-button-text">Découvrir</span>
  264.                             </div>
  265.                         </div>
  266.                         <div class="photo-masque"></div>
  267.                         <img src="{{ asset('build/images/cat/thumbs_accessoires.jpg') }}" alt="Accessoires">
  268.                     </div>
  269.                 </a>
  271.             </div>
  273.         </div>
  274.     </div>
  276.     <div id="part1" class="full-container fond-white text-center">
  277.         <div class="container pa-20 pb-30">
  278.             <div class="mt-10 grid-2-small-1 has-gutter-xl typo-principale">
  279.                 <div class="mb-30">
  280.                     <h2 class="majuscule">Sport Auto</h2>
  281.                     <p class="center mt-20 max-width-400 text-center typo-principale {% if not is_mobile %}typo-110{% endif %}">
  282.                         <b>Le French Savoir Faire au service de la compétition automobile</b>
  283.                         <br>Chez Cover Design nous privilégions la qualité et le savoir-faire pour votre véhicule c’est pourquoi nous travaillons avec
  284.                         des teams de confiance.
  285.                     </p>
  286.                     <a href="{{ path('sport-auto') }}">
  287.                         <div class="mt-30 btn btn-border --gray-900 majuscule" role="button">
  288.                             <span class="fl-button-text">Découvrir</span>
  289.                         </div>
  290.                     </a>
  291.                 </div>
  293.                 <div class="mb-20">
  294.                     <a href="{{ path('sport-auto') }}">
  295.                         <div class="cat-thumb">
  296.                             <div class="content">
  297.                             </div>
  298.                             <img src="{{ asset('build/images/cat/thumbs_sport-auto.jpg') }}" alt="Sport Auto">
  299.                         </div>
  300.                     </a>
  301.                 </div>
  302.             </div>
  303.         </div>
  304.     </div>
  306.     <div class="full-container fond-color-site-3 text-center">
  307.         <div class="container pa-20 pb-30">
  308.             <div class="mt-10 grid-2-small-1 has-gutter-xl typo-principale">
  310.                 <div class="mb-30">
  311.                     <h2 class="typo-white majuscule">Cover Design, <br>Une équipe passionnée</h2>
  312.                     <p class="center mt-20 max-width-400 text-center typo-principale {% if not is_mobile %}typo-110{% endif %}">
  313.                         Depuis 2005, nos professionnels spécialisés assurent l’optimisation,
  314.                         la personnalisation et l’entretien de tous types de véhicules,
  315.                         pour les entreprises et les particuliers.
  316.                         <br><b>Notre maître mot : "Sublimer" votre véhicule...</b></span>
  317.                     </p>
  318.                     <a href="{{ path('cover-design') }}">
  319.                         <div class="mt-30 btn btn-border --white majuscule mt-20 medium-ma-0" role="button">
  320.                             <span class="fl-button-text">Découvrir</span>
  321.                         </div>
  322.                     </a>
  323.                 </div>
  325.                 <div class="mb-20 medium-mt-20">
  326.                     <h2 class="typo-white majuscule {% if is_mobile %}text-center{% endif %}">Atelier, <br>Showroom</h2>
  327.                     <p class="center mt-20 max-width-400 text-center {% if not is_mobile %}typo-90{% endif %}">
  328.                             <span class="">
  329.                                 COVER DESIGN - <b>920 avenue des Landiers 73000 Chambéry</b>
  330.                             </span>
  331.                     </p>
  332.                     <a href="https://www.google.com/maps/dir//Cover+Design,+920+Av.+des+Landiers,+73000+Chamb%C3%A9ry/@45.5920034,5.9025312,176m/" target="_blank">
  333.                         <img src="{{ asset('build/images/thumbs_cover-design-map.png') }}" alt="Google Map">
  334.                         <div class="separation-10"></div>
  335.                         <div class="btn btn-border --white majuscule mt-10" role="button">
  336.                             <span class="fl-button-text">Itinéraire</span>
  337.                         </div>
  338.                     </a>
  339.                 </div>
  341.             </div>
  342.         </div>
  343.     </div>
  345.     <div id="part3" class="full-container fond-white">
  346.         <div class="container pa-20 pb-30">
  348.             <h2 class="mt-10 mb-30 majuscule text-center">Partenaires</h2>
  350.             <div class="royalSlider sliderReferences rsDefault">
  352.                 <!-- simple image -->
  353.                 <img class="rsImg" src="{{ asset('build/images/partenaires/logo-br-performance.png') }}" alt="BR-Performance" />
  354.                 <img class="rsImg" src="{{ asset('build/images/partenaires/logo-oz-racing.png') }}" alt="OZ Racing" />
  355.                 <img class="rsImg" src="{{ asset('build/images/partenaires/logo-japan-racing.png') }}" alt="Japan Racing" />
  356.                 <img class="rsImg" src="{{ asset('build/images/partenaires/logo-vossen.png') }}" alt="Vossen" />
  357.                 <img class="rsImg" src="{{ asset('build/images/partenaires/logo-vellano.png') }}" alt="Vellano" />
  358.                 <img class="rsImg" src="{{ asset('build/images/partenaires/logo-hre.png') }}" alt="HRE Performance Wheels" />
  359.                 <img class="rsImg" src="{{ asset('build/images/partenaires/logo-gyeon.png') }}" alt="Gyeon" />
  360.                 <img class="rsImg" src="{{ asset('build/images/partenaires/logo-xpel.png') }}" alt="Xpel" />
  361.                 <img class="rsImg" src="{{ asset('build/images/partenaires/logo-restor-fx.png') }}" alt="RestorFX" />
  362.                 <img class="rsImg" src="{{ asset('build/images/partenaires/logo-kw-suspensions.png') }}" alt="KW Suspensions" />
  363.                 <img class="rsImg" src="{{ asset('build/images/partenaires/logo-green-drive.png') }}" alt="Green Drive" />
  364.                 <img class="rsImg" src="{{ asset('build/images/partenaires/logo-maxton-design.png') }}" alt="Maxton Design" />
  365.                 <img class="rsImg" src="{{ asset('build/images/partenaires/logo-3m.png') }}" alt="3M" />
  366.                 <img class="rsImg" src="{{ asset('build/images/partenaires/logo-avery.png') }}" alt="Avery Dennison" />
  367.                 <img class="rsImg" src="{{ asset('build/images/partenaires/logo-inozetek.png') }}" alt="Inozetek" />
  368.                 <img class="rsImg" src="{{ asset('build/images/partenaires/logo-johnson-films.png') }}" alt="Johnson Window Films" />
  370.             </div>
  372.         </div>
  373.     </div>
  375.     {#
  377.     <div id="part" class="full-container fond-color-site typo-white">
  378.         <div class="container pa-20 pb-30">
  379.             <h2 class="mt-20">
  380.                 Tarifs
  381.             </h2>
  382.             <div class="mt-30 mb-10">
  383.                 <div class="border-white border-width-1 max-width-400 pa-20">
  384.                     <h5 class="mt-2">
  385.                         <span class="typo-200 typo-principale-black">55 </span><span class="typo-150"> €</span>
  386.                         <br>la séance individuelle en cabinet
  387.                         <br><span class="typo-80">(durée : 1h30 environ)</span>
  388.                     </h5>
  389.                 </div>
  390.                 <h4>Etudiant et adolescent : 40 €</h4>
  392.                 <h4>Paiement</h4>
  393.                 <p>
  394.                     par chèque et espèces uniquement
  395.                     <br>(pas de règlement par CB)
  396.                 </p>
  397.                 <p class="mt-20 italic typo-gray-300">
  398.                     les séances d'hypnothérapie ne sont pas prises en charge par la sécurité sociale.
  399.                     <br>En revanche, certaines mutuelles peuvent participer à leur financement. Renseignez-vous.
  400.                 </p>
  401.             </div>
  402.         </div>
  403.     </div>
  405.     #}
  407. </div>
  410. {% endblock %}