templates/offre/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% set active = 'offre'%}
  3. {% block body %}
  4.     <section class="breadcrumbs" data-aos="fade-in">
  5.         <div class="container text-center">
  6.             <h2>Offre Digital Learning</h2>
  7.         </div>
  8.     </section>
  10.     <section id="values" class="values">
  11.         <div class="container" data-aos="fade-up">
  12.             <header class="section-header">
  13.                 <p>{{ offre.titre }}</p><br>
  14.                 <h2>{{ offre.soustitre }}
  15.                 </h2>
  16.             </header>
  18.             <div class="row">
  19.                 {% for offredigital in offre.offredigital %}
  20.                 <div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
  21.                     <div class="box">
  22.                         <h3>{{ offredigital.titre }}</h3>
  23.                         <img src="{{ asset('uploads/files/'~offredigital.image)}}" class="img-fluid" alt="">
  24.                     </div>
  25.                 </div>
  26.                 {% endfor %}
  27.             </div>
  28.         </div>
  29.     </section>
  31.     <section id="pricing" class="pricing">
  32.         <div class="container" data-aos="fade-up">
  33.             <div class="row gy-4" data-aos="fade-left">
  34.                 {% for i, offredigitallearning in offre.offredigitallearning %}
  35.                 <div class="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-delay="100">
  36.                     
  37.                     <div class="box">
  38.                         <img src="{{ asset('uploads/files/'~offredigitallearning.image)}}" class="img-fluid" alt="">
  39.                         <h3>{{ offredigitallearning.titre }}</h3>
  40.                             <p>{{ offredigitallearning.paragraphe|raw }}</p>
  41.                             <p>
  42.                                 <a href="#" class="btn-buy" data-bs-toggle="modal" data-bs-target="#myModal{{i+1}}" >Parcourir</a>
  43.                             </p>
  44.                         </div>
  45.                     </div>
  46.                     {% endfor %}
  47.                 </div>
  48.                 
  49.             </div>
  50.         </div>
  51.     </section>
  53.     <!-- The Modal -->
  54. <!--     {% for i, offredigitallearning in offre.offredigitallearning %} -->
  55.     <div class="modal" id="myModal1">
  56.         <div class="modal-dialog modal-xl">
  57.             <div class="modal-content">
  58.                 <div class="modal-header">
  59.                     <h4 class="modal-title">100% présentiel <-MIXTE-> distanciel</h4>
  60.                         <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
  61.                     </div>
  62.                     <div class="modal-body" align="center">
  63.                         <img src="{{asset('assets/img/modal1.png')}}" class="img-fluid" alt="">
  64.                     </div>
  65.                     <div class="modal-footer">
  66.                         <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fermer</button>
  67.                     </div>
  68.                 </div>
  69.             </div>
  70.         </div>
  71.     </div>
  72.     <!-- {% endfor %} -->
  73.     <div class="modal" id="myModal2">
  74.         <div class="modal-dialog modal-xl">
  75.             <div class="modal-content">
  76.                 <div class="modal-header">
  77.                     <h4 class="modal-title">Rapid Learning <-E-learning-> Serious Game</h4>
  78.                         <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
  79.                     </div>
  80.                     <div class="modal-body">
  81.                         <section id="services" class="services">
  82.                             <div class="container" data-aos="fade-up">
  83.                                 <div class="row gy-4">
  84.                                     <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
  85.                                         <div class="service-box blue">
  86.                                             <h3>Conception de votre scénario pédagogique</h3>
  87.                                             <p>Analyse du besoin</p>
  88.                                             <p>Note de cadrage</p>
  89.                                             <p>Storyboard</p>
  90.                                             <p>Synopsis</p>
  91.                                         </div>
  92.                                     </div>
  93.                                     <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
  94.                                         <div class="service-box blue">
  95.                                             <h3>Developpement de vos contenus mutimedia</h3>
  96.                                             <p>Style graphique</p>
  97.                                             <p>Vidéo</p>
  98.                                             <p>Audio et voix off</p>
  99.                                             <p>Infograpfie</p>
  100.                                             <p>Intégration</p>
  101.                                         </div>
  102.                                     </div>
  103.                                     <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="400">
  104.                                         <div class="service-box blue">
  105.                                             <h3>Déploiement de vos formations digitales</h3>
  106.                                             <p>Evaluation</p>
  107.                                             <p>Diffusion</p>
  108.                                             <p>Promotion</p>
  109.                                         </div>
  110.                                     </div>
  111.                                 </div>
  112.                             </div>
  113.                         </section>
  114.                     </div>
  115.                     <div class="modal-footer">
  116.                         <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fermer</button>
  117.                     </div>
  118.                 </div>
  119.             </div>
  120.         </div>
  121.     </div>
  123.     <div class="modal" id="myModal3">
  124.         <div class="modal-dialog modal-xl">
  125.             <div class="modal-content">
  126.                 <div class="modal-header">
  127.                     <h4 class="modal-title">E-catalogue <-Votre lms->Apprenants</h4>
  128.                         <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
  129.                     </div>
  130.                     <div class="modal-body">
  131.                         <section id="features" class="features">
  132.                             <div class="container" data-aos="fade-up">
  133.                                 <div class="col-lg-12 mt-5 mt-lg-0 d-flex">
  134.                                     <div class="row align-self-center gy-4">
  136.                                         <div class="col-md-4" data-aos="zoom-out" data-aos-delay="200"></div>
  138.                                         <div class="col-md-4" data-aos="zoom-out" data-aos-delay="200">
  139.                                             <div class="feature-box d-flex align-items-center" style="border: solid; border-color: #4A66AC">
  140.                                                 <div>
  141.                                                     <p class="text-center">Rajout TIM Learning</p>
  142.                                                     <p class="text-center"><img src="{{asset('assets/img/cloud.png')}}" class="img-fluid" alt="" style="width: 15%;"></p>
  143.                                                     <h3 class="text-center" style="color:#4A66AC">
  144.                                                         Gestion et diffusion de vos formations
  145.                                                     </h3><br>
  146.                                                     <p>•    Plateforme ergonomique, intuitive</p>
  147.                                                     <p>•    Facile d’utilisation pour les gestionnaires et les apprenants</p>
  148.                                                     <p>•    Offre adaptée à toutes les tailles de structure</p>
  149.                                                     <p>•    LMS institutionnel, universitaire, work place B to B</p>
  150.                                                 </div>
  151.                                             </div>
  152.                                         </div>
  154.                                         <div class="col-md-4" data-aos="zoom-out" data-aos-delay="200"></div>
  156.                                         <div class="col-md-4" data-aos="zoom-out" data-aos-delay="200">
  157.                                             <div class="feature-box d-flex align-items-center" style="border: solid; border-color: #73a3de">
  158.                                                 <div>
  159.                                                     <p class="text-center"><img src="{{asset('assets/img/cloud.png')}}" class="img-fluid" alt="" style="width: 15%;"></p>
  160.                                                     <h3 class="text-center" style="color:#73a3de">Gestion des contacts</h3><br>
  161.                                                     <p>•    Clients</p>
  162.                                                     <p>•    Apprenants</p>
  163.                                                     <p>•    Tuteurs</p>
  164.                                                     <p>•    Partenaires</p>
  165.                                                     <p>•    Formateurs</p>
  166.                                                     <p>•    Personnel administratif</p>
  167.                                                 </div>
  168.                                             </div>
  169.                                         </div>
  171.                                         <div class="col-md-4" data-aos="zoom-out" data-aos-delay="300">
  172.                                             <div class="feature-box d-flex align-items-center">
  173.                                                 <div>
  174.                                                     <img src="{{asset('assets/img/timSolution.png')}}" class="img-fluid" alt="">
  175.                                                     <p class="text-center">
  176.                                                         <a href="{{ path('rejoindre') }}" class="btn btn-primary">Demander un essai gratuit</a>
  177.                                                     </p>
  178.                                                 </div>
  179.                                             </div>
  180.                                         </div>
  182.                                         <div class="col-md-4" data-aos="zoom-out" data-aos-delay="400">
  183.                                             <div class="feature-box d-flex align-items-center" style="border: solid; border-color: #4c637f">
  184.                                                 <div>
  185.                                                     <p class="text-center"><img src="{{asset('assets/img/cloud.png')}}" class="img-fluid" alt="" style="width: 15%;"></p>
  186.                                                     <h3 class="text-center" style="color:#4c637f">Planification</h3><br>
  187.                                                     <p>•    Planification des ressources humaines, des salles et équipements</p>
  188.                                                     <p>•    Notifications en cas de changement de planning</p>
  189.                                                     <p>•    Planning consultable en ligne par les personnes concernées</p>
  190.                                                     <p>•    Partenaires</p>
  191.                                                     <p>•    Formateurs</p>
  192.                                                 </div>
  193.                                             </div>
  194.                                         </div>
  196.                                         <div class="col-md-4" data-aos="zoom-out" data-aos-delay="500">
  197.                                             <div class="feature-box d-flex align-items-center" style="border: solid; border-color: #92e4fd">
  198.                                                 <div>
  199.                                                     <p class="text-center"><img src="{{asset('assets/img/cloud.png')}}" class="img-fluid" alt="" style="width: 15%;"></p>
  200.                                                     <h3 class="text-center" style="color:#92e4fd">Suivi pédagogique</h3><br>
  201.                                                     <p>•    Gestion des absences</p>
  202.                                                     <p>•    Evaluations</p>
  203.                                                     <p>•    Ressources pédagogiques en ligne</p>
  204.                                                     <p>•    Messagerie intégrée</p>
  205.                                                 </div>
  206.                                             </div>
  207.                                         </div>
  209.                                         <div class="col-md-4" data-aos="zoom-out" data-aos-delay="500">
  210.                                             <div class="feature-box d-flex align-items-center" style="border: solid; border-color: #4c637f">
  211.                                                 <div>
  212.                                                     <p class="text-center"><img src="{{asset('assets/img/cloud.png')}}" class="img-fluid" alt="" style="width: 15%;"></p>
  213.                                                     <h3 class="text-center" style="color:#4c637f">Suivi commercial</h3><br>
  214.                                                     <p>•    Captation de prospects</p>
  215.                                                     <p>•    Management de la relation client</p>
  216.                                                     <p>•    Gestion bons de commande/ bons de livraison</p>
  217.                                                     <p>•    Facturation</p>
  218.                                                     <p>•    Export comptable</p>
  219.                                                 </div>
  220.                                             </div>
  221.                                         </div>
  223.                                         <div class="col-md-4" data-aos="zoom-out" data-aos-delay="500">
  224.                                             <div class="feature-box d-flex align-items-center" style="border: solid; border-color: #b8c1cc">
  225.                                                 <div>
  226.                                                     <p class="text-center"><img src="{{asset('assets/img/cloud.png')}}" class="img-fluid" alt="" style="width: 15%;"></p>
  227.                                                     <h3 class="text-center" style="color:#b8c1cc">Pilotage d’activité</h3><br>
  228.                                                     <p>•    Tableaux de bord</p>
  229.                                                     <p>•    Statistiques</p>
  230.                                                     <p>•    Suivi de portefeuille projets</p>
  231.                                                     <p>•    Indicateurs de performance</p>
  232.                                                     <p>•    Suivi RH</p>
  233.                                                 </div>
  234.                                             </div>
  235.                                         </div>
  237.                                     </div>
  238.                                 </div>
  239.                             </div>
  240.                         </section>
  241.                     </div>
  242.                     <div class="modal-footer">
  243.                         <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fermer</button>
  244.                     </div>
  245.                 </div>
  246.             </div>
  247.         </div>
  248.     </div>
  250. {% endblock %}