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

  1. {% extends "front/base.html.twig" %}
  3. {% block title %} - Accueil{% endblock %}
  8. {% block mainContent %}
  9. {% if not app.user %}
  10. <section class="text-white py-3" style="background-color:rgba(var(--bs-info-rgb))">
  11.     <div class="container text-center">
  12.         <p class="mb-0">
  13.             <strong class="d-block d-md-none">Créer votre compte pour obtenir un accès gratuit à tous nos cours pendant 2 jours</strong>
  14.             <strong class="d-none d-md-block" style="font-size: 1.5rem;">Créer votre compte pour obtenir un accès gratuit à tous nos cours pendant 2 jours</strong>
  15.         </p>
  16.     </div>
  17. </section>
  19. {% endif %}
  21. <!-- =======================
  22.     Custom Banner START -->
  23. <section class="banner-with-background">
  24.     <div class="container">
  25.         <div class="row align-items-center text-center">
  26.             <!-- Texte de la bannière -->
  27.             <div class="col-md-12">
  28.                 <p class="mb-4 fw-bold main-message">{% trans %}MAINMESSAGE_KEY{% endtrans %} KULMAPECK</p>
  29.                 <p class="mb-4 fw-bold sub-message">L'éducation à la portée de tous.</p>
  30.                 <a href="{{ path('app_front_courses_category') }}" class="btn btn-lg" style="background-color:#fd7e14; color:white; font-size: 20px;">Voir tous nos cours</a>
  31.                 {% if not app.user %}
  32.                 <div class="row justify-content-center mt-6">
  33.                     <div class="col-6 col-md-6 d-flex justify-content-end">
  34.                         <a class="btn btn-custom " style="background-color:white; color:#09139f" href="#" data-bs-toggle="modal" data-bs-target="#coursePremium">Créer un compte</a>
  35.                     </div>
  36.                     <div class="col-6 col-md-6 d-flex justify-content-start">
  37.                         <a href="{{ path('app_login') }}" class="btn  btn-custom " style="background-color:white; color:#09139f">Se connecter</a>
  38.                     </div>
  39.                 </div>
  40.                 {% endif %}
  41.                 
  42.             </div>
  43.         </div>
  44.     </div>
  45. </section>
  46. <!-- =======================
  47.     Custom Banner END -->
  50. <div id="quizNotification" class="btn btn-success">Quiz is available!</div>
  52.     <!-- =======================
  53.     Counter START -->
  54.     <section class="py-0 py-xl-5 counter-block">
  55.         <div class="container">
  56.             <div class="row g-4">
  57.                 <!-- Counter item -->
  58.                 <div class="col-sm-6 col-xl-3">
  59.                     <div class="d-flex justify-content-center align-items-center p-4 bg-warning bg-opacity-15 rounded-3">
  60.                         <span class="display-6 lh-1 text-warning mb-0"><i class="fas fa-tv"></i></span>
  61.                         <div class="ms-4 h6 fw-normal mb-0">
  62.                             <div class="d-flex">
  63.                                 <h5 class="purecounter mb-0 fw-bold" data-purecounter-start="0" data-purecounter-end="10"    data-purecounter-delay="200">0</h5>
  64.                                 <span class="mb-0 h5">K</span>
  65.                             </div>
  66.                             <p class="mb-0">{% trans %}OONLINECOURSES_KEY{% endtrans %}</p>
  67.                         </div>
  68.                     </div>
  69.                 </div>
  70.                 <!-- Counter item -->
  71.                 <div class="col-sm-6 col-xl-3">
  72.                     <div class="d-flex justify-content-center align-items-center p-4 bg-blue bg-opacity-10 rounded-3">
  73.                         <span class="display-6 lh-1 text-blue mb-0"><i class="fas fa-user-tie"></i></span>
  74.                         <div class="ms-4 h6 fw-normal mb-0">
  75.                             <div class="d-flex">
  76.                                 <h5 class="purecounter mb-0 fw-bold" data-purecounter-start="0" data-purecounter-end="200" data-purecounter-delay="200">0</h5>
  77.                                 <span class="mb-0 h5">+</span>
  78.                             </div>
  79.                             <p class="mb-0">{% trans %}EXPERTSTUTORS_KEY{% endtrans %}</p>
  80.                         </div>
  81.                     </div>
  82.                 </div>
  83.                 <!-- Counter item -->
  84.                 <div class="col-sm-6 col-xl-3">
  85.                     <div class="d-flex justify-content-center align-items-center p-4 bg-purple bg-opacity-10 rounded-3">
  86.                         <span class="display-6 lh-1 text-purple mb-0"><i class="fas fa-user-graduate"></i></span>
  87.                         <div class="ms-4 h6 fw-normal mb-0">
  88.                             <div class="d-flex">
  89.                                 <h5 class="purecounter mb-0 fw-bold" data-purecounter-start="0" data-purecounter-end="60"    data-purecounter-delay="200">0</h5>
  90.                                 <span class="mb-0 h5">K+</span>
  91.                             </div>
  92.                             <p class="mb-0">{% trans %}ONLINESTUDENTS_KEY{% endtrans %}</p>
  93.                         </div>
  94.                     </div>
  95.                 </div>
  96.                 <!-- Counter item -->
  97.                 <div class="col-sm-6 col-xl-3">
  98.                     <div class="d-flex justify-content-center align-items-center p-4 bg-info bg-opacity-10 rounded-3">
  99.                         <span class="display-6 lh-1 text-info mb-0"><i class="bi bi-patch-check-fill"></i></span>
  100.                         <div class="ms-4 h6 fw-normal mb-0">
  101.                             <div class="d-flex">
  102.                                 <h5 class="purecounter mb-0 fw-bold" data-purecounter-start="0" data-purecounter-end="6" data-purecounter-delay="300">0</h5>
  103.                                 <span class="mb-0 h5">K+</span>
  104.                             </div>
  105.                             <p class="mb-0">{% trans %}CERTIFIEDCOURSES_KEY{% endtrans %}</p>
  106.                         </div>
  107.                     </div>
  108.                 </div>
  109.             </div>
  110.         </div>
  111.     </section>
  112.     <!-- =======================
  113.     Counter END -->
  114.     
  115.     <!-- =======================
  116.     Popular course START -->
  117.     <section>
  118.         <div class="container">
  119.             <!-- Title -->
  120.             <div class="row mb-4">
  121.                 <div class="col-lg-8 mx-auto text-center">
  122.                     <h2 class="fs-1">{% trans %}MOSTPOPULAR_KEY{% endtrans %}</h2>
  123.                     <p class="mb-0">{% trans %}MOSTPOPULARDESCRIPTION_KEY{% endtrans %}</p>
  124.                 </div>
  125.             </div>
  127.             <!-- Tabs START -->
  128.             <ul class="nav nav-pills nav-pills-bg-soft justify-content-sm-center mb-4 px-3" id="course-pills-tab" role="tablist">
  129.     
  130.                 {% for category in categories %}
  131.                     <!-- Tab item -->
  132.                     <li class="nav-item me-2 me-sm-5">
  133.                         <button class="nav-link mb-2 mb-md-0 {{ loop.index is same as 1 ? 'active' : '' }}" id="course-pills-tab-{{ loop.index }}" data-bs-toggle="pill" data-bs-target="#course-pills-tabs-{{ loop.index }}" type="button" role="tab" aria-controls="course-pills-tabs-{{ loop.index }}" aria-selected="false">{{ category.category.name }}</button>
  134.                     </li>
  135.                 {% endfor %}
  136.                 <li class="nav-item me-2 me-sm-5">
  137.                     <a class="nav-link mb-2 mb-md-0" href="{{ url("app_front_courses") }}">{% trans %}ALLCOURSES_KEY{% endtrans %}</a>
  138.                 </li>
  139.             </ul>
  140.             <!-- Tabs END -->
  141.             
  142.             <!-- Tabs content START -->
  143.             <div class="tab-content" id="course-pills-tabContent">
  144.                 {% for category in categories %}
  145.                     
  146.                     <!-- Content START -->
  147.                     <div class="tab-pane fade show {{ loop.index is same as 1 ? 'active' : '' }}" id="course-pills-tabs-{{ loop.index }}" role="tabpanel" aria-labelledby="course-pills-tab-{{ loop.index }}">
  148.                         <div class="row g-4">
  149.                             {% for course in category.courses %} 
  150.                                 <div class="col-sm-6 col-lg-4 col-xl-3">
  151.                                     {{ include('front/includes/courses/_course_item.html.twig') }}
  152.                                 </div>
  153.                             {% endfor %}
  154.                         </div> <!-- Row END -->
  155.                     </div>
  156.                     <!-- Content END -->
  157.                     
  158.                 {% endfor %}
  160.             </div>
  161.             <!-- Tabs content END -->
  162.         </div>
  163.     </section>
  164.     <!-- =======================
  165.     Popular course END -->
  166.     
  167.     <!-- =======================
  168.     Action box START -->
  169.     <section class="pt-0 pt-lg-5">
  170.         <div class="container position-relative">
  171.             <!-- SVG decoration START -->
  172.             <figure class="position-absolute top-50 start-50 translate-middle ms-2">
  173.                 <svg>
  174.                     <path class="fill-white opacity-4" d="m496 22.999c0 10.493-8.506 18.999-18.999 18.999s-19-8.506-19-18.999 8.507-18.999 19-18.999 18.999 8.506 18.999 18.999z"/>
  175.                     <path class="fill-white opacity-4" d="m775 102.5c0 5.799-4.701 10.5-10.5 10.5-5.798 0-10.499-4.701-10.499-10.5 0-5.798 4.701-10.499 10.499-10.499 5.799 0 10.5 4.701 10.5 10.499z"/>
  176.                     <path class="fill-white opacity-4" d="m192 102c0 6.626-5.373 11.999-12 11.999s-11.999-5.373-11.999-11.999c0-6.628 5.372-12 11.999-12s12 5.372 12 12z"/>
  177.                     <path class="fill-white opacity-4" d="m20.499 10.25c0 5.66-4.589 10.249-10.25 10.249-5.66 0-10.249-4.589-10.249-10.249-0-5.661 4.589-10.25 10.249-10.25 5.661-0 10.25 4.589 10.25 10.25z"/>
  178.                 </svg>
  179.             </figure>
  180.             <!-- SVG decoration END -->
  181.             
  182.             <div class="row">
  183.                 <div class="col-12">
  184.                     <div class="bg-info p-4 p-sm-5 rounded-3">
  185.                         <div class="row position-relative">
  186.                             <!-- Svg decoration -->
  187.                             <figure class="fill-white opacity-1 position-absolute top-50 start-0 translate-middle-y">
  188.                                 <svg width="141px" height="141px">
  189.                                     <path    d="M140.520,70.258 C140.520,109.064 109.062,140.519 70.258,140.519 C31.454,140.519 -0.004,109.064 -0.004,70.258 C-0.004,31.455 31.454,-0.003 70.258,-0.003 C109.062,-0.003 140.520,31.455 140.520,70.258 Z"/>
  190.                                 </svg>
  191.                             </figure>
  192.                             <!-- Action box -->
  193.                             <div class="col-11 mx-auto position-relative">
  194.                                 <div class="row align-items-center">
  195.                                     <!-- Title -->
  196.                                     <div class="col-lg-7">
  197.                                         <h3 class="text-white">{% trans %}BECOMEINSTRUCTOR_KEY{% endtrans %}</h3>
  198.                                         <p class="text-white mb-3 mb-lg-0">{% trans %}BECOMEINSTRUCTORDESCRIPTION_KEY{% endtrans %}</p>
  199.                                     </div>
  200.                                     <!-- Content and input -->
  201.                                     <div class="col-lg-5 text-lg-end">
  202.                                         <a href="{{ url("app_front_register", {type: 'trainer'}) }}" class="btn btn-outline-warning mb-0">{% trans %}STARTTEACHINGTODAY_KEY{% endtrans %}</a>
  203.                                     </div>
  204.                                 </div>
  205.                             </div>
  206.                         </div> <!-- Row END -->
  207.                     </div>
  208.                 </div>
  209.             </div> <!-- Row END -->
  210.         </div>
  211.     </section>
  212.     <!-- =======================
  213.     Action box END -->
  214.     
  215.     <!-- =======================
  216.     Trending courses START -->
  217.     <section class="pb-5 pt-0 pt-lg-5">
  218.         <div class="container">
  219.             <!-- Title -->
  220.             <div class="row mb-4">
  221.                 <div class="col-lg-8 mx-auto text-center">
  222.                     <h2 class="fs-1">{% trans %}TRENDINGCOURSES_KEY{% endtrans %}</h2>
  223.                     <p class="mb-0">{% trans %}TRENDINGCOURSESDESCRIPTION_KEY{% endtrans %}</p>
  224.                 </div>
  225.             </div>
  226.             <div class="row">
  227.                 <!-- Slider START -->
  228.                 <div class="tiny-slider arrow-round arrow-blur arrow-hover">
  229.                     <div class="tiny-slider-inner pb-1" data-autoplay="true" data-arrow="true" data-edge="2" data-dots="false" data-items="3" data-items-lg="2" data-items-sm="1">
  230.                         {% for course in trendingCourses %}
  231.                         <!-- Card item START -->
  232.                         {{ include('front/includes/courses/_trending_course.html.twig') }}
  233.                         <!-- Card item END -->
  234.                         {% endfor %}
  235.                     </div>
  236.                 </div>
  237.                 <!-- Slider END -->
  238.             </div>
  239.         </div>
  240.     </section>
  241.     <!-- =======================
  242.     Trending courses END -->
  243.     
  244.     <!-- =======================
  245.     Reviews START -->
  246.     <section class="bg-light">
  247.         <div class="container">
  248.             <div class="row g-4 g-lg-5 align-items-center">
  249.                 <div class="col-xl-7 order-2 order-xl-1">
  250.                     <div class="row mt-0 mt-xl-5">
  251.                         <!-- Review -->
  252.                         <div class="col-md-7 position-relative mb-0 mt-0 mt-md-5">
  253.                             <!-- SVG -->
  254.                             <figure class="fill-danger opacity-2 position-absolute top-0 start-0 translate-middle mb-3">
  255.                                 <svg width="211px" height="211px">
  256.                                     <path d="M210.030,105.011 C210.030,163.014 163.010,210.029 105.012,210.029 C47.013,210.029 -0.005,109.064 -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>
  257.                                 </svg>
  258.                             </figure>
  259.                             {% for rev in topReviews %}
  260.                                 {% if loop.first %}
  261.                                     <div class="bg-body shadow text-center p-4 rounded-3 position-relative mb-5 mb-md-0">
  262.                                         <!-- Avatar -->
  263.                                         <div class="avatar avatar-xl mb-3">
  264.                                             <img class="avatar-img rounded-circle" src="{{asset(rev.eleve.utilisateur.personne.avatarPath)}}" alt="avatar">
  265.                                         </div>
  266.                                         <!-- Content -->
  267.                                         <blockquote>
  268.                                             <p>
  269.                                                 <span class="me-1 small"><i class="fas fa-quote-left"></i></span>
  270.                                                     {{ rev.message }}
  271.                                                 <span class="ms-1 small"><i class="fas fa-quote-right"></i></span>
  272.                                             </p>
  273.                                         </blockquote>
  274.                                         <!-- Rating -->
  275.                                         <ul class="list-inline mb-2">
  276.                                             {% for i in 1..rev.rating %}
  277.                                                 <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  278.                                             {% endfor %}
  279.                                             {% if rev.rating < 5 %}
  280.                                                 {% for i in rev.rating..4 %}
  281.                                                     <li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
  282.                                                 {% endfor %}
  283.                                             {% endif %}
  284.                                         </ul>
  285.                                         <!-- Info -->
  286.                                         <h6 class="mb-0">{{ rev.eleve.utilisateur.personne.firstName is not same as null ? rev.eleve.utilisateur.personne.firstName : rev.eleve.utilisateur.personne.lastName }}</h6>
  287.                                     </div> 
  288.                                 {% endif %}
  289.                             {% endfor %}
  290.                         </div>
  292.                         <!-- Mentor list -->
  293.                         <div class="col-md-5 mt-5 mt-md-0 d-none d-md-block">
  294.                             <div class="bg-body shadow p-4 rounded-3 d-inline-block position-relative">
  295.                                 <!-- Icon -->
  296.                                 <div class="icon-lg bg-warning rounded-circle position-absolute top-0 start-100 translate-middle">
  297.                                     <i class="bi bi-shield-fill-check text-dark"></i>
  298.                                 </div>
  299.                                 <!-- Title -->
  300.                                 <h6 class="mb-3">100+ {% trans %}VERIFIEDMENTOR_KEY{% endtrans %}</h6>
  301.                                 <!-- Mentor Item -->
  302.                                 <div class="d-flex align-items-center mb-3">
  303.                                     <!-- Avatar -->
  304.                                     <div class="avatar avatar-sm">
  305.                                         <img class="avatar-img rounded-1" src="{{asset('assets/images/avatar/09.jpg')}}" alt="avatar">
  306.                                     </div>
  307.                                     <!-- Info -->
  308.                                     <div class="ms-2">
  309.                                         <h6 class="mb-0">Lori Stevens</h6>
  310.                                         <p class="mb-0 small">Tutor of physic</p>
  311.                                     </div>
  312.                                 </div>
  314.                                 <!-- Mentor Item -->
  315.                                 <div class="d-flex align-items-center mb-3">
  316.                                     <!-- Avatar -->
  317.                                     <div class="avatar avatar-sm">
  318.                                         <img class="avatar-img rounded-1" src="{{ asset('assets/images/avatar/04.jpg') }}" alt="avatar">
  319.                                     </div>
  320.                                     <!-- Info -->
  321.                                     <div class="ms-2">
  322.                                         <h6 class="mb-0">Billy Vasquez</h6>
  323.                                         <p class="mb-0 small">Tutor of chemistry</p>
  324.                                     </div>
  325.                                 </div>
  327.                                 <!-- Mentor Item -->
  328.                                 <div class="d-flex align-items-center">
  329.                                     <!-- Avatar -->
  330.                                     <div class="avatar avatar-sm">
  331.                                         <img class="avatar-img rounded-1" src="{{ asset('assets/images/avatar/02.jpg') }}" alt="avatar">
  332.                                     </div>
  333.                                     <!-- Info -->
  334.                                     <div class="ms-2">
  335.                                         <h6 class="mb-0">Larry Lawson</h6>
  336.                                         <p class="mb-0 small">Tutor of technology</p>
  337.                                     </div>
  338.                                 </div>
  339.                             </div>
  340.                         </div>
  341.                     </div> <!-- Row END -->
  342.                     
  343.                     <div class="row mt-5 mt-xl-0">
  344.                         <!-- Rating -->
  345.                         <div class="col-7 mt-0 mt-xl-5 text-end position-relative z-index-1 d-none d-md-block">
  346.                             <!-- SVG -->
  347.                             <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">
  348.                                 <svg  vg enable-background="new 0 0 160.7 159.8" height="180px">
  349.                                     <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" />
  350.                                     <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" />
  351.                                     <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" />
  352.                                     <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" />
  353.                                     <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" />
  354.                                     <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" />
  355.                                     <ellipse cx="116.7" cy="99.1" rx="2.1" ry="2.2" />
  356.                                     <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" />
  357.                                     <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" />
  358.                                     <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" />
  359.                                     <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" />
  360.                                     <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" />
  361.                                     <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" />
  362.                                     <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" />
  363.                                     <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" />
  364.                                     <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" />
  365.                                     <ellipse cx="98.9" cy="63.9" rx="2.1" ry="2.2" />
  366.                                     <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" />
  367.                                     <ellipse cx="62.2" cy="63.9" rx="2.1" ry="2.2" />
  368.                                     <ellipse cx="154.1" cy="63.9" rx="2.1" ry="2.2" />
  369.                                     <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" />
  370.                                     <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" />
  371.                                     <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" />
  372.                                     <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" />
  373.                                     <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" />
  374.                                     <ellipse cx="117.6" cy="46.3" rx="2.1" ry="2.2" />
  375.                                     <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" />
  376.                                     <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" />
  377.                                     <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" />
  378.                                     <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" />
  379.                                     <ellipse cx="136.3" cy="28.6" rx="2.1" ry="2.2" />
  380.                                     <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" />
  381.                                     <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" />
  382.                                     <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" />
  383.                                     <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" />
  384.                                     <ellipse cx="44.4" cy="28.6" rx="2.1" ry="2.2" />
  385.                                     <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" />
  386.                                     <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" />
  387.                                     <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" />
  388.                                     <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" />
  389.                                     <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" />
  390.                                     <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" />
  391.                                     <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" />
  392.                                     <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" />
  393.                                     <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" />
  394.                                 </svg>
  395.                             </figure>
  397.                             <div class="p-3 bg-primary d-inline-block rounded-4 shadow-lg text-center" style="background:url(assets/images/pattern/02.png) no-repeat center center; background-size:cover;">
  398.                                 <!-- Info -->
  399.                                 <h5 class="text-white mb-0">4.5/5.0</h5>
  400.                                 <!-- Rating -->
  401.                                 <ul class="list-inline mb-2">
  402.                                     <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  403.                                     <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  404.                                     <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  405.                                     <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  406.                                     <li class="list-inline-item me-0 small"><i class="fas fa-star-half-alt text-warning"></i></li>
  407.                                 </ul>
  408.                                 <p class="text-white mb-0">Based on 3265 ratings</p>
  409.                             </div>
  410.                         </div>
  412.                         <!-- Review -->
  413.                         <div class="col-md-5 mt-n6 mb-0 mb-md-5">
  414.                             {% for rev in topReviews %}
  415.                                 {% if loop.last %}
  416.                                     <div class="bg-body shadow text-center p-4 rounded-3">
  417.                                         <!-- Avatar -->
  418.                                         <div class="avatar avatar-xl mb-3">
  419.                                             <img class="avatar-img rounded-circle" src="{{ asset(rev.eleve.utilisateur.personne.avatarPath) }}" alt="avatar">
  420.                                         </div>
  421.                                         <!-- Content -->
  422.                                         <blockquote>
  423.                                             <p>
  424.                                                 <span class="me-1 small"><i class="fas fa-quote-left"></i></span> 
  425.                                                     {{ rev.message }}
  426.                                                 <span class="ms-1 small"><i class="fas fa-quote-right"></i></span>
  427.                                             </p>
  428.                                         </blockquote>
  429.                                         <!-- Rating -->
  430.                                         <ul class="list-inline mb-2">
  431.                                             {% for i in 1..rev.rating %}
  432.                                                 <li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
  433.                                             {% endfor %}
  434.                                             {% if rev.rating < 5 %}
  435.                                                 {% for i in rev.rating..4 %}
  436.                                                     <li class="list-inline-item me-0 small"><i class="far fa-star text-warning"></i></li>
  437.                                                 {% endfor %}
  438.                                             {% endif %}
  439.                                         </ul>
  440.                                         <!-- Info -->
  441.                                         <h6 class="mb-0">{{ rev.eleve.utilisateur.personne.firstName is not same as null ? rev.eleve.utilisateur.personne.firstName : rev.eleve.utilisateur.personne.lastName }}</h6>
  442.                                     </div> 
  443.                                 {% endif %}
  444.                             {% endfor %}
  445.                         </div>
  446.                     </div> <!-- Row END -->
  447.                 </div>
  448.                 <div class="col-xl-5 order-1 text-center text-xl-start">
  449.                     <!-- Title -->
  450.                     <h2 class="fs-1">{% trans %}FEEDBACK_KEY{% endtrans %}</h2>
  451.                     <p>{% trans %}FEEDBACKDESCRIPTION_KEY{% endtrans %}</p>
  452.                     {% if not app.user %}
  453.                         <a data-bs-toggle="modal" data-bs-target="#coursePremium" href="#" class="btn btn-primary mb-0">{% trans %}CREATEANACCOUNT_KEY{% endtrans %}</a>
  454.                     {% endif %}
  455.                 </div>
  456.             </div> <!-- Row END -->
  457.         </div>
  458.     </section>
  459.     <!-- =======================
  460.     Reviews END -->
  461.     
  462. {% endblock %}