Home
Anonymous
Homepage event

Homepage event

Forked from> @oliver-hansen/fixed-navbar

This tailwind example is contributed by Anonymous, on 13-Jul-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Anonymous

173

Fork Fullscreen

<div class="bg-gray-50 min-h-screen">
    
    <header class="bg-white shadow">
      <div class="container mx-auto flex justify-between items-center py-4 px-6">
        <div class="flex items-center gap-2">
          <i class="bi bi-mortarboard-fill text-blue-600 text-2xl"></i>
          <span class="text-2xl font-bold text-blue-700">FormEvent</span>
        </div>
        <nav class="flex gap-6">
          <router-link to="/" class="hover:text-blue-600 font-medium">Accueil</router-link>
          <router-link to="/formations" class="hover:text-blue-600 font-medium">Formations</router-link>
          <router-link to="/evenements" class="hover:text-blue-600 font-medium">Événements</router-link>
          <router-link to="/about" class="hover:text-blue-600 font-medium">À propos</router-link>
          <router-link to="/contact" class="hover:text-blue-600 font-medium">Contact</router-link>
        </nav>
        <div>
          <router-link to="/login" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition flex items-center gap-2">
            <i class="bi bi-person-circle"></i> Connexion
          </router-link>
        </div>
      </div>
    </header>

<section class="bg-gradient-to-r from-blue-50 to-blue-100 py-16">
      <div class="container mx-auto flex flex-col md:flex-row items-center px-6">
        <div class="flex-1 mb-8 md:mb-0">
          <h1 class="text-4xl md:text-5xl font-bold mb-4 text-blue-800">
            Plateforme de <span class="text-blue-600">formation en ligne</span> & gestion d'événements
          </h1>
          <p class="mb-6 text-lg text-gray-700">
            Accédez à des centaines de cours, participez à des événements exclusifs et suivez votre progression en temps réel. Rejoignez une communauté d'apprenants et de formateurs passionnés !
          </p>
          <router-link to="/formations" class="bg-blue-600 text-white px-6 py-3 rounded font-semibold hover:bg-blue-700 transition flex items-center gap-2">
            <i class="bi bi-book"></i> Découvrir les formations
          </router-link>
        </div>
        <div class="flex-1 flex justify-center">
          <img src="https://cdn.pixabay.com/photo/2017/01/10/19/05/education-1974671_1280.png" alt="Formation en ligne" class="w-80 rounded-lg shadow-lg" />
        </div>
      </div>
    </section>

<section class="container mx-auto py-16 px-6">
      <h2 class="text-3xl font-bold text-center mb-10 text-blue-800">Pourquoi choisir FormEvent ?</h2>
      <div class="grid md:grid-cols-4 gap-8">
        <div class="bg-white p-6 rounded shadow text-center">
          <i class="bi bi-laptop text-4xl text-blue-600 mb-4"></i>
          <h3 class="font-semibold text-xl mb-2">Cours interactifs</h3>
          <p class="text-gray-600">Des modules variés, vidéos, quiz et supports téléchargeables pour un apprentissage dynamique.</p>
        </div>
        <div class="bg-white p-6 rounded shadow text-center">
          <i class="bi bi-calendar-event text-4xl text-blue-600 mb-4"></i>
          <h3 class="font-semibold text-xl mb-2">Gestion d'événements</h3>
          <p class="text-gray-600">Inscrivez-vous à des ateliers, webinaires et conférences directement depuis la plateforme.</p>
        </div>
        <div class="bg-white p-6 rounded shadow text-center">
          <i class="bi bi-bar-chart-line text-4xl text-blue-600 mb-4"></i>
          <h3 class="font-semibold text-xl mb-2">Suivi personnalisé</h3>
          <p class="text-gray-600">Visualisez vos progrès, obtenez des badges et des certificats à chaque étape franchie.</p>
        </div>
        <div class="bg-white p-6 rounded shadow text-center">
          <i class="bi bi-people text-4xl text-blue-600 mb-4"></i>
          <h3 class="font-semibold text-xl mb-2">Communauté active</h3>
          <p class="text-gray-600">Partagez, échangez et collaborez avec d'autres apprenants et formateurs.</p>
        </div>
      </div>
    </section>

