Corporate/Professional Fashion/Beauty Galerie

<section class="py-12 bg-indigo-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
  <div class="container mx-auto px-4">
    <div class="text-center mb-12">
      <h2 class="text-4xl font-extrabold mb-4 text-indigo-800 dark:text-indigo-400">Our Latest Collection</h2>
      <p class="text-lg leading-relaxed max-w-2xl mx-auto text-gray-600 dark:text-gray-400">Explore our exquisite range of fashion and beauty essentials, curated with elegance and precision for the modern individual.</p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Gallery Item 1 -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1012/600/400" alt="Fashion Model" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Spring Elegance Dress</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">A timeless piece designed for ultimate comfort and style.</p>
          <div class="mt-3 flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$120</span>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Discover the perfect blend of modern design and classic appeal.</p>
        </div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1015/600/400" alt="Beauty Product" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Radiant Glow Serum</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Achieve glowing skin with our specially formulated serum.</p>
          <div class="mt-3 flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$45</span>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Infused with natural extracts to revitalize and nourish your complexion.</p>
        </div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1018/600/400" alt="Accesory" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Luxury Leather Bag</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Crafted from premium leather, a statement of true sophistication.</p>
          <div class="mt-3 flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$280</span>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Perfect for every occasion, combining elegance with practical design.</p>
        </div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1020/600/400" alt="Cosmetic" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Velvet Matte Lipstick</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Intensely pigmented for a rich, long-lasting matte finish.</p>
          <div class="mt-3 flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$25</span>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Experience a smooth application and vivid color that stays all day.</p>
        </div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1025/600/400" alt="Footwear" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Elegant Pointed Heels</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Sophistication meets comfort in these meticulously crafted heels.</p>
          <div class="mt-3 flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$95</span>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Step out in confidence with our latest collection of chic footwear.</p>
        </div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1033/600/400" alt="Skincare" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Hydrating Face Mask</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Rejuvenate your skin with our deeply hydrating and nourishing mask.</p>
          <div class="mt-3 flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$30</span>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Pamper your skin with a rich blend of essential vitamins and minerals.</p>
        </div>
      </div>

      <!-- Gallery Item 7 -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1041/600/400" alt="Jewelry" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Dazzling Diamond Necklace</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">A sparkling statement piece, perfect for any special occasion.</p>
          <div class="mt-3 flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$350</span>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Add a touch of brilliance to your ensemble with this exquisite design.</p>
        </div>
      </div>

      <!-- Gallery Item 8 -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1043/600/400" alt="Fragrance" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Sophisticated Eau de Parfum</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">An enchanting blend of notes, capturing timeless elegance.</p>
          <div class="mt-3 flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$85</span>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Leave a lasting impression with this luxurious and captivating scent.</p>
        </div>
      </div>

    </div>
  </div>
</section>