templates/formation/formations.html.twig line 1

Open in your IDE?
  1. {% extends 'backfront.html.twig' %}
  3. {% block title %}Formations SIP Academy - Java, Python, DevOps, Agile et Plus{% endblock %}
  5. {% block meta_description %}
  6.     Explorez les formations proposées par SIP Academy : Java, Python, DevOps, Agile, et bien plus. Des cours certifiants adaptés à vos besoins et à votre rythme.
  7. {% endblock %}
  9. {% block body %}
  10.     <style>
  11.         /* ===== COULEURS MODERNES ===== */
  12.         :root {
  13.             --gold: #FFAE27;
  14.             --gold-dark: #e09500;
  15.             --gold-light: #fff8e6;
  16.             --navy: #1F3971;
  17.             --navy-dark: #162d5a;
  18.             --navy-light: #e8edf8;
  19.             --text-dark: #1a2a3a;
  20.             --text-muted: #6c757d;
  21.             --border-light: #eef2f6;
  22.         }
  24.         /* ===== BREADCRUMB ===== */
  25.         .breadcrumb-area {
  26.             background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  27.             padding: 100px 0 120px;
  28.             position: relative;
  29.             text-align: center;
  30.         }
  31.         .breadcrumb-title h1 {
  32.             color: #fff;
  33.             font-size: 48px;
  34.             font-weight: 800;
  35.             margin-bottom: 10px;
  36.             letter-spacing: -1px;
  37.         }
  38.         .breadcrumb-list {
  39.             list-style: none;
  40.             padding: 0;
  41.             display: flex;
  42.             justify-content: center;
  43.             gap: 15px;
  44.         }
  45.         .breadcrumb-list li, .breadcrumb-list li a {
  46.             color: rgba(255,255,255,0.7);
  47.             font-size: 15px;
  48.             text-decoration: none;
  49.             transition: color 0.3s;
  50.         }
  51.         .breadcrumb-list li.active {
  52.             color: var(--gold);
  53.         }
  55.         /* ===== SEARCH BAR "FLOATING" ===== */
  56.         .search-category {
  57.             margin-top: -60px;
  58.             position: relative;
  59.             z-index: 10;
  60.             padding-bottom: 20px;
  61.         }
  63.         .search-wrapper-glass {
  64.             background: #ffffff;
  65.             padding: 30px;
  66.             border-radius: 24px;
  67.             box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  68.             border: 1px solid rgba(255,255,255,0.8);
  69.         }
  71.         .form-container-modern {
  72.             display: grid;
  73.             grid-template-columns: 2fr 1fr 1fr auto;
  74.             gap: 15px;
  75.             align-items: center;
  76.         }
  78.         .input-group-custom {
  79.             position: relative;
  80.             display: flex;
  81.             align-items: center;
  82.         }
  84.         .input-group-custom i {
  85.             position: absolute;
  86.             left: 15px;
  87.             color: var(--navy);
  88.             opacity: 0.5;
  89.             z-index: 5;
  90.         }
  92.         .input-group-custom input,
  93.         .input-group-custom select {
  94.             width: 100%;
  95.             padding: 15px 15px 15px 45px !important;
  96.             border: 1px solid #e2e8f0;
  97.             border-radius: 12px;
  98.             font-size: 14px;
  99.             background-color: #f8fafc;
  100.             transition: all 0.3s ease;
  101.             cursor: pointer;
  102.             appearance: none;
  103.         }
  105.         .input-group-custom input:focus,
  106.         .input-group-custom select:focus {
  107.             background: #fff;
  108.             border-color: var(--gold);
  109.             box-shadow: 0 0 0 4px rgba(255, 174, 39, 0.1);
  110.             outline: none;
  111.         }
  113.         .btn-search-modern {
  114.             background: var(--gold);
  115.             color: var(--navy);
  116.             border: none;
  117.             padding: 15px 35px;
  118.             border-radius: 12px;
  119.             font-weight: 700;
  120.             text-transform: uppercase;
  121.             letter-spacing: 0.5px;
  122.             cursor: pointer;
  123.             transition: all 0.3s ease;
  124.             display: flex;
  125.             align-items: center;
  126.             gap: 10px;
  127.         }
  129.         .btn-search-modern:hover {
  130.             background: var(--navy);
  131.             color: #fff;
  132.             transform: translateY(-2px);
  133.         }
  135.         @media (max-width: 991px) {
  136.             .form-container-modern {
  137.                 grid-template-columns: 1fr;
  138.             }
  139.             .breadcrumb-area {
  140.                 padding: 60px 0 100px;
  141.             }
  142.             .breadcrumb-title h1 {
  143.                 font-size: 32px;
  144.             }
  145.         }
  147.         /* ===== SECTION TITRES ===== */
  148.         .section-title-wrapper {
  149.             text-align: center;
  150.             margin-bottom: 50px;
  151.         }
  152.         .section-title h3 {
  153.             font-size: 36px;
  154.             font-weight: 800;
  155.             color: var(--text-dark);
  156.             margin-bottom: 12px;
  157.             position: relative;
  158.             display: inline-block;
  159.         }
  160.         .section-title h3::after {
  161.             content: '';
  162.             position: absolute;
  163.             bottom: -12px;
  164.             left: 50%;
  165.             transform: translateX(-50%);
  166.             width: 60px;
  167.             height: 4px;
  168.             background: linear-gradient(90deg, var(--gold), var(--gold-dark));
  169.             border-radius: 2px;
  170.         }
  171.         .section-title p {
  172.             font-size: 16px;
  173.             color: var(--text-muted);
  174.             margin-top: 20px;
  175.         }
  177.         /* ===== COURSE AREA ===== */
  178.         .course-area {
  179.             padding: 80px 0;
  180.             background: #fff;
  181.         }
  183.         /* ===== CARTE FORMATION ===== */
  184.         .single-item {
  185.             background: #fff;
  186.             border-radius: 20px;
  187.             overflow: hidden;
  188.             box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  189.             transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  190.             height: 100%;
  191.             display: flex;
  192.             flex-direction: column;
  193.             border: 1px solid var(--border-light);
  194.         }
  195.         .single-item:hover {
  196.             transform: translateY(-8px);
  197.             box-shadow: 0 20px 40px rgba(31,57,113,0.15);
  198.             border-color: var(--gold);
  199.         }
  201.         /* ===== IMAGE CONTAINER ===== */
  202.         .single-item-image {
  203.             position: relative;
  204.             overflow: hidden;
  205.             height: 220px;
  206.             background: linear-gradient(135deg, #f8faff 0%, #fff 100%);
  207.             display: flex;
  208.             align-items: center;
  209.             justify-content: center;
  210.         }
  212.         /* Link wrapper pour l'image */
  213.         .single-item-image a {
  214.             position: relative;
  215.             z-index: 1;
  216.             display: flex;
  217.             align-items: center;
  218.             justify-content: center;
  219.             width: 100%;
  220.             height: 100%;
  221.             overflow: hidden;
  222.             border-radius: 20px 20px 0 0;
  223.         }
  225.         /* Image style */
  226.         .single-item-image img {
  227.             width: auto;
  228.             height: auto;
  229.             max-width: 100%;
  230.             max-height: 100%;
  231.             object-fit: contain;
  232.             transition: transform 0.4s ease;
  233.             position: relative;
  234.             z-index: 1;
  235.         }
  237.         .single-item:hover .single-item-image img {
  238.             transform: scale(1.05);
  239.         }
  241.         /* ===== OVERLAY HOVER - INFOS FORMATEUR ===== */
  242.         .overlay-effect {
  243.             position: relative;
  244.         }
  246.         .courses-hover-info {
  247.             position: absolute;
  248.             bottom: -100%;
  249.             left: 0;
  250.             right: 0;
  251.             background: linear-gradient(135deg, rgba(31,57,113,0.95), rgba(22,45,90,0.95));
  252.             padding: 15px;
  253.             transition: bottom 0.3s ease;
  254.             backdrop-filter: blur(5px);
  255.             z-index: 100;
  256.             border-radius: 0 0 20px 20px;
  257.         }
  259.         .single-item:hover .courses-hover-info {
  260.             bottom: 0;
  261.         }
  263.         .courses-hover-action {
  264.             display: flex;
  265.             align-items: center;
  266.             gap: 12px;
  267.             flex-wrap: wrap;
  268.         }
  270.         .courses-hover-thumb img {
  271.             width: 40px;
  272.             height: 40px;
  273.             border-radius: 50%;
  274.             object-fit: cover;
  275.             border: 2px solid var(--gold);
  276.         }
  278.         .courses-hover-action h4 a {
  279.             color: #fff;
  280.             font-size: 14px;
  281.             font-weight: 600;
  282.             text-decoration: none;
  283.         }
  285.         .courses-hover-action h4 a:hover {
  286.             color: var(--gold);
  287.         }
  289.         .crs-separator {
  290.             color: var(--gold);
  291.         }
  293.         .courses-hover-action p {
  294.             color: rgba(255,255,255,0.8);
  295.             font-size: 11px;
  296.             margin: 0;
  297.         }
  299.         /* ===== CORPS DE LA CARTE ===== */
  300.         .single-item-text {
  301.             padding: 20px;
  302.             flex: 1;
  303.             display: flex;
  304.             flex-direction: column;
  305.         }
  307.         .single-item-text h4 {
  308.             font-size: 18px;
  309.             font-weight: 700;
  310.             margin-bottom: 12px;
  311.             line-height: 1.4;
  312.             min-height: 50px;
  313.         }
  315.         .single-item-text h4 a {
  316.             color: var(--text-dark);
  317.             text-decoration: none;
  318.             transition: color 0.2s;
  319.         }
  321.         .single-item-text h4 a:hover {
  322.             color: var(--gold);
  323.         }
  325.         /* Description - Max 100 caractères */
  326.         .single-item-text > p {
  327.             font-size: 13px;
  328.             color: var(--text-muted);
  329.             line-height: 1.6;
  330.             margin-bottom: 16px;
  331.             display: -webkit-box;
  332.             -webkit-line-clamp: 2;
  333.             -webkit-box-orient: vertical;
  334.             overflow: hidden;
  335.         }
  337.         /* ===== INFOS CARTE (INSCRIPTIONS + LIKES + RATING) ===== */
  338.         .single-item-content {
  339.             display: flex;
  340.             justify-content: space-between;
  341.             align-items: center;
  342.             margin-top: auto;
  343.             padding-top: 15px;
  344.             border-top: 1px solid var(--border-light);
  345.         }
  347.         .single-item-comment-view {
  348.             display: flex;
  349.             gap: 15px;
  350.         }
  352.         .single-item-comment-view span {
  353.             font-size: 12px;
  354.             color: var(--text-muted);
  355.             display: flex;
  356.             align-items: center;
  357.             gap: 5px;
  358.         }
  360.         .single-item-comment-view span i {
  361.             color: var(--gold);
  362.             font-size: 14px;
  363.         }
  365.         .single-item-rating i {
  366.             color: var(--gold);
  367.             font-size: 12px;
  368.             margin: 0 1px;
  369.         }
  371.         /* ===== PAGINATION MODERNISÉE ===== */
  372.         .pagination {
  373.             display: flex;
  374.             justify-content: center;
  375.             gap: 8px;
  376.             margin-top: 40px;
  377.             list-style: none;
  378.             padding: 0;
  379.         }
  381.         .pagination .page-item {
  382.             list-style: none;
  383.         }
  385.         .pagination .page-link {
  386.             display: flex;
  387.             align-items: center;
  388.             justify-content: center;
  389.             width: 40px;
  390.             height: 40px;
  391.             border-radius: 12px;
  392.             background: #fff;
  393.             border: 1px solid var(--border-light);
  394.             color: var(--navy);
  395.             font-weight: 500;
  396.             text-decoration: none;
  397.             transition: all 0.3s ease;
  398.         }
  400.         .pagination .page-link:hover {
  401.             background: var(--gold);
  402.             border-color: var(--gold);
  403.             color: var(--navy);
  404.         }
  406.         .pagination .active .page-link {
  407.             background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  408.             border-color: var(--navy);
  409.             color: #fff;
  410.         }
  412.         .pagination .disabled .page-link {
  413.             opacity: 0.5;
  414.             cursor: not-allowed;
  415.         }
  417.         /* ===== RESPONSIVE ===== */
  418.         @media (max-width: 768px) {
  419.             .form-container {
  420.                 flex-direction: column;
  421.                 align-items: stretch;
  422.             }
  423.             .box-select {
  424.                 flex-direction: column;
  425.             }
  426.             .select.small select,
  427.             .select.small input,
  428.             .form-container button {
  429.                 width: 100%;
  430.             }
  431.             .section-title h3 {
  432.                 font-size: 28px;
  433.             }
  434.             .single-item-image {
  435.                 height: 180px;
  436.             }
  437.             .single-item-text h4 {
  438.                 font-size: 16px;
  439.                 min-height: auto;
  440.             }
  441.             .pagination .page-link {
  442.                 width: 36px;
  443.                 height: 36px;
  444.                 font-size: 13px;
  445.             }
  446.             .breadcrumb-title h1 {
  447.                 font-size: 32px;
  448.             }
  449.         }
  450.     </style>
  452.     <!-- BREADCRUMB AREA -->
  453.     <div class="breadcrumb-area">
  454.         <div class="container">
  455.             <div class="row">
  456.                 <div class="col-md-12">
  457.                     <div class="breadcrumb-title">
  458.                         <h1>Explorez nos programmes</h1>
  459.                         <ul class="breadcrumb-list">
  460.                             <li><a href="{{ path('app_home') }}">Accueil</a></li>
  461.                             <li><i class="zmdi zmdi-chevron-right"></i></li>
  462.                             <li class="active">Catalogue de formations</li>
  463.                         </ul>
  464.                     </div>
  465.                 </div>
  466.             </div>
  467.         </div>
  468.     </div>
  470.     <!-- SEARCH CATEGORY FLOATING -->
  471.     <div class="search-category">
  472.         <div class="container">
  473.             <div class="search-wrapper-glass">
  474.                 <form method="POST" action="{{ path('app_formations_recherche') }}">
  475.                     <div class="form-container-modern">
  477.                         <!-- Champ Titre -->
  478.                         <div class="input-group-custom">
  479.                             <i class="zmdi zmdi-search"></i>
  480.                             <input placeholder="Quelle compétence souhaitez-vous acquérir ?" type="text" name="titre" class="form-control">
  481.                         </div>
  483.                         <!-- Champ Catégorie -->
  484.                         <div class="input-group-custom">
  485.                             <i class="zmdi zmdi-collection-bookmark"></i>
  486.                             <select name="categorie">
  487.                                 <option value="">Toutes les catégories</option>
  488.                                 <option value="Certifiante">Certifiantes</option>
  489.                                 <option value="Pratique">Pratiques</option>
  490.                                 <option value="BootCamp">BootCamp</option>
  491.                                 <option value="Cursus">Cursus</option>
  492.                             </select>
  493.                         </div>
  495.                         <!-- Champ Niveau -->
  496.                         <div class="input-group-custom">
  497.                             <i class="zmdi zmdi-trending-up"></i>
  498.                             <select name="niveau">
  499.                                 <option value="">Tous les niveaux</option>
  500.                                 <option value="Débutant">Débutant</option>
  501.                                 <option value="Intermediaire">Intermédiaire</option>
  502.                                 <option value="Avancé">Avancé</option>
  503.                             </select>
  504.                         </div>
  506.                         <!-- Bouton -->
  507.                         <button type="submit" class="btn-search-modern">
  508.                             <span>Rechercher</span>
  509.                             <i class="zmdi zmdi-arrow-right"></i>
  510.                         </button>
  512.                     </div>
  513.                 </form>
  514.             </div>
  515.         </div>
  516.     </div>
  518.     <!-- COURSE AREA -->
  519.     <div class="course-area">
  520.         <div class="container">
  521.             <div class="row">
  522.                 <div class="col-md-12">
  523.                     <div class="section-title-wrapper">
  524.                         <div class="section-title">
  525.                             <h3>Formations Populaires</h3>
  526.                             <p>Découvrez nos formations les plus demandées par nos apprenants</p>
  527.                         </div>
  528.                     </div>
  529.                 </div>
  530.             </div>
  532.             <div class="row">
  533.                 {% for fo in paginator %}
  534.                     <div class="col-lg-4 col-md-6 col-12 mb-4 d-flex">
  535.                         <div class="single-item w-100">
  536.                             <div class="single-item-image overlay-effect">
  537.                                 <a href="{{ path('app_formation_detailsfront', {'slug': fo.slug}) }}">
  538.                                     <img src="{{ asset('uploads/formation/' ~ fo.affiche) }}" alt="{{ fo.titre }}">
  539.                                 </a>
  540. {#                                <div class="courses-hover-info">#}
  541. {#                                    {% if fo.formateur != null %}#}
  542. {#                                        <div class="courses-hover-action">#}
  543. {#                                            <div class="courses-hover-thumb">#}
  544. {#                                                <img src="{{ asset('uploads/coach/' ~ fo.formateur.logo) }}" alt="{{ fo.formateur.prenom }}">#}
  545. {#                                            </div>#}
  546. {#                                            <h4><a href="{{ path('app_formation_detailsfront', {'slug': fo.slug}) }}">{{ fo.formateur.prenom }} {{ fo.formateur.nom }}</a></h4>#}
  547. {#                                            <span class="crs-separator">/</span>#}
  548. {#                                            <p>{{ fo.formateur.poste }}</p>#}
  549. {#                                        </div>#}
  550. {#                                    {% endif %}#}
  551. {#                                </div>#}
  552.                             </div>
  553.                             <div class="single-item-text">
  554.                                 <h4><a href="{{ path('app_formation_detailsfront', {'slug': fo.slug}) }}">{{ fo.titre }}</a></h4>
  555.                                 <p>
  556.                                     {{ fo.desccourt|striptags|slice(0, 100)|raw }}
  557.                                     {% if  fo.desccourt|striptags|length > 100 %}...{% endif %}
  558.                                 </p>
  559.                                 <div class="single-item-content">
  560.                                     <div class="single-item-comment-view">
  561.                                         <span><i class="zmdi zmdi-accounts"></i> {{ fo.totalinscrit }}</span>
  562.                                         <span><i class="zmdi zmdi-favorite"></i> {{ fo.nblike }}</span>
  563.                                     </div>
  564.                                     <div class="single-item-rating">
  565.                                         <i class="zmdi zmdi-star"></i>
  566.                                         <i class="zmdi zmdi-star"></i>
  567.                                         <i class="zmdi zmdi-star"></i>
  568.                                         <i class="zmdi zmdi-star"></i>
  569.                                         <i class="zmdi zmdi-star"></i>
  570.                                     </div>
  571.                                 </div>
  572.                             </div>
  573.                         </div>
  574.                     </div>
  575.                 {% endfor %}
  576.             </div>
  578.             <!-- PAGINATION -->
  579.             <div class="row">
  580.                 <div class="col-12">
  581.                     <div class="pagination-wrapper">
  582.                         {{ knp_pagination_render(paginator, 'formation/custom_pagination.html.twig') }}
  583.                     </div>
  584.                 </div>
  585.             </div>
  586.         </div>
  587.     </div>
  588. {% endblock %}