<section class="bg-blue-50 py-16 px-6">
      <div class="container mx-auto">
        <h2 class="text-3xl font-bold text-blue-800 mb-8 text-center">Événements à venir</h2>
        <div class="grid md:grid-cols-3 gap-8">
          <div class="bg-white rounded shadow p-6">
            <div class="flex items-center gap-2 mb-2 text-blue-600">
              <i class="bi bi-calendar3"></i>
              <span class="font-semibold">15 septembre 2025</span>
            </div>
            <h4 class="font-bold text-lg mb-2">Webinaire : Les clés de l'apprentissage en ligne</h4>
            <p class="text-gray-600 mb-2">Découvrez les meilleures pratiques pour réussir vos formations à distance.</p>
            <router-link to="/evenements/1" class="text-blue-600 hover:underline">En savoir plus</router-link>
          </div>
          <div class="bg-white rounded shadow p-6">
            <div class="flex items-center gap-2 mb-2 text-blue-600">
              <i class="bi bi-calendar3"></i>
              <span class="font-semibold">28 septembre 2025</span>
            </div>
            <h4 class="font-bold text-lg mb-2">Atelier : Gestion du temps pour les apprenants</h4>
            <p class="text-gray-600 mb-2">Un atelier interactif pour optimiser votre organisation et booster votre efficacité.</p>
            <router-link to="/evenements/2" class="text-blue-600 hover:underline">En savoir plus</router-link>
          </div>
          <div class="bg-white rounded shadow p-6">
            <div class="flex items-center gap-2 mb-2 text-blue-600">
              <i class="bi bi-calendar3"></i>
              <span class="font-semibold">10 octobre 2025</span>
            </div>
            <h4 class="font-bold text-lg mb-2">Conférence : L'avenir de la formation digitale</h4>
            <p class="text-gray-600 mb-2">Experts et professionnels débattent des tendances et innovations du secteur.</p>
            <router-link to="/evenements/3" class="text-blue-600 hover:underline">En savoir plus</router-link>
          </div>
        </div>
      </div>
    </section>

<section class="container mx-auto py-16 px-6">
      <h2 class="text-3xl font-bold text-blue-800 mb-10 text-center">Ils nous font confiance</h2>
      <div class="grid md:grid-cols-3 gap-8">
        <div class="bg-white rounded shadow p-6">
          <div class="flex items-center gap-3 mb-4">
            <i class="bi bi-person-circle text-3xl text-blue-600"></i>
            <span class="font-semibold">Sophie L.</span>
          </div>
          <p class="text-gray-700 italic">“Grâce à FormEvent, j'ai pu suivre des formations certifiantes tout en participant à des événements enrichissants. La plateforme est intuitive et très complète.”</p>
        </div>
        <div class="bg-white rounded shadow p-6">
          <div class="flex items-center gap-3 mb-4">
            <i class="bi bi-person-circle text-3xl text-blue-600"></i>
            <span class="font-semibold">Karim M.</span>
          </div>
          <p class="text-gray-700 italic">“La gestion des événements est un vrai plus ! J’ai pu assister à des webinaires de qualité et échanger avec des experts.”</p>
        </div>
        <div class="bg-white rounded shadow p-6">
          <div class="flex items-center gap-3 mb-4">
            <i class="bi bi-person-circle text-3xl text-blue-600"></i>
            <span class="font-semibold">Julie R.</span>
          </div>
          <p class="text-gray-700 italic">“L’accompagnement personnalisé m’a permis de progresser rapidement et d’obtenir mon certificat sans stress.”</p>
        </div>
      </div>
    </section>

