Art Deco Geometric Marketplace 产品卡

<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-950 min-h-screen font-sans">
  <div class="max-w-xs mx-auto md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl rounded-2xl overflow-hidden shadow-xl dark:shadow-2xl border-4 border-transparent bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 dark:from-purple-800 dark:via-pink-800 dark:to-red-800 p-1.5 transform transition-transform duration-500 hover:scale-[1.01] animate-gradient-border">
    <div class="bg-white dark:bg-gray-800 rounded-xl relative p-4 sm:p-6 lg:p-8 flex flex-col h-full">

      <!-- Seller Info & Art Deco Border -->
      <div class="absolute inset-0 border-8 border-transparent pointer-events-none rounded-xl">
        <div class="absolute top-0 left-0 w-8 h-8 lg:w-12 lg:h-12 border-t-4 border-l-4 rounded-tl-xl border-indigo-600 dark:border-indigo-400"></div>
        <div class="absolute top-0 right-0 w-8 h-8 lg:w-12 lg:h-12 border-t-4 border-r-4 rounded-tr-xl border-purple-600 dark:border-purple-400"></div>
        <div class="absolute bottom-0 left-0 w-8 h-8 lg:w-12 lg:h-12 border-b-4 border-l-4 rounded-bl-xl border-pink-600 dark:border-pink-400"></div>
        <div class="absolute bottom-0 right-0 w-8 h-8 lg:w-12 lg:h-12 border-b-4 border-r-4 rounded-br-xl border-red-600 dark:border-red-400"></div>
      </div>

      <div class="flex items-center mb-4 sm:mb-5 lg:mb-6 z-10">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-purple-400 dark:ring-purple-600 mr-3" src="https://randomuser.me/api/portraits/men/52.jpg" alt="Seller Avatar">
        <div>
          <p class="text-sm sm:text-base font-semibold text-gray-800 dark:text-gray-100">Artisan Emporium</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Verified Seller</p>
        </div>
      </div>

      <!-- Product Image -->
      <div class="w-full aspect-w-16 aspect-h-9 relative mb-4 sm:mb-5 lg:mb-6 rounded-lg overflow-hidden border-2 border-gray-200 dark:border-gray-700 shadow-sm">
        <img src="https://picsum.photos/id/111/600/400" alt="Product Image" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
        <span class="absolute top-2 right-2 bg-gradient-to-br from-indigo-500 to-purple-500 text-white text-xs px-2.5 py-1 rounded-full font-bold shadow-md">NEW</span>
      </div>

      <!-- Product Details -->
      <h3 class="text-xl sm:text-2xl font-extrabold text-gray-900 dark:text-white mb-2 sm:mb-3 leading-tight gradient-text-effect">
        Geometric Abstract Pendant
      </h3>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 line-clamp-2 mb-4 sm:mb-5 lg:mb-6">
        Handcrafted Art Deco inspired pendant with intricate geometric patterns, perfect for adding a touch of vintage elegance.
      </p>

      <div class="flex items-center justify-between mb-4 sm:mb-5 lg:mb-6">
        <div class="flex items-baseline">
          <span class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mr-2">$129.99</span>
          <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$149.99</span>
        </div>
        <div class="flex items-center text-yellow-500 dark:text-yellow-400 text-sm sm:text-base">
          <svg class="w-4 h-4 sm:w-5 sm:h-5 mr-1" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.729c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
          <span>4.8</span>
          <span class="text-gray-500 dark:text-gray-400 text-xs sm:text-sm ml-1">(128)</span>
        </div>
      </div>

      <!-- Call to Action Buttons -->
      <div class="mt-auto grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
        <button class="flex items-center justify-center px-4 py-2 sm:py-3 border-2 border-transparent rounded-lg font-bold text-base sm:text-lg transition-all duration-300 ease-in-out
                       bg-gradient-to-r from-teal-500 to-cyan-500 text-white shadow-lg 
                       hover:scale-[1.02] hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-800">
          <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3.056-6.112A1 1 0 0019 3H4.32L4 1H3zM6 16a2 2 0 11-4 0 2 2 0 014 0zM16 16a2 2 0 11-4 0 2 2 0 014 0z"></path>
          </svg>
          Add to Cart
        </button>
        <button class="flex items-center justify-center px-4 py-2 sm:py-3 border-2 rounded-lg font-bold text-base sm:text-lg transition-all duration-300 ease-in-out
                       border-fuchsia-500 text-fuchsia-600 dark:border-fuchsia-400 dark:text-fuchsia-400 
                       hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900 
                       hover:scale-[1.02] hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-fuchsia-300 dark:focus:ring-fuchsia-800">
          <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.586l1.172-1.172a4 4 0 115.656 5.656L10 17.656l-6.828-6.828a4 4 0 010-5.656z" clip-rule="evenodd"></path>
          </svg>
          Wishlist
        </button>
      </div>

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

<style>
  @keyframes gradient-border-animation {
    0% { border-color: #a78bfa; }
    25% { border-color: #f472b6; }
    50% { border-color: #ef4444; }
    75% { border-color: #f97316; }
    100% { border-color: #a78bfa; }
  }
  .animate-gradient-border {
    animation: gradient-border-animation 6s ease-in-out infinite alternate;
  }

  .gradient-text-effect {
    background-image: linear-gradient(to right, #6366f1, #a855f7, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: gradientText 3s ease infinite;
  }

  .dark .gradient-text-effect {
    background-image: linear-gradient(to right, #818cf8, #c084fc, #f472b6);
  }

  @keyframes gradientText {
    0% { background-position: 0% center; }
    50% { background-position: 100% center; }
    100% { background-position: 0% center; }
  }
</style>