templates/pages/home.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title 'Crsat' %}
  4. {% block body %}
  6.     <div id="heroCarousel" class="container carousel carousel-fade" data-bs-ride="carousel" data-bs-interval="5000"></div>
  8.     <!-- ======= Hero Section ======= -->
  9.     <section id="heroku" class="heroku">
  11.         <div class="info d-flex align-items-center">
  12.             <div class="container">
  13.                 <div class="hero-slider">
  14.                     <div class="hero-slider-item">
  15.                         <div class="row">
  16.                             <div class="col-md-8">
  17.                                 <h1 class="text-white" data-animation-out="fadeOutRight" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInLeft" data-delay-in=".1">Notre mission est
  18.                                 </h1>
  19.                                 <p class="text-muted mb-4" data-animation-out="fadeOutRight" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInLeft" data-delay-in=".4">de réaliser des études, des recherches et des expérimentations dans divers domaines des sciences appliquées et des technologies en vue de contribuer au développement national.</p>
  20.                                 <a href="{{ path('about') }}" class="btn btn-primary" data-animation-out="fadeOutRight" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInLeft" data-delay-in=".7">En savoir plus</a>
  21.                             </div>
  22.                         </div>
  23.                     </div>
  24.                     <!-- slider item -->
  25.                     <div class="hero-slider-item">
  26.                         <div class="row">
  27.                             <div class="col-md-8">
  28.                                 <h1 class="text-white" data-animation-out="fadeOutUp" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInDown" data-delay-in=".1">Recherche</h1>
  29.                                 <p class="text-muted mb-4" data-animation-out="fadeOutRight" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInLeft" data-delay-in=".4">Nos publications techniques, nos documents thématiques, nos projets de recherche</p>
  30.                                 <a href="{{ path('project') }}" class="btn btn-primary" data-animation-out="fadeOutUp" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInDown" data-delay-in=".7">Découvrir</a>
  31.                             </div>
  32.                         </div>
  33.                     </div>
  34.                     <!-- slider item -->
  35.                     <div class="hero-slider-item">
  36.                         <div class="row">
  37.                             <div class="col-md-8">
  38.                                 <h1 class="text-white" data-animation-out="fadeOutDown" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInUp" data-delay-in=".1">Les Services</h1>
  39.                                 <p class="text-muted mb-4" data-animation-out="fadeOutDown" data-delay-out="5" data-duration-in=".3" data-animation-in="fadeInUp" data-delay-in=".4">En parallèle à ses activités de recherches, le CRSAT développe des services, outils, expertises, … à l'intention des professionnels et du grand public.</p>
  40.                                 <a href="{{ path('services') }}" class="btn btn-primary" data-animation-out="fadeOutDown" data-delay-out="5" data-duration-in=".3" data-animation-in="zoomIn" data-delay-in=".7">En savoir plus</a>
  41.                             </div>
  42.                         </div>
  43.                     </div>
  44.                 </div>
  45.             </div>
  46.         </div>
  48.         <div id="hero-carousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
  50.             <div class="carousel-item active" style="background-image: url(images/conclave/ptc2.jpeg)"></div>
  51.             <div class="carousel-item" style="background-image: url(images/conclave/ptc3.jpeg)"></div>
  52.             <div class="carousel-item" style="background-image: url(images/conclave/ptc4.jpeg)"></div>
  53.             <div class="carousel-item" style="background-image: url(images/conclave/ptc5.jpeg)"></div>
  54.             <div class="carousel-item" style="background-image: url(images/3.jpeg)"></div>
  55.             <div class="carousel-item" style="background-image: url(images/3crsat.jpeg)"></div>
  56.             <div class="carousel-item" style="background-image: url(images/4.jpeg)"></div>
  58.             <a class="carousel-control-prev" href="#hero-carousel" role="button" data-bs-slide="prev">
  59.                 <span class="carousel-control-prev-icon bi bi-chevron-left" aria-hidden="true"></span>
  60.             </a>
  62.             <a class="carousel-control-next" href="#hero-carousel" role="button" data-bs-slide="next">
  63.                 <span class="carousel-control-next-icon bi bi-chevron-right" aria-hidden="true"></span>
  64.             </a>
  66.         </div>
  68.     </section>
  69.     <!-- End Hero Section -->
  70.     
  71.     <!-- banner-feature -->
  72.     <section class="bg-gray overflow-md-hidden">
  73.         <div class="container-fluid p-0">
  74.             <div class="row no-gutters">
  75.                 <div class="col-xl-4 col-lg-5 align-self-end">
  76.                     <img class="img-fluid w-100" src="/images/background/illustration.jpg" alt="banner-feature">
  77.                 </div>
  78.                 <div class="col-xl-8 col-lg-7">
  79.                     <div class="row feature-blocks bg-gray justify-content-between">
  80.                         <div class="col-sm-6 col-xl-5 mb-xl-5 mb-lg-3 mb-4 text-center text-sm-left">
  81.                             <h3 class="mb-xl-4 mb-lg-3 mb-4">Materiaux et technologies appropiées</h3>
  82.                             <p>Conception et fabrication des divers équipements artisanaux et industriels</p>
  83.                             <p>Recherche et développement des matériaux divers (matériaux de construction et de communication, intrants industriels, etc.)</p>
  84.                         </div>
  85.                         <div class="col-sm-6 col-xl-5 mb-xl-5 mb-lg-3 mb-4 text-center text-sm-left">
  86.                             <h3 class="mb-xl-4 mb-lg-3 mb-4">Biotechnologie et alimentaire</h3>
  87.                             <p>Recherche, conservation et transformation des substances naturelles en produits alimentaires, pharmaceutiques, cosmétiques, etc.</p>
  88.                         </div>
  89.                         <div class="col-sm-6 col-xl-5 mb-xl-5 mb-lg-3 mb-4 text-center text-sm-left">
  90.                             <h3 class="mb-xl-4 mb-lg-3 mb-4">Mathématiques appliqués et numérique</h3>
  91.                             <p>Modélisation mathématique des phénomènes d’organisation</p>
  92.                         </div>
  93.                         <div class="col-sm-6 col-xl-5 mb-xl-5 mb-lg-3 mb-4 text-center text-sm-left">
  94.                             <h3 class="mb-xl-4 mb-lg-3 mb-4">énergie renouvelable</h3>
  95.                             <p>Valorisation des différentes formes de ressources d’énergies renouvelables à savoir : la biomasse, le solaire, l’éolienne, l’hydroélectricité, la géothermie, etc</p>
  96.                         </div>
  97.                         <div class="col-sm-6 col-xl-5 mb-xl-5 mb-lg-3 mb-4 text-center text-sm-left">
  98.                             <h3 class="mb-xl-4 mb-lg-3 mb-4">Recherche sur l'Albinisme</h3>
  99.                             <p>Recherche sur l'Albinisme</p>
  100.                         </div>
  101.                     </div>
  102.                 </div>
  103.             </div>
  104.         </div>
  105.     </section>
  106.     <!-- /banner-feature -->
  107.     <!-- courses -->
  108.     <section class="section-sm">
  109.         <div class="container">
  110.             <div class="row">
  111.                 <div class="col-12">
  112.                     <div class="d-flex align-items-center section-title justify-content-between">
  113.                         <h2 class="mb-0 text-nowrap mr-3">Nos services</h2>
  114.                         <div class="border-top w-100 border-primary d-none d-sm-block"></div>
  115.                         <div>
  116.                             <a href="{{ path('services') }} " class="btn btn-sm btn-outline-primary ml-sm-3 d-none d-sm-block">see all</a>
  117.                         </div>
  118.                     </div>
  119.                 </div>
  120.             </div>
  121.             <!-- course list -->
  122.             <div
  123.                 class="row justify-content-center">
  124.                 <!-- course item -->
  125.                 {% for service in services %}
  126.                     <div class="col-lg-4 col-sm-6 mb-5">
  127.                         <div class="card p-0 border-primary rounded-0 hover-shadow">
  128.                             {% if vich_uploader_asset(service, 'imageFile') is null %}
  129.                                 <img src="" alt="not found">
  130.                             {% else %}
  131.                                 <img class="card-img-top rounded-0" src="{{ vich_uploader_asset(service, 'imageFile') | imagine_filter('primary_thumb') }}" alt="service thumb">
  132.                             {% endif %}
  133.                             <div class="card-body">
  134.                                 <ul class="list-inline mb-2">
  135.                                     <li
  136.                                         class="list-inline-item">{# <i class="ti-calendar mr-1 text-color"></i>02-14-2018 #}
  137.                                     </li>
  138.                                     <li class="list-inline-item">
  139.                                         <a class="text-color" href="course-single.html">Humanities</a>
  140.                                     </li>
  141.                                 </ul>
  142.                                 <a href="course-single.html">
  143.                                     <h4 class="card-title">{{ service.title}}</h4>
  144.                                 </a>
  145.                                 <p class="card-text mb-4">
  146.                                     {{ service.description | length > 100 ? service.description | slice(0, 200) ~ ' ...' : service.description  }}</p>
  147.                                 <a href="{{ path('service.single', {id: service.id}) }}" class="btn btn-primary btn-sm">En savoir plus</a>
  148.                             </div>
  149.                         </div>
  150.                     </div>
  151.                 {% endfor %}
  152.             </div>
  153.             <!-- /course list -->
  154.             <!-- mobile see all button -->
  155.             <div class="row">
  156.                 <div class="col-12 text-center">
  157.                     <a href="courses.html" class="btn btn-sm btn-outline-primary d-sm-none d-inline-block">sell all</a>
  158.                 </div>
  159.             </div>
  160.         </div>
  161.     </section>
  162.     <!-- /courses -->
  164.     <!-- cta -->
  165.     <section class="section bg-primary">
  166.         <div class="container">
  167.             <div class="row">
  168.                 <div class="col-12 text-center">
  169.                     <h6 class="text-white font-secondary mb-0">Clicquez pour nous contactez</h6>
  170.                     <h2 class="section-title text-white">Pour un complément d’informations, veuillez nous écrire</h2>
  171.                     <a href="{{ path('contact') }}" class="btn btn-light">Contactez-nous</a>
  172.                 </div>
  173.             </div>
  174.         </div>
  175.     </section>
  176.     <!-- /cta -->
  177.     <!-- events -->
  178.     <section class="section bg-gray">
  179.         <div class="container">
  180.             <div class="row">
  181.                 <div class="col-12">
  182.                     <div class="d-flex align-items-center section-title justify-content-between">
  183.                         <h2 class="mb-0 text-nowrap mr-3">Agenda</h2>
  184.                         <div class="border-top w-100 border-primary d-none d-sm-block"></div>
  185.                         <div>
  186.                             <a href="{{ path('agenda') }}" class="btn btn-sm btn-outline-primary ml-sm-3 d-none d-sm-block">voir tout</a>
  187.                         </div>
  188.                     </div>
  189.                 </div>
  190.             </div>
  191.             <div
  192.                 class="row justify-content-center">
  193.                 <!-- event -->
  194.                 {% for agenda in agenda %}
  195.                     <div class="col-lg-4 col-sm-6 mb-5 mb-lg-0">
  196.                         <div class="card border-0 rounded-0 hover-shadow">
  197.                             <div class="card-img position-relative">
  198.                                 <img class="card-img-top rounded-0" src="{{ vich_uploader_asset(agenda, 'imageFile') | imagine_filter('default_thumb') }}" alt="event thumb">
  199.                                 <div class="card-date">
  200.                                     <span>
  201.                                         {{ agenda.aday }}
  202.                                     </span><br>
  203.                                     {{agenda.amonth}}
  204.                                     /
  205.                                     {{agenda.ayear}}
  206.                                 </div>
  207.                             </div>
  208.                             <div
  209.                                 class="card-body">
  210.                                 <!-- location -->
  211.                                 <p>
  212.                                     <i class="ti-location-pin text-primary mr-2"></i>
  213.                                     {{agenda.localisation}}
  214.                                 </p>
  215.                                 <a href="{{ path('agenda.single', {id: agenda.id}) }}">
  216.                                     <h4 class="card-title">
  217.                                         {{ agenda.title | length > 50 ? agenda.title | slice(0, 100) ~ ' ...' : agenda.title  }}</p>
  218.                                 </h4>
  219.                             </a>
  220.                         </div>
  221.                     </div>
  222.                 </div>
  223.             {% endfor %}
  224.         </div>
  225.         <!-- mobile see all button -->
  226.         <div class="row">
  227.             <div class="col-12 text-center">
  228.                 <a href="course.html" class="btn btn-sm btn-outline-primary d-sm-none d-inline-block">sell all</a>
  229.             </div>
  230.         </div>
  231.     </div>
  232. </section>
  233. <!-- /events -->
  235. <!-- teachers -->
  236. <section class="section">
  237.     <div class="container">
  238.         <div class="row justify-content-center">
  239.             <div class="col-12">
  240.                 <h2 class="section-title">Notre équipe</h2>
  241.             </div>
  242.             <!-- teacher -->
  243.             {% for member in members %}
  244.                 <div class="col-lg-4 col-sm-6 mb-5 mb-lg-0">
  245.                     <div class="card border-0 rounded-0 hover-shadow">
  246.                         <img class="card-img-top rounded-0" src="{{ vich_uploader_asset(member, 'imageFile') | imagine_filter('thumb') }}" alt="teacher">
  247.                         <div class="card-body">
  248.                             <a href="{{ path('hame.member', {id: member.id}) }} ">
  249.                                 <h4 class="card-title">{{ member.firstname   ~  " "  ~ member.middlename}}
  250.                                 </h4>
  251.                             </a>
  252.                             <p>{{ member.mrole}}
  253.                             </p>
  254.                             <ul class="list-inline">
  255.                                 <li class="list-inline-item">
  256.                                     <a class="text-color" href=" {{ member.linkedin }} ">
  257.                                         <i class="ti-linkedin"></i>
  258.                                     </a>
  259.                                 </li>
  260.                             </ul>
  261.                             <p>&nbsp;</p>
  262.                         </div>
  263.                     </div>
  264.                 </div>
  265.             {% endfor %}
  266.         </div>
  267.     </div>
  268. </section>
  269. <!-- /teachers -->
  271. <!-- blog -->
  272. <section class="section pt-0">
  273.     <div class="container">
  274.         <div class="row">
  275.             <div class="col-12">
  276.                 <h2 class="section-title">Projets de recherche</h2>
  277.             </div>
  278.         </div>
  279.         <div
  280.             class="row justify-content-center">
  281.             <!-- blog post -->
  282.             {% for project in projects %}
  283.                 <article class="col-lg-4 col-sm-6 mb-5 mb-lg-0">
  284.                     <div class="card rounded-0 border-bottom border-primary border-top-0 border-left-0 border-right-0 hover-shadow">
  285.                         <img class="card-img-top rounded-0" src="{{ vich_uploader_asset(project, 'imageFile') | imagine_filter('default_thumb') }}" alt="Post thumb">
  286.                         <div
  287.                             class="card-body">
  288.                             <!-- post meta -->
  289.                             <ul
  290.                                 class="list-inline mb-3">
  291.                                 <!-- post date -->
  292.                                 <li class="list-inline-item mr-3 ml-0">
  293.                                     {{ project.subtitle | length > 50 ? project.subtitle | slice(0, 20) ~ ' ...' : project.subtitle  }}
  294.                                 </li>
  295.                             </p>
  296.                         </li>
  297.                         <!-- author -->
  298.                         <li class="list-inline-item mr-3 ml-0">Par
  299.                             {{project.author}}
  300.                         </li>
  301.                     </ul>
  302.                     <a href=" {{ path('project.single', {id: project.id}) }} ">
  303.                         <h4 class="card-title">
  304.                             {{project.title}}
  305.                         </h4>
  306.                     </a>
  307.                     <p class="card-text">
  308.                         {{ project.description | length > 100 ? project.description | slice(0, 200) ~ ' ...' : project.description  }}
  309.                     </p>
  310.                     <a href="{{ path('project.single', {id: project.id}) }}" class="btn btn-primary btn-sm">En savoir plus
  311.                     </a>
  312.                 </div>
  313.             </div>
  314.         </article>
  315.     {% endfor %}
  316. </div></div></section><!-- /blog -->{% endblock %}