<section class="bg-blue-600 py-12">
      <div class="container mx-auto text-center">
        <h2 class="text-3xl font-bold text-white mb-4">Prêt à rejoindre l’aventure ?</h2>
        <p class="text-blue-100 mb-6 text-lg">Inscrivez-vous gratuitement et commencez votre parcours de formation et d’événement dès aujourd’hui.</p>
        <router-link to="/register" class="bg-white text-blue-700 font-semibold px-8 py-3 rounded shadow hover:bg-blue-50 transition">
          <i class="bi bi-arrow-right-circle"></i> S’inscrire maintenant
        </router-link>
      </div>
    </section>
<section class="container mx-auto py-16 px-6">
      <h2 class="text-3xl font-bold text-blue-800 mb-10 text-center">Fonctionnalités avancées</h2>
      <div class="grid md:grid-cols-3 gap-8">
        <div class="bg-white p-6 rounded shadow">
          <i class="bi bi-pencil-square text-4xl text-blue-600 mb-4"></i>
          <h3 class="font-semibold text-xl mb-2">Création de contenus sur-mesure</h3>
          <p class="text-gray-600">
            Créez facilement des modules interactifs, quiz, vidéos et supports variés, même sans expertise technique, grâce à notre outil auteur intégré[1][2][5].
          </p>
        </div>
        <div class="bg-white p-6 rounded shadow">
          <i class="bi bi-bar-chart text-4xl text-blue-600 mb-4"></i>
          <h3 class="font-semibold text-xl mb-2">Suivi & Analytics</h3>
          <p class="text-gray-600">
            Suivez la progression de chaque apprenant, analysez l’efficacité des formations et générez des rapports détaillés pour optimiser vos parcours[3][6].
          </p>
        </div>
        <div class="bg-white p-6 rounded shadow">
          <i class="bi bi-robot text-4xl text-blue-600 mb-4"></i>
          <h3 class="font-semibold text-xl mb-2">IA pédagogique</h3>
          <p class="text-gray-600">
            Profitez de l’intelligence artificielle pour proposer des parcours personnalisés, générer des quiz automatiques et offrir un accompagnement sur mesure[2][5].
          </p>
        </div>
      </div>
    </section>

<section class="bg-blue-50 py-16 px-6">
      <div class="container mx-auto">
        <h2 class="text-3xl font-bold text-blue-800 mb-8 text-center">Parcours d'apprentissage personnalisés</h2>
        <div class="flex flex-col md:flex-row gap-8">
          <div class="flex-1 bg-white p-6 rounded shadow">
            <h4 class="font-semibold text-lg mb-2">Progression guidée</h4>
            <p class="text-gray-600">
              Suivez des séries de modules thématiques pour atteindre vos objectifs, avec des jalons, badges et certificats à chaque étape[4].
            </p>
          </div>
          <div class="flex-1 bg-white p-6 rounded shadow">
            <h4 class="font-semibold text-lg mb-2">Adaptatif & flexible</h4>
            <p class="text-gray-600">
              Laissez la plateforme vous recommander les contenus les plus pertinents selon votre profil, vos résultats et vos préférences d’apprentissage[2][4].
            </p>
          </div>
        </div>
      </div>
    </section>

