templates/base.html.twig line 1

  1. {% extends "layout.html.twig" %}
  2. {% block description %}Géomaticien et développeur web indépendant à l'écoute pour  vous aider à réaliser votre projet, que ce soit de la cartographie, du webmapping ou un site internet au sens large.{% endblock %}
  3. {% block title %}Mickael Lopez - Géomaticien et développeur web indépendant{% endblock %}
  4. {% block body %}
  5.     <div id="header" class="relative w-full z-20 -mb-28">
  6.         <div id="header-logo" class="bg-white/70 backdrop-blur-sm w-full">
  7.             <img class="relative h-12 w-auto left-1/3 pt-2" src="https://tailwindui.com/img/logos/mark.svg?color=red&shade=500" alt="Mickael Lopez">
  8.         </div>
  9.         {#<p class="text-red-400 text-xl md:text-2xl leading-tight font-medium font-bold text-center mb-2"></p>#}
  10.         <nav id="navbar" class="bg-white/70 backdrop-blur-sm shadow-md z-10 w-full">
  11.             <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
  12.                 <div class="flex p-6 sm:p-2 sm:justify-end">
  13.                     <div class="flex-col absolute block inset-y-1 right-0 flex items-center sm:hidden">
  14.                         <button id="open-mobile-menu" type="button" class="inline-flex items-center justify-center rounded-md px-4 py-2 text-gray-700 z-10" aria-controls="mobile-menu" aria-expanded="false">
  15.                         <span class="sr-only">Open main menu</span>
  16.                         <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
  17.                             <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
  18.                         </svg>
  19.                         </button>
  20.                         <button id="close-mobile-menu" type="button" class="hidden inline-flex items-center justify-center rounded-md px-4 py-2 text-gray-700 z-10" aria-controls="mobile-menu" aria-expanded="false">
  21.                         <span class="sr-only">Open main menu</span>
  22.                         <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
  23.                             <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
  24.                         </svg>
  25.                         </button>
  26.                     </div>
  27.                     <div id="nav-menu" class="hidden sm:block right-0 absolute sm:relative flex animate__animated animate__faster">
  28.                         <div class="mt-6 sm:mt-0 py-6 px-10 sm:p-0 right-0 sm:right-auto h-screen sm:h-auto bg-white/70 sm:bg-inherit backdrop-blur-sm sm:backdrop-blur-none sm:ml-6 shadow-sm sm:shadow-none">
  29.                             <div class="flex flex-col sm:flex-row">
  30.                                 <a id="nav-header" href="#" class="text-gray-700 transition ease-in-out duration-300 hover:bg-red-400 hover:text-white focus:bg-red-400 focus:text-white px-3 py-2 rounded-md text-md font-medium">Accueil</a>
  31.                                 
  32.                                 <a id="nav-services" href="#" class="text-gray-700 transition ease-in-out duration-300 hover:bg-red-400 hover:text-white focus:bg-red-400 focus:text-white px-3 py-2 rounded-md text-md font-medium">Services</a>
  34.                                 <a id="nav-portfolio" href="#" class="text-gray-700 transition ease-in-out duration-300 hover:bg-red-400 hover:text-white focus:bg-red-400 focus:text-white px-3 py-2 rounded-md text-md font-medium">Portfolio</a>
  36.                                 <a id="nav-contact" href="#" class="text-gray-700 transition ease-in-out duration-300 hover:bg-red-400 hover:text-white focus:bg-red-400 focus:text-white px-3 py-2 rounded-md text-md font-medium">Contact</a>
  37.                             </div>
  38.                         </div>
  39.                     </div>
  40.                 </div>
  41.             </div>
  42.         </nav>
  43.     </div>
  44.     {#<div id="cesium-container" class="animate__animated animate__fadeIn animate__slow flex relative h-full bg-cover -mb-12 border-t-4 border-solid border-red-400">
  45.         <div id="cesium-credits" class="absolute block w-3/5 h-4 top-3 z-10">
  46.         </div>
  47.         <div id="pin-modal" class="absolute hidden inset-0 overflow-y-auto h-fit w-[200px] z-10">
  48.         <div class="relative border shadow-lg rounded-md bg-white">
  49.             <div class="mt-3 text-center">
  50.                 <p class="text-xl"></p>
  51.                 <div class="mt-2 px-7 py-3">
  52.                     <button id="zoom-pin" type="button" class="text-white lg:text-black font-medium text-xs px-6 py-2.5 rounded-md uppercase shadow-md bg-red-400 lg:bg-white lg:border-2 lg:border-red-400 hover:bg-red-400 hover:text-white transition ease-in-out duration-300">Voir</button>
  53.                 </div>
  54.             </div>
  55.         </div>
  56.     </div>#}
  57.     <div class="h-[90vh] relative flex flex-col justify-center items-center w-full overflow-hidden -mb-32">
  58.         <img src="{{asset('/build/images/map_bg.webp')}}" class="absolute object-cover opacity-60 blur-sm h-full w-[101%] max-w-none" alt="Map in the background">
  59.         <div class="wow animate__animated animate__fadeIn animate__slower relative p-2 parallax-wrap">
  60.             <h1 class="text-red-400 text-3xl lg:text-6xl leading-tight font-medium font-bold text-center mb-5 10" style="text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;">Géomaticien et développeur web indépendant</h1>
  61.             {#<h2 class="text-gray-800 text-xl lg:text-3xl leading-tight font-medium text-center">Je vous accompagne sur tous vos projets.</h2>#}
  62.         </div>
  63.     </div>
  64.     <div id="scroll-button" class="animate-bounce relative mx-auto h-16 w-16 bg-red-400 rounded-full text-gray-100 cursor-pointer border-2 border-solid border-gray-100">
  65.     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="transition ease-in-out duration-300 hover:translate-y-2">
  66.         <path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 14.69l6.97-6.97a.75.75 0 111.06 1.06l-7.5 7.5z" clip-rule="evenodd" />
  67.     </svg>
  68.     </div>
  69.     
  70.     <div id="intro" class="relative bg-red-400 p-6 2xl:p-20 skew-y-2 border-t-4 border-solid border-red-400">
  71.         <div class="mt-16 -skew-y-2">
  72.             <div class="wow animate__animated animate__fadeInUp animate__slower container mx-auto md:w-1/2 2xl:w-1/3 text-center mb-20" data-wow-duration="1s" data-wow-offset="200">
  73.                 <p class="text-white text-2xl leading-tight font-medium mb-6">Bonjour, je m'appelle Mickaël. Je navigue dans les mondes du web et de la géomatique.</p>
  74.                 <p class="text-gray-100 text-lg">Depuis ma formation en géographie puis géomatique, je me passionne pour tout ce qui est développement informatique, cartographie, et bien évidemment le mélange des deux, le webmapping.
  75.                 Adepte des technologies open-source, j'aime mettre en application ces domaines pour réaliser votre projet sur mesure.
  76.                 </p>
  77.             </div>
  78.         </div>
  79.     </div>
  81.     <div id="services" class="xl:h-[820px] w-full bg-gray-100 pt-6 mt-40 rounded-lg">
  82.         <h2 class="text-red-400 text-xl text-center font-bold">MES SERVICES</h2>
  83.         <hr class="mx-auto h-px w-[4%] bg-red-400 border-0 mt-6 xl:-mb-8">
  84.         <div class="h-full container flex items-center mx-auto">
  85.             <div class="xl:h-[600px] w-11/12 mx-auto columns-1 xl:columns-3 mt-24">
  86.                 <div class="wow animate__animated animate__fadeInLeft animate__slow h-full bg-white p-6 rounded-md shadow-md items-center text-center mb-20 xl:mb-0 transition ease-in-out duration-300 xl:hover:scale-105" data-wow-duration="1s" data-wow-offset="200">
  87.                     <img src="{{asset('/build/images/sig_icon.png')}}" class="relative bg-white w-28 h-28 object-contain rounded-full border-solid border-4 border-red-400 mx-auto -top-20" alt="Icône SIG">
  88.                     <div class="relative block -top-10 h-2/5">
  89.                         <p class="text-gray-800 text-xl leading-tight font-medium mb-2">Cartographie & SIG</p>
  90.                         <p class="text-gray-700 text-base mb-10 text-justify">Vous devez mener une étude ? Une analyse spatiale ? Je vous propose d'élaborer une carte pour argumenter votre propos, pour démontrer le résultat d'une enquête,
  91.                         ou pour visualiser tous types de données.
  92.                         </p>
  93.                     </div>
  94.                     <div class="block h-2/5">
  95.                         <p class="text-gray-800 text-md leading-tight font-medium mb-6">Compétences mises en oeuvre:</p>
  96.                         <ul class="list-none">
  97.                             <li class="text-gray-700 text-base mb-2">QGIS</li>
  98.                             <li class="text-gray-700 text-base mb-2">Sémiologie graphique</li>
  99.                         </ul>
  100.                     </div>
  101.                 </div>
  102.                 <div class="wow animate__animated animate__fadeInUp animate__slow h-full bg-white p-6 rounded-md shadow-md items-center text-center mb-20 xl:mb-0 transition ease-in-out duration-300 xl:hover:scale-105" data-wow-duration="1s" data-wow-offset="200">
  103.                     <img src="{{asset('/build/images/webmap_icon.png')}}" class="relative bg-white w-28 h-28 object-cover rounded-full border-solid border-4 border-red-400 mx-auto -top-20" alt="Icône webmapping">
  104.                     <div class="relative block -top-10 h-2/5">
  105.                         <p class="text-gray-800 text-xl leading-tight font-medium mb-2">Webmapping & Bases de données</p>
  106.                         <p class="text-gray-700 text-base mb-10 text-justify">Vous souhaitez mettre en place une solution de cartographie sur le web ? Valoriser vos données via une carte interactive ? Stocker ces données de manière efficace et structurée ?
  107.                         Abandonnez les tableurs Excel, je vous aide à stocker vos données efficacement et à mettre en place la solution qui correspond à vos besoins.
  108.                         </p>
  109.                     </div>
  110.                     <div class="block h-2/5">
  111.                         <p class="text-gray-800 text-md leading-tight font-medium mb-6">Compétences mises en oeuvre:</p>
  112.                         <ul class="list-none">
  113.                             <li class="text-gray-700 text-base mb-2">Leaflet, OpenLayers</li>
  114.                             <li class="text-gray-700 text-base mb-2">PostgreSQL et PostGIS, MySQL</li>
  115.                             <li class="text-gray-700 text-base mb-2">Administration et structuration de bases de données</li>
  116.                         </ul>
  117.                     </div>
  118.                 </div>
  119.                 <div class="wow animate__animated animate__fadeInRight animate__slow h-full bg-white p-6 rounded-md shadow-md items-center text-center mb-20 xl:mb-0 transition ease-in-out duration-300 xl:hover:scale-105" data-wow-duration="1s" data-wow-offset="200">
  120.                     <img src="{{asset('/build/images/website_icon.png')}}" class="relative bg-white w-28 h-28 object-cover rounded-full border-solid border-4 border-red-400 mx-auto -top-20" alt="Icône site internet">
  121.                     <div class="relative block -top-10 h-2/5">
  122.                         <p class="text-gray-800 text-xl leading-tight font-medium mb-2">Création de sites web personnalisés</p>
  123.                         <p class="text-gray-700 text-base mb-10 text-justify">Envie de donner vie à votre projet web ? De donner un coup de jeune à votre site internet ?
  124.                         Je vous accompagne tout au long du projet, du design au développement, pour booster votre présence en ligne.</p>
  125.                     </div>
  126.                     <div class="block h-2/5">
  127.                         <p class="text-gray-800 text-md leading-tight font-medium mb-6">Compétences mises en oeuvre:</p>
  128.                         <ul class="list-none">
  129.                             <li class="text-gray-700 text-base mb-2">HTML5/CSS3 [Tailwind CSS/Bootstrap]</li>
  130.                             <li class="text-gray-700 text-base mb-2">Responsive design</li>
  131.                             <li class="text-gray-700 text-base mb-2">JavaScript [JQuery, Vue.js]</li>
  132.                             <li class="text-gray-700 text-base mb-2">PHP [Symfony]</li>
  133.                         </ul>
  134.                     </div>
  135.                 </div>
  136.             </div>
  137.         </div>
  138.     </div>
  140.     <div id="portfolio" class="bg-gray-100 mx-auto pr-12 pl-12 pt-6 pb-6 text-center mt-20 rounded-lg">
  141.         <h2 class="text-red-400 text-xl font-bold">MES PROJETS RÉCENTS</h2>
  142.         <hr class="mx-auto h-px w-[4%] bg-red-400 border-0 mt-6 mb-12">
  143.         <div class="h-full container flex flex-col lg:flex-row items-center mx-auto">
  144.             <div id="projet-baywa" class="wow animate__animated animate__fadeInUp relative bg-white rounded-md text-center mb-6 mx-auto block md:inline-block w-64 max-w-sm lg:max-w-full rounded-md shadow-md item p-1" data-wow-duration="1s" data-wow-offset="200">
  145.                 <div class="relative">
  146.                     <figure>
  147.                         <img id="projet-baywa-img" src="{{asset('/build/images/baywa_webmap.webp')}}" class="proj-img object-cover cursor-pointer h-64 transition ease-in-out duration-300 hover:brightness-50" alt="Projet Baywa r.e.">
  148.                         {#<div id="projet2-title" class="animate__animated animate__fadeInUp animate__faster proj-title absolute w-full bg-black/70 bottom-0 p-3 hidden rounded-t-[100%]">
  149.                             <p class="text-white text-sm leading-tight font-medium p-4">Annuaire des gestionnaires de l'ORB</p>
  150.                             <button id="open-orb-modal" type="button" class="btn-modal text-white font-medium text-xs px-6 py-2.5 rounded-md uppercase shadow-md border-2 border-red-400 hover:bg-red-400 hover:shadow-lg transition ease-in-out duration-300">Voir plus</button>
  151.                         </div>#}
  152.                         <figcaption class="absolute bottom-0 mb-20 w-full text-white text-md leading-tight font-medium pointer-events-none p-2 hidden">
  153.                             Webmapping données éolien de Baywa.r.e.
  154.                         </figcaption>
  155.                     </figure>
  156.                 </div>
  157.             </div>
  158.             <div id="projet-orb" class="wow animate__animated animate__fadeInUp relative bg-white rounded-md text-center mb-6 mx-auto block md:inline-block w-64 max-w-sm lg:max-w-full rounded-md shadow-md item p-1" data-wow-duration="1s" data-wow-offset="200" data-wow-delay="200ms">
  159.                 <div class="relative">
  160.                     <figure>
  161.                         <img id="projet-orb-img" src="{{asset('/build/images/orb_annuaire.webp')}}" class="proj-img object-cover cursor-pointer h-64 transition ease-in-out duration-300 hover:brightness-50" alt="Projet ORB">
  162.                         {#<div id="projet2-title" class="animate__animated animate__fadeInUp animate__faster proj-title absolute w-full bg-black/70 bottom-0 p-3 hidden rounded-t-[100%]">
  163.                             <p class="text-white text-sm leading-tight font-medium p-4">Annuaire des gestionnaires de l'ORB</p>
  164.                             <button id="open-orb-modal" type="button" class="btn-modal text-white font-medium text-xs px-6 py-2.5 rounded-md uppercase shadow-md border-2 border-red-400 hover:bg-red-400 hover:shadow-lg transition ease-in-out duration-300">Voir plus</button>
  165.                         </div>#}
  166.                         <figcaption class="absolute bottom-0 mb-20 w-full text-white text-md leading-tight font-medium pointer-events-none p-2 hidden">
  167.                             Annuaire des gestionnaires de l'ORB
  168.                         </figcaption>
  169.                     </figure>
  170.                 </div>
  171.             </div>
  172.             <div id="projet-cen" class="wow animate__animated animate__fadeInUp relative bg-white rounded-md text-center mb-6 mx-auto block md:inline-block w-64 max-w-sm lg:max-w-full rounded-md shadow-md item p-1" data-wow-duration="1s" data-wow-offset="200" data-wow-delay="400ms">
  173.                 <div class="relative">
  174.                     <figure>
  175.                         <img id="projet-cen-img" src="{{asset('/build/images/cen_bdcontacts.webp')}}" class="proj-img object-cover cursor-pointer h-64 transition ease-in-out duration-300 hover:brightness-50" alt="Projet Cen">
  176.                         {#<div id="projet2-title" class="animate__animated animate__fadeInUp animate__faster proj-title absolute w-full bg-black/70 bottom-0 p-3 hidden rounded-t-[100%]">
  177.                             <p class="text-white text-sm leading-tight font-medium p-4">Annuaire des gestionnaires de l'ORB</p>
  178.                             <button id="open-orb-modal" type="button" class="btn-modal text-white font-medium text-xs px-6 py-2.5 rounded-md uppercase shadow-md border-2 border-red-400 hover:bg-red-400 hover:shadow-lg transition ease-in-out duration-300">Voir plus</button>
  179.                         </div>#}
  180.                         <figcaption class="absolute bottom-0 mb-20 w-full text-white text-md leading-tight font-medium pointer-events-none p-2 hidden">
  181.                             Base de données contacts du Conservatoire d'espaces naturels
  182.                         </figcaption>
  183.                     </figure>
  184.                 </div>
  185.             </div>
  186.         </div>
  187.     </div>
  189.     <div id="projet-baywa-modal" class="modal fixed hidden inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-auto z-20">
  190.         <div class="animate__animated animate__fadeInDown animate__faster relative top-10 bottom-10 mx-auto border w-4/5 2xl:w-2/3 max-h-[85%] overflow-auto shadow-lg rounded-md bg-white">
  191.             <div class="p-4 lg:p-12 text-center">
  192.                 <div class="divide-y divide-gray-700 divide-solid mb-8">
  193.                     <h2 class="text-red-400 text-lg font-bold">BayWa r.e.</h2>
  194.                     <h2 class="text-gray-700 text-md font-bold">Cartographie web d'aide à la gestion de projets éoliens et solaires</h2>
  195.                 </div>
  196.                 <div class="divide-y-2 divide-red-400 divide-solid">
  197.                     <div class="flex flex-col xl:flex-row justify-between mx-auto">
  198.                         <img src="{{asset('/build/images/laptop_baywa.webp')}}" class="object-contain lg:h-[380px] 2xl:h-[500px]" alt="Présentation projet Baywa r.e.">
  199.                         <div class="mt-6 lg:mt-0 flex flex-wrap xl:flex-col justify-around items-center gap-5">            
  200.                             <img src="{{asset('/build/images/baywa_logo.png')}}" class="object-contain w-2/5 xl:w-3/4" alt="Logo Baywa r.e.">
  201.                         </div>
  202.                     </div>          
  203.                     <div class="mt-12">
  204.                         <p class="mt-8 text-gray-700 text-base">Développement d'un portail web cartographique afin d'accompagner les chefs de projets éolien et solaire dans leurs prospections. L'objectif est de fournir une interface similaire à un SIG avec les fonctionnalités basiques de visualisation, de création et d'édition. L'outil permet aussi aux responsables d'avoir une vision globale de l'avancement des projets des deux filières.
  205.                         </p>
  206.                     </div>
  207.                 </div>
  208.                 <div class="items-center px-4 py-8">
  209.                     <button type="button" class="btn-modal-close text-gray-700 font-medium text-xs px-6 py-2.5 rounded-md uppercase shadow-md border-2 border-red-400 hover:bg-red-400 hover:shadow-lg hover:text-white transition ease-in-out duration-300">Fermer</button>
  210.                 </div>
  211.             </div>
  212.         </div>
  213.     </div>
  215.     <div id="projet-orb-modal" class="modal fixed hidden inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-auto z-20">
  216.         <div class="animate__animated animate__fadeInDown animate__faster relative top-10 bottom-10 mx-auto border w-4/5 2xl:w-2/3 max-h-[85%] overflow-auto shadow-lg rounded-md bg-white">
  217.             <div class="p-4 lg:p-12 text-center">
  218.                 <div class="divide-y divide-gray-700 divide-solid mb-8">
  219.                     <h2 class="text-red-400 text-lg font-bold">Observatoire Régional de la Biodiversité Centre Val-de-Loire</h2>
  220.                     <h2 class="text-gray-700 text-md font-bold">Annuaire des gestionnaires et cartographie des espaces protégés</h2>
  221.                 </div>
  222.                 <div class="divide-y-2 divide-red-400 divide-solid">
  223.                     <div class="flex flex-col xl:flex-row justify-between mx-auto">
  224.                         <img src="{{asset('/build/images/laptop_orb.webp')}}" class="object-contain lg:h-[380px] 2xl:h-[500px]" alt="Présentation projet ORB">
  225.                         <div class="mt-6 lg:mt-0 flex flex-wrap xl:flex-col justify-around items-center gap-5">            
  226.                             <img src="{{asset('/build/images/arb_logo.svg')}}" class="object-contain invert w-2/5 xl:w-3/4" alt="Logo ARB">
  227.                             <img src="{{asset('/build/images/cen_logo.png')}}" class="object-contain w-2/5 xl:w-3/4" alt="Logo Cen">
  228.                             <a href="https://anu-orb.cen-centrevaldeloire.org/app.php/orb.annuaire" class="text-gray-700 transition ease-in-out duration-300 border-2 border-red-400 hover:bg-red-400 hover:text-white focus:bg-red-400 focus:text-white px-3 py-2 rounded-md text-md font-medium w-2/3 xl:w-3/4">Consulter l'annuaire de l'ORB</a>
  229.                         </div>
  230.                     </div>          
  231.                     <div class="mt-12">
  232.                         <p class="mt-8 text-gray-700 text-base">Afin de recenser et d'entretenir les liens des différents acteurs qui participent à la gestion des milieux naturels protégés, le pôle gestion des milieux naturels de l'observatoire régional de la biodiversité Centre-val de Loire
  233.                         a voulu mettre en place un annuaire, comprenant d'une part les informations et les coordonnées de chacun des gestionnaires, et d'autre part la liste des différents sites protégés avec toutes les informations nécessaires
  234.                         (libellé, type, nom du gestionnaire du site, etc) ainsi qu'une interface cartographique pour représenter ces sites.
  235.                         </p>
  236.                     </div>
  237.                 </div>
  238.                 <div class="items-center px-4 py-8">
  239.                     <button type="button" class="btn-modal-close text-gray-700 font-medium text-xs px-6 py-2.5 rounded-md uppercase shadow-md border-2 border-red-400 hover:bg-red-400 hover:shadow-lg hover:text-white transition ease-in-out duration-300">Fermer</button>
  240.                 </div>
  241.             </div>
  242.         </div>
  243.     </div>
  245.     <div id="projet-cen-modal" class="modal fixed hidden inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-auto z-20">
  246.         <div class="animate__animated animate__fadeInDown animate__faster relative top-10 bottom-10 mx-auto border w-4/5 2xl:w-2/3 max-h-[85%] overflow-auto shadow-lg rounded-md bg-white">
  247.             <div class="p-4 lg:p-12 text-center">
  248.                 <div class="divide-y divide-gray-700 divide-solid mb-8">
  249.                     <h2 class="text-red-400 text-lg font-bold">Conservatoire d'espaces naturels Centre Val-de-Loire</h2>
  250.                     <h2 class="text-gray-700 text-md font-bold">Base de données des contacts</h2>
  251.                 </div>
  252.                 <div class="divide-y-2 divide-red-400 divide-solid">
  253.                     <div class="flex flex-col xl:flex-row justify-between mx-auto">
  254.                         <img src="{{asset('/build/images/laptop_bdcontacts.webp')}}" class="object-contain lg:h-[380px] 2xl:h-[500px]" alt="Présentation projet Cen">
  255.                         <div class="mt-6 lg:mt-0 flex flex-wrap xl:flex-col justify-around items-center gap-5">            
  256.                             <img src="{{asset('/build/images/cen_logo.png')}}" class="object-contain w-2/5 xl:w-3/4" alt="Logo Cen">
  257.                         </div>
  258.                     </div>          
  259.                     <div class="mt-12">
  260.                         <p class="mt-8 text-gray-700 text-base">Mise en place d'une base de données de gestion des contacts du Conservatoire. L'objectif est de réduire le temps passé à gérer et échanger sur les différents contacts en permettant de centraliser les informations sous forme d'un annuaire.
  261.                         </p>
  262.                     </div>
  263.                 </div>
  264.                 <div class="items-center px-4 py-8">
  265.                     <button type="button" class="btn-modal-close text-gray-700 font-medium text-xs px-6 py-2.5 rounded-md uppercase shadow-md border-2 border-red-400 hover:bg-red-400 hover:shadow-lg hover:text-white transition ease-in-out duration-300">Fermer</button>
  266.                 </div>
  267.             </div>
  268.         </div>
  269.     </div>
  271.     <div class="bg-red-400 p-6 skew-y-2 border-t-4 border-solid border-red-400 mt-24">
  272.         <div class="-skew-y-2">
  273.             <div class="wow animate__animated animate__fadeIn animate__slower container mx-auto text-center pt-12 pb-12" data-wow-duration="1s" data-wow-offset="200">
  274.                 <h2 class="text-gray-100 text-xl font-bold text-center">Nous avons travaillé ensemble</h2>
  275.                 <hr class="mx-auto h-px w-[4%] bg-gray-100 border-0 mt-6 mb-12">
  276.                 <div class="w-auto lg:w-3/4 grid grid-cols-1 md:grid-cols-3 gap-1 mx-auto">
  277.                     <div class="w-3/4 xl:w-1/2 mx-auto bg-white p-1 rounded-md shadow-md transition ease-in-out duration-300 hover:scale-110">
  278.                         <img src="{{asset('/build/images/cen_logo.png')}}" class="h-10 mx-auto" alt="Logo Cen">
  279.                     </div>
  280.                     <div class="w-3/4 xl:w-1/2 mx-auto bg-white p-1 rounded-md shadow-md transition ease-in-out duration-300 hover:scale-110">
  281.                         <img src="{{asset('/build/images/baywa_logo.png')}}" class="h-10 mx-auto" alt="Logo baywa r.e.">
  282.                     </div>
  283.                     <div class="w-3/4 xl:w-1/2 mx-auto bg-white p-1 rounded-md shadow-md transition ease-in-out duration-300 hover:scale-110">
  284.                         <img src="{{asset('/build/images/wkn_logo.svg')}}" class="h-10 mx-auto" alt="Logo WKN">
  285.                     </div>
  286.                 </div>
  287.             </div>
  288.         </div>
  289.     </div>
  291.     <div id="contact" class="bg-gray-100 mx-auto pt-6 pb-24 mt-24 rounded-lg">
  292.         <h2 class="text-red-400 text-center text-xl font-bold mb-4">CONTACT</h2>
  293.         <hr class="mx-auto h-px w-[4%] bg-red-400 border-0 mt-6 mb-12">
  294.         <p class="text-gray-800 text-center text-lg font-bold mb-4">Vous souhaitez discuter de votre projet ?</p>
  295.         <div class="block mx-auto w-2/3 lg:w-1/4 p-6 rounded-md bg-white shadow-md">
  296.             {{ form_start(form_contact, {'attr': {'class': 'form-horizontal', 'id': 'form_contact'}}) }}
  297.                 <div class="relative mb-6">
  298.                     {{ form_label(form_contact.nom, "Votre nom", {'label_attr': {'class': 'text-gray-700 text-base'}}) }}
  299.                     {{ form_widget(form_contact.nom, {'attr': {'class': 'block w-full rounded bg-transparent px-3 py-2 outline-none border-2 border-gray-300 focus:border-red-400 transition-all duration-300 ease-linear'}}) }}
  300.                 </div>
  301.                 <div class="relative mb-6">
  302.                     {{ form_label(form_contact.email, "Votre adresse email", {'label_attr': {'class': 'text-gray-700 text-base'}}) }}
  303.                     {{ form_widget(form_contact.email, {'attr': {'class': 'block w-full rounded bg-transparent px-3 py-2 outline-none border-2 border-gray-300 focus:border-red-400 transition-all duration-300 ease-linear'}}) }}
  304.                 </div>
  305.                 <div class="relative mb-6">
  306.                     {{ form_label(form_contact.objet, "Objet", {'label_attr': {'class': 'text-gray-700 text-base'}}) }}
  307.                     {{ form_widget(form_contact.objet, {'attr': {'class': 'block w-full rounded bg-transparent px-3 py-2 outline-none border-2 border-gray-300 focus:border-red-400 transition-all duration-300 ease-linear'}}) }}
  308.                 </div>
  309.                 <div class="relative mb-6">
  310.                     {{ form_label(form_contact.message, "Votre message", {'label_attr': {'class': 'text-gray-700 text-base'}}) }}
  311.                     {{ form_widget(form_contact.message, {'attr': {'class': 'block w-full rounded bg-transparent px-3 py-2 outline-none border-2 border-gray-300 focus:border-red-400 transition-all duration-300 ease-linear'}}) }}
  312.                 </div>
  313.                 {{ form_widget(form_contact.valider, {'attr': {'class': 'block mx-auto text-gray-700 font-medium text-xs px-6 py-2.5 rounded-md uppercase shadow-md border-2 border-red-400 hover:bg-red-400 hover:shadow-lg hover:text-white transition ease-in-out duration-300'}}) }}
  314.             {{ form_end(form_contact) }}
  315.         </div>
  316.     </div>
  317. {% endblock %}