templates/home/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}Formation{% endblock %}
  5. {% block out %}
  6. <style>
  7. /* Class to hide element on both desktop and mobile */
  8. .hide {
  9.   display: none;
  10. }
  12. /* Class to show element on desktop */
  13. .show-desktop {
  14.   display: none;
  15. }
  17. /* Class to show element on mobile */
  18. .show-mobile {
  19.   display: none;
  20. }
  22. /* Media query to override the display property for desktop and mobile devices */
  23. @media (min-width: 768px) {
  24.   .hide {
  25.     display: none !important;
  26.   }
  28.   .show-desktop {
  29.     display: block;
  30.   }
  31. }
  33. /* Media query to override the display property for mobile devices */
  34. @media (max-width: 767px) {
  35.   .hide {
  36.     display: none !important;
  37.   }
  39.   .show-mobile {
  40.     display: block;
  41.   }
  42. }
  43. </style>
  45. <!-- Hero Section avec design flat minimal et animations hexagones -->
  46. <section class="hero-parallax parallax" data-aos="fade-in">
  47.   <div class="hexagon-container" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none;"></div>
  48.   <div class="hero-content hero-text-bottom" style="position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;">
  49.     <h1 class="hero-title-large">
  50.       LA FORMATION EST LE MEILLEUR INVESTISSEMENT QUE VOUS PUISSIEZ FAIRE POUR VOTRE AVENIR
  51.     </h1>
  52.   </div>
  53.   <!-- Image de fond -->
  54.   <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; opacity: 0.4;">
  55.     <img src="{{ asset('couverture.jpeg') }}" alt="Background" 
  56.          class="parallax-image" 
  57.          style="width: 100%; height: 100%; object-fit: cover;">
  58.   </div>
  59. </section>
  60. {% endblock %}
  62. {% block body %}
  63. {% if user %}
  64. <div class="callout callout-warning" role="alert" data-aos="zoom-in">
  65.     <h5>Bienvenue {{user.nom}}</h5>
  66.     <p>Félicitations pour votre achat. Vous allez pouvoir profiter des vidéos de votre formation.</p>
  67. </div>
  69. <div class="row cards-row">
  70.     <div class="card-group no-gutters">
  71.         {% for item in user.usersPlayslists %}
  72.         <div class="card col-md-6 col-lg-4 hvr-grow" data-aos="slide-left">
  73.             <div class="text-white card-body bg-img text-center py-80" style="background-image: url({{asset('image/'~item.playlist.imageDeCouverture)}});">
  74.                 <a class="hvr-grow" href="{{path('app_playlist_show',{'id':item.playlist.id})}}">
  75.                     <img class="avatar avatar-xl avatar-bordered" src="{{asset('play.png')}}">
  76.                 </a>
  77.             </div>
  78.             <ul class="flexbox flex-justified text-center">
  79.                 <p>{{item.playlist.titre}}</p>
  80.             </ul>
  81.         </div>
  82.         {% endfor %}
  83.     </div>
  84. </div>
  85. {% endif %}
  87. {% if ads|length > 0 %}
  88. <div style="position: relative; margin-top: 3rem; margin-bottom: 3rem;" data-aos="fade-up">
  89.     <span class="badge" style="position: absolute; top: -15px; left: 20px; z-index: 10; background: var(--primary-yellow); color: var(--primary-blue); padding: 0.5rem 1.5rem; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;">
  90.         Publicités
  91.     </span>
  92.     
  93.     <div class="swiper ads-carousel" style="border-radius: var(--border-radius); overflow: hidden;">
  94.         <div class="swiper-wrapper">
  95.             {% for ad in ads %}
  96.             <div class="swiper-slide">
  97.                 <div class="ads-slide" style="position: relative; height: 400px; overflow: hidden;">
  98.                     {% if ad.image %}
  99.                     <img src="{{ asset('image/' ~ ad.image) }}" 
  100.                          alt="{{ ad.description }}"
  101.                          style="width: 100%; height: 100%; object-fit: cover;">
  102.                     {% endif %}
  103.                     <div class="ads-overlay" style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(24, 89, 129, 0.9), rgba(24, 89, 129, 0.5), transparent); padding: 3rem 2rem 2rem; color: var(--primary-white);">
  104.                         {% if ad.description %}
  105.                         <h3 style="color: var(--primary-white); font-size: 1.8rem; font-weight: 700; margin: 0 0 1rem 0; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);">
  106.                             {{ ad.description }}
  107.                         </h3>
  108.                         {% endif %}
  109.                     </div>
  110.                 </div>
  111.             </div>
  112.             {% endfor %}
  113.         </div>
  114.         <div class="swiper-pagination"></div>
  115.         <div class="swiper-button-next"></div>
  116.         <div class="swiper-button-prev"></div>
  117.     </div>
  118. </div>
  119. {% endif %}
  121. <div class="callout callout-warning" role="alert" data-aos="zoom-in" id="formations">
  122.     <h5>Nos formation</h5>
  123.     <p>Une formation qui pourrait susciter votre intérêt.</p>
  124. </div>
  126. {# Filtres catégories #}
  127. {% if categories is defined and categories|length > 0 %}
  128. <div class="mb-3 d-flex flex-wrap align-items-center gap-2">
  129.     <button class="btn btn-sm btn-pill filter-btn btn-primary text-white" data-category="all">Toutes</button>
  130.     {% for cat in categories %}
  131.       <button class="btn btn-sm btn-pill filter-btn btn-outline-primary" data-category="{{ cat.id }}">
  132.         {{ cat.nom ?? cat.titre ?? ('Catégorie ' ~ cat.id) }}
  133.       </button>
  134.     {% endfor %}
  135. </div>
  136. {% endif %}
  138. <div class="row cards-row" id="playlist-container">
  139.     <div class="card-group no-gutters">
  140.         {% for item in playlist %}
  141.         <div class="card col-md-6 col-lg-4 playlist-card" data-aos="zoom-in" data-category-id="{{ item.category ? item.category.id : 'none' }}">
  142.             {% if item.imageDeCouverture %}
  143.             <img class="card-img-top" style="width:100%" src="{{ asset('image/' ~ item.imageDeCouverture) }}" alt="Card image cap"
  144.               onerror="this.onerror=null;this.outerHTML=`<svg class='card-img-top' style='width:100%;height:auto;' viewBox='0 0 600 350' width='600' height='350' xmlns='http://www.w3.org/2000/svg'><rect width='600' height='350' fill='#cccccc'></rect><text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' font-family='monospace' font-size='26px' fill='#333333'>600x350</text></svg>`;">
  145.             {% else %}
  146.             <svg class="card-img-top" style="width:100%;height:auto;" viewBox="0 0 600 350" width="600" height="350" xmlns="http://www.w3.org/2000/svg">
  147.               <rect width="600" height="350" fill="#cccccc"></rect>
  148.               <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="monospace" font-size="26px" fill="#333333">600x350</text>
  149.             </svg>
  150.             {% endif %}
  151.           <div class="card-body">
  152.             <H5 class="text-center formation-title">{{item.titre}}</H5>
  153.             <p>{{item.description}}</p>
  154.             <p class="text-right"><small>{{item.prix}} MGA</small></p>
  155.           </div>
  156.           <footer class="card-footer text-right p-0">
  157.             <a href="{{path('app_add_playlist',{'id':item.id})}}" class="btn btn-square btn-primary no-radius"><i class="ti-shopping-cart"></i></a>
  158.           </footer>
  159.         </div>
  160.         {% endfor %}
  161.     </div>
  162. </div>
  164. {% if instructors is defined and instructors|length > 0 %}
  165. <div class="divider mt-6">Nos Instructeurs</div>
  166. <div class="row cards-row">
  167.   {% for instructor in instructors %}
  168.   <div class="col-md-6 col-lg-4 mb-4" data-aos="zoom-in">
  169.     <div class="card h-100">
  170.       {% if instructor.photo %}
  171.       <img class="card-img-top" style="height: 220px; object-fit: cover;" src="{{ asset('image/' ~ instructor.photo) }}" alt="{{ instructor.prenom }} {{ instructor.nom }}">
  172.       {% else %}
  173.       <div class="card-img-top d-flex align-items-center justify-content-center bg-light" style="height: 220px;">
  174.         <i class="fa fa-user fa-3x text-muted"></i>
  175.       </div>
  176.       {% endif %}
  177.       <div class="card-body d-flex flex-column">
  178.         <h5 class="card-title">{{ instructor.prenom }} {{ instructor.nom }}</h5>
  179.         {% set hasCat = false %}
  180.         <div class="mb-2">
  181.           {% for pl in instructor.playlists %}
  182.             {% if pl.category %}
  183.               {% set hasCat = true %}
  184.               {% set catName = pl.category.nom ?? pl.category.titre ?? 'Catégorie' %}
  185.               {% set catColor = pl.category.couleur ?? '#3f4a59' %}
  186.               <span class="badge badge-pill mr-1 mb-1" style="background: {{ catColor }}; color: #fff; display: inline-flex; align-items: center; gap: 6px;">
  187.                 <span style="width:16px;height:16px;display:inline-block;border-radius:50%;background:rgba(255,255,255,0.3);"></span>
  188.                 {{ catName }}
  189.               </span>
  190.             {% endif %}
  191.           {% endfor %}
  192.           {% if not hasCat %}
  193.             <span class="text-muted small">Aucune catégorie</span>
  194.           {% endif %}
  195.         </div>
  196.         <p class="card-text text-muted" style="flex:1;">{{ instructor.bio ? instructor.bio|u.truncate(120, '...') : 'Biographie à venir' }}</p>
  197.         <div class="d-flex justify-content-between align-items-center">
  198.           <small class="text-muted">{{ instructor.playlists|length }} playlists</small>
  199.           <a class="btn btn-sm btn-primary" href="{{ path('app_instructor_profile', {'id': instructor.id}) }}">Voir le profil</a>
  200.         </div>
  201.       </div>
  202.     </div>
  203.   </div>
  204.   {% endfor %}
  205. </div>
  206. {% endif %}
  208. <script>
  209. document.addEventListener('DOMContentLoaded', () => {
  210.   const filterButtons = document.querySelectorAll('.filter-btn');
  211.   const cards = document.querySelectorAll('.playlist-card');
  213.   function applyFilter(catId) {
  214.     cards.forEach(card => {
  215.       const cardCat = card.dataset.categoryId || 'none';
  216.       const show = (catId === 'all') || (cardCat === catId);
  217.       card.style.display = show ? '' : 'none';
  218.     });
  219.   }
  221.   filterButtons.forEach(btn => {
  222.     btn.addEventListener('click', () => {
  223.       filterButtons.forEach(b => {
  224.         b.classList.remove('active', 'btn-primary', 'text-white');
  225.         b.classList.add('btn-outline-primary');
  226.       });
  227.       btn.classList.add('active', 'btn-primary', 'text-white');
  228.       btn.classList.remove('btn-outline-primary');
  229.       applyFilter(btn.dataset.category);
  230.     });
  231.   });
  233.   // état initial
  234.   const initial = document.querySelector('.filter-btn.btn-primary') || document.querySelector('.filter-btn');
  235.   if (initial) {
  236.     applyFilter(initial.dataset.category);
  237.   }
  238. });
  239. </script>
  241. <div class="divider">Témoignage</div>
  242. <div class="row gap-y" data-provide="photoswipe">
  243.   <a class="col-6 col-lg-4" href="#">
  244.     <img src="{{asset('min/img (1).jpg')}}" alt="Voici une description de la photo" data-original-src="{{asset('norm/img (1).jpg')}}">
  245.   </a>
  246.   <a class="col-6 col-lg-4" href="#">
  247.     <img src="{{asset('min/img (2).jpg')}}" alt="Voici une description de la photo" data-original-src="{{asset('norm/img (2).jpg')}}">
  248.   </a>
  249.   <a class="col-6 col-lg-4" href="#">
  250.     <img src="{{asset('min/img (3).jpg')}}" alt="Voici une description de la photo" data-original-src="{{asset('norm/img (3).jpg')}}">
  251.   </a>
  252.   <a class="col-6 col-lg-4" href="#">
  253.     <img src="{{asset('min/img (4).jpg')}}" alt="Voici une description de la photo" data-original-src="{{asset('norm/img (4).jpg')}}">
  254.   </a>
  255.   <a class="col-6 col-lg-4" href="#">
  256.     <img src="{{asset('min/img (5).jpg')}}" alt="Voici une description de la photo" data-original-src="{{asset('norm/img (5).jpg')}}">
  257.   </a>
  258.   <a class="col-6 col-lg-4" href="#">
  259.     <img src="{{asset('min/img (6).jpg')}}" alt="Voici une description de la photo" data-original-src="{{asset('norm/img (6).jpg')}}">
  260.   </a>
  261. </div>
  262. <hr>
  263. <div class="callout callout-warning" role="alert" data-aos="zoom-in">
  264.     <h5>Nous Contactez</h5>
  265. </div>
  267. <div class="row" data-aos="zoom-in">
  268.   <div class="col-lg-12">
  269.     <div class="card">
  270.       <div class="row no-gutters">
  271.         <div class="col-12">
  272.           <div class="card-body">
  273.             <p>N'hésitez pas à nous contacter pour obtenir toutes les informations dont vous avez besoin !</p>
  274.             <i class="fa fa-phone"></i> 
  275.             <a class="hover-primary text-uppercase fs-14 fw-500 ls-1" href="">0380941865 0388103048</a>
  276.             <div class="text-right">
  277.               <a class="btn btn-square btn-facebook" href="https://web.facebook.com/profile.php?id=100070977424516"><i class="fa fa-facebook"></i></a>
  278.             </div>
  279.           </div>
  280.         </div>
  281.       </div>
  282.     </div>
  283.   </div>
  284.   {# <div class="col-lg-6">
  286.     <form class="card form-type-combine">
  288.       <div class="card-body">
  290.         <div class="form-groups-attached">
  291.           <div class="row">
  292.             <div class="form-group col-6">
  293.               <label>Nom</label>
  294.               <input class="form-control" type="text">
  295.             </div>
  297.             <div class="form-group col-6">
  298.               <label>Téléphone</label>
  299.               <input class="form-control" type="text">
  300.             </div>
  301.           </div>
  303.           <div class="form-group">
  304.             <label>Email address</label>
  305.             <input class="form-control" type="text">
  306.           </div>
  308.           <div class="form-group">
  309.             <label>Message</label>
  310.             <input class="form-control" type="text">
  311.           </div>
  313.         </div>
  314.       </div>
  316.       <footer class="card-footer text-right">
  317.         <button class="btn btn-primary" type="submit">Envoyer</button>
  318.       </footer>
  319.     </form>
  320.   </div> #}
  321. </div>
  323. {% endblock %}