templates/Default/index.html.twig line 1

  1. {% extends 'Default/base.html.twig' %}
  2. {% set menu = 'home' %}
  3. {% set home = true %}
  4. {% import "Default/macros.html.twig" as macros %}
  6. {% block banner %}
  7. <div id='homeBanner' class='relative hoverflow bg-gradient htop {{desktop("vh100 gpadding top-80-in")}} {{mobile("hz-20-in vt-20-in")}}' {% if isDesktop() %} style="height : calc(100vh - 5.625vw);min-height : calc(100vh - 5.625vw);" {%endif%}>
  8.    <div class="flex col middle center {{desktop('bottom-80')}} {{mobile('')}}">
  9.     <h1 class="text-center white {{desktop('title')}} {{mobile('')}}">{#<span class="upper black right-10">L'Asin,</span>#}Transformer le quotidien des béninois par le numérique</h1>
  10.    </div>
  11.    <div class="{{desktop('flex row center top-60 top-9-in')}} {{mobile('top-30')}}">
  12.         {% for o in services %}
  13.         {{macros.service(o, loop.index, true)}}
  14.         {%endfor%}
  15.     </div>
  16. </div>
  17. {% endblock %}
  19. {% block content %}
  20.     {#
  21.     <div id="home-job" class="bg-white {{desktop('gpadding  bottom-80-in')}} {{mobile('hz-20-in vt-40-in')}}">
  22.         <div class='{{desktop("bottom-50 bottom-80-in ")}}'>
  23.             <div class="flex row center middle {{desktop('')}} {{mobile('')}}">
  24.                 <svg class="icon"  viewBox="0 0 92 92" fill="none" xmlns="http://www.w3.org/2000/svg">
  25.                 <path d="M36.6667 13.3333L46 4M27.3333 64.6667L64.6667 27.3333M46 88L55.3333 78.6667M67 78.6667C70.0942 78.6667 73.0617 77.4375 75.2496 75.2496C77.4375 73.0617 78.6667 70.0942 78.6667 67C78.6667 63.9058 77.4375 60.9383 75.2496 58.7504C73.0617 56.5625 70.0942 55.3333 67 55.3333C63.9058 55.3333 60.9383 56.5625 58.7504 58.7504C56.5625 60.9383 55.3333 63.9058 55.3333 67C55.3333 70.0942 56.5625 73.0617 58.7504 75.2496C60.9383 77.4375 63.9058 78.6667 67 78.6667ZM25 36.6667C28.0942 36.6667 31.0617 35.4375 33.2496 33.2496C35.4375 31.0617 36.6667 28.0942 36.6667 25C36.6667 21.9058 35.4375 18.9383 33.2496 16.7504C31.0617 14.5625 28.0942 13.3333 25 13.3333C21.9058 13.3333 18.9383 14.5625 16.7504 16.7504C14.5625 18.9383 13.3333 21.9058 13.3333 25C13.3333 28.0942 14.5625 31.0617 16.7504 33.2496C18.9383 35.4375 21.9058 36.6667 25 36.6667ZM15.6667 88C18.7609 88 21.7283 86.7708 23.9162 84.5829C26.1042 82.395 27.3333 79.4275 27.3333 76.3333C27.3333 73.2391 26.1042 70.2717 23.9162 68.0838C21.7283 65.8958 18.7609 64.6667 15.6667 64.6667C12.5725 64.6667 9.60501 65.8958 7.41709 68.0838C5.22916 70.2717 4 73.2391 4 76.3333C4 79.4275 5.22916 82.395 7.41709 84.5829C9.60501 86.7708 12.5725 88 15.6667 88ZM76.3333 27.3333C79.4275 27.3333 82.395 26.1042 84.5829 23.9162C86.7708 21.7283 88 18.7609 88 15.6667C88 12.5725 86.7708 9.60501 84.5829 7.41709C82.395 5.22916 79.4275 4 76.3333 4C73.2391 4 70.2717 5.22916 68.0838 7.41709C65.8958 9.60501 64.6667 12.5725 64.6667 15.6667C64.6667 18.7609 65.8958 21.7283 68.0838 23.9162C70.2717 26.1042 73.2391 27.3333 76.3333 27.3333Z" stroke="#81B0B1" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
  26.                 </svg>
  27.                 <h2 class="flex row aquawax extrabold success {{desktop('h1')}}" style="transform: translateX(-2.39583vw);"><span class="success">Nos dernières</span><span class="warning left-20">offres d’emploi</span></h2>
  28.             </div>
  29.             <div class="{{desktop('flex row space top-80 top-4-in')}} {{mobile('top-40')}}">
  30.                 {% set jobs =  [{'structure':"drh",'openingDate':"05 MARS 2023",'status':'En cours','title' : "Avis de recrutement d’un Directeur Technique (H/F)", 'banner':"images/emp1.jpg"}] %}
  31.                 {% set jobs =  jobs|merge([{'structure':"drh",'openingDate':"05 MARS 2023",'status':'En cours','title' : "Avis de recrutement d’une Assistante de Direction", 'banner':"images/emp2.jpg"}]) %}
  32.                 {% set jobs =  jobs|merge([{'structure':"dsi",'openingDate':"05 MARS 2023",'status':'Clôturé','title' : "Avis de recrutement d’un Assistant Ressources Humaines (H/F)", 'banner':"images/emp3.jpg"}]) %}
  33.                 
  34.                 {% for o in emplois %}
  35.                 {{macros.opportunity(o, false, true)}}
  36.                 {%endfor%}
  37.             </div>
  38.             <div class="{{desktop('top-80 top-30-in')}} {{mobile('top-40')}}">
  39.                 <a href='{{url("opportunities-cat",{cat:"emploi"})}}' class="p bg-success white upper {{desktop('extrabold top-2 hz-80-in vt-30-in')}} {{mobile('bold hz-40-in vt-15-in')}}"><span class="{{desktop('hz-10-in vt-7-in')}} {{mobile('')}}">Toutes NOS offres</span></a>
  40.             </div>
  41.             <div class='{{desktop("bottom-7-in ")}}'></div>
  42.         </div>
  43.     </div>
  44.     #}
  45.     <div id="home-articles" class="{{desktop('gpadding top-80-in bottom-80-in bottom-80')}} {{mobile('hz-20-in')}}">
  46.         <div class='{{desktop("top-5 top-70-in")}}'>
  47.             <div class=" {{desktop('flex row middle space')}} {{mobile('')}}">
  48.                 <div class="flex row center middle {{desktop('')}} {{mobile('bottom-15')}}">
  49.                     <icon class="icon medium contain relative">
  50.                         <img src="{{asset('images/title-icon.png')}}" class="contain">
  51.                     </icon>
  52.                     <h2 class="flex row aquawax extrabold success {{desktop('h1')}}"><span class="success">Nos dernières</span><span class="warning left-20">actualités</span></h2>
  53.                 </div>
  54.                 <div class="{{desktop('')}} {{mobile('')}}">
  55.                     <a href="{{url('articles')}}" class="p bg-warning white upper {{desktop('extrabold top-2 hz-80-in vt-30-in')}} {{mobile('bold hz-40-in vt-15-in')}}"><span class="{{desktop('hz-10-in vt-7-in')}} {{mobile('')}}">Toutes nos actus</span></a>
  56.                 </div>
  57.             </div>
  58.             <div class="{{desktop('top-60 top-7-in')}} {{mobile('top-30')}}">
  59.                 {#{% set articles =  [{'id':1,'slug':'azerty','title' : "Le Directeur Général de l'ASIN sur The Voice Of Africa", "description":"Le Directeur Général de l'Agence des Systèmes d'Information et du Numérique (ASIN), Monsieur Marc-André AkinOlu LOKO était l'invité ce lundi 13 février 2023 de la web radio tunisienne « The Voice of Africa ».", 'banner':"images/art1.png"}] %}
  60.                 {% set articles =  articles|merge([{'id':1,'slug':'azerty','title' : 'Magazine Benin Numérique N°001 - Février 2023',"description":"Découvrez le premier numéro de BENIN NUMERIQUE le magazine d'information dédié au secteur du numérique au Bénin.", 'banner':"images/art2.jpg"}]) %}
  61.                 {% set articles =  articles|merge([{'id':1,'slug':'azerty','title' : "Dixième Conférence des DSI",'description' : "L'Agence des Systèmes d’Information et du Numérique (ASIN) à travers son pôle Systèmes d’Information et Digitalisation a organisé le mardi 29 novembre 2022, la dixième Conférence des Directeurs des Systèmes d’Information (CDSI)...", 'banner':"images/art3.jpg"}]) %}
  62.                 #}
  63.                 {% for o in articles %}
  64.                 {{macros.article(o,loop.last , true)}}
  65.                 {%endfor%}
  66.             </div>
  67.         </div>
  68.     </div>
  69.     
  70.     <div id="home-role" class=" {{desktop('')}} {{mobile('')}}">
  71.         <div class="relative">
  72.             <figure class="fill absolute left top {{desktop('')}} {{mobile('')}}">
  73.                 <img src='{{asset("images/bg-pole.jpg")}}' class="cover">
  74.                 <div class="relative fill pole-mask"></div>
  75.             </figure>
  76.             <div class="fill relative  {{desktop('gpadding top-80-in bottom-80-in')}} {{mobile('hz-20-in vt-40-in')}}">
  77.                 <div class='{{desktop("top-5 top-70-in bottom-20 ")}}'>
  78.                     <div class="flex row center middle {{desktop('')}} {{mobile('')}}">
  79.                         <icon class="icon medium contain relative">
  80.                             <img src="{{asset('images/title-icon.png')}}" class="contain">
  81.                         </icon>
  82.                         <h2 class="flex row aquawax extrabold success {{desktop('h1')}}">Nos valeurs</h2>
  83.                     </div>
  84.                     <span class="w100 flex row center vt-15-in success bold h4"><span class="half">L’Agence des Systèmes d’Information et du Numérique a pour mission la mise en œuvre opérationnelle des projets relatifs au secteur du numérique.</span></span>
  85.                     <div class="{{desktop('flex row space top-60 top-9-in')}} {{mobile('top-30')}}">
  86.                         {#{% set services =  [{'id':1,'slug':"drh",'title' : 'Orchestrateur et fédérateur de l’écosystème digital', 'banner':"images/pole1.jpg"}] %}
  87.                         {% set services =  services|merge([{'id':1,'slug':"drh",'title' : 'Accélérateur de projets pour les administrations publics', 'banner':"images/pole2.jpg"}]) %}
  88.                         {% set services =  services|merge([{'id':1,'slug':"drh",'title' : 'Moteur de la promotion et de la sensibilisation autour du Digital', 'banner':"images/pole3.jpg"}]) %}
  89.                         #}
  90.                         
  91.                         {% set roles =  [{'label' : 'Confiance', 'description':"Être un partenaire respectueux des engagements"}] %}
  92.                         {% set roles =  roles|merge([{'label' : 'Accessibilité', 'description':"Concevoir des dispositifs numériques afin que chaque utilisateur puisse comprendre, naviguer et interagir aisément."}]) %}
  93.                         {% set roles =  roles|merge([{'label' : 'Résilience', 'description':"S’adapter aux perturbations et savoir les surmonter "}]) %}
  94.                         {% set roles =  roles|merge([{'label' : 'Écoute', 'description':"    Se rendre disponible, être attentif et prendre du temps pour écouter afin d’apporter les solutions les plus performantes."}]) %}
  95.                         
  96.                         {% for o in roles %}
  97.                         <article class="bg-warning shadow-alt relative service  {{desktop('quarter-20')}} {{mobile('w100 bottom-20')}}">
  98.                             <h2 class="bg-white {{desktop('vt-7-in hz-30-in')}}">{{o.label}}</h2>
  99.                             <div class="bg-warning-alt vt-5-in"></div>
  100.                             <div class="flex col space {{desktop('hz-30-in vt-50-in')}} {{mobile('hz-30-in vt-25-in')}}">
  101.                                 <p class="success semibold h3 lh-3x {{desktop('')}} {{mobile('')}}">
  102.                                     {{o.description}}
  103.                                 </p>
  104.                             </div>
  105.                         </article>
  106.                        
  107.                         {%endfor%}
  108.                     </div>
  109.                     <div class='{{desktop("bottom-8-in ")}}'></div>
  110.                 </div>
  111.             </div>
  112.         </div>
  113.     </div>
  114.     <div id="home-project" class="bg-warning {{desktop('gpadding top-80-in bottom-80-in')}} {{mobile('hz-20-in vt-40-in')}}">
  115.         <div class='{{desktop("top-40 ")}}'>
  116.             <div class=" {{desktop('flex row middle space')}} {{mobile('')}}">
  117.                 <div class="flex row center middle {{desktop('')}} {{mobile('bottom-15')}}">
  118.                     <icon class="icon medium contain relative">
  119.                         <img src="{{asset('images/title-icon.png')}}" class="contain filter-white">
  120.                     </icon>
  121.                     <h2 class="flex row aquawax extrabold success {{desktop('h1')}}"><span class="success">Nos </span><span class="white left-20">projets</span></h2>
  122.                 </div>
  123.                 <div class="{{desktop('')}} {{mobile('')}}">
  124.                     <a href="{{url('projects')}}" class="p bg-success white upper {{desktop('extrabold top-2 hz-80-in vt-30-in')}} {{mobile('bold hz-40-in vt-15-in')}}"><span class="{{desktop('hz-10-in vt-7-in')}} {{mobile('')}}">Tous nos projets</span></a>
  125.                 </div>
  126.             </div>
  127.             <div class="{{desktop('flex row space top-80 top-4-in')}} {{mobile('top-40')}}">
  128.                 {#{% set list =  [{'id':1,'status':"En cours d'exécution",'runtime':'7 mois','cost':'20 000 000 F CFA','place':'COTONOU','name' : "Le Directeur Général de l'ASIN sur The Voice Of Africa", "description":"Le Directeur Général de l'Agence des Systèmes d'Information et du Numérique (ASIN), Monsieur Marc-André AkinOlu LOKO était l'invité ce lundi 13 février 2023 de la web radio tunisienne « The Voice of Africa ».", 'banner':"images/pro1.jpg"}] %}
  129.                 {% set list =  list|merge([{'id':1,'status':'Terminé','runtime':'2 mois','cost':'48 000 000 F CFA','place':'Ouidah','name' : 'Magazine Benin Numérique N°001 - Février 2023',"description":"Découvrez le premier numéro de BENIN NUMERIQUE le magazine d'information dédié au secteur du numérique au Bénin.", 'banner':"images/pro2.jpg"}]) %}
  130.                 {% set list =  list|merge([{'id':1,'status':'Terminé','runtime':'3 ans','cost':'4 000 000 F CFA','place':'TOUT LE TERRITOIRE NATIONAL','name' : "Dixième Conférence des DSI",'description' : "L'Agence des Systèmes d’Information et du Numérique (ASIN) à travers son pôle Systèmes d’Information et Digitalisation a organisé le mardi 29 novembre 2022, la dixième Conférence des Directeurs des Systèmes d’Information (CDSI)...", 'banner':"images/pro3.jpg"}]) %}
  131.                 #}
  132.                 <div class='w100 articles {{desktop("top-50")}}'>
  133.                     <div class='w100 {{desktop(" flex row space wrap vt-30-in")}} {{mobile("")}}'>
  134.                         {% for o in projects %}
  135.                         {{macros.project(o, loop.last)}}
  136.                         {%endfor%}
  137.                     </div>
  138.                 </div>
  139.             </div>
  140.         </div>
  141.     </div>
  143.     
  144. {% endblock content %}