Homepage event

Forked from @oliver-hansen/fixed-navbar

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

Other

Author Anonymous

Tailwind v3.4 1.2k 3

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

Our features
Our features

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.9k
Terms of Service Page Template

Anonymous

1 year ago

2.9k
machine
A fully interactive, web-based macOS-style desktop environment featuring draggable and resizable windows, a dynamic Dock with magnification, smooth glass UI effects, adaptive colors, a functional photo gallery with hover menus, and integrated mini-apps like Safari, Notes, Weather, and App Store. Built using HTML, CSS, Tailwind, and JavaScript to recreate a modern OS experience directly in the browser.

Gidy Official

10 months ago

568
blog component
good blog

Uwera Dorcas

1 year ago

1.4k
Contact Us / Enquiry-form Responsive

KULDEEP

1 year ago

2.1k
Image - Figure with figcaption design

Maxim

1 year ago

1.4k
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Hamza Atig

1 year ago

1.3k
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Ahita Bisma Adlula

1 year ago

4.1k
Hero Section with Tailwind CSS With Buttons
A modern, responsive Hero Section designed with Tailwind CSS to capture attention and drive engagement. Featuring a bold heading, compelling CTA buttons, and a high-quality image, this design enhances user experience and conversions. Ideal for landing pages, portfolios, and business websites, ensuring a strong first impression and higher interaction rates.

Abdul Baset Bappy

1 year ago

1.4k
navigation header
responsive navigation header

Abid Ullah

2 years ago

3.5k
Visernic Profile

MD Mostafa Niloy

10 months ago

1.2k
To-Do List with Tailwind CSS
A simple and responsive to-do list built with HTML, JavaScript, and Tailwind CSS. Features task addition, completion, and deletion. Perfect for beginner projects or component demos.

Sudip chaudhary

1 year ago

1.8k