Volet Galerie d’entreprise/professionnelle

<section class="py-8 sm:py-12 bg-gray-50 dark:bg-gray-900 font-sans">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-10 sm:mb-16">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white capitalize leading-tight mb-4">
        Explore Our Learning Resources
      </h2>
      <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
        Dive into our extensive collection of educational materials, designed to enhance your learning journey.
      </p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8">
      <!-- Gallery Item 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
        <div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
          <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/10/600/400" alt="Course thumbnail depicting a calm lake with mountains">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Web Development</span>
          </div>
        </div>
        <div class="p-5 sm:p-6">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
            <a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Foundations of Modern Web Design</a>
          </h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
            Master the core principles of responsive web design using HTML5, CSS3, and modern frameworks.
          </p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Instructor avatar">
              <span class="text-sm text-gray-700 dark:text-gray-200">John Doe</span>
            </div>
            <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$49.99</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
        <div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
          <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1015/600/400" alt="Course thumbnail depicting a camera and coffee">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Digital Marketing</span>
          </div>
        </div>
        <div class="p-5 sm:p-6">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
            <a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Advanced SEO Strategies for Growth</a>
          </h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
            Learn to boost your online visibility and drive organic traffic with proven SEO tactics.
          </p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Instructor avatar">
              <span class="text-sm text-gray-700 dark:text-gray-200">Jane Smith</span>
            </div>
            <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$69.99</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
        <div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
          <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1/600/400" alt="Course thumbnail depicting office supplies and a laptop">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Business & Finance</span>
          </div>
        </div>
        <div class="p-5 sm:p-6">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
            <a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Financial Modeling & Analysis</a>
          </h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
            Build robust financial models and make informed decisions with this comprehensive course.
          </p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Instructor avatar">
              <span class="text-sm text-gray-700 dark:text-gray-200">Robert Johnson</span>
            </div>
            <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$89.99</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
        <div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
          <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/20/600/400" alt="Course thumbnail depicting a network hub">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">IT & Software</span>
          </div>
        </div>
        <div class="p-5 sm:p-6">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
            <a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Cybersecurity Fundamentals</a>
          </h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
            Understand the threats and learn to protect digital systems and networks from attacks.
          </p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/55.jpg" alt="Instructor avatar">
              <span class="text-sm text-gray-700 dark:text-gray-200">Emily White</span>
            </div>
            <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$79.99</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
        <div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
          <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/29/600/400" alt="Course thumbnail depicting a book and coffee">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Personal Development</span>
          </div>
        </div>
        <div class="p-5 sm:p-6">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
            <a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Effective Communication Skills</a>
          </h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
            Enhance your interpersonal skills and learn to communicate clearly and persuasively.
          </p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Instructor avatar">
              <span class="text-sm text-gray-700 dark:text-gray-200">Michael Green</span>
            </div>
            <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$39.99</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
        <div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
          <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/30/600/400" alt="Course thumbnail depicting painting supplies">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Arts & Crafts</span>
          </div>
        </div>
        <div class="p-5 sm:p-6">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
            <a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Introduction to Digital Painting</a>
          </h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
            Unlock your creativity and learn the techniques of digital painting using popular software.
          </p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Instructor avatar">
              <span class="text-sm text-gray-700 dark:text-gray-200">Sophia Lee</span>
            </div>
            <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$59.99</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 7 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
        <div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
          <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1005/600/400" alt="Course thumbnail depicting a forest and lake">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Nature & Environment</span>
          </div>
        </div>
        <div class="p-5 sm:p-6">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
            <a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Sustainable Living Practices</a>
          </h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
            Discover eco-friendly habits and contribute to a healthier planet.
          </p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/5.jpg" alt="Instructor avatar">
              <span class="text-sm text-gray-700 dark:text-gray-200">David Clark</span>
            </div>
            <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">Free</span>
          </div>
        </div>
      </div>

      <!-- Gallery Item 8 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
        <div class="relative w-full h-48 sm:h-56 lg:h-64 overflow-hidden">
          <img class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1041/600/400" alt="Course thumbnail depicting a brain scan">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-sm font-semibold px-3 py-1 rounded-full bg-emerald-600 dark:bg-emerald-700">Science & Health</span>
          </div>
        </div>
        <div class="p-5 sm:p-6">
          <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 leading-tight">
            <a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200">Introduction to Neuroscience</a>
          </h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base line-clamp-3 mb-4">
            Explore the complexities of the human brain and nervous system in this introductory course.
          </p>
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/9.jpg" alt="Instructor avatar">
              <span class="text-sm text-gray-700 dark:text-gray-200">Olivia Brown</span>
            </div>
            <span class="text-lg font-bold text-emerald-600 dark:text-emerald-400">$74.99</span>
          </div>
        </div>
      </div>

    </div>

    <!-- Call to action / Category filter below the grid -->
    <div class="mt-10 sm:mt-16 text-center">
      <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-emerald-600 hover:bg-emerald-700 dark:focus:ring-offset-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 transition-colors duration-200">
        View All Courses
        <svg class="ml-3 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>

  </div>
</section>