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

  1. {% extends "front/base.html.twig" %}
  3. {% block title %} - Courses{% endblock %}
  5. {% block script %}
  6.     
  7. {% endblock %}
  9. {% block mainContent %}
  10.     
  11.     <!-- ======================= Page Banner START -->
  12.     <section class="py-4">
  13.         <div class="container">
  14.             <div class="row">
  15.                 <div class="col-12">
  16.                     <div class="bg-light p-4 text-center rounded-3">
  17.                         <h1 class="m-0">{% trans %}COURSES_KEY{% endtrans %}</h1>
  18.                         <!-- Breadcrumb -->
  19.                         <div class="d-flex justify-content-center">
  20.                             <nav aria-label="breadcrumb">
  21.                                 <ol class="breadcrumb breadcrumb-dots mb-0">
  22.                                     <li class="breadcrumb-item"><a href="{{ path('app_front') }}">{% trans %}HOME_KEY{% endtrans %}</a></li>
  23.                                     <li class="breadcrumb-item active" aria-current="page">{% trans %}COURSES_KEY{% endtrans %}</li>
  24.                                 </ol>
  25.                             </nav>
  26.                         </div>
  27.                     </div>
  28.                 </div>
  29.             </div>
  30.         </div>
  31.     </section>
  32.     <!-- ======================= Page Banner END -->
  33.     
  34.     <section class="pt-0">
  35.         <div class="container">
  37.             <!-- Filter bar START -->
  38.             
  39.             <!-- Filter bar END -->
  41.             <div class="row mt-3">
  42.                 <!-- Main content START -->
  43.                 {% block pageContent %}
  44.                     <div class="col-12">
  46.                         <!-- Course Grid START -->
  47.                         <div class="row g-4">
  48.                             {% for course in courses %}
  49.                                 <!-- Card item START -->
  50.                                 <div class="col-sm-6 col-lg-4 col-xl-3">
  51.                                     {{ include('front/includes/courses/_course_item.html.twig') }}
  52.                                 </div>
  53.                                 <!-- Card item END -->
  54.                             {% else %}
  55.                                 <div class="text-center p-4 mb-5 mt-5">
  56.                                     <h2>{% trans %}NORESULTS_KEY{% endtrans %}</h2>
  57.                                 </div>
  58.                             {% endfor %}
  59.                         </div>
  60.                         <!-- Course Grid END -->
  62.                         <!-- Pagination START -->
  63.                         <div class="col-12">
  64.                             <div class="pagination-container">
  65.                                 {{ knp_pagination_render(courses) }}
  66.                             </div>
  67.                         </div>
  68.                         <!-- Pagination END -->
  69.                     </div>
  70.                 {% endblock %}
  71.                 <!-- Main content END -->
  72.             </div><!-- Row END -->
  73.         </div>
  74.     </section>
  76.     <!-- ======================= Newsletter START -->
  77.     <section class="pt-0">
  78.         <div class="container position-relative overflow-hidden">
  79.             <!-- SVG decoration -->
  80.             <figure class="position-absolute top-50 start-50 translate-middle ms-3">
  81.                 <svg>
  82.                     <path class="fill-white opacity-2" 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"/>
  83.                     <path class="fill-white opacity-2" 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"/>
  84.                     <path class="fill-white opacity-2" 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"/>
  85.                     <path class="fill-white opacity-2" 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"/>
  86.                 </svg>
  87.             </figure>
  88.             <!-- Svg decoration -->
  89.             <figure class="position-absolute bottom-0 end-0 mb-5 d-none d-sm-block">
  90.                 <svg class="rotate-130" width="258.7px" height="86.9px" viewBox="0 0 258.7 86.9">
  91.                     <path stroke="white" fill="none" stroke-width="2" d="M0,7.2c16,0,16,25.5,31.9,25.5c16,0,16-25.5,31.9-25.5c16,0,16,25.5,31.9,25.5c16,0,16-25.5,31.9-25.5 c16,0,16,25.5,31.9,25.5c16,0,16-25.5,31.9-25.5c16,0,16,25.5,31.9,25.5s16-25.5,31.9-25.5"/>
  92.                     <path stroke="white" fill="none" stroke-width="2" d="M0,57c16,0,16,25.5,31.9,25.5c16,0,16-25.5,31.9-25.5c16,0,16,25.5,31.9,25.5c16,0,16-25.5,31.9-25.5 c16,0,16,25.5,31.9,25.5c16,0,16-25.5,31.9-25.5c16,0,16,25.5,31.9,25.5s16-25.5,31.9-25.5"/>
  93.                 </svg>
  94.             </figure>
  95.             
  96.             <div class="bg-grad-blue p-3 p-sm-5 rounded-3">
  97.                 <div class="row justify-content-center position-relative">
  98.                     <!-- SVG decoration -->
  99.                     <figure class="position-absolute top-50 start-0 translate-middle-y">
  100.                         <svg width="141px" height="141px">
  101.                             <path class="fill-white opacity-1" 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"/>
  102.                         </svg>
  103.                     </figure>
  104.                     <!-- Newsletter -->
  105.                     <div class="col-12 position-relative my-2 my-sm-3">
  106.                         <div class="row align-items-center">
  107.                             <!-- Title -->
  108.                             <div class="col-lg-6">
  109.                                 <h3 class="text-white mb-3 mb-lg-0">{% trans %}AREYOUREADYFORCONVERSATION_KEY{% endtrans %}</h3>
  110.                             </div>
  111.                             <!-- Input item -->
  112.                             <div class="col-lg-6 text-lg-end">
  113.                                 <form class="bg-body rounded p-2">
  114.                                     <div class="input-group">
  115.                                         <input class="form-control border-0 me-1" type="email" placeholder="{% trans %}TYPEEMAILHERE_KEY{% endtrans %}">
  116.                                         <button type="button" class="btn btn-dark mb-0 rounded">{% trans %}SUBSCRIBE_KEY{% endtrans %}</button>
  117.                                     </div>
  118.                                 </form>
  119.                             </div>
  120.                         </div>
  121.                     </div>
  122.                 </div> <!-- Row END -->
  123.             </div>
  124.         </div>
  125.     </section>
  126.     <!-- =======================
  127.     Newsletter END -->
  129. {% endblock %}