templates/formation/formationsBootcamp.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 MODERNE ===== */
  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.             margin: 0;
  42.             display: flex;
  43.             justify-content: center;
  44.             gap: 15px;
  45.             align-items: center;
  46.         }
  47.         .breadcrumb-list li, .breadcrumb-list li a {
  48.             color: rgba(255,255,255,0.7);
  49.             font-size: 15px;
  50.             text-decoration: none;
  51.             transition: color 0.3s;
  52.         }
  53.         .breadcrumb-list li a:hover {
  54.             color: var(--gold);
  55.         }
  56.         .breadcrumb-list li.active {
  57.             color: var(--gold);
  58.         }
  59.         .breadcrumb-list li i {
  60.             font-size: 14px;
  61.             color: var(--gold);
  62.         }
  64.         /* ===== SEARCH BAR FLOATING MODERNE ===== */
  65.         .search-category {
  66.             margin-top: -60px;
  67.             position: relative;
  68.             z-index: 10;
  69.             padding-bottom: 20px;
  70.         }
  72.         .search-wrapper-glass {
  73.             background: #ffffff;
  74.             padding: 30px;
  75.             border-radius: 24px;
  76.             box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  77.             border: 1px solid rgba(255,255,255,0.8);
  78.         }
  80.         .form-container-modern {
  81.             display: grid;
  82.             grid-template-columns: 2fr 1fr 1fr auto;
  83.             gap: 15px;
  84.             align-items: center;
  85.         }
  87.         .input-group-custom {
  88.             position: relative;
  89.             display: flex;
  90.             align-items: center;
  91.         }
  93.         .input-group-custom i {
  94.             position: absolute;
  95.             left: 15px;
  96.             color: var(--navy);
  97.             opacity: 0.5;
  98.             z-index: 5;
  99.         }
  101.         .input-group-custom input,
  102.         .input-group-custom select {
  103.             width: 100%;
  104.             padding: 15px 15px 15px 45px !important;
  105.             border: 1px solid #e2e8f0;
  106.             border-radius: 12px;
  107.             font-size: 14px;
  108.             background-color: #f8fafc;
  109.             transition: all 0.3s ease;
  110.             cursor: pointer;
  111.             appearance: none;
  112.         }
  114.         .input-group-custom input:focus,
  115.         .input-group-custom select:focus {
  116.             background: #fff;
  117.             border-color: var(--gold);
  118.             box-shadow: 0 0 0 4px rgba(255, 174, 39, 0.1);
  119.             outline: none;
  120.         }
  122.         .btn-search-modern {
  123.             background: var(--gold);
  124.             color: var(--navy);
  125.             border: none;
  126.             padding: 15px 35px;
  127.             border-radius: 12px;
  128.             font-weight: 700;
  129.             text-transform: uppercase;
  130.             letter-spacing: 0.5px;
  131.             cursor: pointer;
  132.             transition: all 0.3s ease;
  133.             display: flex;
  134.             align-items: center;
  135.             gap: 10px;
  136.             white-space: nowrap;
  137.         }
  139.         .btn-search-modern:hover {
  140.             background: var(--navy);
  141.             color: #fff;
  142.             transform: translateY(-2px);
  143.         }
  145.         /* ===== SECTION TITRES ===== */
  146.         .section-title-wrapper {
  147.             text-align: center;
  148.             margin-bottom: 50px;
  149.         }
  150.         .section-title h3 {
  151.             font-size: 36px;
  152.             font-weight: 800;
  153.             color: var(--text-dark);
  154.             margin-bottom: 12px;
  155.             position: relative;
  156.             display: inline-block;
  157.         }
  158.         .section-title h3::after {
  159.             content: '';
  160.             position: absolute;
  161.             bottom: -12px;
  162.             left: 50%;
  163.             transform: translateX(-50%);
  164.             width: 60px;
  165.             height: 4px;
  166.             background: linear-gradient(90deg, var(--gold), var(--gold-dark));
  167.             border-radius: 2px;
  168.         }
  169.         .section-title p {
  170.             font-size: 16px;
  171.             color: var(--text-muted);
  172.             margin-top: 20px;
  173.         }
  175.         /* ===== COURSE AREA ===== */
  176.         .course-area {
  177.             padding: 80px 0;
  178.             background: #fff;
  179.         }
  181.         /* CARTE FORMATION - HAUTEUR ÉGALE */
  182.         .single-item {
  183.             background: #fff;
  184.             border-radius: 20px;
  185.             overflow: hidden;
  186.             box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  187.             transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  188.             height: 100%;
  189.             display: flex;
  190.             flex-direction: column;
  191.             border: 1px solid var(--border-light);
  192.         }
  193.         .single-item:hover {
  194.             transform: translateY(-8px);
  195.             box-shadow: 0 20px 40px rgba(31,57,113,0.15);
  196.             border-color: var(--gold);
  197.         }
  199.         /* IMAGE */
  200.         .single-item-image {
  201.             position: relative;
  202.             overflow: hidden;
  203.             height: 220px;
  204.             background: linear-gradient(135deg, #f8faff 0%, #fff 100%);
  205.             display: flex;
  206.             align-items: center;
  207.             justify-content: center;
  208.         }
  209.         .single-item-image a {
  210.             display: flex;
  211.             align-items: center;
  212.             justify-content: center;
  213.             width: 100%;
  214.             height: 100%;
  215.         }
  216.         .single-item-image img {
  217.             width: auto;
  218.             height: auto;
  219.             max-width: 100%;
  220.             max-height: 100%;
  221.             object-fit: contain;
  222.             transition: transform 0.4s ease;
  223.         }
  224.         .single-item:hover .single-item-image img {
  225.             transform: scale(1.05);
  226.         }
  228.         /* OVERLAY HOVER */
  229.         .overlay-effect {
  230.             position: relative;
  231.         }
  232.         .courses-hover-info {
  233.             position: absolute;
  234.             bottom: -100%;
  235.             left: 0;
  236.             right: 0;
  237.             background: linear-gradient(135deg, rgba(31,57,113,0.95), rgba(22,45,90,0.95));
  238.             padding: 15px;
  239.             transition: bottom 0.3s ease;
  240.             backdrop-filter: blur(5px);
  241.         }
  242.         .single-item:hover .courses-hover-info {
  243.             bottom: 0;
  244.         }
  245.         .courses-hover-action {
  246.             display: flex;
  247.             align-items: center;
  248.             gap: 12px;
  249.             flex-wrap: wrap;
  250.         }
  251.         .courses-hover-thumb img {
  252.             width: 40px;
  253.             height: 40px;
  254.             border-radius: 50%;
  255.             object-fit: cover;
  256.             border: 2px solid var(--gold);
  257.         }
  258.         .courses-hover-action h4 a {
  259.             color: #fff;
  260.             font-size: 14px;
  261.             font-weight: 600;
  262.             text-decoration: none;
  263.         }
  264.         .courses-hover-action h4 a:hover {
  265.             color: var(--gold);
  266.         }
  267.         .crs-separator {
  268.             color: var(--gold);
  269.         }
  270.         .courses-hover-action p {
  271.             color: rgba(255,255,255,0.8);
  272.             font-size: 11px;
  273.             margin: 0;
  274.         }
  276.         /* CORPS DE LA CARTE */
  277.         .single-item-text {
  278.             padding: 20px;
  279.             flex: 1;
  280.             display: flex;
  281.             flex-direction: column;
  282.         }
  283.         .single-item-text h4 {
  284.             font-size: 18px;
  285.             font-weight: 700;
  286.             margin-bottom: 12px;
  287.             line-height: 1.4;
  288.             min-height: 50px;
  289.         }
  290.         .single-item-text h4 a {
  291.             color: var(--text-dark);
  292.             text-decoration: none;
  293.             transition: color 0.2s;
  294.         }
  295.         .single-item-text h4 a:hover {
  296.             color: var(--gold);
  297.         }
  298.         /* DESCRIPTION - MAX 100 CARACTÈRES */
  299.         .single-item-text > p {
  300.             font-size: 13px;
  301.             color: var(--text-muted);
  302.             line-height: 1.6;
  303.             margin-bottom: 16px;
  304.             display: -webkit-box;
  305.             -webkit-line-clamp: 2;
  306.             -webkit-box-orient: vertical;
  307.             overflow: hidden;
  308.         }
  310.         /* INFOS CARTE (INSCRIPTIONS + LIKES) */
  311.         .single-item-content {
  312.             display: flex;
  313.             justify-content: space-between;
  314.             align-items: center;
  315.             margin-top: auto;
  316.             padding-top: 15px;
  317.             border-top: 1px solid var(--border-light);
  318.         }
  319.         .single-item-comment-view {
  320.             display: flex;
  321.             gap: 15px;
  322.         }
  323.         .single-item-comment-view span {
  324.             font-size: 12px;
  325.             color: var(--text-muted);
  326.             display: flex;
  327.             align-items: center;
  328.             gap: 5px;
  329.         }
  330.         .single-item-comment-view span i {
  331.             color: var(--gold);
  332.             font-size: 14px;
  333.         }
  334.         .single-item-rating i {
  335.             color: var(--gold);
  336.             font-size: 12px;
  337.             margin: 0 1px;
  338.         }
  340.         /* PAGINATION */
  341.         .pagination-wrapper {
  342.             margin-top: 40px;
  343.             text-align: center;
  344.         }
  345.         .pagination {
  346.             display: flex;
  347.             justify-content: center;
  348.             gap: 8px;
  349.             list-style: none;
  350.             padding: 0;
  351.             margin: 0;
  352.         }
  353.         .pagination .page-item {
  354.             list-style: none;
  355.         }
  356.         .pagination .page-link {
  357.             display: flex;
  358.             align-items: center;
  359.             justify-content: center;
  360.             width: 40px;
  361.             height: 40px;
  362.             border-radius: 12px;
  363.             background: #fff;
  364.             border: 1px solid var(--border-light);
  365.             color: var(--navy);
  366.             font-weight: 500;
  367.             text-decoration: none;
  368.             transition: all 0.3s ease;
  369.         }
  370.         .pagination .page-link:hover {
  371.             background: var(--gold);
  372.             border-color: var(--gold);
  373.             color: var(--navy);
  374.         }
  375.         .pagination .active .page-link {
  376.             background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  377.             border-color: var(--navy);
  378.             color: #fff;
  379.         }
  381.         /* RESPONSIVE */
  382.         @media (max-width: 991px) {
  383.             .form-container-modern {
  384.                 grid-template-columns: 1fr;
  385.             }
  386.             .breadcrumb-area {
  387.                 padding: 60px 0 100px;
  388.             }
  389.             .breadcrumb-title h1 {
  390.                 font-size: 32px;
  391.             }
  392.             .btn-search-modern {
  393.                 justify-content: center;
  394.             }
  395.         }
  397.         @media (max-width: 768px) {
  398.             .section-title h3 {
  399.                 font-size: 28px;
  400.             }
  401.             .single-item-image {
  402.                 height: 180px;
  403.             }
  404.             .single-item-text h4 {
  405.                 font-size: 16px;
  406.                 min-height: auto;
  407.             }
  408.             .pagination .page-link {
  409.                 width: 36px;
  410.                 height: 36px;
  411.                 font-size: 13px;
  412.             }
  413.         }
  414.     </style>
  416.     <!-- BREADCRUMB AREA -->
  417.     <div class="breadcrumb-area">
  418.         <div class="container">
  419.             <div class="row">
  420.                 <div class="col-md-12">
  421.                     <div class="breadcrumb-title">
  422.                         <h1>Formations Bootcamp</h1>
  423.                         <ul class="breadcrumb-list">
  424.                             <li><a href="{{ path('app_home') }}">Accueil</a></li>
  425.                             <li><i class="zmdi zmdi-chevron-right"></i></li>
  426.                             <li class="active">Formations Bootcamp</li>
  427.                         </ul>
  428.                     </div>
  429.                 </div>
  430.             </div>
  431.         </div>
  432.     </div>
  434.     <!-- SEARCH CATEGORY FLOATING -->
  435.     <div class="search-category">
  436.         <div class="container">
  437.             <div class="search-wrapper-glass">
  438.                 <form method="POST" action="{{ path('app_formations_recherche') }}">
  439.                     <div class="form-container-modern">
  440.                         <!-- Champ Titre -->
  441.                         <div class="input-group-custom">
  442.                             <i class="zmdi zmdi-search"></i>
  443.                             <input placeholder="Quelle compétence souhaitez-vous acquérir ?" type="text" name="titre" class="form-control">
  444.                         </div>
  445.                         <!-- Champ Catégorie -->
  446.                         <div class="input-group-custom">
  447.                             <i class="zmdi zmdi-collection-bookmark"></i>
  448.                             <select name="categorie">
  449.                                 <option value="">Toutes les catégories</option>
  450.                                 <option value="Certifiante">Certifiantes</option>
  451.                                 <option value="Pratique">Pratiques</option>
  452.                                 <option value="BootCamp">BootCamp</option>
  453.                                 <option value="Cursus">Cursus</option>
  454.                             </select>
  455.                         </div>
  456.                         <!-- Champ Niveau -->
  457.                         <div class="input-group-custom">
  458.                             <i class="zmdi zmdi-trending-up"></i>
  459.                             <select name="niveau">
  460.                                 <option value="">Tous les niveaux</option>
  461.                                 <option value="Débutant">Débutant</option>
  462.                                 <option value="Intermediaire">Intermédiaire</option>
  463.                                 <option value="Avancé">Avancé</option>
  464.                                 <option value="Pas de prérequis">Pas de prérequis</option>
  465.                             </select>
  466.                         </div>
  467.                         <!-- Bouton -->
  468.                         <button type="submit" class="btn-search-modern">
  469.                             <span>Rechercher</span>
  470.                             <i class="zmdi zmdi-arrow-right"></i>
  471.                         </button>
  472.                     </div>
  473.                 </form>
  474.             </div>
  475.         </div>
  476.     </div>
  478.     <!-- COURSE AREA -->
  479.     <div class="course-area">
  480.         <div class="container">
  481.             <div class="row">
  482.                 <div class="col-md-12">
  483.                     <div class="section-title-wrapper">
  484.                         <div class="section-title">
  485.                             <h3>Formations Bootcamp</h3>
  486.                             <p>Découvrez nos formations intensives pour accélérer votre carrière</p>
  487.                         </div>
  488.                     </div>
  489.                 </div>
  490.             </div>
  492.             <div class="row">
  493.                 {% for fo in formation %}
  494.                     <div class="col-lg-4 col-md-6 col-12 mb-4 d-flex">
  495.                         <div class="single-item w-100">
  496.                             <div class="single-item-image overlay-effect">
  497.                                 <a href="{{ path('app_formation_detailsfront', {'slug': fo.slug}) }}">
  498.                                     <img src="{{ asset('uploads/formation/' ~ fo.affiche) }}" alt="{{ fo.titre }}">
  499.                                 </a>
  500. {#                                <div class="courses-hover-info">#}
  501. {#                                    {% if fo.formateur != null %}#}
  502. {#                                        <div class="courses-hover-action">#}
  503. {#                                            <div class="courses-hover-thumb">#}
  504. {#                                                <img src="{{ asset('uploads/coach/' ~ fo.formateur.logo) }}" alt="{{ fo.formateur.prenom }}" style="width: 40px; height: 40px; object-fit: cover;">#}
  505. {#                                            </div>#}
  506. {#                                            <h4><a href="{{ path('app_formation_detailsfront', {'slug': fo.slug}) }}">{{ fo.formateur.prenom }} {{ fo.formateur.nom }}</a></h4>#}
  507. {#                                            <span class="crs-separator">/</span>#}
  508. {#                                            <p>{{ fo.formateur.poste }}</p>#}
  509. {#                                        </div>#}
  510. {#                                    {% endif %}#}
  511. {#                                </div>#}
  512.                             </div>
  513.                             <div class="single-item-text">
  514.                                 <h4><a href="{{ path('app_formation_detailsfront', {'slug': fo.slug}) }}">{{ fo.titre }}</a></h4>
  515.                                 <p>    {{ fo.desccourt|striptags|slice(0, 100)|raw }}
  516.                                     {% if  fo.desccourt|striptags|length > 100 %}...{% endif %}</p>
  517.                                 <div class="single-item-content">
  518.                                     <div class="single-item-comment-view">
  519.                                         <span><i class="zmdi zmdi-accounts"></i> {{ fo.totalinscrit }}</span>
  520.                                         <span><i class="zmdi zmdi-favorite"></i> {{ fo.nblike }}</span>
  521.                                     </div>
  522.                                     <div class="single-item-rating">
  523.                                         <i class="zmdi zmdi-star"></i>
  524.                                         <i class="zmdi zmdi-star"></i>
  525.                                         <i class="zmdi zmdi-star"></i>
  526.                                         <i class="zmdi zmdi-star"></i>
  527.                                         <i class="zmdi zmdi-star"></i>
  528.                                     </div>
  529.                                 </div>
  530.                             </div>
  531.                         </div>
  532.                     </div>
  533.                 {% endfor %}
  534.             </div>
  536.             <!-- PAGINATION -->
  537.             <div class="row">
  538.                 <div class="col-12">
  539.                     <div class="pagination-wrapper">
  540.                         {{ knp_pagination_render(paginator, 'formation/custom_pagination.html.twig') }}
  542.                     </div>
  543.                 </div>
  544.             </div>
  545.         </div>
  546.     </div>
  547. {% endblock %}