Product Gallery 组件

<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto py-8">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-8 text-center">
      Featured Opportunities
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Product Card 1 -->
      <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-blur-md border border-white/20 dark:border-gray-700/50 rounded-xl shadow-lg dark:shadow-xl overflow-hidden group transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/job1/600/400" alt="Software Engineer Job">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            Senior Software Engineer
            <span class="block text-sm font-normal text-gray-600 dark:text-gray-300">Acme Corp</span>
          </h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">
            We are looking for an experienced Software Engineer to join our growing team. You will be responsible for designing and developing high-quality software solutions.
          </p>
          <div class="flex items-center justify-between text-sm mb-4">
            <span class="px-3 py-1 bg-fuchsia-500 text-white rounded-full text-xs font-semibold">Full-time</span>
            <span class="text-gray-600 dark:text-gray-400"><i class="fas fa-map-marker-alt mr-1"></i> Remote</span>
          </div>
          <a href="#" class="block w-full text-center py-2 px-4 rounded-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-medium transition duration-300 ease-in-out">
            Apply Now
          </a>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-blur-md border border-white/20 dark:border-gray-700/50 rounded-xl shadow-lg dark:shadow-xl overflow-hidden group transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/job2/600/400" alt="Marketing Manager Job">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            Digital Marketing Manager
            <span class="block text-sm font-normal text-gray-600 dark:text-gray-300">Global Solutions Inc.</span>
          </h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">
            Join our dynamic marketing team and lead our digital strategy. We need someone passionate about driving online growth and brand awareness.
          </p>
          <div class="flex items-center justify-between text-sm mb-4">
            <span class="px-3 py-1 bg-fuchsia-500 text-white rounded-full text-xs font-semibold">Hybrid</span>
            <span class="text-gray-600 dark:text-gray-400"><i class="fas fa-map-marker-alt mr-1"></i> New York, USA</span>
          </div>
          <a href="#" class="block w-full text-center py-2 px-4 rounded-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-medium transition duration-300 ease-in-out">
            Apply Now
          </a>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-blur-md border border-white/20 dark:border-gray-700/50 rounded-xl shadow-lg dark:shadow-xl overflow-hidden group transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/job3/600/400" alt="UX Designer Job">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            UX/UI Designer
            <span class="block text-sm font-normal text-gray-600 dark:text-gray-300">Creative Minds Studio</span>
          </h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">
            Shape user experiences with us! We're seeking a talented UX/UI Designer to craft intuitive and beautiful interfaces.
          </p>
          <div class="flex items-center justify-between text-sm mb-4">
            <span class="px-3 py-1 bg-fuchsia-500 text-white rounded-full text-xs font-semibold">Full-time</span>
            <span class="text-gray-600 dark:text-gray-400"><i class="fas fa-map-marker-alt mr-1"></i> London, UK</span>
          </div>
          <a href="#" class="block w-full text-center py-2 px-4 rounded-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-medium transition duration-300 ease-in-out">
            Apply Now
          </a>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-blur-md border border-white/20 dark:border-gray-700/50 rounded-xl shadow-lg dark:shadow-xl overflow-hidden group transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/job4/600/400" alt="Data Scientist Job">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            Data Scientist
            <span class="block text-sm font-normal text-gray-600 dark:text-gray-300">Data Insights Co.</span>
          </h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">
            Unlock insights from complex data sets. We are looking for a Data Scientist to build predictive models and analyze trends.
          </p>
          <div class="flex items-center justify-between text-sm mb-4">
            <span class="px-3 py-1 bg-fuchsia-500 text-white rounded-full text-xs font-semibold">Remote</span>
            <span class="text-gray-600 dark:text-gray-400"><i class="fas fa-map-marker-alt mr-1"></i> Anywhere</span>
          </div>
          <a href="#" class="block w-full text-center py-2 px-4 rounded-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-medium transition duration-300 ease-in-out">
            Apply Now
          </a>
        </div>
      </div>

      <!-- Product Card 5 -->
      <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-blur-md border border-white/20 dark:border-gray-700/50 rounded-xl shadow-lg dark:shadow-xl overflow-hidden group transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/job5/600/400" alt="Project Manager Job">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            Project Manager
            <span class="block text-sm font-normal text-gray-600 dark:text-gray-300">Innovate Solutions LLC</span>
          </h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">
            Oversee key projects from conception to completion. We need a meticulous Project Manager with excellent organizational skills.
          </p>
          <div class="flex items-center justify-between text-sm mb-4">
            <span class="px-3 py-1 bg-fuchsia-500 text-white rounded-full text-xs font-semibold">Full-time</span>
            <span class="text-gray-600 dark:text-gray-400"><i class="fas fa-map-marker-alt mr-1"></i> Berlin, DE</span>
          </div>
          <a href="#" class="block w-full text-center py-2 px-4 rounded-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-medium transition duration-300 ease-in-out">
            Apply Now
          </a>
        </div>
      </div>

      <!-- Product Card 6 -->
      <div class="relative bg-white/30 dark:bg-gray-800/30 backdrop-blur-md border border-white/20 dark:border-gray-700/50 rounded-xl shadow-lg dark:shadow-xl overflow-hidden group transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/job6/600/400" alt="Content Writer Job">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            Senior Content Writer
            <span class="block text-sm font-normal text-gray-600 dark:text-gray-300">Content Hub</span>
          </h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">
            Craft compelling stories and engage audiences. We are seeking a creative Senior Content Writer to elevate our brand messaging.
          </p>
          <div class="flex items-center justify-between text-sm mb-4">
            <span class="px-3 py-1 bg-fuchsia-500 text-white rounded-full text-xs font-semibold">Part-time</span>
            <span class="text-gray-600 dark:text-gray-400"><i class="fas fa-map-marker-alt mr-1"></i> Online</span>
          </div>
          <a href="#" class="block w-full text-center py-2 px-4 rounded-lg bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-medium transition duration-300 ease-in-out">
            Apply Now
          </a>
        </div>
      </div>
    </div>
  </div>
</div>