templates/home/home_index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block metas %}
  4. <meta name="title" content="Tany Mena - Simplifiez votre routine beauté">
  5. <meta name="description" content="Tany Mena, Simplifiez votre routine beauté. Rejoignez le club des passionnés de beauté. Devenez votre propre patronne et transformez votre passion pour la beauté en une réelle opportunité de carrière.">
  6. {% endblock %}
  8. {% block title %}
  9. Tany Mena - Simplifiez votre routine beauté
  10. {% endblock %}
  12. {% block stylesheets %}
  13. {{ parent() }}
  14. <link rel="stylesheet" type="text/css" href="{{ asset('assets/templates/home/home-default.style.css?date=202309291340') }}">
  15. <link rel="stylesheet" type="text/css" href="{{ asset('assets/templates/home/home.mobile.style.css') }}">
  16. {% endblock %}
  18. {% block body %}
  19. <h1 class="d-none">Tany Mena</h1>
  20. <!-- Banner starts -->
  21. <section id="banner-splide" class="splide af-banner-home" aria-label="Splide Basic HTML Example">
  22. <div class="splide__track">
  23. <ul class="splide__list">
  24. <li class="splide__slide" style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url('{{ asset('/assets/tanymena/banniere/1.jpg') }}'); background-size: cover; background-position: center;">
  25. <div class="container vh-100 px-4">
  26. <div class="row h-100 align-items-center">
  27. <div class="col-md-7">
  28. <h2 class="title-txt-banner text-banner-green-aroma mb-4">
  29. Tany Mena, <br>
  30. {% trans %}Simplifiez votre routine beauté{% endtrans %} <br>
  31. {# {% trans %}les huiles essentielles{% endtrans %} #}
  32. </h2>
  33. <p class="content-txt-banner text-banner-green-aroma mt-4 mb-4">
  34. {% trans %}Rejoignez le club des passionnés de beauté{% endtrans %} <br>
  35. {% trans %}Devenez votre propre patronne et transformez votre passion pour la beauté en une réelle opportunité de carrière.{% endtrans %}
  37. </p>
  38. <a href="{{ path('app_shop_index') }}" class="btn af-btn-green-aroma-outline px-md-5 py-md-3 br-14px mt-4">
  39. {% trans %}Nos produits{% endtrans %}
  40. </a>
  41. </div>
  42. </div>
  43. </div>
  44. </li>
  45. <li class="splide__slide" style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url('{{ asset('/assets/tanymena/banniere/2.jpg') }}'); background-size: cover; background-position: center;">
  46. <div class="container vh-100 px-4">
  47. <div class="row h-100 align-items-center">
  48. <div class="col-md-7">
  49. <h2 class="title-txt-banner text-banner-green-aroma mb-4">
  50. Tany Mena, <br>
  51. {% trans %}Simplifiez votre routine beauté{% endtrans %} <br>
  52. {# {% trans %}les huiles essentielles{% endtrans %} #}
  53. </h2>
  54. <p class="content-txt-banner text-banner-green-aroma mt-4 mb-4">
  55. {% trans %}Rejoignez le club des passionnés de beauté{% endtrans %} <br>
  56. {% trans %}Devenez votre propre patronne et transformez votre passion pour la beauté en une réelle opportunité de carrière.{% endtrans %}
  58. </p>
  59. <a href="{{ path('app_shop_index') }}" class="btn af-btn-green-aroma-outline px-md-5 py-md-3 br-14px mt-4">
  60. {% trans %}Nos produits{% endtrans %}
  61. </a>
  62. </div>
  63. </div>
  64. </div>
  65. </li>
  66. </ul>
  67. </div>
  68. </section>
  69. <!-- Banner end -->
  70. <!-- Quality section starts -->
  71. <section id="quality bg-white">
  72. <div class="container">
  73. <div class="row justify-content-center">
  74. <div class="col-md-8 text-center pt-5 pb-5">
  75. <h2 class="af-section__subtitle text-secondary">{% trans from 'messages.home' %}Restez tendance en continu{% endtrans %}</h2>
  76. <p>
  77. {% trans from 'messages.home' %}
  78. Chaque coffret est rempli des designs les plus tendances, pour être prête à briller en toutes circonstances.
  79. {% endtrans %}
  80. </p>
  81. <div class="text-center pt-3">
  82. <a href="#product-section">
  83. <img class="section-step-img lazyload" width="40" data-src="{{ asset('/assets/img/webp/home/icon/arrow-circle-down-2.png') }}" alt="Emplois créés"/>
  84. </a>
  85. </div>
  86. </div>
  87. </div>
  88. </div>
  89. </section>
  90. <section id="product-section" class="section-container section-our-oils af-bg-green-light">
  91. <div class="container">
  92. <div class="row">
  93. <div class="col-md-6 d-flex align-items-center">
  94. <h2 class="text-secondary">
  95. {% trans from 'messages.home' %}Nos produits{% endtrans %}
  96. </h2>
  97. </div>
  98. <div class="col-md-6 text-end d-flex align-items-center justify-content-end">
  99. <a href="{{ path('app_shop_index') }}" class="text-primary text-end text-decoration-underline">{% trans from 'messages.home' %}Decouvrir nos produits{% endtrans %}</a>
  100. </div>
  101. </div>
  102. </div>
  104. <div id="our-oils-splide" class="splide" aria-label="Tany Mena Oils">
  105. <div class="splide__track container">
  106. <ul class="splide__list section-products-list">
  107. {% for product in products %}
  108. <li class="splide__slide me-3">
  109. {% include '/partials/product/_product_2.html.twig' with {'product' : product} %}
  110. </li>
  111. {% endfor %}
  112. </ul>
  113. </div>
  114. </div>
  115. <div class="d-flex justify-content-center mt-4 container">
  116. <!-- <a href="{{ path('app_shop_index') }}" class="af-btn-primary px-md-100 br-12">{% trans from 'messages.home' %}Decouvrir nos produits{% endtrans %}</a> -->
  117. <div>
  118. </section>
  120. <!-- Contact start -->
  121. <section class="section-container text-center">
  122. <p class="h4 text-secondary mb-5 contact-title">
  123. {% trans %}Avez vous besoin des informations supplémentaires ? {% endtrans %}
  124. <br>
  125. {% trans %}Ou de parler à notre service client ?{% endtrans %}
  126. </p>
  127. <a href="{{ path('app_contact_index') }}" class="af-btn-secondary px-md-120 fw-bold">
  128. {% trans %}Prendre contact{% endtrans %}
  129. </a>
  130. </section>
  131. <!-- Contact ends -->
  132. {% endblock %}
  133. {% block javascripts %}
  134. {{ parent() }}
  135. <script type="text/javascript">window.onload = () => {
  136. const splide = new Splide('#banner-splide', {
  137. type: 'loop',
  138. height: '100vh',
  139. breakpoints: {
  140. 640: {
  141. height: '100vh'
  142. }
  143. },
  144. lazyLoad: 'nearby'
  145. });
  146. splide.mount();
  148. const devivry_offers = document.getElementById("delivry-offers");
  149. const header = document.getElementById("header");
  150. const headerLogo1 = document.getElementById("header-logo-1");
  151. const headerLogo2 = document.getElementById("header-logo-2");
  152. headerLogo1.classList.remove("d-block");
  153. headerLogo2.classList.remove("d-none");
  154. // const updateUI = function (index) {
  155. // if(index==0){
  156. // header.classList.remove("header--primary");
  157. // header.classList.remove("d-block");
  158. // header.classList.remove("d-none");
  159. // header.classList.add("header--secondary");
  161. // devivry_offers.classList.remove("delivry-offers--secondary");
  162. // devivry_offers.classList.add("delivry-offers--primary");
  163. // }
  164. // else if(index==1){
  165. // header.classList.remove("header--secondary");
  166. // header.classList.add("header--primary");
  168. // devivry_offers.classList.remove("delivry-offers--primary");
  169. // devivry_offers.classList.add("delivry-offers--secondary");
  170. // }
  171. // else if(index==2){
  172. // header.classList.remove("header--secondary");
  173. // header.classList.add("header--primary");
  175. // devivry_offers.classList.remove("delivry-offers--secondary");
  176. // devivry_offers.classList.add("delivry-offers--primary");
  177. // }
  178. // }
  179. // splide.on( 'move', updateUI);
  180. // updateUI(0);
  182. const splide_2 = new Splide('#our-oils-splide', {
  183. type: 'loop',
  184. perPage: 4,
  185. lazyLoad: 'nearby',
  186. perMove: 1,
  187. omitEnd: true,
  188. breakpoints: {
  189. 992: {
  190. perPage: 2
  191. },
  192. 640: {
  193. perPage: 1
  194. }
  195. }
  196. });
  197. splide_2.mount();
  199. document.getElementById("loading_aroma").classList.add('hide');
  200. };
  201. </script>
  202. {% endblock %}