templates/defaut/notice.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %} {% endblock %}
  5. {% block body %}
  6.     <!-- =======================
  7. Page Banner START -->
  8.     <section class="pt-5 pb-0" style="background-image:url(/assets/images/element/map.svg); background-position: center left; background-size: cover;">
  9.         <div class="container">
  10.             <div class="row">
  11.                 <div class="col-lg-8 col-xl-6 text-center mx-auto">
  12.                     <!-- Title -->
  13.                     <h6 class="text-primary">  </h6>
  14.                     <h1 class="mb-4"> Avis</h1>
  15.                 </div>
  16.                 {% include 'message_flash.html.twig' %}
  17.             </div>
  19.             <!-- Contact info box -->
  20.             <div class="row g-4 g-md-5 mt-0 mt-lg-3">
  22.             </div>
  23.         </div>
  24.     </section>
  25.     <!-- =======================
  26.     Page Banner END -->
  28.     <!-- =======================
  29. Reviews START -->
  30.     <section class="bg-light">
  31.         <div class="container">
  32.             <div class="row g-4 g-lg-5 align-items-center">
  33.                 <div class="col-xl-7 order-2 order-xl-1">
  34.                     <div class="row mt-0 mt-xl-5">
  35.                         <!-- Review -->
  36.                         <div class="col-md-7 position-relative mb-0 mt-0 mt-md-5">
  37.                             <!-- SVG -->
  38.                             <figure class="fill-danger opacity-2 position-absolute top-0 start-0 translate-middle mb-3">
  39.                                 <svg width="211px" height="211px">
  40.                                     <path d="M210.030,105.011 C210.030,163.014 163.010,210.029 105.012,210.029 C47.013,210.029 -0.005,163.014 -0.005,105.011 C-0.005,47.015 47.013,-0.004 105.012,-0.004 C163.010,-0.004 210.030,47.015 210.030,105.011 Z"></path>
  41.                                 </svg>
  42.                             </figure>
  44.                             {% for notice in notices|slice(0, 1) %}
  45.                             <div class="bg-body shadow text-center p-4 rounded-3 position-relative mb-5 mb-md-0">
  46.                                 <!-- Avatar -->
  47.                                 <div class="avatar avatar-xl mb-3">
  48.                                     <i class="fas fa-user-circle fa-5x"></i>
  49.                                 </div>
  50.                                 <!-- Content -->
  51.                                 <blockquote>
  52.                                     <p>
  53.                                         <span class="me-1 small"><i class="fas fa-quote-left"></i></span>
  54.                                         {{ notice.content }}
  55.                                         <span class="ms-1 small"><i class="fas fa-quote-right"></i></span>
  56.                                     </p>
  57.                                 </blockquote>
  58.                                 <!-- Rating -->
  59.                                 <ul class="list-inline mb-2">
  60.                                     <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i>
  61.                                     </li>
  62.                                     <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i>
  63.                                     </li>
  64.                                     <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i>
  65.                                     </li>
  66.                                     <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i>
  67.                                     </li>
  68.                                     <li class="list-inline-item me-0 small"><i
  69.                                                 class="fas fa-star text-warning"></i></li>
  70.                                 </ul>
  71.                                 <!-- Info -->
  72.                                 <h6 class="mb-0">{{ notice.name }}</h6>
  73.                             </div>
  74.                             {% endfor %}
  75.                         </div>
  77.                         <!-- Mentor list -->
  78.                         <div class="col-md-5 mt-5 mt-md-0 d-none d-md-block">
  79.                             <div class=" shadow p-4 rounded-3 d-inline-block position-relative">
  80.                                 <img src="assets/images/likes.gif" width="100" alt="Icon">
  82.                             </div>
  83.                         </div>
  84.                     </div> <!-- Row END -->
  86.                     <div class="row mt-5 mt-xl-0">
  87.                         <!-- Rating -->
  88.                         <div class="col-7 mt-0 mt-xl-5 text-end position-relative z-index-1 d-none d-md-block">
  89.                             <!-- SVG -->
  90.                             <figure class="fill-danger position-absolute top-0 start-50 mt-n7 ms-6 ps-3 pt-2 z-index-n1 d-none d-lg-block">
  91.                                 <svg enable-background="new 0 0 160.7 159.8" height="180px">
  92.                                     <path d="m153.2 114.5c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2-0.1-1.2 0.9-2.2 2.1-2.2z"/>
  93.                                     <path d="m116.4 114.5c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z"/>
  94.                                     <path d="m134.8 114.5c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z"/>
  95.                                     <path d="m135.1 96.9c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z"/>
  96.                                     <path d="m153.5 96.9c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2-0.1-1.2 0.9-2.2 2.1-2.2z"/>
  97.                                     <path d="m98.3 96.9c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z"/>
  98.                                     <ellipse cx="116.7" cy="99.1" rx="2.1" ry="2.2"/>
  99.                                     <path d="m153.2 149.8c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2-0.1-1.3 0.9-2.2 2.1-2.2z"/>
  100.                                     <path d="m135.1 132.2c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2 0-1.3 0.9-2.2 2.1-2.2z"/>
  101.                                     <path d="m153.5 132.2c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2-0.1-1.3 0.9-2.2 2.1-2.2z"/>
  102.                                     <path d="m80.2 79.3c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s1-2.2 2.1-2.2z"/>
  103.                                     <path d="m117 79.3c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z"/>
  104.                                     <path d="m98.6 79.3c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z"/>
  105.                                     <path d="m135.4 79.3c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z"/>
  106.                                     <path d="m153.8 79.3c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z"/>
  107.                                     <path d="m80.6 61.7c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2-0.1-1.2 0.9-2.2 2.1-2.2z"/>
  108.                                     <ellipse cx="98.9" cy="63.9" rx="2.1" ry="2.2"/>
  109.                                     <path d="m117.3 61.7c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z"/>
  110.                                     <ellipse cx="62.2" cy="63.9" rx="2.1" ry="2.2"/>
  111.                                     <ellipse cx="154.1" cy="63.9" rx="2.1" ry="2.2"/>
  112.                                     <path d="m135.7 61.7c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z"/>
  113.                                     <path d="m154.4 44.1c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z"/>
  114.                                     <path d="m80.9 44.1c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2-0.1-1.2 0.9-2.2 2.1-2.2z"/>
  115.                                     <path d="m44.1 44.1c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2-0.1-1.2 0.9-2.2 2.1-2.2z"/>
  116.                                     <path d="m99.2 44.1c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s1-2.2 2.1-2.2z"/>
  117.                                     <ellipse cx="117.6" cy="46.3" rx="2.1" ry="2.2"/>
  118.                                     <path d="m136 44.1c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z"/>
  119.                                     <path d="m62.5 44.1c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2-0.1-1.2 0.9-2.2 2.1-2.2z"/>
  120.                                     <path d="m154.7 26.5c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z"/>
  121.                                     <path d="m62.8 26.5c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2-0.1-1.2 0.9-2.2 2.1-2.2z"/>
  122.                                     <ellipse cx="136.3" cy="28.6" rx="2.1" ry="2.2"/>
  123.                                     <path d="m99.6 26.5c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2-0.1-1.2 0.9-2.2 2.1-2.2z"/>
  124.                                     <path d="m117.9 26.5c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s1-2.2 2.1-2.2z"/>
  125.                                     <path d="m81.2 26.5c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2-0.1-1.2 0.9-2.2 2.1-2.2z"/>
  126.                                     <path d="m26 26.5c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2c-1.2 0-2.1-1-2.1-2.2s0.9-2.2 2.1-2.2z"/>
  127.                                     <ellipse cx="44.4" cy="28.6" rx="2.1" ry="2.2"/>
  128.                                     <path d="m136.6 13.2c-1.2 0-2.1-1-2.1-2.2s1-2.2 2.1-2.2c1.2 0 2.1 1 2.1 2.2 0.1 1.2-0.9 2.2-2.1 2.2z"/>
  129.                                     <path d="m155 13.2c-1.2 0-2.1-1-2.1-2.2s1-2.2 2.1-2.2c1.2 0 2.1 1 2.1 2.2 0.1 1.2-0.9 2.2-2.1 2.2z"/>
  130.                                     <path d="m26.3 13.2c-1.2 0-2.1-1-2.1-2.2s1-2.2 2.1-2.2c1.2 0 2.1 1 2.1 2.2s-0.9 2.2-2.1 2.2z"/>
  131.                                     <path d="m81.5 13.2c-1.2 0-2.1-1-2.1-2.2s1-2.2 2.1-2.2c1.2 0 2.1 1 2.1 2.2s-0.9 2.2-2.1 2.2z"/>
  132.                                     <path d="m63.1 13.2c-1.2 0-2.1-1-2.1-2.2s1-2.2 2.1-2.2c1.2 0 2.1 1 2.1 2.2s-0.9 2.2-2.1 2.2z"/>
  133.                                     <path d="m44.7 13.2c-1.2 0-2.1-1-2.1-2.2s1-2.2 2.1-2.2c1.2 0 2.1 1 2.1 2.2s-0.9 2.2-2.1 2.2z"/>
  134.                                     <path d="m118.2 13.2c-1.2 0-2.1-1-2.1-2.2s1-2.2 2.1-2.2c1.2 0 2.1 1 2.1 2.2 0.1 1.2-0.9 2.2-2.1 2.2z"/>
  135.                                     <path d="m7.9 13.2c-1.2 0-2.1-1-2.1-2.2s1-2.2 2.1-2.2c1.2 0 2.1 1 2.1 2.2 0.1 1.2-0.9 2.2-2.1 2.2z"/>
  136.                                     <path d="m99.9 13.2c-1.2 0-2.1-1-2.1-2.2s1-2.2 2.1-2.2c1.2 0 2.1 1 2.1 2.2s-1 2.2-2.1 2.2z"/>
  137.                                 </svg>
  138.                             </figure>
  140.                             <div class="p-3 bg-primary d-inline-block rounded-4 shadow-lg text-center"
  141.                                  style="background:url(assets/images/pattern/02.png) no-repeat center center; background-size:cover;">
  142.                                 <!-- Info -->
  143.                                 <h5 class="text-white mb-0"> 4.91/5</h5>
  144.                                 <!-- Rating -->
  145.                                 <ul class="list-inline mb-2">
  146.                                     <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i>
  147.                                     </li>
  148.                                     <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i>
  149.                                     </li>
  150.                                     <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i>
  151.                                     </li>
  152.                                     <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i>
  153.                                     </li>
  154.                                     <li class="list-inline-item me-0 small"><i
  155.                                                 class="fas fa-star-half-alt text-warning"></i></li>
  156.                                 </ul>
  157.                                 <p class="text-white mb-0">sur la base de 3265 notations</p>
  158.                             </div>
  159.                         </div>
  161.                         <!-- Review -->
  162.                         {% for notice in notices|slice(1, 2) %}
  163.                         <div class="col-md-5 mt-n6 mb-0 mb-md-5">
  164.                             <div class="bg-body shadow text-center p-4 rounded-3">
  165.                                 <!-- Avatar -->
  166.                                 <div class="avatar avatar-xl mb-3">
  167.                                     <i class="fas fa-user-circle fa-5x"></i>
  168.                                 </div>
  169.                                 <!-- Content -->
  170.                                 <blockquote>
  171.                                     <p>
  172.                                         <span class="me-1 small"><i class="fas fa-quote-left"></i></span>
  173.                                         {{ notice.content }}
  174.                                         <span class="ms-1 small"><i class="fas fa-quote-right"></i></span>
  175.                                     </p>
  176.                                 </blockquote>
  177.                                 <!-- Rating -->
  178.                                 <ul class="list-inline mb-2">
  179.                                     <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i>
  180.                                     </li>
  181.                                     <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i>
  182.                                     </li>
  183.                                     <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i>
  184.                                     </li>
  185.                                     <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i>
  186.                                     </li>
  187.                                     <li class="list-inline-item me-0 small"><i
  188.                                                 class="fas fa-star-half-alt text-warning"></i></li>
  189.                                 </ul>
  190.                                 <!-- Info -->
  191.                                 <h6 class="mb-0">{{ notice.name }}</h6>
  192.                             </div>
  193.                         </div>
  194.                         {% endfor %}
  195.                     </div> <!-- Row END -->
  196.                 </div>
  197.                 <div class="col-xl-5 order-1 text-center text-xl-start">
  198.                     <!-- Title -->
  199.                     <h2 class="fs-1">Propulsez vos réseaux sociaux en quelques minutes sur Facebook, Youtube, Twitter et
  200.                         TikTok</h2>
  201.                     <p></p>
  202.                     <a href="{{ path('app_get_socialnetworks') }}" class="btn btn-primary mb-0">Acheter maintenant</a>
  203.                 </div>
  204.             </div> <!-- Row END -->
  205.         </div>
  206.     </section>
  207.     <!-- ======================= Reviews END -->
  210.     <!-- =======================
  211. Client feedback START -->
  212.     <section class="bg-light position-relative">
  213.         <!-- SVG Image -->
  214.         <figure class="position-absolute start-0 bottom-0 mb-0">
  215.             <img src="/assets/images/element/10.svg" class="h-200px" alt="">
  216.         </figure>
  218.         <div class="container">
  219.             <!-- Title -->
  220.             <div class="row mb-4">
  221.                 <div class="col-lg-8 mx-auto text-center">
  222.                     <h2>Les avis de nos clients</h2>
  223.                 </div>
  224.             </div>
  226.             <!-- Feedback START -->
  227.             <div class="row">
  228.                 <!-- Slider START -->
  229.                 {% if notices is not empty %}
  230.                 <div class="tiny-slider arrow-round arrow-creative arrow-dark arrow-hover">
  231.                     <div class="tiny-slider-inner" data-autoplay="true" data-edge="5" data-arrow="true" data-dots="false" data-items="4" data-items-xl="3" data-items-md="2" data-items-xs="1">
  233.                         <!-- Feedback item -->
  234.                         {% for notice in notices %}
  235.                         <div>
  236.                             <div class="bg-body text-center p-4 rounded-3 border border-1 position-relative">
  237.                                 <!-- Avatar -->
  238.                                 <div class="avatar avatar-lg mb-3">
  239.                                     <i class="fas fa-user-circle fa-3x"></i>
  241.                                 </div>
  242.                                 <!-- Title -->
  243.                                 <h6 class="mb-2">{{ notice.name }}</h6>
  244.                                 <!-- Content -->
  245.                                 <blockquote class="mt-1">
  246.                                     <p>
  247.                                         <span class="me-1 small"><i class="fas fa-quote-left"></i></span>
  248.                                         {{ notice.content }}
  249.                                         <span class="ms-1 small"><i class="fas fa-quote-right"></i></span>
  250.                                     </p>
  251.                                 </blockquote>
  252.                             </div>
  253.                         </div>
  255.                         {% endfor %}
  257.                     </div>
  258.                 </div>
  259.                 {% else %}
  261.                     <div class="col-12 text-center">
  262.                         <!-- Subtitle -->
  263.                         <h2> les avis sont actuellement indisponible</h2>
  264.                         <!-- info -->
  265.                         <!-- Button -->
  266.                         <a href="{{ path('app_defaut') }}" class="btn btn-primary mt-4 mb-0">Retour à l'accueil</a>
  267.                     </div>
  270.                 {% endif %}
  271.                 <!-- Slider START -->
  272.             </div>
  273.             <!-- Feedback END -->
  274.         </div>
  275.     </section>
  276.     <!-- =======================
  277.     Client feedback END -->
  280. {% endblock %}
  281. {% block head_js %}
  282.     {{ parent() }}
  284. {% endblock %}