templates/default/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}MOPO - Accueil{% endblock %}
  6. {% block body %}
  7.     <!-- BEGIN #background -->
  8.     <div class="banner">
  9.         <div class="container">
  10.             <div class="row">
  11.                 <div class="col-12 d-flex justify-content-center">
  12.                     <img class="mt-3 banner-logo" src="{{ asset('assets/img/logo/logo.png') }}" alt="logo">
  13.                 </div>
  14.             </div>
  15.         </div>
  16.     </div>
  17.     <!-- END #background -->
  18.     <!-- BEGIN #page-container -->
  19.     <div id="page-container" class="fade show">
  21.         <!-- BEGIN section -->
  22.         <div class="section-container bg-white">
  23.             <div class="mt-3 mb-5">
  24.                 {% include 'search/search.html.twig' %}
  25.             </div>
  26.             <!-- BEGIN container -->
  27.             <div class="container">
  28.                 <div class="row">
  29.                     <div class="col-lg-6 col-md-6 col-sm-12">
  30.                         <img class="img-fluid rounded-2 shadow-lg" src="{{ asset('assets/img/background/motos.jpg') }}"
  31.                              alt="motos">
  32.                     </div>
  33.                     <div class="col-lg-6 col-md-6 col-sm-12">
  34.                         <h2 class="text-red-600 text-center m-3">Qui sommes-nous ?</h2>
  35.                         <p>
  36.                             Fort de notre expérience et de nos années passées en compétition moto.
  37.                             C’est tout naturellement que naît l’entreprise MOPO.<br>
  38.                             Nous vous proposons à la vente des pièces moto d’occasion, vérifiées par nos soins pour vous
  39.                             apporter satisfaction et une utilisation optimale.<br>
  40.                             MOPO se veut une entreprise à l'esprit familial et proche de sa clientèle.<br>
  41.                             Nous avons à cœur de satisfaire nos clients avec des pièces de qualités, mais toujours dans
  42.                             le respect environnemental.<br>
  43.                             Nous vous souhaitons une bonne visite sur notre site !<br><br>
  44.                             N'hésitez pas à prendre contact avec nous si vous avez besoin d'informations complémentaires
  45.                             ! Un formulaire vous est mis à disposition dans la rubrique "Contact".
  46.                         </p>
  47.                         <div class="d-flex justify-content-center">
  48.                             <a href="{{ path('contact') }}">
  49.                                 <button class="custom-btn">
  50.                                     <span>Nous contacter</span>
  51.                                 </button>
  52.                             </a>
  53.                         </div>
  54.                     </div>
  55.                 </div>
  56.             </div>
  57.             <!-- END container -->
  58.         </div>
  59.         <!-- END section -->
  60.         <!-- BEGIN section -->
  61.         <div class="section-container bg-gray-300 mt-5">
  62.             <!-- BEGIN container -->
  63.             <div class="container">
  64.                 <!-- BEGIN section-title -->
  65.                 <!-- BEGIN section-title -->
  66.                 <h2 class="text-red-600 section-title">
  67.                     Récemment ajoutées
  68.                 </h2>
  69.                 <!-- END section-title -->
  70.                 <!-- BEGIN category-container -->
  71.                 <div class="category-container">
  72.                     <!-- BEGIN category-detail -->
  73.                     <div class="category-detail">
  74.                         <!-- BEGIN category-item -->
  75.                         <div class="category-item full">
  76.                             <div class="item rounded">
  77.                                 <div class="item-cover">
  78.                                     <img src="{{ asset("assets/img/background/moto.jpg") }}" alt="moto"/>
  79.                                 </div>
  80.                             </div>
  81.                         </div>
  82.                         <!-- END category-item -->
  83.                         <!-- BEGIN category-item -->
  84.                         <div class="category-item list">
  85.                             <!-- BEGIN item-row -->
  86.                             <div class="item-row">
  87.                                 <!-- BEGIN item -->
  88.                                 {% for product in recently_added_products %}
  89.                                     <div class="item item-thumbnail border">
  90.                                         <a href="{{ path('product_details', {'id': product.id}) }}" class="item-image">
  91.                                             {% if product.images is empty %}
  92.                                                 <img src="{{ asset('assets/img/product/default.png') }}"
  93.                                                      alt="no image"/>
  94.                                             {% else %}
  95.                                                 <img src="{{ asset('assets/img/product/' ~ product.images[0].imageName) }}"
  96.                                                      alt="{{ product.images[0].imageName }}"/>
  97.                                             {% endif %}
  98.                                         </a>
  99.                                         <div class="item-info border-1">
  100.                                             <h4 class="item-title">
  101.                                                 <a href="{{ path('product_details', {'id': product.id}) }}">{{ product.productName }}</a>
  102.                                             </h4>
  103.                                             <p class="item-desc"><strong>Marque:</strong> {{ product.brand }}, <strong>Modèle:</strong> {{ product.model }}
  104.                                                 , <strong>État:</strong> {{ product.condition }}</p>
  105.                                             <div class="item-price">{{ product.productPrice }} € TTC</div>
  106.                                             <p class="item-desc">{{ (product.productPrice / tva)|number_format(2) }}€
  107.                                                 HT</p>
  108.                                         </div>
  109.                                     </div>
  110.                                 {% endfor %}
  111.                                 <!-- END item -->
  112.                             </div>
  113.                             <!-- END item-row -->
  114.                         </div>
  115.                         <!-- END category-item -->
  116.                     </div>
  117.                     <!-- END category-detail -->
  118.                 </div>
  119.                 <!-- END category-container -->
  120.             </div>
  121.             <!-- END container -->
  122.         </div>
  123.         <!-- END section -->
  124.         <!-- BEGIN section -->
  125.         <div class="section-container bg-white">
  126.             <div class="container">
  127.                 <!-- BEGIN section-title -->
  128.                 <h2 class="text-red-600 section-title clearfix">
  129.                     <span class="flex-1">Les différentes marques</span>
  130.                     <div class="dropdown">
  131.                         <a class="btn btn-outline-red dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
  132.                            data-bs-toggle="dropdown" aria-expanded="false">
  133.                             VOIR PLUS <i class="fa-solid fa-angle-down ms-1"></i>
  134.                         </a>
  136.                         <ul class="dropdown-menu pt-0 mt-1" aria-labelledby="dropdownMenuLink">
  137.                             {% for brand in brands %}
  138.                                 <li><a class="dropdown-item"
  139.                                        href="{{ path('brand', {'id': brand.id}) }}">{{ brand.brandName }}</a></li>
  140.                             {% endfor %}
  141.                         </ul>
  142.                     </div>
  143.                 </h2>
  144.                 <!-- END section-title -->
  145.                 <div class="row mt-3">
  146.                     {% for logo in brands %}
  147.                         <div class="col-lg-3 col-md-3 col-sm-12 d-flex justify-content-center mt-3">
  148.                             <a href="{{ path('brand', {'id': logo.id}) }}">
  149.                                 <div class="card card-zoom shadow-lg" style="width: 15rem;">
  150.                                     <img src="{{ asset('assets/img/brand/' ~ logo.brandLogoImage) }}"
  151.                                          class="card-img-top brand" alt="{{ logo.brandName }}">
  152.                                 </div>
  153.                             </a>
  154.                         </div>
  155.                     {% endfor %}
  156.                 </div>
  157.             </div>
  158.         </div>
  159.         <!-- END section -->
  160.         {#<div class="section-container bg-gray-300">
  161.             <div class="container">
  162.                 <!-- BEGIN section-title -->
  163.                 <h2 class="text-red-600 section-title clearfix">
  164.                     <span class="flex-1">Les différentes catégories</span>
  165.                     <div class="dropdown">
  166.                         <a class="btn btn-outline-red dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
  167.                            data-bs-toggle="dropdown" aria-expanded="false">
  168.                             VOIR PLUS <i class="fa-solid fa-angle-down ms-1"></i>
  169.                         </a>
  171.                         <ul class="dropdown-menu pt-0 mt-1" aria-labelledby="dropdownMenuLink">
  172.                             <li><a class="dropdown-item" href="#">Motos classiques</a></li>
  173.                             <li><a class="dropdown-item" href="#">Motos routières</a></li>
  174.                             <li><a class="dropdown-item" href="#">Motos sportives</a></li>
  175.                             <li><a class="dropdown-item" href="#">Lorem ipsum</a></li>
  176.                             <li><a class="dropdown-item" href="#">Lorem ipsum</a></li>
  177.                             <li><a class="dropdown-item" href="#">Lorem ipsum</a></li>
  178.                             <li><a class="dropdown-item" href="#">Lorem ipsum</a></li>
  179.                             <li><a class="dropdown-item" href="#">Lorem ipsum</a></li>
  180.                         </ul>
  181.                     </div>
  182.                 </h2>
  183.                 <!-- END section-title -->
  184.             </div>
  185.             <div class="container mt-5">
  186.                 <div class="row">
  187.                     <div class="col-lg-4 col-md-4 col-sm-12 d-flex justify-content-center mb-5">
  188.                         <!-- BEGIN CARD -->
  189.                         <a href="#" class="card-link">
  190.                             <div class="card card-zoom p-0 col-lg-6 col-sm-12 m-2 border-0 shadow rounded-3 card-overlay"
  191.                                  style="width: 13rem; height: 8rem;">
  192.                                 <div class="d-flex justify-content-center img-overlay">
  193.                                     <img src="{{ asset('assets/img/icon/moto_classique.png') }}" class="card-img-top"
  194.                                          alt="moto classique">
  195.                                 </div>
  196.                                 <div class="card-body text-center d-flex justify-content-center card-margin">
  197.                                     <p class="uppercase">Motos classiques</p>
  198.                                 </div>
  199.                             </div>
  200.                         </a>
  201.                         <!-- END CARD -->
  202.                     </div>
  203.                     <div class="col-lg-4 col-md-4 col-sm-12 d-flex justify-content-center mb-5">
  204.                         <!-- BEGIN CARD -->
  205.                         <a href="#" class="card-link">
  206.                             <div class="card card-zoom p-0 col-lg-6 col-sm-12 m-2 border-0 shadow rounded-3 card-overlay"
  207.                                  style="width: 13rem; height: 8rem;">
  208.                                 <div class="d-flex justify-content-center img-overlay">
  209.                                     <img src="{{ asset('assets/img/icon/moto_route.png') }}" class="card-img-top"
  210.                                          alt="moto routière">
  211.                                 </div>
  212.                                 <div class="card-body text-center d-flex justify-content-center card-margin">
  213.                                     <p class="uppercase">Motos routières</p>
  214.                                 </div>
  215.                             </div>
  216.                         </a>
  217.                         <!-- END CARD -->
  218.                     </div>
  219.                     <div class="col-lg-4 col-md-4 col-sm-12 d-flex justify-content-center mb-5">
  220.                         <!-- BEGIN CARD -->
  221.                         <a href="#" class="card-link">
  222.                             <div class="card card-zoom p-0 col-lg-6 col-sm-12 m-2 border-0 shadow rounded-3 card-overlay"
  223.                                  style="width: 13rem; height: 8rem;">
  224.                                 <div class="d-flex justify-content-center img-overlay">
  225.                                     <img src="{{ asset('assets/img/icon/moto_sport.png') }}" class="card-img-top"
  226.                                          alt="moto sportive">
  227.                                 </div>
  228.                                 <div class="card-body text-center d-flex justify-content-center card-margin">
  229.                                     <p class="uppercase">Motos sportives</p>
  230.                                 </div>
  231.                             </div>
  232.                         </a>
  233.                         <!-- END CARD -->
  234.                     </div>
  235.                                         <div class="col-lg-3 col-sm-12 d-flex justify-content-center mb-5">
  236.                         <!-- BEGIN CARD -->
  237.                         <a href="#" class="card-link">
  238.                             <div class="card card-zoom p-0 col-lg-6 col-sm-12 m-2 border-0 shadow rounded-3 card-overlay"
  239.                                  style="width: 13rem; height: 8rem;">
  240.                                 <div class="d-flex justify-content-center img-overlay">
  241.                                     <img src="{{ asset('assets/img/icon/moto_terrain.png') }}" class="card-img-top"
  242.                                          alt="moto tout terrain">
  243.                                 </div>
  244.                                 <div class="card-body text-center d-flex justify-content-center card-margin">
  245.                                     <p class="uppercase item-desc">Motos tout terrain</p>
  246.                                 </div>
  247.                             </div>
  248.                         </a>
  249.                         <!-- END CARD -->
  250.                     </div>
  251.                 </div>
  252.             </div>
  253.         </div>#}
  254.     </div>
  255. {% endblock %}