templates/footer.html.twig line 1

  1. <footer id="contact" class="bg-slate-900 text-white relative overflow-hidden">
  2.     <!-- Vague décorative -->
  3.     <div class="absolute top-0 left-0 right-0">
  4.         <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto">
  5.             <path d="M0 120L60 105C120 90 240 60 360 45C480 30 600 30 720 37.5C840 45 960 60 1080 67.5C1200 75 1320 75 1380 75L1440 75V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0Z" fill="#0f172a"/>
  6.         </svg>
  7.     </div>
  8.     
  9.     <!-- Particules décoratives -->
  10.     <div class="absolute inset-0 overflow-hidden opacity-10">
  11.         <div class="absolute top-20 left-10 w-32 h-32 bg-indigo-400 rounded-full blur-3xl"></div>
  12.         <div class="absolute bottom-20 right-10 w-32 h-32 bg-purple-400 rounded-full blur-3xl"></div>
  13.     </div>
  14.     
  15.     <div class="container mx-auto px-4 pt-20 pb-12 relative z-10">
  16.         <div class="grid lg:grid-cols-4 gap-12">
  17.             <!-- À propos -->
  18.             <div class="space-y-4">
  19.                 <div class="flex items-center space-x-3">
  20.                     <div class="bg-white/10 p-2 rounded-xl">
  21.                         <img src="{{ asset('/image/logo.png') }}" class="h-8 w-auto" alt="DAIP">
  22.                     </div>
  23.                     <!--span class="text-xl font-bold bg-gradient-to-r from-indigo-300 to-purple-300 bg-clip-text text-transparent">
  24.                         DAIP
  25.                     </span-->
  26.                 </div>
  27.                 <p class="text-slate-400 leading-relaxed">
  28.                     Direction de l'Apprentissage et de l'Insertion Professionnelle - Former les talents de demain.
  29.                 </p>
  30.             </div>
  31.             
  32.             <!-- Liens rapides -->
  33.             <div>
  34.                 <h4 class="text-lg font-semibold mb-4 text-white/90">Liens rapides</h4>
  35.                 <ul class="space-y-3">
  36.                     <li>
  37.                         <a href="{{ path('app_home') }}" class="text-slate-400 hover:text-white transition flex items-center group">
  38.                             <i class="fas fa-chevron-right text-xs mr-2 group-hover:translate-x-1 transition"></i>
  39.                             Accueil
  40.                         </a>
  41.                     </li>
  42.                     <li>
  43.                         <a href="{{ path('app_candidature_index') }}" class="text-slate-400 hover:text-white transition flex items-center group">
  44.                             <i class="fas fa-chevron-right text-xs mr-2 group-hover:translate-x-1 transition"></i>
  45.                             Candidatures
  46.                         </a>
  47.                     </li>
  48.                     <li>
  49.                         <a href="#contact" class="text-slate-400 hover:text-white transition flex items-center group">
  50.                             <i class="fas fa-chevron-right text-xs mr-2 group-hover:translate-x-1 transition"></i>
  51.                             Contact
  52.                         </a>
  53.                     </li>
  54.                 </ul>
  55.             </div>
  56.             
  57.             <!-- Contact -->
  58.             <div>
  59.                 <h4 class="text-lg font-semibold mb-4 text-white/90">Contact</h4>
  60.                 <ul class="space-y-4">
  61.                     <li class="flex items-start space-x-3 group">
  62.                         <i class="fas fa-map-marker-alt text-indigo-400 mt-1 group-hover:scale-110 transition"></i>
  63.                         <span class="text-slate-400 group-hover:text-white transition">SEBROKO ancien ONUCI, Abidjan</span>
  64.                     </li>
  65.                     <li class="flex items-start space-x-3 group">
  66.                         <i class="fas fa-phone-alt text-indigo-400 mt-1 group-hover:scale-110 transition"></i>
  67.                         <span class="text-slate-400 group-hover:text-white transition">
  68.                             <a href="tel:+2250103888793" class="hover:text-white">+225 01-03-88-87-93</a><br>
  69.                             <a href="tel:+2250565390459" class="hover:text-white">+225 05-65-39-04-59</a>
  70.                         </span>
  71.                     </li>
  72.                     <li class="flex items-start space-x-3 group">
  73.                         <i class="fas fa-envelope text-indigo-400 mt-1 group-hover:scale-110 transition"></i>
  74.                         <span class="text-slate-400 group-hover:text-white transition">
  75.                             <a href="mailto:etfpa.daip@gmail.com" class="hover:text-white">etfpa.daip@gmail.com</a>
  76.                         </span>
  77.                     </li>
  78.                 </ul>
  79.             </div>
  80.             
  81.             <!-- Newsletter -->
  82.             <div>
  83.                 <h4 class="text-lg font-semibold mb-4 text-white/90">Reseaux sociaux</h4>
  84.                 <p class="text-slate-400 mb-4">Suivez nos dernières actualités</p>
  85.                 
  86.                 <div class="flex space-x-3">
  87.                     <a href="https://x.com/daipci?s=11" target="_blank" class="w-10 h-10 rounded-lg bg-slate-800 hover:bg-black-600 flex items-center justify-center transition transform hover:scale-110 hover:rotate-6">
  88.                         <i class="fab fa-x"></i>
  89.                     </a>
  90.                      <a href="https://www.facebook.com/daip.net" target="_blank" class="w-10 h-10 rounded-lg bg-slate-800 hover:bg-indigo-600 flex items-center justify-center transition transform hover:scale-110 hover:rotate-6">
  91.                         <i class="fab fa-facebook"></i>
  92.                     </a>
  93.                     <a href="https://www.youtube.com/channel/UCpzL2618RoQtoMTuywLz_aA" target="_blank" class="w-10 h-10 rounded-lg bg-slate-800 hover:bg-red-600 flex items-center justify-center transition transform hover:scale-110 hover:rotate-6">
  94.                         <i class="fab fa-youtube"></i>
  95.                     </a>
  96.                     <a href="https://www.tiktok.com/@daipci" target="_blank" class="w-10 h-10 rounded-lg bg-slate-800 hover:bg-pink-600 flex items-center justify-center transition transform hover:scale-110 hover:rotate-6">
  97.                         <i class="fab fa-tiktok"></i>
  98.                     </a>
  99.                 </div>
  100.             </div>
  101.         </div>
  102.         
  103.         <!-- Séparateur -->
  104.         <div class="border-t border-slate-800 my-8"></div>
  105.         
  106.         <!-- Copyright et liens légaux -->
  107.         <div class="flex flex-col md:flex-row justify-between items-center">
  108.             <p class="text-slate-400 text-sm">
  109.             </p>
  110.             <div class="flex space-x-6 mt-4 md:mt-0">
  111.                 <a href="#" class="text-sm text-slate-400 hover:text-white transition">© {{ "now"|date('Y') }} DAIP. Tous droits réservés.</a>
  112.             </div>
  113.         </div>
  114.     </div>
  115. </footer>