templates/main/home/index.html.twig line 1

Open in your IDE?
  1. {% extends "main/base.html.twig" %}
  2. {% import "macros/search.html.twig" as search %}
  3. {% block title %}Accueil - Explorez notre boutique dès aujourd'hui et découvrez des solutions électroniques de pointe pour améliorer votre vie quotidienne.{% endblock %}
  5. {% block main %}
  6.         <main class="main">
  7.             <div class="intro-slider-container mb-5">
  8.                 <div class="intro-slider owl-carousel owl-theme owl-nav-inside owl-light" data-toggle="owl" 
  9.                     data-owl-options='{
  10.                         "dots": true,
  11.                         "nav": false, 
  12.                         "responsive": {
  13.                             "1200": {
  14.                                 "nav": true,
  15.                                 "dots": false
  16.                             }
  17.                         }
  18.                     }'>
  19.                     <div class="intro-slide" style="background-image: url({{asset('img/diapo-1.png')}});">
  20.                         <div class="container intro-content">
  21.                             <div class="row justify-content-end">
  22.                                 <div class="col-auto col-sm-7 col-md-6 col-lg-5">
  23.                                     {# <h3 class="intro-subtitle text-third">Deals and Promotions</h3><!-- End .h3 intro-subtitle --> #}
  24.                                     {# <h1 class="intro-title">Beats by</h1> #}
  25.                                     <h1 class="intro-title">La qualité à portée de clic !</h1><!-- End .intro-title -->
  27.                                     {# <div class="intro-price">
  28.                                         <sup class="intro-old-price">$349,95</sup>
  29.                                         <span class="text-third">
  30.                                             $279<sup>.99</sup>
  31.                                         </span>
  32.                                     </div><!-- End .intro-price --> #}
  34.                                     <a href="{{path('articles')}}" class="btn btn-primary btn-round">
  35.                                         <span>Achetez maintenant</span>
  36.                                         <i class="icon-long-arrow-right"></i>
  37.                                     </a>
  38.                                 </div><!-- End .col-lg-11 offset-lg-1 -->
  39.                             </div><!-- End .row -->
  40.                         </div><!-- End .intro-content -->
  41.                     </div><!-- End .intro-slide -->
  43.                     <div class="intro-slide" style="background-image: url({{asset('img/diapo-2.png')}});">
  44.                         <div class="container intro-content">
  45.                             <div class="row justify-content-end">
  46.                                 <div class="col-auto col-sm-7 col-md-6 col-lg-5">
  47.                                     {# <h3 class="intro-subtitle text-primary">New Arrival</h3><!-- End .h3 intro-subtitle --> #}
  48.                                     <h2 class="intro-title">Découvrez la magie du shopping en ligne  <br> </h2><!-- End .intro-title -->
  50.                                     
  51.                                     <a href="{{ path('articles')}}" class="btn btn-primary btn-round">
  52.                                         <span>Boutique</span>
  53.                                         <i class="icon-long-arrow-right"></i>
  54.                                     </a>
  55.                                 </div><!-- End .col-md-6 offset-md-6 -->
  56.                             </div><!-- End .row -->
  57.                         </div><!-- End .intro-content -->
  58.                     </div><!-- End .intro-slide -->
  59.                 </div><!-- End .intro-slider owl-carousel owl-simple -->
  61.                 <span class="slider-loader"></span><!-- End .slider-loader -->
  62.             </div><!-- End .intro-slider-container -->
  64.             <div class="container">
  65.                 <h2 class="title text-center mb-4">Explorer les catégories populaires</h2><!-- End .title text-center -->                
  66.                 <div class="cat-blocks-container">
  67.                     <div class="row">
  68.                         <div class="col-6 col-sm-4 col-lg-2">
  69.                             <a href="/boutique/pmd-store/ordinateurs/ordinateur-portable" class="cat-block">
  70.                                 <figure>
  71.                                     <span>
  72.                                         <img src="{{ asset('img/cats/1.png')}}" alt="Category image">
  73.                                     </span>
  74.                                 </figure>
  76.                                 <h3 class="cat-block-title">Ordinateur Portable</h3><!-- End .cat-block-title -->
  77.                             </a>
  78.                         </div><!-- End .col-sm-4 col-lg-2 -->
  79.                         <div class="col-6 col-sm-4 col-lg-2">
  80.                             <a href="#" class="cat-block">
  81.                                 <figure>
  82.                                     <span>
  83.                                         <img src="{{ asset('img/cats/3.png')}}" width="130px" alt="Category image">
  84.                                     </span>
  85.                                 </figure>
  87.                                 <h3 class="cat-block-title">Ordinateur de bureau</h3><!-- End .cat-block-title -->
  88.                             </a>
  89.                         </div><!-- End .col-sm-4 col-lg-2 -->
  91.                         <div class="col-6 col-sm-4 col-lg-2">
  92.                             <a href="/boutique/pmd-store/claviers-et-souris/claviers" class="cat-block">
  93.                                 <figure>
  94.                                     <span>
  95.                                         <img src="{{ asset('img/cats/7.png') }}" width="100px" alt="Category image">
  96.                                     </span>
  97.                                 </figure>
  99.                                 <h3 class="cat-block-title">Claviers</h3><!-- End .cat-block-title -->
  100.                             </a>
  101.                         </div><!-- End .col-sm-4 col-lg-2 -->
  104.                         <div class="col-6 col-sm-4 col-lg-2">
  105.                             <a href="/boutique/pmd-store/imprimante-et-accessoires/imprimante" class="cat-block">
  106.                                 <figure>
  107.                                     <span>
  108.                                         <img src="{{ asset('img/cats/8.png') }}" width="100px" alt="Category image">
  109.                                     </span>
  110.                                 </figure>
  112.                                 <h3 class="cat-block-title">Imprimante</h3><!-- End .cat-block-title -->
  113.                             </a>
  114.                         </div><!-- End .col-sm-4 col-lg-2 -->
  116.                         <div class="col-6 col-sm-4 col-lg-2">
  117.                             <a href="/boutique/pmd-store/memoire/disque-dur" class="cat-block">
  118.                                 <figure>
  119.                                     <span>
  120.                                         <img src="{{ asset('img/cats/9.png') }}" alt="Category image">
  121.                                     </span>
  122.                                 </figure>
  124.                                 <h3 class="cat-block-title">Disqsue dur externe</h3><!-- End .cat-block-title -->
  125.                             </a>
  126.                         </div><!-- End .col-sm-4 col-lg-2 -->
  128.                         <div class="col-6 col-sm-4 col-lg-2">
  129.                             <a href="/boutique/pmd-store/accessoires-de-reseau/repeteurs-wi-fi" class="cat-block">
  130.                                 <figure>
  131.                                     <span>
  132.                                         <img src="{{ asset('img/cats/10.png') }}" width="100px" alt="Category image">
  133.                                     </span>
  134.                                 </figure>
  136.                                 <h3 class="cat-block-title">Répéteurs Wi-Fi</h3><!-- End .cat-block-title -->
  137.                             </a>
  138.                         </div><!-- End .col-sm-4 col-lg-2 -->
  139.                     </div><!-- End .row -->
  140.                 </div><!-- End .cat-blocks-container -->
  141.             </div><!-- End .container -->
  143.             <div class="mb-3"></div><!-- End .mb-5 -->
  144.             {% if articles.arrivage_all|length > 0 %}
  146.             <div class="container new-arrivals">
  147.                 <div class="heading heading-flex mb-3">
  148.                     <div class="heading-left">
  149.                         <h2 class="title">Nouvel arrivage</h2><!-- End .title -->
  150.                     </div><!-- End .heading-left -->
  152.                    <div class="heading-right">
  153.                         <ul class="nav nav-pills nav-border-anim justify-content-center" role="tablist">
  154.                             <li class="nav-item">
  155.                                 <a class="nav-link active" id="new-all-link" data-toggle="tab" href="#new-all-tab" role="tab" aria-controls="new-all-tab" aria-selected="true">Tous</a>
  156.                             </li>
  157.                             {% if articles.laptops|length > 0 %}
  158.                             <li class="nav-item">
  159.                                 <a class="nav-link" id="new-computers-link" data-toggle="tab" href="#new-computers-tab" role="tab" aria-controls="new-computers-tab" aria-selected="false">Oridinateur portable</a>
  160.                             </li>
  161.                             {% endif %}
  162.                             {% if articles.claviers_souris|length > 0 %}
  163.                             <li class="nav-item">
  164.                                 <a class="nav-link" id="new-phones-link" data-toggle="tab" href="#new-phones-tab" role="tab" aria-controls="new-phones-tab" aria-selected="false">Claviers & Souris</a>
  165.                             </li>
  166.                             {% endif %}
  167.                             {% if articles.support_ordinateur_portable|length > 0 %}
  168.                             <li class="nav-item">
  169.                                 <a class="nav-link" id="new-acc-link" data-toggle="tab" href="#new-acc-tab" role="tab" aria-controls="new-acc-tab" aria-selected="false">Support d'Ordinateur Portable</a>
  170.                             </li>
  171.                             {% endif %}
  172.                             
  173.                             
  174.                         </ul>
  175.                    </div><!-- End .heading-right -->
  176.                 </div><!-- End .heading -->
  178.                 
  179.                 <div class="tab-content tab-content-carousel just-action-icons-sm">
  180.                     <div class="tab-pane p-0 fade show active" id="new-all-tab" role="tabpanel" aria-labelledby="new-all-link">
  181.                         <div class="owl-carousel owl-full carousel-equal-height carousel-with-shadow" data-toggle="owl" 
  182.                             data-owl-options='{
  183.                                 "nav": true, 
  184.                                 "dots": true,
  185.                                 "margin": 20,
  186.                                 "loop": false,
  187.                                 "responsive": {
  188.                                     "0": {
  189.                                         "items":2
  190.                                     },
  191.                                     "480": {
  192.                                         "items":2
  193.                                     },
  194.                                     "768": {
  195.                                         "items":3
  196.                                     },
  197.                                     "992": {
  198.                                         "items":4
  199.                                     },
  200.                                     "1200": {
  201.                                         "items":5
  202.                                     }
  203.                                 }
  204.                             }'>
  205.                             {% for article in articles.arrivage_all %}
  206.                                 {% include base ~ "/shop/product/_product_2.html.twig" %}
  207.                             {% endfor %}
  208.                         </div><!-- End .owl-carousel -->
  209.                     </div><!-- .End .tab-pane -->
  210.                     {% if articles.laptops|length > 0 %}
  211.                     <div class="tab-pane p-0 fade" id="new-computers-tab" role="tabpanel" aria-labelledby="new-computers-link">
  212.                         <div class="owl-carousel owl-full carousel-equal-height carousel-with-shadow" data-toggle="owl" 
  213.                             data-owl-options='{
  214.                                 "nav": true, 
  215.                                 "dots": true,
  216.                                 "margin": 20,
  217.                                 "loop": false,
  218.                                 "responsive": {
  219.                                     "0": {
  220.                                         "items":2
  221.                                     },
  222.                                     "480": {
  223.                                         "items":2
  224.                                     },
  225.                                     "768": {
  226.                                         "items":3
  227.                                     },
  228.                                     "992": {
  229.                                         "items":4
  230.                                     },
  231.                                     "1200": {
  232.                                         "items":5
  233.                                     }
  234.                                 }
  235.                             }'>
  236.                             {% for article in articles.laptops %}
  237.                                 {% include base ~ "/shop/product/_product_2.html.twig" %}
  238.                             {% endfor %}
  239.                         </div><!-- End .owl-carousel -->
  240.                     </div><!-- .End .tab-pane -->
  241.                     {% endif %}
  242.                      {% if articles.claviers_souris|length > 0 %}
  243.                     <div class="tab-pane p-0 fade" id="new-phones-tab" role="tabpanel" aria-labelledby="new-phones-link">
  244.                         <div class="owl-carousel owl-full carousel-equal-height carousel-with-shadow" data-toggle="owl" 
  245.                             data-owl-options='{
  246.                                 "nav": true, 
  247.                                 "dots": true,
  248.                                 "margin": 20,
  249.                                 "loop": false,
  250.                                 "responsive": {
  251.                                     "0": {
  252.                                         "items":2
  253.                                     },
  254.                                     "480": {
  255.                                         "items":2
  256.                                     },
  257.                                     "768": {
  258.                                         "items":3
  259.                                     },
  260.                                     "992": {
  261.                                         "items":4
  262.                                     },
  263.                                     "1200": {
  264.                                         "items":5
  265.                                     }
  266.                                 }
  267.                             }'>
  269.                             {% for article in articles.claviers_souris %}
  270.                                 {% include base ~ "/shop/product/_product_2.html.twig" %}
  271.                             {% endfor %}
  272.                         </div><!-- End .owl-carousel -->
  273.                     </div><!-- .End .tab-pane -->
  274.                     {% endif %}
  275.                     
  278.                     <div class="tab-pane p-0 fade" id="new-watches-tab" role="tabpanel" aria-labelledby="new-watches-link">
  279.                         <div class="owl-carousel owl-full carousel-equal-height carousel-with-shadow" data-toggle="owl" 
  280.                             data-owl-options='{
  281.                                 "nav": true, 
  282.                                 "dots": true,
  283.                                 "margin": 20,
  284.                                 "loop": false,
  285.                                 "responsive": {
  286.                                     "0": {
  287.                                         "items":2
  288.                                     },
  289.                                     "480": {
  290.                                         "items":2
  291.                                     },
  292.                                     "768": {
  293.                                         "items":3
  294.                                     },
  295.                                     "992": {
  296.                                         "items":4
  297.                                     },
  298.                                     "1200": {
  299.                                         "items":5
  300.                                     }
  301.                                 }
  302.                             }'>
  303.                             {% for article in articles.imprimante_accessoires %}
  304.                                 {% include base ~ "/shop/product/_product_2.html.twig" %}
  305.                             {% endfor %}
  307.                         </div><!-- End .owl-carousel -->
  308.                     </div><!-- .End .tab-pane -->
  309.                     {% if articles.support_ordinateur_portable|length > 0 %}
  310.                     <div class="tab-pane p-0 fade" id="new-acc-tab" role="tabpanel" aria-labelledby="new-acc-link">
  311.                         <div class="owl-carousel owl-full carousel-equal-height carousel-with-shadow" data-toggle="owl" 
  312.                             data-owl-options='{
  313.                                 "nav": true, 
  314.                                 "dots": true,
  315.                                 "margin": 20,
  316.                                 "loop": false,
  317.                                 "responsive": {
  318.                                     "0": {
  319.                                         "items":2
  320.                                     },
  321.                                     "480": {
  322.                                         "items":2
  323.                                     },
  324.                                     "768": {
  325.                                         "items":3
  326.                                     },
  327.                                     "992": {
  328.                                         "items":4
  329.                                     },
  330.                                     "1200": {
  331.                                         "items":5
  332.                                     }
  333.                                 }
  334.                             }'>
  335.                             {% for article in articles.support_ordinateur_portable %}
  336.                                 {% include base ~ "/shop/product/_product_2.html.twig" %}
  337.                             {% endfor %}
  338.                         </div><!-- End .owl-carousel -->
  339.                     </div><!-- .End .tab-pane -->
  340.                     {% endif %}
  341.                     
  342.                 </div><!-- End .tab-content -->
  343.             </div><!-- End .container -->
  344.             
  345.             {% endif %}
  346.             <div class="mb-6"></div><!-- End .mb-6 -->
  347.             
  349.             <div class="container">
  350.                 <div class="cta cta-border mb-5" style="background-image: url({{asset('img/bg-1.jpg')}});">
  351.                     <img src="{{ asset('img/1.png')}}" width="300px" alt="ordinateur" class="cta-img">
  352.                     <div class="row justify-content-center">
  353.                         <div class="col-md-12">
  354.                             <div class="cta-content">
  355.                                 <div class="cta-text text-right text-white">
  356.                                     <p>Achetez<br><strong>En toute simplicité.</strong></p>
  357.                                 </div><!-- End .cta-text -->
  358.                                 <a href="{{ path('articles')}}" class="btn btn-primary btn-round"><span>Boutique</span><i class="icon-long-arrow-right"></i></a>
  359.                             </div><!-- End .cta-content -->
  360.                         </div><!-- End .col-md-12 -->
  361.                     </div><!-- End .row -->
  362.                 </div><!-- End .cta -->
  363.             </div><!-- End .container -->
  365.             <div class="mb-5"></div><!-- End .mb-5 -->
  366.                 {% if articles.recommandez|length > 0 %}
  367.             <div class="container for-you">
  368.                 <div class="heading heading-flex mb-3">
  369.                     <div class="heading-left">
  370.                         <h2 class="title">Nos Recommandations</h2><!-- End .title -->
  371.                     </div><!-- End .heading-left -->
  373.                    <div class="heading-right">
  374.                         <a href="{{ path('articles')}}" class="title-link">Voir tous les articles <i class="icon-long-arrow-right"></i></a>
  375.                    </div><!-- End .heading-right -->
  376.                 </div><!-- End .heading -->
  378.                 <div class="products">
  379.                     <div class="row justify-content-center">
  380.                         {% for article in articles.recommandez %}
  381.                         <div class="col-6 col-md-4 col-lg-3">
  382.                                 {% include base ~ "/shop/product/_product_2.html.twig" %}
  383.                         </div><!-- End .col-sm-6 col-md-4 col-lg-3 -->
  384.                             {% endfor %}
  385.                     </div><!-- End .row -->
  386.                 </div><!-- End .products -->
  387.             </div><!-- End .container -->
  389.             <div class="mb-4"></div><!-- End .mb-4 -->
  390.                 {% endif %}
  391.                 
  392.             <div class="container">
  393.                 <hr class="mb-0">
  394.             </div><!-- End .container -->
  396.             <div class="icon-boxes-container bg-transparent">
  397.                 <div class="container">
  398.                     <div class="row">
  399.                         <div class="col-sm-6 col-lg-4">
  400.                             <div class="icon-box icon-box-side">
  401.                                 <span class="icon-box-icon text-dark">
  402.                                     <i class="icon-rocket"></i>
  403.                                 </span>
  404.                                 <div class="icon-box-content">
  405.                                     <h3 class="icon-box-title">Livraison gratuite</h3><!-- End .icon-box-title -->
  406.                                     <p>A partir de 100 000 F cfa</p>
  407.                                 </div><!-- End .icon-box-content -->
  408.                             </div><!-- End .icon-box -->
  409.                         </div><!-- End .col-sm-6 col-lg-3 -->
  411.                         <div class="col-sm-6 col-lg-4">
  412.                             <div class="icon-box icon-box-side">
  413.                                 <span class="icon-box-icon text-dark">
  414.                                     <i class="icon-rotate-left"></i>
  415.                                 </span>
  417.                                 <div class="icon-box-content">
  418.                                     <h3 class="icon-box-title">Garantie </h3><!-- End .icon-box-title -->
  419.                                     <p>3 mois</p>
  420.                                 </div><!-- End .icon-box-content -->
  421.                             </div><!-- End .icon-box -->
  422.                         </div><!-- End .col-sm-6 col-lg-3 -->
  425.                         <div class="col-sm-6 col-lg-4">
  426.                             <div class="icon-box icon-box-side">
  427.                                 <span class="icon-box-icon text-dark">
  428.                                     <i class="icon-life-ring"></i>
  429.                                 </span>
  431.                                 <div class="icon-box-content">
  432.                                     <h3 class="icon-box-title">Notre support techniques</h3><!-- End .icon-box-title -->
  433.                                     <p>Du lundi au samedi de 08h à 19h</p>
  434.                                 </div><!-- End .icon-box-content -->
  435.                             </div><!-- End .icon-box -->
  436.                         </div><!-- End .col-sm-6 col-lg-3 -->
  437.                     </div><!-- End .row -->
  438.                 </div><!-- End .container -->
  439.             </div><!-- End .icon-boxes-container -->
  440.         </main><!-- End .main -->
  441. {% endblock %}