<section class="container mx-auto py-16 px-6">
      <h2 class="text-3xl font-bold text-blue-800 mb-10 text-center">Avantages pour tous</h2>
      <div class="grid md:grid-cols-2 gap-8">
        <div class="bg-white p-6 rounded shadow">
          <i class="bi bi-person-badge text-4xl text-blue-600 mb-4"></i>
          <h3 class="font-semibold text-xl mb-2">Pour les apprenants</h3>
          <ul class="list-disc pl-6 text-gray-600 space-y-1">
            <li>Accès 24/7 à tous les contenus, sur tous les appareils[3].</li>
            <li>Apprentissage à votre rythme, supports variés (vidéo, audio, quiz)[3].</li>
            <li>Forums, messagerie, et communauté pour échanger et progresser.</li>
            <li>Certificats et badges à chaque niveau atteint.</li>
          </ul>
        </div>
        <div class="bg-white p-6 rounded shadow">
          <i class="bi bi-briefcase text-4xl text-blue-600 mb-4"></i>
          <h3 class="font-semibold text-xl mb-2">Pour les formateurs & organisateurs</h3>
          <ul class="list-disc pl-6 text-gray-600 space-y-1">
            <li>Création de modules et d’événements sans compétence technique[1][2][5].</li>
            <li>Gestion des groupes, invitations, et suivi des présences.</li>
            <li>Outils d’évaluation, questionnaires de satisfaction, statistiques avancées[6][10].</li>
            <li>Personnalisation graphique et gestion multi-organisations.</li>
          </ul>
        </div>
      </div>
    </section>

<section class="bg-blue-100 py-12">
      <div class="container mx-auto flex flex-col md:flex-row items-center gap-8 px-6">
        <div class="flex-1">
          <h2 class="text-2xl font-bold text-blue-800 mb-4">Sécurité & conformité</h2>
          <ul class="list-disc pl-6 text-gray-700 space-y-1">
            <li>Données hébergées en France/Europe, conformité RGPD.</li>
            <li>Authentification sécurisée, gestion des droits d’accès.</li>
            <li>Signature électronique, émargement en ligne pour les événements[10].</li>
            <li>Sauvegardes régulières et chiffrement des données sensibles.</li>
          </ul>
        </div>
        <div class="flex-1 flex justify-center">
          <i class="bi bi-shield-lock-fill text-7xl text-blue-600"></i>
        </div>
      </div>
    </section>
    
    <footer class="bg-white mt-12 border-t">
      <div class="container mx-auto py-8 px-6 flex flex-col md:flex-row justify-between items-center text-gray-600">
        <div class="flex items-center gap-2 mb-4 md:mb-0">
          <i class="bi bi-mortarboard-fill text-blue-600 text-xl"></i>
          <span class="font-bold">FormEvent</span>
        </div>
        <div class="flex gap-6">
          <router-link to="/terms" class="hover:text-blue-600">Conditions</router-link>
          <router-link to="/privacy" class="hover:text-blue-600">Confidentialité</router-link>
          <router-link to="/about" class="hover:text-blue-600">À propos</router-link>
          <router-link to="/contact" class="hover:text-blue-600">Contact</router-link>
        </div>
        <div class="mt-4 md:mt-0">
          <span class="text-sm">&copy; 2025 FormEvent. Tous droits réservés.</span>
        </div>
      </div>
    </footer>
  </div>

Related Examples

Tailwind css banner offer
Bold neobrutalist design with thick borders, vibrant colors, and strong shadows - perfect for promotions.

Author:
saim-t8

9 hours ago

3
Invoice
Invoice

Author:
Ameth Galarcio

1 year ago

2.3k
Organization Hierarchy list

Author:
Anonymous

1 year ago

7.9k
about video
about kelaplus video

Author:
Omer fils ELENGA

1 month ago

99
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

2 months ago

233
Interactive Game Flip Card – Pure HTML & CSS Component
An elegant and interactive game info flip card built purely with HTML and CSS. This component flips smoothly on hover to reveal detailed game information on the back, providing a modern and engaging way to showcase your games without using JavaScript. Perfect for gaming websites wanting sleek animations and clean design.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

517
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

3 months ago

141
Login page

Author:
Reuben Enahoro

8 months ago

1.5k
Order History
Order History

Author:
Tanvir Hasan Bappy (Tanvir)

4 months ago

472
Payment success page example

Author:
Anonymous

3 months ago

443
htmlcss3

Author:
Anonymous

2 months ago

263
cards
cards with background animation

Author:
Anonymous

1 year ago

2.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components