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

577

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

Forgot password?
you can change password an time

Author:
gidy

6 months ago

549
Image Gallery with Alpine.Js

Author:
Maxim

11 months ago

841
About Us Component

Author:
KULDEEP

5 months ago

1.2k
Responsive layout with header, main body, aside (sidebar) and footer

Author:
Ahmed Malik

2 years ago

12.2k
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

1 year ago

3.8k
portfolio
This portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.

Author:
nejaa badr

1 year ago

2.2k
barbershop

Author:
Ishimwe Shadad

4 weeks ago

99
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

8 months ago

1.3k
Updated customer details page
Customer details page

Author:
Olivia Smith

1 year ago

3.7k
Modern website that provides software services
The website is a platform that offers software services to users, including access to open-source code, downloadable projects, and relevant documentation. The main objective is to support students, developers, and the open-source community by sharing free tools and source code examples.

Author:
Rathanak Phan

6 months ago

451
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Author:
Coastal UI

9 months ago

1.3k
Boarding Pass Design
Testing out a layout and design for a digital boarding pass

Author:
Kirsten F

6 months ago

555

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components