templates/home/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}Hello HomeController!{% endblock %}
  5. {% block body %}
  7.           <!-- start::categories  -->
  8.       <section
  9.   class="py-20 border-b border-gray-200 dark:border-foreground dark:bg-background"
  10. >
  11.   <div class="container mx-auto lg:p-0 p-5">
  12.     <div
  13.       class="flex lg:flex-row flex-col lg:text-left text-center flex-wrap items-center justify-between mb-12"
  14.     >
  15.       <div class="lg:mb-0 mb-4" data-aos="fade-up">
  16.         <h2
  17.           class="text-2xl lg:text-3xl font-medium mb-2 dark:text-gray-100"
  18.         >
  19.           Explorez par catégorie
  20.         </h2>
  21.         <h6
  22.           class="text-sm lg:text-base text-gray-500 dark:text-gray-400 font-normal"
  23.         >
  24.           Nous sélectionnons pour vous les professionnels de qualité du Sarladais
  25.         </h6>
  26.       </div>
  27.       <div data-aos="fade-up">
  28.         <a
  29.           href="{{ path('app_home_list') }}"
  30.           class="text-gray-500 dark:text-gray-400 hover:text-blue-500 flex items-center"
  31.         >
  32.           Voir toutes les catégories
  33.           <svg
  34.             xmlns="http://www.w3.org/2000/svg"
  35.             class="w-5 ml-3"
  36.             fill="none"
  37.             viewBox="0 0 24 24"
  38.             stroke="currentColor"
  39.             stroke-width="2"
  40.           >
  41.             <path
  42.               stroke-linecap="round"
  43.               stroke-linejoin="round"
  44.               d="M14 5l7 7m0 0l-7 7m7-7H3"
  45.             />
  46.           </svg>
  47.         </a>
  48.       </div>
  49.     </div>
  50.     <div class="grid grid-cols-1 md:grid-cols-3 gap-7">
  51.     {% for category in allCategory %}
  52.       <a
  53.         href="{{ path('app_home_list_category', {id:category.id}) }}" 
  54.         class="relative overflow-hidden group rounded-lg group"
  55.         data-aos="fade-up"
  56.         data-aos-duration="800"
  57.       >
  58.         <img
  59.           class="w-full h-[277px] object-cover rounded-lg transition-all group-hover:scale-105"
  60.           src="{{ category.picture }}"
  61.           alt=""
  62.         />
  63.         <div
  64.           class="absolute bottom-0 top-1/2 flex flex-col justify-end left-0 pb-5 pl-5 rounded-b-lg pt-2 card-linear-gradient w-full"
  65.         >
  66.           <h5 class="text-2xl font-medium mb-1 text-white">{{ category.name }}</h5>
  67.           <p class="text-base font-normal text-gray-100">
  68.     {{ category.shops|length }} commerces disponibles
  69.           </p>
  70.         </div>
  71.       </a>
  72.       {% endfor %}      
  73.     </div>
  74.   </div>
  75. </section>
  77.       <!-- end::categories  -->
  80.     <!-- strat wrapper -->
  81.     <div class="font-inter">
  82.       
  83.             <!-- start::trending-listing  -->
  84.       <section
  85.   class="py-20 border-b border-gray-200 dark:border-foreground dark:bg-background"
  86. >
  87.   <div class="container mx-auto lg:p-0 p-5">
  88.     <div
  89.       class="flex lg:flex-row flex-col lg:text-left text-center flex-wrap items-center justify-between mb-12"
  90.     >
  91.       <div class="lg:mb-0 mb-4" data-aos="fade-up">
  92.         <h2
  93.           class="text-2xl lg:text-3xl font-medium mb-2 dark:text-gray-100"
  94.         >
  95.           Les commerces du moment !
  96.         </h2>
  97.         <h6
  98.           class="text-sm lg:text-base text-gray-500 dark:text-gray-400 font-normal"
  99.         >
  100.           Une sélection de commerces vérifiés par Best of Sarlat
  101.         </h6>
  102.       </div>
  103.       <div data-aos="fade-up">
  104.         <a
  105.           href="{{ path('app_home_list') }}"
  106.           class="text-gray-500 dark:text-gray-400 hover:text-blue-500 flex items-center"
  107.         >
  108.           Voir tous les commerces
  109.           <svg
  110.             xmlns="http://www.w3.org/2000/svg"
  111.             class="w-5 ml-3"
  112.             fill="none"
  113.             viewBox="0 0 24 24"
  114.             stroke="currentColor"
  115.             stroke-width="2"
  116.           >
  117.             <path
  118.               stroke-linecap="round"
  119.               stroke-linejoin="round"
  120.               d="M14 5l7 7m0 0l-7 7m7-7H3"
  121.             />
  122.           </svg>
  123.         </a>
  124.       </div>
  125.     </div>
  126.     <!-- Slider main container -->
  127.     <div class="relative">
  128.       <div class="swiper">
  129.         <!-- Additional required wrapper -->
  130.         <div class="swiper-wrapper relative h-full">
  131.           <!-- Slides -->
  133.           <!-- Slide -->          
  134.     {% for shop in shopForView %}
  135.     {% if shop.homepagePlace == 2 %}
  137.           <div
  138.             class="swiper-slide overflow-hidden rounded-lg"
  139.             data-aos="fade-up"
  140.           >
  141.             <a
  142.               href="{{ path('app_home_show', {'slug' : shop.slug })}}"
  143.               class="relative overflow-hidden group"
  144.             >
  145.               
  146.               <img
  147.                 class="w-full h-80 object-cover rounded-t-lg group-hover:scale-105 transition-all"
  148.                 src="{{ vich_uploader_asset(shop, 'picture1') }}"
  149.                 alt=""
  150.               />
  151.               <div
  152.                 class="absolute bottom-0 top-1/2 flex items-start flex-col justify-end left-0 pb-5 pl-5 pt-2 card-linear-gradient w-full"
  153.               >
  154.               {% for category in shop.categories %}
  155.                 <span
  156.                   class="bg-pink-600 text-xs text-white rounded-full px-3 py-1 mb-3 inline-flex"
  157.                   >{{ category.name }}</span
  158.                 >
  159.               {% endfor %}
  160.                 <div class="flex text-white items-center mb-2">
  161.                   <h2 class="text-xl capitalize font-semibold mr-2">
  162.                     {{shop.name}}
  163.                   </h2>
  164.                   {% if shop.verified == true %}
  165.                   <svg
  166.                     xmlns="http://www.w3.org/2000/svg"
  167.                     class="h-5 w-5 text-green-600"
  168.                     viewBox="0 0 20 20"
  169.                     fill="currentColor"
  170.                   >
  171.                     <path
  172.                       fill-rule="evenodd"
  173.                       d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
  174.                       clip-rule="evenodd"
  175.                     />
  176.                   </svg>
  177.                   {% endif %}
  178.                 </div>
  179.                 <p class="text-sm font-normal text-white mb-4">
  180.                   {{shop.AddressCity}}
  181.                 </p>
  182.               </div>
  183.             </a>
  185.           </div>
  186.                   {% endif %}
  188.                   {% endfor %}
  190.           
  191.           <div
  192.             class="swiper-slide overflow-hidden rounded-lg"
  193.             data-aos="fade-up"
  194.           >
  195.           </div>
  196.         </div>
  198.         <!-- If we need pagination -->
  199.         <div class="swiper-pagination"></div>
  201.         <!-- If we need navigation buttons -->
  202.       </div>
  203.       <div class="swiper-button-prev left-2 lg:-left-3 after:hidden">
  204.         <button
  205.           type="button"
  206.           class="bg-white dark:bg-foreground text-blue-500 hover:bg-blue-500 hover:text-white rounded-full p-3 shadow-small-content-1"
  207.         >
  208.           <svg
  209.             xmlns="http://www.w3.org/2000/svg"
  210.             fill="none"
  211.             class="h-6 w-6"
  212.             viewBox="0 0 24 24"
  213.             stroke="currentColor"
  214.           >
  215.             <path
  216.               stroke-linecap="round"
  217.               stroke-linejoin="round"
  218.               stroke-width="2"
  219.               d="M10 19l-7-7m0 0l7-7m-7 7h18"
  220.             />
  221.           </svg>
  222.         </button>
  223.       </div>
  224.       <div class="swiper-button-next absolute right-2 lg:-right-3 after:hidden">
  225.         <button
  226.           type="button"
  227.           class="bg-white dark:bg-foreground text-blue-500 hover:bg-blue-500 hover:text-white rounded-full p-3 shadow-small-content-1"
  228.         >
  229.           <svg
  230.             class="h-6 w-6"
  231.             xmlns="http://www.w3.org/2000/svg"
  232.             fill="none"
  233.             viewBox="0 0 24 24"
  234.             stroke="currentColor"
  235.           >
  236.             <path
  237.               stroke-linecap="round"
  238.               stroke-linejoin="round"
  239.               stroke-width="2"
  240.               d="M14 5l7 7m0 0l-7 7m7-7H3"
  241.             />
  242.           </svg>
  243.         </button>
  244.       </div>
  245.     </div>
  246.     <div class="relative w-24 mx-auto mt-10"></div>
  247.   </div>
  248. </section>
  250.       <!-- end::listing-area  -->
  252.  
  253.       <!-- start::blogs  -->
  254.       <section
  255.   class="py-20 border-b border-gray-200 dark:border-foreground dark:bg-background"
  256. >
  257.   <div class="container mx-auto lg:p-0 p-5">
  258.     <div
  259.       class="flex lg:flex-row flex-col lg:text-left text-center flex-wrap items-center justify-between mb-12"
  260.     >
  261.       <div class="lg:mb-0 mb-4">
  262.         <h1
  263.           class="text-2xl dark:text-gray-200 lg:text-3xl font-medium capitalize mb-2"
  264.           data-aos="fade-up"
  265.           data-aos-duration="800"
  266.         >
  267.           Notre blog
  268.         </h1>
  269.         <h6
  270.           class="text-sm dark:text-gray-400 lg:text-base text-gray-500 font-normal"
  271.           data-aos="fade-up"
  272.           data-aos-duration="1000"
  273.         >
  274.           En savoir plus ce qui se passe près de Sarlat
  275.         </h6>
  276.       </div>
  277.       <div data-aos="fade-up" data-aos-duration="800">
  278.         <a
  279.           href="#"
  280.           type="button"
  281.           class="text-gray-500 dark:text-gray-400 hover:text-blue-500 flex items-center"
  282.         >
  283.           Voir le blog
  284.           <svg
  285.             xmlns="http://www.w3.org/2000/svg"
  286.             class="w-5 ml-3"
  287.             fill="none"
  288.             viewBox="0 0 24 24"
  289.             stroke="currentColor"
  290.             stroke-width="2"
  291.           >
  292.             <path
  293.               stroke-linecap="round"
  294.               stroke-linejoin="round"
  295.               d="M14 5l7 7m0 0l-7 7m7-7H3"
  296.             />
  297.           </svg>
  298.         </a>
  299.       </div>
  300.     </div>
  301.     <!-- Slider main container -->
  302.     <div class="relative">
  303.       <div class="swiper">
  304.         <!-- Additional required wrapper -->
  305.         <div class="swiper-wrapper relative h-full">
  306.           <!-- Slides -->
  307.           <div
  308.             class="swiper-slide mt-4 lg:mb-8"
  309.             data-aos="fade-up"
  310.             data-aos-duration="800"
  311.           >
  312.             <div
  313.               class="shadow-front-1 rounded-lg [&>div]:hover:shadow-front-3 group dark:bg-foreground"
  314.             >
  315.               <a href="#">
  316.                 <img
  317.                   class="w-full h-64 object-cover rounded-t-lg"
  318.                   src="img/Image/landing-page-image/house.jpg"
  319.                   alt=""
  320.                 />
  321.               </a>
  322.               <div class="p-8 dark:bg-foreground rounded-b-lg shadow-front-1">
  323.                 <a
  324.                   href="#"
  325.                   class="text-2xl group-hover:text-blue-500 font-semibold text-gray-700 dark:text-gray-100 mb-4"
  326.                 >
  327.                   Quel hébergement choisir ?
  328.                 </a>
  329.                 <div class="text-sm text-gray-500 mb-7 dark:text-gray-400">
  330.                   Plusieurs types d'hébergements sont à votre disposition mais, lequel choisir ?
  331.                 </div>
  332.                 
  333.               </div>
  334.             </div>
  335.           </div>
  336.           <div
  337.             class="swiper-slide mt-4 mb-8"
  338.             data-aos="fade-up"
  339.             data-aos-duration="800"
  340.           >
  341.             <div
  342.               class="rounded-lg shadow-front-1 [&>div]:hover:shadow-front-3 dark:bg-foreground group"
  343.             >
  344.               <a href="#">
  345.                 <img
  346.                   class="w-full h-64 object-cover rounded-t-lg"
  347.                   src="img/Image/event-landing-page/concert.jpg"
  348.                   alt=""
  349.                 />
  350.               </a>
  351.               <div
  352.                 class="p-8 dark:bg-foreground rounded-b-lg border-b-lg shadow-front-1"
  353.               >
  354.                 <a
  355.                   href="#"
  356.                   class="text-2xl font-semibold text-gray-700 dark:text-gray-100 mb-4 group-hover:text-blue-500"
  357.                 >
  358.                   Les meilleurs concert de l'été
  359.                 </a>
  360.                 <div class="text-sm text-gray-500 mb-7 dark:text-gray-400">
  361.                   Notre sélection des meilleurs concerts et meilleurs lieux en Dordogne.
  362.                 </div>
  363.                 
  364.               </div>
  365.             </div>
  366.           </div>
  367.           <div
  368.             class="swiper-slide mt-4 mb-8"
  369.             data-aos="fade-up"
  370.             data-aos-duration="800"
  371.           >
  372.             <div
  373.               class="shadow-front-1 rounded-lg dark:bg-foreground [&>div]:hover:shadow-front-3 group"
  374.             >
  375.               <a href="#">
  376.                 <img
  377.                   class="w-full h-64 object-cover rounded-t-lg"
  378.                   src="img/Image/landing-page-image/dish.jpg"
  379.                   alt=""
  380.                 />
  381.               </a>
  383.               <div class="p-8 dark:bg-foreground shadow-front-1">
  384.                 <a
  385.                   href="#"
  386.                   class="text-2xl font-semibold text-gray-700 dark:text-gray-100 mb-4 group-hover:text-blue-500"
  387.                 >
  388.                   Les spécialités locales
  389.                 </a>
  390.                 <div class="text-sm text-gray-500 dark:text-gray-400 mb-7">
  391.                   Nos spécialités n'auront plus de secret pour vous après cet article
  392.                 </div>
  393.                 
  394.               </div>
  395.             </div>
  396.           </div>
  397.           <div
  398.             class="swiper-slide mt-4 mb-8"
  399.             data-aos="fade-up"
  400.             data-aos-duration="800"
  401.           >
  402.             <div
  403.               class="shadow-front-1 rounded-lg [&>div]:hover:shadow-front-3 group dark:bg-foreground"
  404.             >
  405.               <a href="#">
  406.                 <img
  407.                   class="w-full h-64 object-cover rounded-t-lg"
  408.                   src="img/Image/landing-page-image/house.jpg"
  409.                   alt=""
  410.                 />
  411.               </a>
  412.               <div class="p-8 dark:bg-foreground rounded-b-lg shadow-front-1">
  413.                 <a
  414.                   href="#"
  415.                   class="text-2xl group-hover:text-blue-500 font-semibold text-gray-700 dark:text-gray-100 mb-4"
  416.                 >
  417.                   Quel hébergement choisir ?
  418.                 </a>
  419.                 <div class="text-sm text-gray-500 mb-7 dark:text-gray-400">
  420.                   Plusieurs types d'hébergements sont à votre disposition mais, lequel choisir ?
  421.                 </div>
  422.                 
  423.               </div>
  424.             </div>
  425.           </div>
  426.         </div>
  428.         <!-- If we need pagination -->
  429.         <div class="swiper-pagination"></div>
  431.         <!-- If we need navigation buttons -->
  432.       </div>
  433.       <div class="swiper-button-prev left-2 lg:-left-3 after:hidden">
  434.         <button
  435.           type="button"
  436.           class="bg-white dark:bg-foreground text-blue-500 hover:bg-blue-500 hover:text-white rounded-full p-3"
  437.         >
  438.           <svg
  439.             xmlns="http://www.w3.org/2000/svg"
  440.             class="h-6 w-6"
  441.             fill="none"
  442.             viewBox="0 0 24 24"
  443.             stroke="currentColor"
  444.           >
  445.             <path
  446.               stroke-linecap="round"
  447.               stroke-linejoin="round"
  448.               stroke-width="2"
  449.               d="M10 19l-7-7m0 0l7-7m-7 7h18"
  450.             />
  451.           </svg>
  452.         </button>
  453.       </div>
  454.       <div class="swiper-button-next absolute right-2 lg:-right-3 after:hidden">
  455.         <button
  456.           type="button"
  457.           class="bg-white dark:bg-foreground text-blue-500 hover:bg-blue-500 hover:text-white rounded-full p-3"
  458.         >
  459.           <svg
  460.             xmlns="http://www.w3.org/2000/svg"
  461.             class="h-6 w-6"
  462.             fill="none"
  463.             viewBox="0 0 24 24"
  464.             stroke="currentColor"
  465.           >
  466.             <path
  467.               stroke-linecap="round"
  468.               stroke-linejoin="round"
  469.               stroke-width="2"
  470.               d="M14 5l7 7m0 0l-7 7m7-7H3"
  471.             />
  472.           </svg>
  473.         </button>
  474.       </div>
  475.     </div>
  476.     <div class="relative w-24 mx-auto mt-10"></div>
  477.   </div>
  478. </section>
  480.       <!-- end::blogs  -->
  482.       <!-- start::scroll-top-btn  -->
  483.       <div class="scroll-top-btn opacity-0 transition-all">
  484.   <button
  485.     type="button"
  486.     class="bg-blue-500 p-2 fixed z-50 bottom-0 hover:-translate-y-2 transition-all right-0 m-10 rounded-full"
  487.   >
  488.     <svg
  489.       xmlns="http://www.w3.org/2000/svg"
  490.       class="h-6 w-6 text-white"
  491.       fill="none"
  492.       viewBox="0 0 24 24"
  493.       stroke="currentColor"
  494.       stroke-width="2"
  495.     >
  496.       <path
  497.         stroke-linecap="round"
  498.         stroke-linejoin="round"
  499.         d="M7 11l5-5m0 0l5 5m-5-5v12"
  500.       />
  501.     </svg>
  502.   </button>
  503. </div>
  505.       <!-- end::newsletter  -->
  506.  
  508. {% endblock %}