templates/accueil/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}SPA.BIZ | {% trans %}Accueil{% endtrans %}{% endblock %}
  5. {% block title_page %}{% trans %}ACCUEIL{% endtrans %}{% endblock %}
  7. {% block body %}
  10.     <div class="container-fluid background-grey d-lg-block d-md-block d-sm-none d-none">
  11.         <div class="container mt-4 mb-1 pt-2 pb-2 d-lg-none d-md-none d-sm-none d-none">
  12.             <div class="row">
  13.                 <div class="col-lg-6 col-md-6 col-sm-12 col-12 text-center"><h1 class="text-all-portail"><i class="text-portail">{% trans %}Comparateur{% endtrans %}</i> SPA.BIZ</h1></div>
  14.                 <div class="col-lg-6 col-md-6 col-sm-12 col-12 text-center">{% trans %}Grâce à son comparateur, Spa.Biz vous permet pour la première fois de comparer les différents types de spas disponibles sur le marché.{% endtrans %}</div>
  15.             </div>
  16.         </div>
  17.         <div class="container pt-lg-4 pt-md-4 pt-sm-2 pt-lg-2 pt-md-2 pt-sm-4 pt-4 pb-4">
  19.             {#WEB#}
  20.             <div class="row">
  24.                 {% for key,value in categories_list %}
  25.                     <div id="cat_{{ key+1 }}" class="col-lg-4 mb-lg-0 mb-3 col-md-4 col-sm-12 col-12 d-lg-block d-md-block d-sm-flex d-flex position-relative check-category one-category hp_category" data-link="{{ path("app_list_product_per_categ", {"type": 'gamme-'~value.getNameLangue(app.request.locale)|replace({' ':'-'}), "id_categorie": value.id}) }}">
  26.                         <div class="position-relative col-lg-12 col-md-12 col-sm-5 col-6">
  27.                             <div class="reorder-bg">
  29.                             </div>
  30.                             <div class="" style='height:310px;background-size:cover;background-position:-50px;background-image: url("{{ asset("images/images_categories/" ~ value.image) }}")'>
  32.                             </div>
  33.                             {% set nbrEtoile = value.getNameLangue(app.request.locale) | getIntInString %}
  35.                             {% if nbrEtoile == 5 %}
  36.                                 {{ include('accueil/partial/_start/etoile_5_inactif.html.twig', {'key': key}) }}
  37.                                 {{ include('accueil/partial/_start/etoile_5_actif.html.twig', {'key': key}) }}
  38.                             {% elseif nbrEtoile == 4 %}
  39.                                 {{ include('accueil/partial/_start/etoile_4_inactif.html.twig', {'key': key}) }}
  40.                                 {{ include('accueil/partial/_start/etoile_4_actif.html.twig', {'key': key}) }}
  41.                             {% elseif nbrEtoile == 3 %}
  42.                                 {{ include('accueil/partial/_start/etoile_3_inactif.html.twig', {'key': key}) }}
  43.                                 {{ include('accueil/partial/_start/etoile_3_actif.html.twig', {'key': key}) }}
  44.                             {% endif %}
  47. {#                            <img width="100%" class="img-border" src="{{ asset("images/images_categories/" ~ value.image) }}" alt="{{ value.name }}">#}
  48.                             <h3 class="text_cat_{{ key+1 }} rm-class-js position-absolute text-centered-categories d-lg-block d-md-block d-sm-none d-none"><span class="hp_font-size-text-gamme">GAMME</span><br/>{{ value.getNameLangue(app.request.locale) | upper }}</h3>
  49.                             <div id="" class="fade_cat_{{ key+1 }} background-cible show-background"></div>
  50.                         </div>
  51.                         <div class="text-bottom-categories opacity-cat_{{ key+1 }} p-1 mt-lg-2 mt-md-2 mt-0 col-lg-12 col-md-12 col-sm-7 col-6">
  52.                             <h6 class="text_cat_{{ key+1 }} rm-class-js text-centered-categories-mobile d-lg-none d-md-none d-sm-block d-block">{{ value.getNameLangue(app.request.locale) | upper }}</h6>
  53.                             <div class="d-lg-block d-md-block d-sm-none d-none">
  54.                                 {{ value.getDescriptionsLangue(app.request.locale) }}
  55.                             </div>
  56.                             <div class="d-lg-none d-md-none d-sm-block d-none">
  57.                                 {{ value.getDescriptionsLangue(app.request.locale) | slice(0, 150) ~ ' [...]' }}
  58.                             </div>
  59.                             <div class="d-lg-none d-md-none d-sm-none d-block">
  60.                                 {{ value.getDescriptionsLangue(app.request.locale) | slice(0, 60) ~ ' [...]' }}
  61.                             </div>
  63.                         </div>
  65.                     </div>
  66.                 {% endfor %}
  68.             </div>
  69.         </div>
  70.     </div>
  73. {#    MOBILE   #}
  74.     <div class="container d-xl-none d-lg-none d-md-none d-sm-flex d-flex mb-3">
  75.         {% for key,value in categories_list %}
  76.             {% set nbrEtoile = value.getNameLangue(app.request.locale) | getIntInString %}
  77.             {% set keyCheckStyle = key+1 %}
  78.             {% set styleSet = '' %}
  79.             {% if keyCheckStyle < categories_list|length  %}
  80.                 {% set styleSet = 'border-right: 1px solid #c9c0c0;' %}
  81.             {% endif %}
  83.             <div class="col-sm-4 col-4 text-center hp_check-link-category-sm-hotfix" style="{{ styleSet }}"  data-link="{{ path("app_list_product_per_categ", {"type": 'gamme-'~value.getNameLangue(app.request.locale)|replace({' ':'-'}), "id_categorie": value.id}) }}">
  84.                 <h6 class="mb-0 text-centered-categories-mobile-hotfix"><span class="hp_font-size-text-gamme-mobile">GAMME</span><br/><span class="hp_color-gamme-sm">{{ value.getNameLangue(app.request.locale) | capitalize }}</span></h6>
  85.                 {% for i in 1..nbrEtoile %}
  86.                     <img class="hp_size-stars-mobile" height="25px" width="24px" src="{{ asset("images/start_actif_hotfix.png") }}" alt="etoile">
  87.                 {% endfor %}
  88.             </div>
  89.         {% endfor %}
  90.     </div>
  91. {#    MOBILE   #}
  93.     <div class="container-fluid mt-0 mb-0 pt-4 pb-4 hp-new-bg">
  94.         <div class="container">
  95.             <div class="row">
  96.                 <div class="col-xl-5 col-lg-6 col-md-7 col-sm-12 col-12 text-lg-end text-md-end text-sm-center text-center">
  97.                     <h1 class="hp-new-color-text-portal"><i class="hp-new-second-text-portal">{% trans %}Comparateur{% endtrans %}</i> SPA.BIZ</h1>
  98.                     <div class="hp-j-cp d-lg-inline d-md-inline d-sm-none d-none"><a href="{{ path("app_comparateur") }}">Je compare ! <span>&#9654;</span></a></div>
  99.                 </div>
  100.                 <div class="col-xl-1 col-lg-0 col-md-0 col-sm-0 col-0 d-xl-block d-lg-none d-none">
  102.                 </div>
  103.                 <div class="col-xl-6 col-lg-6 col-md-5 col-sm-12 col-12 text-lg-end text-md-end text-sm-center text-center text-white my-auto">
  104.                     {% trans %}Grâce à son comparateur, Spa.Biz vous permet pour la première fois de comparer les différents types de spas disponibles sur le marché.{% endtrans %}
  105.                     <div class="hp-j-cp d-lg-none d-md-none d-sm-block d-block mt-3 ms-auto me-auto" style="width: 200px;"><a href="{{ path("app_comparateur") }}">Je compare ! <span>&#9654;</span></a></div>
  106.                 </div>
  107.             </div>
  108.         </div>
  109.     </div>
  111.     <div class="container pt-3 pb-3 ps-lg-0 ps-md-0 ps-sm-4 ps-4 pe-lg-0 pe-md-0 pe-sm-4 pe-4">
  112.         <div class="row hide_search-product-block">
  113.             <div class="col-lg-6 col-md-6 col-12">
  114.                 <div class="">
  116.                     <div class="row hp_list-place">
  118.                         <div class="range">
  119.                             <h6 style="margin-top:3px;">Choisissez votre budget : </h6>
  120.                             {#                            <input id="sliderInput2" class="port_width-input-range" type="range" min="0" value="0" max="30000" step="0">#}
  121.                             <input id="sliderInput2" class="port_width-input-range" type="text">
  122.                         </div>
  123.                     </div>
  124.                 </div>
  125. {#                <div class="">#}
  126. {#                    <input type="text" class="id-categ-check disabled d-none" value="2">#}
  127. {#                    <h6 class="mb-2">Choisissez votre gamme : </h6>#}
  128. {#                    <div class="row">#}
  129. {#                        <div id="2" class="col-4 hp_choice-gamme active">#}
  130. {#                            <a class="hp_choice-gamme-link" href="#">Gamme Confort</a>#}
  131. {#                        </div>#}
  132. {#                        <div id="3" class="col-4 hp_choice-gamme">#}
  133. {#                            <a class="hp_choice-gamme-link" href="#">Gamme Prestige</a>#}
  134. {#                        </div>#}
  135. {#                        <div id="5" class="col-4 hp_choice-gamme">#}
  136. {#                            <a class="hp_choice-gamme-link" href="#">Gamme Luxe</a>#}
  137. {#                        </div>#}
  138. {#                    </div>#}
  139. {#                </div>#}
  140.             </div>
  141.             <div class="col-lg-6 col-md-6 col-12 mt-lg-1 mt-md-1 mt-sm-3 mt-3">
  142.                 <div>
  144.                     <div class="row port_list-place">
  146.                         <div class="range">
  147.                             <h6>Choisissez votre nombre de places : </h6>
  148.                             <input  id="sliderInput1" class="port_width-input-range" type="text">
  149.                         </div>
  150.                     </div>
  151.                 </div>
  152.             </div>
  153.         </div>
  155.         <div class="row my-auto mt-4 hide_search-product-block">
  156.             <div class="col-lg-8 col-md-7 col-12">
  158.             </div>
  159.             <div class="col-lg-4 col-md-5 col-7 ms-auto me-auto mt-lg-0 mt-md-0 mt-sm-2 mt-2">
  160.                 <div class="text-lg-end text-md-end text-sm-center text-center mt-3">
  161.                     <button data-url="{{ path("app_accueil_filtre_produit") }}" class="hp_button-research">Rechercher</button>
  162.                 </div>
  163.             </div>
  164.         </div>
  167.         <div class="row result-search mt-3 ps-lg-0 ps-md-0 ps-sm-2 ps-2 pe-lg-0 pe-md-0 pe-sm-2 pe-2  justify-content-xl-center justify-content-lg-center justify-content-md-center">
  169.         </div>
  170.     </div>
  172.     <div class="container-fluid mt-0 mb-0 pt-4 pb-4 hp-new-bg hp_hide-if-result-search">
  173.         <div class="container">
  174.             <div class="row">
  175.                 <div class="col-lg-6 col-md-6 col-sm-12 col-12 text-lg-start text-md-start text-sm-center text-center"><h3 class="text-white">Notre selection du mois</h3></div>
  176.                 <div class="col-lg-6 col-md-6 col-sm-12 col-12 text-lg-end text-md-end text-sm-center text-center text-white my-auto"><a href="{{ path("app_list_spa") }}" class="hp_spa-du-mois text-decoration-none">Tous les spas</a></div>
  177.             </div>
  178.         </div>
  179.     </div>
  181.     <div class="container-fluid mt-0 mb-0 pt-4 pb-4 bg-white hp_hide-if-result-search">
  182.         <div class="containerhp">
  183.             <div class="row mx-auto my-auto justify-content-xl-center justify-content-lg-center justify-content-md-center">
  184.                 {{ include('accueil/partial/_productSelected.html.twig', {'produitSelection': produitSelection}) }}
  185.             </div>
  186.         </div>
  187.     </div>
  189.     <div class="container mt-4 mb-2 d-lg-none d-md-none d-sm-block d-block">
  190.         <h4 class="text-center mb-3">{% trans %}EXPLORER{% endtrans %} SPA.BIZ</h4>
  191.         <div class="row pb-5">
  192.             <div class="col-lg-6 col-md-6 col-sm-6 col-6">
  193.                 <div class="background-grey bg-grey-explorer">
  194.                     <div class=" width-img-explorer">
  195.                         <div class="decouvrir position-relative">
  196.                             <img class="hp_img-decouvrir" src="{{ asset("/images/logo/decouvrir.png") }}" alt="decouvrir">
  197.                             <a href="{{ path("app_list_spa") }}" class="plus-decouvrir text-decoration-none">+</a>
  198.                         </div>
  199.                     </div>
  200.                     <h4 class="mt-2 text-explorer">{% trans %}Découvrir{% endtrans %} <br/> {% trans %}tous les{% endtrans %} Spas</h4>
  201.                 </div>
  202.             </div>
  204.             <div class="col-lg-6 col-md-6 col-sm-6 col-6">
  205.                 <div class="background-grey bg-grey-explorer">
  206.                     <div><img width="100%" src="{{ asset("/images/logo/about_us.png") }}" alt="about"></div>
  207.                     <h4 class="mt-2 text-explorer">{% trans %}Qui Sommes{% endtrans %} <br/> {% trans %}nous ?{% endtrans %}</h4>
  208.                 </div>
  209.             </div>
  210.         </div>
  211.     </div>
  213. {% endblock %}
  215. {% block footer %}
  216.     {% include '_partials/_footer.html.twig' %}
  217. {% endblock %}
  219. {# Ici, l'ancienne version de footer #}
  220. {% block footer_old %}
  221.     <div class="container-fluid background-grey d-lg-block d-md-block d-sm-none d-none">
  222.         <div class="container pl-0 pr-0">
  223.             <div class="d-flex bd-highlight d-lg-flex d-md-none d-sm-none pb-2 pt-2">
  224.                 <div class="p-2 text-start my-auto"><p class="footer-text mb-0">{% trans %}Copyright{% endtrans %} &#xA9; 2023</p></div>
  225.                 <div class="p-2 text-center my-auto"><a class="footer-text text-nowrap text-decoration-none" href="#">{% trans %}Cookies{% endtrans %}</a></div>
  226.                 <div class="p-2 text-center my-auto"><a class="footer-text text-nowrap text-decoration-none" href="{{ path('app_cgv') }}">{% trans %}Condition générales d'utilisation{% endtrans %}</a></div>
  227.                 <div class="p-2 text-center my-auto"><a class="footer-text text-nowrap text-decoration-none" href="#">{% trans %}Vente et remboursement{% endtrans %}</a></div>
  228.                 <div class="p-2 flex-fill text-end my-auto"><a class="footer-text text-nowrap text-decoration-none" href="#">{% trans %}Qui sommes nous ?{% endtrans %}</a></div>
  229.                 <div class="p-2 text-end my-auto"><a class="footer-text text-decoration-none" href="{{ path('app_cgv') }}">{% trans %}Contact{% endtrans %}</a></div>
  230.                 <div class="p-2 my-auto">
  231.                     <div class="d-flex">
  232.                         <div class="flex-fill pr-10">
  233.                             <a class="footer-text" href="#"><img src="{{ asset("/images/logo/social/fb_2.png") }}" alt="facebook"></a>
  234.                         </div>
  235.                         <div class="flex-fill pr-10">
  236.                             <a class="footer-text" href="#"><img src="{{ asset("/images/logo/social/twt_2.png") }}" alt="twitter"></a>
  237.                         </div>
  238.                         <div class="flex-fill">
  239.                             <a class="footer-text" href="#"><img src="{{ asset("/images/logo/social/link_2.png") }}" alt="linkdin"></a>
  240.                         </div>
  241.                     </div>
  242.                 </div>
  243.             </div>
  244.             <div class="d-flex bd-highlight d-lg-none d-md-flex d-sm-none">
  245.                 <div class="p-2 flex-fill"><p class="footer-text mb-0">{% trans %}Copyright{% endtrans %} &#xA9; 2023</p></div>
  246.                 <div class="p-2 flex-fill"><a class="footer-text text-decoration-none" href="{{ path('app_cgv') }}">{% trans %}Condition générales d'utilisation{% endtrans %}</a></div>
  247.                 <div class="p-2 flex-fill"><a class="footer-text text-decoration-none" href="#">{% trans %}Vente et remboursement{% endtrans %}</a></div>
  248.                 <div class="p-2 flex-fill"><a class="footer-text text-decoration-none" href="#">{% trans %}Qui sommes nous ?{% endtrans %}</a></div>
  249.                 <div class="p-2 flex-fill"><a class="footer-text text-decoration-none" href="{{ path('app_contact') }}">{% trans %}Contact{% endtrans %}</a><a class="footer-text text-decoration-none d-lg-none d-md-block d-sm-none" href="#">{% trans %}Cookies{% endtrans %}</a></div>
  250.                 <div class="p-2 flex-fill">
  251.                     <div class="d-flex">
  252.                         <a class="footer-text" href="#"><img src="{{ asset("/images/logo/social/fb_2.png") }}" alt="facebook"></a>
  253.                         <a class="footer-text" href="#"><img src="{{ asset("/images/logo/social/twt_2.png") }}" alt="twitter"></a>
  254.                         <a class="footer-text" href="#"><img src="{{ asset("/images/logo/social/link_2.png") }}" alt="linkdin"></a>
  255.                     </div>
  256.                 </div>
  257.             </div>
  258.         </div>
  259.     </div>
  261.     <div class="container-fluid d-lg-none d-md-none d-sm-block d-block footer-block">
  262.         <div class="container pt-4 pb-4">
  263.             <h4 class="text-center text-white mb-3">{% trans %}ENTRETIEN DE VOTRE{% endtrans %} SPA</h4>
  264.             <div class="row">
  265.                 <div class="col-lg-6 col-md-6 col-sm-6 col-6">
  266.                     <div class="background-grey bg-grey-explorer">
  267.                         <div class="position-relative width-img-explorer">
  268.                             <img width="60px" src="{{ asset("/images/logo/footer-mobile/badge_1.png") }}" alt="badge 1">
  269.                             <p class="plus-entretien">+</p>
  270.                         </div>
  271.                         <div class="position-relative width-img-explorer">
  272.                             <img width="90px" src="{{ asset("/images/logo/footer-mobile/badge_2.png") }}" alt="badge 2">
  273.                         </div>
  274.                         <h4 class="mt-2 text-explorer">{% trans %}Accessoires{% endtrans %}</h4>
  275.                     </div>
  276.                 </div>
  278.                 <div class="col-lg-6 col-md-6 col-sm-6 col-6">
  279.                     <div class="background-grey bg-grey-explorer">
  280.                         <div class="d-flex">
  281.                             <div class="col-6 text-end"><img width="55px" src="{{ asset("/images/logo/footer-mobile/change_1.png") }}" alt="change 1"></div>
  282.                             <div class="col-6 text-center"><img width="30px" src="{{ asset("/images/logo/footer-mobile/change_2.png") }}" alt="change 2"></div>
  283.                         </div>
  285.                         <h4 class="mt-29 text-explorer">{% trans %}Pièces{% endtrans %}<br/> {% trans %}Détâchées{% endtrans %}</h4>
  286.                     </div>
  287.                 </div>
  288.             </div>
  289.         </div>
  290.     </div>
  292. {#    <div class="position-fixed-contact d-lg-none d-md-none d-sm-block d-block">#}
  293. {#        <div class="show-menu-right"><img width="16px" src="{{ asset("/images/logo/three_dots.png") }}" alt="dots"></div>#}
  294. {#        <div class="toggle-info d-none">#}
  295. {#            <div class="link-compare">#}
  296. {#                <img width="39px" src="{{ asset("/images/left_link/compares.png") }}" alt="compares">#}
  297. {#            </div>#}
  298. {#            <div class="link-contact mt-3">#}
  299. {#                <div class="img-call-1">#}
  300. {#                    #}{#                        <img width="50px" src="{{ asset("/images/left_link/call_1.png") }}" alt="call 1">#}
  301. {#                </div>#}
  302. {#                <div class="position-relative"><img class="img-call-2" width="50px" src="{{ asset("/images/left_link/calls_2.png") }}" alt="calls 2"></div>#}
  303. {#            </div>#}
  304. {#        </div>#}
  305. {#    </div>#}
  307. {% endblock %}