.elementor-4500 .elementor-element.elementor-element-d000c03{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.5;--margin-top:-19px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:-9px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4500 .elementor-element.elementor-element-d000c03::before, .elementor-4500 .elementor-element.elementor-element-d000c03 > .elementor-background-video-container::before, .elementor-4500 .elementor-element.elementor-element-d000c03 > .e-con-inner > .elementor-background-video-container::before, .elementor-4500 .elementor-element.elementor-element-d000c03 > .elementor-background-slideshow::before, .elementor-4500 .elementor-element.elementor-element-d000c03 > .e-con-inner > .elementor-background-slideshow::before, .elementor-4500 .elementor-element.elementor-element-d000c03 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-4500 .elementor-element.elementor-element-342d987{--display:flex;--margin-top:-31px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:-13px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-4500 .elementor-element.elementor-element-803f80c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;bottom:0.006px;}body:not(.rtl) .elementor-4500 .elementor-element.elementor-element-803f80c{right:18.806px;}body.rtl .elementor-4500 .elementor-element.elementor-element-803f80c{left:18.806px;}.elementor-4500 .elementor-element.elementor-element-803f80c img{width:89%;}.elementor-4500 .elementor-element.elementor-element-b5ed326{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4500 .elementor-element.elementor-element-39b1b12{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-4500 .elementor-element.elementor-element-18c46b4{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}@media(max-width:767px){.elementor-4500 .elementor-element.elementor-element-d000c03{--margin-top:17px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for html, class: .elementor-element-39b1b12 */```App.tsx
import React from 'react'
import { AkadefLanding } from './components/AkadefLanding'
export function App() {
  return <AkadefLanding />
}

```
```components/AkadefLanding.tsx
import React from 'react'
import {
  Code,
  LineChart,
  Megaphone,
  Palette,
  Users,
  Wallet,
  MessageCircle,
  ArrowRight,
  CheckCircle2,
  Menu,
} from 'lucide-react'
import { FormationCard } from './FormationCard'
export function AkadefLanding() {
  return (
    <div
      id="akadef-wrapper"
      className="bg-slate-50 selection:bg-blue-100 selection:text-blue-900"
    >
      {/* Hero Section - Responsive fixes */}
      <section className="relative min-h-screen flex items-center pt-20 sm:pt-24 md:pt-32 pb-12 sm:pb-16 px-4 sm:px-6 overflow-hidden bg-white">
        {/* Abstract Background Elements - Adjusted for mobile */}
        <div className="absolute top-[-10%] right-[-10%] w-[300px] sm:w-[400px] lg:w-[500px] h-[300px] sm:h-[400px] lg:h-[500px] bg-blue-50 rounded-full blur-[80px] sm:blur-[100px] lg:blur-[120px] opacity-60"></div>
        <div className="absolute bottom-[-10%] left-[-10%] w-[250px] sm:w-[350px] lg:w-[400px] h-[250px] sm:h-[350px] lg:h-[400px] bg-orange-50 rounded-full blur-[70px] sm:blur-[90px] lg:blur-[100px] opacity-40"></div>

        <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-8 sm:gap-12 lg:gap-16 items-center relative z-10 w-full">
          <div className="animate-fade-up">
            <div className="inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full bg-blue-50 border border-blue-100 text-blue-700 text-[10px] sm:text-xs font-bold mb-6 sm:mb-8">
              <span className="relative flex h-2 w-2">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
                <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-600"></span>
              </span>
              Leader de la Formation en RDC
            </div>

            <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-extrabold text-slate-900 leading-[1.1] mb-6 sm:mb-8">
              L'Expertise <br />
              <span className="text-blue-700">au service</span> de votre
              Carrière
            </h1>

            <p className="text-base sm:text-lg md:text-xl text-slate-600 mb-8 sm:mb-10 leading-relaxed max-w-xl">
              AKADEF transforme votre potentiel en excellence opérationnelle.
              Des parcours certifiants pour dominer le marché du travail
              congolais et international.
            </p>

            <div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
              <a
                href="#formations"
                className="akadef-btn bg-blue-800 text-white px-8 sm:px-10 py-3.5 sm:py-4 rounded-2xl font-bold flex items-center justify-center gap-3 text-base sm:text-lg shadow-lg shadow-blue-200 min-h-[44px]"
              >
                Explorer les cursus{' '}
                <i className="fas fa-arrow-right text-sm"></i>
              </a>
              <a
                href="#mission"
                className="px-8 sm:px-10 py-3.5 sm:py-4 rounded-2xl font-bold text-slate-700 border-2 border-slate-200 hover:border-slate-300 hover:bg-slate-50 transition-all text-base sm:text-lg text-center min-h-[44px]"
              >
                Notre vision
              </a>
            </div>

            <div className="mt-10 sm:mt-12 flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-6">
              <div className="flex -space-x-3">
                <img
                  className="w-10 h-10 sm:w-12 sm:h-12 rounded-full border-4 border-white shadow-sm"
                  src="https://i.pravatar.cc/100?u=1"
                  alt="Alumni"
                />
                <img
                  className="w-10 h-10 sm:w-12 sm:h-12 rounded-full border-4 border-white shadow-sm"
                  src="https://i.pravatar.cc/100?u=2"
                  alt="Alumni"
                />
                <img
                  className="w-10 h-10 sm:w-12 sm:h-12 rounded-full border-4 border-white shadow-sm"
                  src="https://i.pravatar.cc/100?u=3"
                  alt="Alumni"
                />
                <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-full border-4 border-white bg-blue-600 flex items-center justify-center text-white text-[10px] font-bold">
                  +1k
                </div>
              </div>
              <div>
                <div className="text-slate-900 font-bold text-sm sm:text-base">
                  +1,200 Certifiés
                </div>
                <div className="text-slate-500 text-xs sm:text-sm">
                  Insertion immédiate garantie
                </div>
              </div>
            </div>
          </div>

          {/* Hero Image - Show on tablet and up */}
          <div
            className="relative animate-fade-up hidden md:block"
            style={{
              animationDelay: '0.1s',
            }}
          >
            <div className="relative rounded-[2rem] lg:rounded-[3rem] overflow-hidden shadow-2xl rotate-2 hover:rotate-0 transition-transform duration-700">
              <img
                src="https://images.unsplash.com/photo-1531482615713-2afd69097998?auto=format&fit=crop&q=80&w=1200"
                alt="Formation AKADEF - Étudiants africains en formation"
                className="w-full h-[400px] lg:h-[600px] object-cover scale-110"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-blue-900/40 to-transparent"></div>
            </div>

            {/* Float Card - Hidden on smaller tablets */}
            <div
              className="absolute -bottom-8 -left-8 glass-card p-6 lg:p-8 rounded-3xl animate-bounce hidden lg:block"
              style={{
                animationDuration: '4s',
              }}
            >
              <div className="flex items-center gap-4">
                <div className="w-10 h-10 lg:w-12 lg:h-12 bg-orange-500 rounded-2xl flex items-center justify-center text-white text-lg lg:text-xl shadow-lg shadow-orange-200">
                  <i className="fas fa-award"></i>
                </div>
                <div>
                  <div className="text-slate-900 font-black text-lg lg:text-xl">
                    Certification
                  </div>
                  <div className="text-slate-500 text-xs lg:text-sm uppercase font-bold tracking-widest">
                    Reconnue
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Formations Section - Complete with all cards */}
      <section id="formations" className="py-16 sm:py-20 lg:py-24 px-4 sm:px-6">
        <div className="max-w-7xl mx-auto">
          {/* Header */}
          <div className="flex flex-col items-center text-center mb-12 sm:mb-16 lg:mb-20">
            <span className="px-3 sm:px-4 py-1.5 rounded-full bg-blue-100 text-blue-700 text-[10px] sm:text-xs font-bold uppercase tracking-widest mb-4">
              Programmes Certifiants
            </span>
            <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black text-slate-900 mb-4 sm:mb-6">
              Pôles d'<span className="text-blue-700">Excellence</span>
            </h2>
            <p className="text-slate-500 text-base sm:text-lg max-w-2xl leading-relaxed px-4">
              Découvrez nos cursus intensifs conçus pour transformer votre
              profil et répondre aux exigences réelles des entreprises en RDC.
            </p>
            <div className="mt-6 sm:mt-8 flex gap-2">
              <div className="w-12 h-1.5 bg-blue-700 rounded-full"></div>
              <div className="w-4 h-1.5 bg-orange-400 rounded-full"></div>
              <div className="w-4 h-1.5 bg-slate-200 rounded-full"></div>
            </div>
          </div>

          {/* Formation Cards Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
            {/* Card 1: Ressources Humaines */}
            <div className="formation-card group bg-white rounded-[2.5rem] overflow-hidden border border-slate-100 shadow-sm hover:shadow-2xl hover:shadow-blue-500/10 flex flex-col transition-all duration-500">
              <div className="img-container relative h-64 overflow-hidden">
                <img
                  src="https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&q=80&w=800"
                  alt="Ressources Humaines"
                  className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-slate-900/60 to-transparent"></div>
                <div className="absolute top-4 left-4 flex gap-2">
                  <span className="bg-white/90 backdrop-blur px-3 py-1 rounded-lg text-[10px] font-bold uppercase text-blue-900 shadow-sm">
                    Management
                  </span>
                </div>
                <div className="absolute bottom-4 left-6 text-white">
                  <div className="flex items-center gap-2 text-xs font-medium">
                    <i className="far fa-clock"></i> 2 Semaines
                    <span className="mx-1">•</span>
                    <i className="far fa-user"></i> Tous niveaux
                  </div>
                </div>
              </div>
              <div className="p-6 sm:p-8 flex-grow flex flex-col">
                <h3 className="text-xl sm:text-2xl font-bold text-slate-900 mb-3 group-hover:text-blue-700 transition-colors">
                  Ressources Humaines
                </h3>
                <p className="text-slate-500 text-sm leading-relaxed mb-6">
                  Maîtrisez l'ingénierie de la formation, la paie et le droit du
                  travail congolais pour devenir un RH stratégique.
                </p>
                <ul className="space-y-3 mb-8">
                  <li className="flex items-center gap-3 text-xs font-semibold text-slate-600">
                    <i className="fas fa-check-circle text-blue-500"></i>{' '}
                    Gestion des talents
                  </li>
                  <li className="flex items-center gap-3 text-xs font-semibold text-slate-600">
                    <i className="fas fa-check-circle text-blue-500"></i> Droit
                    social OHADA/RDC
                  </li>
                </ul>
                <div className="mt-auto">
                  <a
                    href="#"
                    className="btn-shimmer block w-full py-4 rounded-2xl text-white text-center font-bold text-sm shadow-lg shadow-blue-900/20"
                    style={{
                      background: '#1d4ed8',
                    }}
                  >
                    Découvrir le programme
                  </a>
                </div>
              </div>
            </div>

            {/* Card 2: Logistique Humanitaire */}
            <div className="formation-card group bg-white rounded-[2.5rem] overflow-hidden border border-slate-100 shadow-sm hover:shadow-2xl hover:shadow-orange-500/10 flex flex-col transition-all duration-500">
              <div className="img-container relative h-64 overflow-hidden">
                <img
                  src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&q=80&w=800"
                  alt="Logistique"
                  className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-orange-900/60 to-transparent"></div>
                <div className="absolute top-4 left-4 flex gap-2">
                  <span className="bg-orange-500 px-3 py-1 rounded-lg text-[10px] font-bold uppercase text-white shadow-sm">
                    Opérations
                  </span>
                </div>
                <div className="absolute bottom-4 left-6 text-white">
                  <div className="flex items-center gap-2 text-xs font-medium">
                    <i className="far fa-clock"></i> 2.5 mois
                    <span className="mx-1">•</span>
                    <i className="far fa-user"></i> Intermédiaire
                  </div>
                </div>
              </div>
              <div className="p-6 sm:p-8 flex-grow flex flex-col">
                <h3 className="text-xl sm:text-2xl font-bold text-slate-900 mb-3 group-hover:text-orange-600 transition-colors">
                  Logistique Humanitaire
                </h3>
                <p className="text-slate-500 text-sm leading-relaxed mb-6">
                  Expertise en Supply Chain et procédures d'achats spécifiques
                  aux ONG internationales (UNICEF, USAID).
                </p>
                <ul className="space-y-3 mb-8">
                  <li className="flex items-center gap-3 text-xs font-semibold text-slate-600">
                    <i className="fas fa-check-circle text-orange-500"></i>{' '}
                    Gestion des stocks
                  </li>
                  <li className="flex items-center gap-3 text-xs font-semibold text-slate-600">
                    <i className="fas fa-check-circle text-orange-500"></i>{' '}
                    Flotte et Distribution
                  </li>
                </ul>
                <div className="mt-auto">
                  <a
                    href="#"
                    className="block w-full py-4 rounded-2xl bg-orange-600 hover:bg-orange-700 text-white text-center font-bold text-sm transition-all shadow-lg shadow-orange-600/20"
                  >
                    S'inscrire maintenant
                  </a>
                </div>
              </div>
            </div>

            {/* Card 3: Excel & BI (Featured) */}
            <div className="formation-card group bg-slate-900 rounded-[2.5rem] overflow-hidden border border-slate-800 shadow-2xl flex flex-col relative transition-all duration-500">
              <div className="absolute top-4 right-4 z-20">
                <span className="bg-yellow-400 text-slate-900 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-tighter shadow-xl">
                  Plus Populaire
                </span>
              </div>
              <div className="img-container relative h-64 overflow-hidden bg-slate-800">
                <img
                  src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800"
                  alt="Analyse de données"
                  className="w-full h-full object-cover opacity-90 brightness-110 transition-transform duration-700 group-hover:scale-110"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-slate-900/80 via-transparent to-transparent"></div>
                <div className="absolute top-4 left-4 flex gap-2">
                  <span className="bg-blue-600 px-3 py-1 rounded-lg text-[10px] font-bold uppercase text-white shadow-lg">
                    Data & BI
                  </span>
                </div>
              </div>
              <div className="p-6 sm:p-8 flex-grow flex flex-col">
                <h3 className="text-xl sm:text-2xl font-bold text-white mb-3">
                  Excel Expert & Power BI
                </h3>
                <p className="text-slate-400 text-sm leading-relaxed mb-6">
                  Apprenez à automatiser vos rapports avec Power Query et à
                  créer des tableaux de bord interactifs.
                </p>
                <div className="bg-white/5 rounded-2xl p-4 mb-8">
                  <div className="grid grid-cols-2 gap-4">
                    <div className="text-center">
                      <div className="text-blue-400 font-bold text-lg">
                        100%
                      </div>
                      <div className="text-[9px] uppercase text-slate-500 font-bold">
                        Pratique
                      </div>
                    </div>
                    <div className="text-center border-l border-white/10">
                      <div className="text-blue-400 font-bold text-lg">VBA</div>
                      <div className="text-[9px] uppercase text-slate-500 font-bold">
                        Inclus
                      </div>
                    </div>
                  </div>
                </div>
                <div className="mt-auto">
                  <a
                    href="#"
                    className="block w-full py-4 rounded-2xl bg-white text-slate-900 text-center font-bold text-sm hover:bg-blue-400 hover:text-white transition-all shadow-lg"
                  >
                    Devenir un Expert
                  </a>
                </div>
              </div>
            </div>

            {/* Card 4: Comptabilité OHADA */}
            <div className="formation-card group bg-white rounded-[2.5rem] overflow-hidden border border-slate-100 shadow-sm hover:shadow-2xl hover:shadow-emerald-500/10 flex flex-col transition-all duration-500">
              <div className="img-container relative h-64 overflow-hidden">
                <img
                  src="https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&q=80&w=800"
                  alt="Comptabilité"
                  className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-emerald-900/60 to-transparent"></div>
                <div className="absolute top-4 left-4 flex gap-2">
                  <span className="bg-emerald-500 px-3 py-1 rounded-lg text-[10px] font-bold uppercase text-white shadow-sm">
                    Finance
                  </span>
                </div>
                <div className="absolute bottom-4 left-6 text-white">
                  <div className="flex items-center gap-2 text-xs font-medium">
                    <i className="far fa-clock"></i> 4 mois
                    <span className="mx-1">•</span>
                    <i className="far fa-user"></i> Professionnel
                  </div>
                </div>
              </div>
              <div className="p-6 sm:p-8 flex-grow flex flex-col">
                <h3 className="text-xl sm:text-2xl font-bold text-slate-900 mb-3 group-hover:text-emerald-600 transition-colors">
                  Comptabilité OHADA
                </h3>
                <p className="text-slate-500 text-sm leading-relaxed mb-6">
                  Pratique approfondie du SYSCOHADA révisé, montage des états
                  financiers et fiscalité congolaise.
                </p>
                <ul className="space-y-3 mb-8">
                  <li className="flex items-center gap-3 text-xs font-semibold text-slate-600">
                    <i className="fas fa-check-circle text-emerald-500"></i>{' '}
                    Logiciel Sage Saari
                  </li>
                  <li className="flex items-center gap-3 text-xs font-semibold text-slate-600">
                    <i className="fas fa-check-circle text-emerald-500"></i>{' '}
                    Déclaration fiscale (DGI)
                  </li>
                </ul>
                <div className="mt-auto">
                  <a
                    href="#"
                    className="block w-full py-4 rounded-2xl bg-emerald-600 hover:bg-emerald-700 text-white text-center font-bold text-sm transition-all shadow-lg shadow-emerald-600/20"
                  >
                    Voir le programme
                  </a>
                </div>
              </div>
            </div>

            {/* Card 5: Marketing Digital */}
            <div className="formation-card group bg-white rounded-[2.5rem] overflow-hidden border border-slate-100 shadow-sm hover:shadow-2xl hover:shadow-purple-500/10 flex flex-col transition-all duration-500">
              <div className="img-container relative h-64 overflow-hidden">
                <img
                  src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800"
                  alt="Marketing Digital"
                  className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-purple-900/60 to-transparent"></div>
                <div className="absolute top-4 left-4 flex gap-2">
                  <span className="bg-purple-600 px-3 py-1 rounded-lg text-[10px] font-bold uppercase text-white shadow-sm">
                    Digital
                  </span>
                </div>
                <div className="absolute bottom-4 left-6 text-white">
                  <div className="flex items-center gap-2 text-xs font-medium">
                    <i className="far fa-clock"></i> 1 Semaine
                    <span className="mx-1">•</span>
                    <i className="far fa-user"></i> Créatif
                  </div>
                </div>
              </div>
              <div className="p-6 sm:p-8 flex-grow flex flex-col">
                <h3 className="text-xl sm:text-2xl font-bold text-slate-900 mb-3 group-hover:text-purple-600 transition-colors">
                  Stratégie Digitale
                </h3>
                <p className="text-slate-500 text-sm leading-relaxed mb-6">
                  Boostez la visibilité des entreprises grâce aux réseaux
                  sociaux, au SEO et à la publicité en ligne.
                </p>
                <ul className="space-y-3 mb-8">
                  <li className="flex items-center gap-3 text-xs font-semibold text-slate-600">
                    <i className="fas fa-check-circle text-purple-500"></i>{' '}
                    Facebook & LinkedIn Ads
                  </li>
                  <li className="flex items-center gap-3 text-xs font-semibold text-slate-600">
                    <i className="fas fa-check-circle text-purple-500"></i>{' '}
                    Content Marketing
                  </li>
                </ul>
                <div className="mt-auto">
                  <a
                    href="#"
                    className="block w-full py-4 rounded-2xl bg-purple-600 hover:bg-purple-700 text-white text-center font-bold text-sm transition-all shadow-lg shadow-purple-600/20"
                  >
                    Voir le programme
                  </a>
                </div>
              </div>
            </div>

            {/* Card 6: Gestion de Projet */}
            <div className="formation-card group bg-white rounded-[2.5rem] overflow-hidden border border-slate-100 shadow-sm hover:shadow-2xl hover:shadow-red-500/10 flex flex-col transition-all duration-500">
              <div className="img-container relative h-64 overflow-hidden">
                <img
                  src="https://images.unsplash.com/photo-1531403009284-440f080d1e12?auto=format&fit=crop&q=80&w=800"
                  alt="Gestion de Projet"
                  className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-red-900/60 to-transparent"></div>
                <div className="absolute top-4 left-4 flex gap-2">
                  <span className="bg-red-600 px-3 py-1 rounded-lg text-[10px] font-bold uppercase text-white shadow-sm">
                    Leadership
                  </span>
                </div>
                <div className="absolute bottom-4 left-6 text-white">
                  <div className="flex items-center gap-2 text-xs font-medium">
                    <i className="far fa-clock"></i> 3 mois
                    <span className="mx-1">•</span>
                    <i className="far fa-user"></i> Managers
                  </div>
                </div>
              </div>
              <div className="p-6 sm:p-8 flex-grow flex flex-col">
                <h3 className="text-xl sm:text-2xl font-bold text-slate-900 mb-3 group-hover:text-red-600 transition-colors">
                  Gestion de Projet
                </h3>
                <p className="text-slate-500 text-sm leading-relaxed mb-6">
                  Maîtrisez les méthodologies Agiles et classiques pour piloter
                  des projets complexes avec succès.
                </p>
                <ul className="space-y-3 mb-8">
                  <li className="flex items-center gap-3 text-xs font-semibold text-slate-600">
                    <i className="fas fa-check-circle text-red-500"></i> MS
                    Project & Jira
                  </li>
                  <li className="flex items-center gap-3 text-xs font-semibold text-slate-600">
                    <i className="fas fa-check-circle text-red-500"></i>{' '}
                    Management d'équipe
                  </li>
                </ul>
                <div className="mt-auto">
                  <a
                    href="#"
                    className="block w-full py-4 rounded-2xl bg-red-600 hover:bg-red-700 text-white text-center font-bold text-sm transition-all shadow-lg shadow-red-600/20"
                  >
                    En savoir plus
                  </a>
                </div>
              </div>
            </div>
          </div>

          {/* Bottom Link */}
          <div className="mt-12 sm:mt-16 text-center px-4">
            <p className="text-slate-500 text-xs sm:text-sm font-medium">
              Vous ne trouvez pas votre bonheur ?
              <a
                href="#"
                className="text-blue-700 font-bold hover:underline ml-1"
              >
                Consultez le catalogue complet (12+ formations)
              </a>
            </p>
          </div>
        </div>
      </section>

      {/* Mission Section - Responsive fixes */}
      <section
        id="mission"
        className="py-16 sm:py-24 lg:py-32 px-4 sm:px-6 bg-white overflow-hidden relative"
      >
        <div className="max-w-7xl mx-auto flex flex-col lg:flex-row items-center gap-12 sm:gap-16 lg:gap-20">
          <div className="lg:w-1/2 relative">
            <div className="absolute -top-20 -left-20 w-48 h-48 sm:w-64 sm:h-64 bg-blue-50 rounded-full blur-3xl opacity-50"></div>
            <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black text-slate-900 leading-tight mb-6 sm:mb-8">
              Notre engagement pour la{' '}
              <span className="text-blue-700">RDC</span>.
            </h2>
            <p className="text-slate-600 text-base sm:text-lg leading-relaxed mb-8 sm:mb-10">
              Plus qu'un centre de formation, AKADEF est un moteur de
              développement. Nous formons une nouvelle génération de cadres
              congolais capables de répondre aux défis des multinationales.
            </p>
            <div className="grid grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
              <div className="p-6 sm:p-8 bg-slate-50 rounded-[2rem] border border-slate-100 transition-transform hover:-translate-y-1">
                <div className="text-3xl sm:text-4xl font-black text-blue-800 mb-2">
                  95%
                </div>
                <div className="text-slate-500 text-[10px] sm:text-xs font-bold uppercase tracking-widest">
                  Insertion Pro
                </div>
              </div>
              <div className="p-6 sm:p-8 bg-slate-50 rounded-[2rem] border border-slate-100 transition-transform hover:-translate-y-1">
                <div className="text-3xl sm:text-4xl font-black text-orange-600 mb-2">
                  15+
                </div>
                <div className="text-slate-500 text-[10px] sm:text-xs font-bold uppercase tracking-widest">
                  Formateurs Experts
                </div>
              </div>
            </div>
          </div>

          <div className="lg:w-1/2 grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 w-full">
            <div className="space-y-4 sm:space-y-6">
              <div className="bg-blue-50 p-6 sm:p-8 rounded-[2rem] sm:rounded-[2.5rem] hover:bg-blue-100 transition-colors">
                <div className="w-12 h-12 sm:w-14 sm:h-14 bg-blue-600 rounded-2xl flex items-center justify-center text-white text-xl sm:text-2xl mb-4 sm:mb-6 shadow-lg shadow-blue-200">
                  <i className="fas fa-microchip"></i>
                </div>
                <h4 className="text-lg sm:text-xl font-bold text-slate-900 mb-3 sm:mb-4">
                  Innovation
                </h4>
                <p className="text-slate-600 text-sm leading-relaxed">
                  Outils digitaux de pointe et méthodes d'apprentissage
                  modernes.
                </p>
              </div>
              <div className="bg-slate-900 p-6 sm:p-8 rounded-[2rem] sm:rounded-[2.5rem] text-white hover:bg-slate-800 transition-colors">
                <div className="w-12 h-12 sm:w-14 sm:h-14 bg-white/10 rounded-2xl flex items-center justify-center text-white text-xl sm:text-2xl mb-4 sm:mb-6 backdrop-blur">
                  <i className="fas fa-users-gear"></i>
                </div>
                <h4 className="text-lg sm:text-xl font-bold mb-3 sm:mb-4">
                  Pratique
                </h4>
                <p className="text-slate-400 text-sm leading-relaxed">
                  Apprentissage basé sur des cas réels d'entreprises locales.
                </p>
              </div>
            </div>
            <div className="space-y-4 sm:space-y-6 sm:mt-12">
              <div className="bg-orange-50 p-6 sm:p-8 rounded-[2rem] sm:rounded-[2.5rem] hover:bg-orange-100 transition-colors">
                <div className="w-12 h-12 sm:w-14 sm:h-14 bg-orange-600 rounded-2xl flex items-center justify-center text-white text-xl sm:text-2xl mb-4 sm:mb-6 shadow-lg shadow-orange-200">
                  <i className="fas fa-shield-halved"></i>
                </div>
                <h4 className="text-lg sm:text-xl font-bold text-slate-900 mb-3 sm:mb-4">
                  Éthique
                </h4>
                <p className="text-slate-600 text-sm leading-relaxed">
                  Des valeurs fortes d'intégrité et de rigueur professionnelle.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section - Responsive fixes */}
      <section className="relative py-16 sm:py-20 lg:py-24 px-4 sm:px-6 overflow-hidden">
        <div className="max-w-7xl mx-auto">
          <div className="relative rounded-[2rem] sm:rounded-[2.5rem] md:rounded-[3rem] lg:rounded-[4rem] overflow-hidden shadow-2xl group">
            <div className="absolute inset-0 z-0">
              <img
                src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&q=80&w=2071"
                alt="Background"
                className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
              />
              <div className="absolute inset-0 bg-gradient-to-br from-blue-900/95 via-blue-800/80 to-indigo-900/40"></div>
            </div>

            <div className="relative z-10 px-6 sm:px-8 py-12 sm:py-16 md:py-20 lg:py-24 text-center">
              <div className="max-w-4xl mx-auto">
                <div className="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md border border-white/20 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full mb-6 sm:mb-8">
                  <span className="relative flex h-2 w-2">
                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75"></span>
                    <span className="relative inline-flex rounded-full h-2 w-2 bg-orange-500"></span>
                  </span>
                  <span className="text-white text-[10px] sm:text-xs font-bold uppercase tracking-wider">
                    Dernières places · Janvier 2025
                  </span>
                </div>

                <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-white mb-6 sm:mb-8 leading-[1.1] tracking-tight px-4">
                  Transformez votre ambition en{' '}
                  <br className="hidden sm:block" />
                  <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-amber-300">
                    réussite concrète
                  </span>
                  .
                </h2>

                <p className="text-blue-100 text-base sm:text-lg md:text-xl mb-10 sm:mb-12 opacity-90 max-w-2xl mx-auto leading-relaxed px-4">
                  Rejoignez notre prochaine cohorte et obtenez les compétences
                  certifiées qui propulseront votre carrière dès demain.
                </p>

                <div className="flex flex-col sm:flex-row gap-4 sm:gap-5 justify-center items-center px-4">
                  <a
                    href="#"
                    className="group/btn w-full sm:w-auto relative inline-flex items-center justify-center px-8 sm:px-10 py-3.5 sm:py-4 font-bold text-blue-900 transition-all duration-300 bg-white rounded-full hover:bg-orange-400 hover:text-white hover:scale-105 active:scale-95 shadow-xl shadow-white/10 min-h-[44px]"
                  >
                    <span>S'inscrire maintenant</span>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      className="w-5 h-5 ml-2 transition-transform duration-300 group-hover/btn:translate-x-1"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth="2"
                        d="M13 7l5 5m0 0l-5 5m5-5H6"
                      />
                    </svg>
                  </a>
                  <a
                    href="https://wa.me/+243811062338"
                    className="w-full sm:w-auto inline-flex items-center justify-center px-8 sm:px-10 py-3.5 sm:py-4 font-bold text-white transition-all duration-300 bg-[#25D366] rounded-full hover:bg-[#128C7E] hover:scale-105 active:scale-95 shadow-xl shadow-green-500/20 min-h-[44px]"
                  >
                    <i className="fab fa-whatsapp text-xl sm:text-2xl mr-3"></i>
                    WhatsApp
                  </a>
                </div>
              </div>
            </div>

            <div className="absolute -top-24 -right-24 w-48 h-48 sm:w-64 sm:h-64 bg-white/5 rounded-full blur-3xl"></div>
            <div className="absolute -bottom-24 -left-24 w-48 h-48 sm:w-64 sm:h-64 bg-orange-500/10 rounded-full blur-3xl"></div>
          </div>
        </div>
      </section>
    </div>
  )
}

```
```components/FormationCard.tsx
import React from 'react'
import { ArrowRight } from 'lucide-react'
interface FormationCardProps {
  title: string
  duration: string
  icon: React.ReactNode
  compact?: boolean
  className?: string
  style?: React.CSSProperties
}
export function FormationCard({
  title,
  duration,
  icon,
  compact = false,
  className = '',
  style,
}: FormationCardProps) {
  return (
    <div
      className={`group relative overflow-hidden rounded-xl bg-white border border-slate-100 shadow-sm hover:shadow-md transition-all duration-300 ${className}`}
      style={style}
    >
      <div
        className={`flex ${compact ? 'items-center p-3 gap-3' : 'flex-col p-6 gap-4'}`}
      >
        <div
          className={`flex items-center justify-center rounded-lg bg-slate-50 text-slate-900 ${compact ? 'w-10 h-10' : 'w-12 h-12 mb-2'}`}
        >
          {icon}
        </div>

        <div className="flex-1 min-w-0">
          <h3
            className={`font-semibold text-slate-900 truncate ${compact ? 'text-sm' : 'text-lg'}`}
          >
            {title}
          </h3>
          <p className={`text-slate-500 ${compact ? 'text-xs' : 'text-sm'}`}>
            {duration}
          </p>
        </div>

        {!compact && (
          <div className="mt-2 flex items-center text-sm font-medium text-blue-600 opacity-0 group-hover:opacity-100 transition-opacity transform translate-x-[-10px] group-hover:translate-x-0 duration-300">
            Learn more <ArrowRight className="ml-1 w-4 h-4" />
          </div>
        )}
      </div>

      {/* Decorative gradient line */}
      <div className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-indigo-600 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left" />
    </div>
  )
}

```
```index.css
/* URL IMPORTS (SUCH AS FONT IMPORTS) SHOULD BE KEPT ABOVE TAILWIND IMPORTS - DO NOT DELETE THIS COMMENT */

/* Font Awesome Icons */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* Google Fonts - Outfit & Space Grotesk */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Space+Grotesk:wght@400;700&display=swap');

/* PLEASE NOTE: THESE TAILWIND IMPORTS SHOULD NEVER BE DELETED - DO NOT DELETE THIS COMMENT */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
/* DO NOT DELETE THESE TAILWIND IMPORTS, OTHERWISE THE STYLING WILL NOT RENDER AT ALL - DO NOT DELETE THIS COMMENT */

/* Custom Styles for AKADEF */
:root {
  --ak-blue: #0f172a;
  --ak-accent: #f97316;
  --ak-primary: #1e40af;
}

#akadef-wrapper {
  font-family: 'Outfit', sans-serif;
  scroll-behavior: smooth;
  color: #334155;
}

#akadef-wrapper h1,
#akadef-wrapper h2,
#akadef-wrapper h3 {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.02em;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: fadeInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Custom Buttons */
.akadef-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.akadef-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.15);
  transition: width 0.3s ease;
  z-index: -1;
}

.akadef-btn:hover::before {
  width: 100%;
}

.akadef-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(30, 64, 175, 0.3);
}

.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.05);
}

/* Formation Cards */
.formation-card {
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.formation-card:hover {
  transform: translateY(-12px);
}

.img-container img {
  transition: transform 0.7s ease;
}

.formation-card:hover .img-container img {
  transform: scale(1.1);
}

.btn-shimmer {
  background: linear-gradient(90deg, #0f172a 0%, #1e40af 50%, #0f172a 100%);
  background-size: 200% auto;
  transition: 0.5s;
}

.btn-shimmer:hover {
  background-position: right center;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
```
```index.tsx
import './index.css'
import React from "react";
import { render } from "react-dom";
import { App } from "./App";

render(<App />, document.getElementById("root"));

```
```tailwind.config.js
export default {}
```/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-18c46b4 *//* --- CONFIGURATION DES POLICES --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap');

:root {
    --akadef-blue: #1e3a8a;
    --akadef-orange: #f97316;
    --akadef-dark: #0f172a;
}

/* --- ANIMATIONS DE RÉVÉLATION --- */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- BOUTONS PREMIUM --- */
.akadef-btn-primary {
    background-color: var(--akadef-orange) !important;
    color: white !important;
    padding: 18px 40px !important;
    border-radius: 16px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.3) !important;
}

.akadef-btn-primary:hover {
    transform: translateY(-3px) !important;
    background-color: #ea580c !important;
    box-shadow: 0 20px 25px -5px rgba(249, 115, 22, 0.4) !important;
}

/* --- CARTES GLASSMORPHISM --- */
.akadef-glass-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 30px;
    transition: all 0.4s ease;
}

.akadef-glass-card:hover {
    border-color: var(--akadef-orange);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
}/* End custom CSS */