Cerca componenti

Categorie

Componenti Galleria prodotti

Galleria prodotti

Raccolta di immagini dei prodotti

Componente della galleria dei prodotti

Un componente complesso della galleria di prodotti ispirato alla carta/stampa con colori complementari, progettato per il consumo di contenuti come un blog, caratterizzato da dettagli ricchi, reattività e supporto per la modalità scura.

Aperto Anteprima

                <div class="font-sans antialiased bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-8 md:p-12">

  <!-- Component Wrapper -->
  <div class="max-w-7xl mx-auto py-8 lg:py-16">

    <!-- Header Section -->
    <div class="text-center mb-12">
      <h2 class="text-4xl sm:text-5xl font-extrabold text-blue-800 dark:text-orange-300 tracking-tight leading-tight mb-4 filter drop-shadow animate-fade-in-down">
        Featured Collection
      </h2>
      <p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto leading-relaxed animate-fade-in-up">
        Discover our handcrafted selections, inspired by timeless artistry and sustainable practices.
      </p>
    </div>

    <!-- Gallery Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">

      <!-- Product Card 1 -->
      <article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-slide-in-left">
        <div class="relative pb-[75%] overflow-hidden">
          <img src="https://picsum.photos/id/1018/600/400" alt="Vintage Typewriter" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
          <span class="absolute top-3 left-3 bg-red-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">New Arrival</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Whispering Keys" Typewriter</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">A beautifully restored vintage typewriter, perfect for the wordsmith in your life. Each click tells a story.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$450.00</span>
            <div class="flex items-center">
              <span class="text-yellow-500 mr-1">&starf;</span>
              <span class="text-gray-600 dark:text-gray-400 text-sm">4.8 (120 reviews)</span>
            </div>
          </div>
          <a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
            View Details
          </a>
        </div>
      </article>

      <!-- Product Card 2 -->
      <article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-slide-in-right">
        <div class="relative pb-[75%] overflow-hidden">
          <img src="https://picsum.photos/id/1025/600/400" alt="Leather-bound Journal" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
          <span class="absolute top-3 left-3 bg-green-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">Eco-Friendly</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Explorer's" Leather Journal</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">Hand-stitched leather journal with acid-free paper, perfect for thoughts, sketches, and adventures.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$85.00</span>
            <div class="flex items-center">
              <span class="text-yellow-500 mr-1">&starf;</span>
              <span class="text-gray-600 dark:text-gray-400 text-sm">4.9 (230 reviews)</span>
            </div>
          </div>
          <a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
            View Details
          </a>
        </div>
      </article>

      <!-- Product Card 3 -->
      <article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-fade-in-up">
        <div class="relative pb-[75%] overflow-hidden">
          <img src="https://picsum.photos/id/1033/600/400" alt="Artisan Ceramic Mug" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
          <span class="absolute top-3 left-3 bg-purple-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">Limited Edition</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Morning Dew" Ceramic Mug</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">Artisan-crafted ceramic mug, unique glaze, perfect for your morning brew or a cozy evening tea.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$45.00</span>
            <div class="flex items-center">
              <span class="text-yellow-500 mr-1">&starf;</span>
              <span class="text-gray-600 dark:text-gray-400 text-sm">4.7 (88 reviews)</span>
            </div>
          </div>
          <a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
            View Details
          </a>
        </div>
      </article>

      <!-- Product Card 4 -->
      <article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-fade-in-down">
        <div class="relative pb-[75%] overflow-hidden">
          <img src="https://picsum.photos/id/1040/600/400" alt="Vintage Fountain Pen" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
          <span class="absolute top-3 left-3 bg-blue-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">Bestseller</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Inkwell" Fountain Pen</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">Elegantly crafted fountain pen, a joy to write with, perfect for calligraphy enthusiasts and professionals.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$120.00</span>
            <div class="flex items-center">
              <span class="text-yellow-500 mr-1">&starf;</span>
              <span class="text-gray-600 dark:text-gray-400 text-sm">4.9 (310 reviews)</span>
            </div>
          </div>
          <a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
            View Details
          </a>
        </div>
      </article>

      <!-- Product Card 5 -->
      <article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-slide-in-left">
        <div class="relative pb-[75%] overflow-hidden">
          <img src="https://picsum.photos/id/1044/600/400" alt="Wooden Desk Organizer" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
          <span class="absolute top-3 left-3 bg-yellow-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">Handmade</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Artisan" Desk Organizer</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">Solid oak desk organizer to declutter your workspace with natural elegance.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$95.00</span>
            <div class="flex items-center">
              <span class="text-yellow-500 mr-1">&starf;</span>
              <span class="text-gray-600 dark:text-gray-400 text-sm">4.6 (95 reviews)</span>
            </div>
          </div>
          <a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
            View Details
          </a>
        </div>
      </article>

      <!-- Product Card 6 -->
      <article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-slide-in-right">
        <div class="relative pb-[75%] overflow-hidden">
          <img src="https://picsum.photos/id/1054/600/400" alt="Vintage Camera" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
          <span class="absolute top-3 left-3 bg-teal-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">Collector's Item</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Timeless Lens" Vintage Camera</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">A classic film camera, meticulously restored, ready to capture new memories with old charm.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$720.00</span>
            <div class="flex items-center">
              <span class="text-yellow-500 mr-1">&starf;</span>
              <span class="text-gray-600 dark:text-gray-400 text-sm">4.9 (75 reviews)</span>
            </div>
          </div>
          <a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
            View Details
          </a>
        </div>
      </article>

    </div>

    <!-- Pagination/Load More (Optional) -->
    <div class="mt-12 text-center">
      <button class="px-8 py-4 bg-blue-600 hover:bg-blue-700 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-bold rounded-full shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-orange-800">
        Load More Products
      </button>
    </div>

    <!-- Testimonial/Quote Section (to enhance blog/content feel) -->
    <div class="mt-20 border-t border-gray-300 dark:border-gray-700 pt-16">
      <figure class="max-w-3xl mx-auto bg-blue-50 dark:bg-gray-800 p-8 rounded-lg shadow-inner-xl shadow-gray-200/50 dark:shadow-black/20 text-center relative overflow-hidden">
        <blockquote class="text-xl md:text-2xl italic text-gray-800 dark:text-gray-200 leading-relaxed mb-6 relative z-10">
          "Every item tells a story, a testament to craftsmanship and passion. Our home feels more authentic with these timeless pieces."
        </blockquote>
        <figcaption class="flex items-center justify-center space-x-4 relative z-10">
          <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Customer Avatar" class="w-16 h-16 rounded-full border-4 border-orange-400 dark:border-blue-400 shadow-md">
          <div>
            <cite class="block text-lg font-semibold text-orange-700 dark:text-blue-300 not-italic">Eleanor Vance</cite>
            <span class="block text-gray-600 dark:text-gray-400 text-sm">Satisfied Customer</span>
          </div>
        </figcaption>
        <span class="absolute -bottom-10 -right-10 text-9xl font-serif text-blue-100 dark:text-gray-700 opacity-50 select-none">“</span>
        <span class="absolute -top-10 -left-10 text-9xl font-serif text-blue-100 dark:text-gray-700 opacity-50 select-none">”</span>
      </figure>
    </div>

  </div>

</div>

<!-- Just for demonstration purposes - Custom Styles for animations and pseudo-elements -->
<style>
  @keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes fadeInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }

  .animate-fade-in-down { animation: fadeInDown 0.8s ease-out forwards; }
  .animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; }
  .animate-slide-in-left { animation: fadeInLeft 0.8s ease-out forwards; }
  .animate-slide-in-right { animation: fadeInRight 0.8s ease-out forwards; }

  /* Stagger animations for better effect */
  .grid article:nth-child(1) { animation-delay: 0.1s; }
  .grid article:nth-child(2) { animation-delay: 0.2s; }
  .grid article:nth-child(3) { animation-delay: 0.3s; }
  .grid article:nth-child(4) { animation-delay: 0.4s; }
  .grid article:nth-child(5) { animation-delay: 0.5s; }
  .grid article:nth-child(6) { animation-delay: 0.6s; }

  /* Dark mode specific for testing purposes if not applying to whole page */
  /* Use 'dark' class on parent element (e.g., html or body) for actual dark mode activation */
  /* .dark .bg-gray-100 { background-color: rgb(17 24 39); } */
  /* .dark .text-gray-900 { color: rgb(229 231 235); } */
  .dark .bg-gray-850 { background-color: #2a2a2a; /* Slightly lighter than gray-900 for paper texture */ }

  /* Pseudo-elements for paper texture (optional, mostly visual flair) */
  .bg-white::before,
  .bg-white::after,
  .dark\:bg-gray-850::before,
  .dark\:bg-gray-850::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0; /* Behind content but above background */
  }
  
  .bg-white::before {
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M0 0h3v3H0V0zm3 3h3v3H3V3z'/%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.1;
  }

  .dark\:bg-gray-850::after {
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M0 0h3v3H0V0zm3 3h3v3H3V3z'/%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.1;
  }

  /* Shadow for paper-like elements */
  .shadow-inner-xl {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05), inset 0 4px 6px 0 rgba(0, 0, 0, 0.03);
  }
   .dark\:shadow-inner-xl {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3), inset 0 4px 6px 0 rgba(0, 0, 0, 0.2);
  }

</style>

LussoMonocromaticoProdottoGalleria

Un componente semplice ed elegante per la galleria dei prodotti con una combinazione di colori monocromatici, progettato per piattaforme musicali/audio. Offre piena reattività e supporto per la modalità oscura.

Aperto Anteprima

                <div class="bg-gray-100 py-12 dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl text-center mb-12 font-serif">
      Our Exquisite Collection
    </h2>
    <div class="grid grid-cols-1 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
      <!-- Product Card 1 -->
      <a href="#" class="group block dark:bg-gray-800 bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
          <img src="https://picsum.photos/id/1047/500/500" alt="Luxury Headphones" class="w-full h-full object-center object-cover group-hover:opacity-75 transition-opacity duration-300">
        </div>
        <div class="p-4">
          <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100 font-serif">Elegance Pro Headphones</h3>
          <p class="mt-1 text-sm text-gray-700 dark:text-gray-300">Immersive sound, unparalleled comfort.</p>
          <p class="mt-3 text-lg font-bold text-gray-900 dark:text-white">$499.00</p>
        </div>
      </a>

      <!-- Product Card 2 -->
      <a href="#" class="group block dark:bg-gray-800 bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
          <img src="https://picsum.photos/id/160/500/500" alt="Studio Microphone" class="w-full h-full object-center object-cover group-hover:opacity-75 transition-opacity duration-300">
        </div>
        <div class="p-4">
          <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100 font-serif">Vocalist Studio Mic</h3>
          <p class="mt-1 text-sm text-gray-700 dark:text-gray-300">Capture clarity with precision.</p>
          <p class="mt-3 text-lg font-bold text-gray-900 dark:text-white">$349.00</p>
        </div>
      </a>

      <!-- Product Card 3 -->
      <a href="#" class="group block dark:bg-gray-800 bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
          <img src="https://picsum.photos/id/161/500/500" alt="Portable Speaker" class="w-full h-full object-center object-cover group-hover:opacity-75 transition-opacity duration-300">
        </div>
        <div class="p-4">
          <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100 font-serif">AuraFlow Portable Speaker</h3>
          <p class="mt-1 text-sm text-gray-700 dark:text-gray-300">Sound that moves with you.</p>
          <p class="mt-3 text-lg font-bold text-gray-900 dark:text-white">$189.00</p>
        </div>
      </a>

      <!-- Product Card 4 -->
      <a href="#" class="group block dark:bg-gray-800 bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
          <img src="https://picsum.photos/id/1054/500/500" alt="Vinyl Turntable" class="w-full h-full object-center object-cover group-hover:opacity-75 transition-opacity duration-300">
        </div>
        <div class="p-4">
          <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100 font-serif">Harmonix Vinyl Player</h3>
          <p class="mt-1 text-sm text-gray-700 dark:text-gray-300">Rediscover the warmth of sound.</p>
          <p class="mt-3 text-lg font-bold text-gray-900 dark:text-white">$799.00</p>
        </div>
      </a>
    </div>
  </div>
</div>

Componente della galleria dei prodotti

Un componente reattivo della galleria di prodotti progettato per piattaforme musicali e audio, caratterizzato da un'interfaccia utente scura con una tavolozza di colori foresta/verde e supporto completo della modalità scura.

Aperto Anteprima

                <div class="min-h-screen bg-gray-950 text-gray-100 p-4 sm:p-8 dark:bg-gray-950 dark:text-gray-100">
  <div class="max-w-7xl mx-auto py-8">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-emerald-400 mb-4 tracking-tight">Featured Albums</h2>
    <p class="text-lg sm:text-xl text-gray-400 mb-12">Explore our curated collection of new releases and timeless classics.</p>

    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

      <!-- Product Card 1 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1043/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">The Serene Symphony</h3>
          <p class="text-sm text-gray-400 mb-3">Artist Name</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$12.99</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Ambient</span>
            <span>2023</span>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1044/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Echoes of the Forest</h3>
          <p class="text-sm text-gray-400 mb-3">The Green Leaves</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$14.50</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Folk</span>
            <span>2022</span>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1005/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Deep Woods Beats</h3>
          <p class="text-sm text-gray-400 mb-3">DJ Mossy</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$11.75</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Electronic</span>
            <span>2023</span>
          </div>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1020/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Nature's Melody</h3>
          <p class="text-sm text-gray-400 mb-3">Calm Rivers</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$9.99</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Classical</span>
            <span>2021</span>
          </div>
        </div>
      </div>

      <!-- Product Card 5 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1040/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Undergrowth Rhythms</h3>
          <p class="text-sm text-gray-400 mb-3">The Root Band</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$13.25</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Indie</span>
            <span>2023</span>
          </div>
        </div>
      </div>

      <!-- Product Card 6 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1018/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Mystic Pond Sounds</h3>
          <p class="text-sm text-gray-400 mb-3">Aqua Echoes</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$10.50</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Chillwave</span>
            <span>2022</span>
          </div>
        </div>
      </div>

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

Componente della galleria dei prodotti

Un componente reattivo della galleria di prodotti con un'interfaccia utente scura, combinazione di colori seppia/marrone, adatto per siti Web aziendali/aziendali. Include più schede prodotto con immagini, titoli, descrizioni e prezzi e supporta la modalità scura.

Aperto Anteprima

                <section class="py-12 bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 font-sans">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12">
      <h2 class="text-4xl font-extrabold text-stone-800 dark:text-stone-200 sm:text-5xl lg:text-6xl leading-tight">
        Our Premium Collection
      </h2>
      <p class="mt-4 text-xl text-stone-600 dark:text-stone-400 max-w-2xl mx-auto">
        Discover exquisitely crafted products designed with passion and precision.
      </p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">

      <!-- Product Card 1 -->
      <div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
        <div class="relative pb-[75%] overflow-hidden">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1018/600/400" alt="Product Image 1">
          <div class="absolute top-4 left-4 bg-stone-700/80 dark:bg-stone-600/80 text-stone-100 text-xs font-semibold px-3 py-1 rounded-full">New Arrival</div>
        </div>
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Elegant Desk Lamp</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">A sophisticated lamp with adjustable brightness, perfect for modern workspaces.</p>
          <div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
            <span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$89.99</span>
            <button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
        <div class="relative pb-[75%] overflow-hidden">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1/600/400" alt="Product Image 2">
        </div>
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Vintage Leather Bag</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Hand-stitched leather bag with durable hardware, ideal for daily use or travel.</p>
          <div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
            <span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$149.00</span>
            <button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
        <div class="relative pb-[75%] overflow-hidden">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1084/600/400" alt="Product Image 3">
          <div class="absolute top-4 right-4 bg-red-600/80 dark:bg-red-500/80 text-white text-xs font-semibold px-3 py-1 rounded-full">Sale</div>
        </div>
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Ceramic Coffee Mug Set</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Artisan crafted set of four mugs, perfect for your morning brew or evening tea.</p>
          <div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
            <span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300 line-through text-lg">$45.00</span>
            <span class="text-2xl font-extrabold text-red-600 dark:text-red-500">$32.50</span>
            <button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
        <div class="relative pb-[75%] overflow-hidden">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1015/600/400" alt="Product Image 4">
        </div>
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Botanical Wall Art</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Stunning framed print, bringing the tranquility of nature indoors.</p>
          <div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
            <span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$65.00</span>
            <button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 5 -->
      <div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
        <div class="relative pb-[75%] overflow-hidden">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/10/600/400" alt="Product Image 5">
        </div>
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">High-Quality Headphones</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Experience immersive sound with active noise cancellation and ergonomic design.</p>
          <div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
            <span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$199.99</span>
            <button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 6 -->
      <div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
        <div class="relative pb-[75%] overflow-hidden">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1020/600/400" alt="Product Image 6">
          <div class="absolute top-4 left-4 bg-stone-700/80 dark:bg-stone-600/80 text-stone-100 text-xs font-semibold px-3 py-1 rounded-full">Limited Edition</div>
        </div>
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Luxury Fountain Pen</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">A refined writing instrument, handcrafted for exceptional balance and smooth ink flow.</p>
          <div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
            <span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$249.00</span>
            <button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 7 -->
      <div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
        <div class="relative pb-[75%] overflow-hidden">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1005/600/400" alt="Product Image 7">
        </div>
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Smart Home Assistant</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Integrate and control your smart devices with simple voice commands.</p>
          <div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
            <span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$129.00</span>
            <button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 8 -->
      <div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
        <div class="relative pb-[75%] overflow-hidden">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1021/600/400" alt="Product Image 8">
          <div class="absolute top-4 right-4 bg-emerald-600/80 dark:bg-emerald-500/80 text-white text-xs font-semibold px-3 py-1 rounded-full">In Stock</div>
        </div>
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Organic Scented Candle</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Eco-friendly candle made with natural waxes and essential oils for a calming aroma.</p>
          <div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
            <span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$34.99</span>
            <button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

    </div>

    <div class="mt-12 text-center">
      <button class="inline-flex items-center px-8 py-3 bg-stone-700 dark:bg-stone-600 text-white font-semibold text-lg rounded-lg shadow-lg hover:bg-stone-800 dark:hover:bg-stone-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-75">
        View All Products
        <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
      </button>
    </div>
  </div>
</section>

Galleria dei prodotti Cyberpunk

Un componente reattivo della galleria di prodotti con un'estetica cyberpunk, caratterizzato da sfondi scuri, colori vivaci (blu elettrico) ed elementi interattivi sottili, adatto per mostrare prodotti o un portfolio.

Aperto Anteprima

                <div class="font-sans antialiased bg-gray-950 text-gray-100 dark:bg-black p-4 sm:p-6 lg:p-8">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white text-center mb-12 sm:mb-16 tracking-tight animate-pulse-light">
      <span class="block text-blue-400 drop-shadow-neon-blue">CYBERPUNK</span> GALLERY
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">
      <!-- Product Card 1 -->
      <div class="relative group overflow-hidden rounded-lg shadow-lg bg-gray-900 border border-blue-600/50 hover:border-blue-400 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01] dark:bg-gray-900">
        <img src="https://picsum.photos/id/237/800/600" alt="Product Image 1" class="w-full h-56 sm:h-64 object-cover object-center transform group-hover:scale-105 transition-transform duration-500 ease-in-out border-b border-blue-600/30">
        <div class="p-5 sm:p-6">
          <h3 class="text-2xl font-bold text-white mb-2 drop-shadow-text-neon-blue">Quantum Holo-Display</h3>
          <p class="text-gray-300 text-sm mb-4 leading-relaxed">Sleek, transparent interface with augmented reality overlays for the ultimate digital experience.</p>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-blue-400 font-bold text-xl drop-shadow-md">€1,299.99</span>
            <button class="px-5 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out border border-blue-700 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
              View Details
            </button>
          </div>
        </div>
        <div class="absolute inset-0 border border-blue-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
      </div>

      <!-- Product Card 2 -->
      <div class="relative group overflow-hidden rounded-lg shadow-lg bg-gray-900 border border-blue-600/50 hover:border-blue-400 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01] dark:bg-gray-900">
        <img src="https://picsum.photos/id/238/800/600" alt="Product Image 2" class="w-full h-56 sm:h-64 object-cover object-center transform group-hover:scale-105 transition-transform duration-500 ease-in-out border-b border-blue-600/30">
        <div class="p-5 sm:p-6">
          <h3 class="text-2xl font-bold text-white mb-2 drop-shadow-text-neon-blue">Neural Interface Chip</h3>
          <p class="text-gray-300 text-sm mb-4 leading-relaxed">Direct brain-computer connection, enhancing perception and processing speed exponentially.</p>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-blue-400 font-bold text-xl drop-shadow-md">€899.99</span>
            <button class="px-5 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out border border-blue-700 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
              View Details
            </button>
          </div>
        </div>
        <div class="absolute inset-0 border border-blue-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
      </div>

      <!-- Product Card 3 -->
      <div class="relative group overflow-hidden rounded-lg shadow-lg bg-gray-900 border border-blue-600/50 hover:border-blue-400 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01] dark:bg-gray-900">
        <img src="https://picsum.photos/id/239/800/600" alt="Product Image 3" class="w-full h-56 sm:h-64 object-cover object-center transform group-hover:scale-105 transition-transform duration-500 ease-in-out border-b border-blue-600/30">
        <div class="p-5 sm:p-6">
          <h3 class="text-2xl font-bold text-white mb-2 drop-shadow-text-neon-blue">Aero-Motorcycle X-7</h3>
          <p class="text-gray-300 text-sm mb-4 leading-relaxed">Zero-emission hoverbike capable of reaching incredible speeds in urban environments.</p>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-blue-400 font-bold text-xl drop-shadow-md">€5,499.00</span>
            <button class="px-5 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out border border-blue-700 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
              View Details
            </button>
          </div>
        </div>
        <div class="absolute inset-0 border border-blue-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
      </div>

      <!-- Product Card 4 -->
      <div class="relative group overflow-hidden rounded-lg shadow-lg bg-gray-900 border border-blue-600/50 hover:border-blue-400 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01] dark:bg-gray-900">
        <img src="https://picsum.photos/id/240/800/600" alt="Product Image 4" class="w-full h-56 sm:h-64 object-cover object-center transform group-hover:scale-105 transition-transform duration-500 ease-in-out border-b border-blue-600/30">
        <div class="p-5 sm:p-6">
          <h3 class="text-2xl font-bold text-white mb-2 drop-shadow-text-neon-blue">Exo-Suit Mk-II</h3>
          <p class="text-gray-300 text-sm mb-4 leading-relaxed">Reinforced personal armor with integrated life support and tactical heads-up display.</p>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-blue-400 font-bold text-xl drop-shadow-md">€7,850.00</span>
            <button class="px-5 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out border border-blue-700 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
              View Details
            </button>
          </div>
        </div>
        <div class="absolute inset-0 border border-blue-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
      </div>

      <!-- Product Card 5 -->
      <div class="relative group overflow-hidden rounded-lg shadow-lg bg-gray-900 border border-blue-600/50 hover:border-blue-400 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01] dark:bg-gray-900">
        <img src="https://picsum.photos/id/241/800/600" alt="Product Image 5" class="w-full h-56 sm:h-64 object-cover object-center transform group-hover:scale-105 transition-transform duration-500 ease-in-out border-b border-blue-600/30">
        <div class="p-5 sm:p-6">
          <h3 class="text-2xl font-bold text-white mb-2 drop-shadow-text-neon-blue">Cyber-Optic Lenses</h3>
          <p class="text-gray-300 text-sm mb-4 leading-relaxed">Enhanced vision with zoom, night vision, and detailed data overlay capabilities.</p>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-blue-400 font-bold text-xl drop-shadow-md">€450.00</span>
            <button class="px-5 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out border border-blue-700 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
              View Details
            </button>
          </div>
        </div>
        <div class="absolute inset-0 border border-blue-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
      </div>

      <!-- Product Card 6 -->
      <div class="relative group overflow-hidden rounded-lg shadow-lg bg-gray-900 border border-blue-600/50 hover:border-blue-400 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01] dark:bg-gray-900">
        <img src="https://picsum.photos/id/242/800/600" alt="Product Image 6" class="w-full h-56 sm:h-64 object-cover object-center transform group-hover:scale-105 transition-transform duration-500 ease-in-out border-b border-blue-600/30">
        <div class="p-5 sm:p-6">
          <h3 class="text-2xl font-bold text-white mb-2 drop-shadow-text-neon-blue">Logic Processor Unit</h3>
          <p class="text-gray-300 text-sm mb-4 leading-relaxed">Compact and powerful portable computing device for on-the-go data manipulation.</p>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-blue-400 font-bold text-xl drop-shadow-md">€620.00</span>
            <button class="px-5 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out border border-blue-700 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
              View Details
            </button>
          </div>
        </div>
        <div class="absolute inset-0 border border-blue-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
      </div>

    </div>
  </div>

  <!-- Custom Styles for Neon Glow -->
  <style>
    .drop-shadow-neon-blue {
      text-shadow: 0 0 5px rgba(66, 153, 225, 0.6), 0 0 10px rgba(66, 153, 225, 0.4), 0 0 15px rgba(66, 153, 225, 0.2);
    }
    .drop-shadow-text-neon-blue {
      text-shadow: 0 0 2px rgba(66, 153, 225, 0.8), 0 0 4px rgba(66, 153, 225, 0.6);
    }
    @keyframes pulse-light {
        0%, 100% { filter: brightness(1); }
        50% { filter: brightness(1.2); }
    }
    .animate-pulse-light {
        animation: pulse-light 3s infinite alternate;
    }
  </style>
</div>

Componente della galleria dei prodotti

Un componente complesso e reattivo della galleria di prodotti progettato con microinterazioni sottili, combinazione di colori pastello e supporto completo della modalità scura, adatto per un forum o una piattaforma di community. Offre una selezione interattiva di immagini e informazioni dettagliate sul prodotto.

Aperto Anteprima

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-gray-800 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-850 shadow-xl rounded-2xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
    <div class="lg:grid lg:grid-cols-2 lg:gap-8 p-4 sm:p-6 lg:p-8">

      <!-- Image Gallery Section -->
      <div class="flex flex-col-reverse lg:flex-row gap-4">
        <!-- Thumbnail Navigation -->
        <div class="flex lg:flex-col gap-3 overflow-x-auto lg:overflow-y-auto pb-2 lg:pb-0 scrollbar-hide">
          <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg overflow-hidden border-2 border-indigo-200 dark:border-indigo-600 ring-2 ring-indigo-300 dark:ring-indigo-500 cursor-pointer transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-sm hover:shadow-md">
            <img src="https://picsum.photos/id/1018/200/200" alt="Product thumbnail 1" class="w-full h-full object-cover">
          </div>
          <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg overflow-hidden border-2 border-transparent hover:border-indigo-200 dark:hover:border-indigo-600 transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-sm hover:shadow-md cursor-pointer">
            <img src="https://picsum.photos/id/1025/200/200" alt="Product thumbnail 2" class="w-full h-full object-cover">
          </div>
          <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg overflow-hidden border-2 border-transparent hover:border-indigo-200 dark:hover:border-indigo-600 transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-sm hover:shadow-md cursor-pointer">
            <img src="https://picsum.photos/id/1080/200/200" alt="Product thumbnail 3" class="w-full h-full object-cover">
          </div>
          <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg overflow-hidden border-2 border-transparent hover:border-indigo-200 dark:hover:border-indigo-600 transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-sm hover:shadow-md cursor-pointer">
            <img src="https://picsum.photos/id/1043/200/200" alt="Product thumbnail 4" class="w-full h-full object-cover">
          </div>
        </div>

        <!-- Main Image -->
        <div class="flex-1 rounded-xl overflow-hidden shadow-lg border border-indigo-100 dark:border-gray-700 aspect-video lg:aspect-square flex items-center justify-center">
          <img src="https://picsum.photos/id/1018/600/600" alt="Main product image" class="w-full h-full object-cover object-center transform transition-transform duration-300 hover:scale-105">
        </div>
      </div>

      <!-- Product Details Section -->
      <div class="mt-8 lg:mt-0">
        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-white mb-3 tracking-tight leading-tight">
          Pastel Dream Headphones
        </h1>
        <p class="text-2xl font-semibold text-indigo-600 dark:text-indigo-400 mb-6">
          $199.99
        </p>

        <div class="mb-8">
          <h2 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">Description</h2>
          <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
            Experience pure audio bliss with the Pastel Dream Headphones. Designed for comfort and style, these over-ear headphones deliver rich, balanced sound with deep bass and clear trebles. Perfect for music lovers and podcast enthusiasts.
          </p>
        </div>

        <!-- Product Attributes/Features -->
        <div class="mb-8 grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="flex items-center text-gray-700 dark:text-gray-300 group">
            <svg class="w-6 h-6 text-indigo-400 group-hover:text-indigo-500 mr-2 transform transition-transform duration-200 group-hover:rotate-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m12.728 12.728l-.707-.707M6 18H4a2 2 0 01-2-2V7a2 2 0 012-2h16a2 2 0 012 2v9a2 2 0 01-2 2h-2M18 9a2 2 0 01-2 2H8a2 2 0 01-2-2V5h12v4z"></path>
            </svg>
            <span class="font-medium text-lg">Wireless Connectivity</span>
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 group">
            <svg class="w-6 h-6 text-indigo-400 group-hover:text-indigo-500 mr-2 transform transition-transform duration-200 group-hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <span class="font-medium text-lg">20-Hour Battery Life</span>
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 group">
            <svg class="w-6 h-6 text-indigo-400 group-hover:text-indigo-500 mr-2 transform transition-transform duration-200 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
            </svg>
            <span class="font-medium text-lg">Noise Cancellation</span>
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 group">
            <svg class="w-6 h-6 text-indigo-400 group-hover:text-indigo-500 mr-2 transform transition-transform duration-200 group-hover:rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197 2.132A6.5 6.5 0 0012 21a6.5 6.5 0 00-4.06-11.832c.983-4.004 4.544-7 8.56-7s7.577 2.996 8.56 7A6.5 6.5 0 0012 3a6.5 6.5 0 00-4.06 11.832z"></path>
            </svg>
            <span class="font-medium text-lg">Comfort-Fit Design</span>
          </div>
        </div>

        <!-- Add to Cart (Placeholder for Forum/Community interaction) -->
        <div class="flex flex-col sm:flex-row gap-4 mb-8">
          <button class="flex-1 py-3 px-6 rounded-xl bg-indigo-500 text-white font-semibold text-lg shadow-md hover:bg-indigo-600 focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-700 transition-all duration-200 transform active:scale-95 hover:scale-105">
            <span class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 -ml-1 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg> Join Discussion</span>
          </button>
          <button class="flex-1 py-3 px-6 rounded-xl bg-pink-200 text-pink-700 dark:bg-pink-700 dark:text-pink-100 font-semibold text-lg shadow-md hover:bg-pink-300 dark:hover:bg-pink-600 focus:outline-none focus:ring-4 focus:ring-pink-100 dark:focus:ring-pink-800 transition-all duration-200 transform active:scale-95 hover:scale-105">
             <span class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> Add to Wishlist</span>
          </button>
        </div>

        <!-- Customer Reviews/Community Testimonial (Forum Focus) -->
        <div>
          <h2 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-3">What Our Community Says:</h2>
          <div class="flex items-start bg-purple-50 dark:bg-gray-700 p-4 rounded-lg shadow-sm group hover:shadow-md transition-all duration-200">
            <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-12 h-12 rounded-full ring-2 ring-purple-300 dark:ring-purple-600 mr-4 flex-shrink-0 transform transition-transform duration-300 group-hover:scale-110">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">~ MusicLover22</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">"Absolutely stunning! The sound quality is phenomenal, and they're so comfortable for long listening sessions. Plus, the pastel colors are just adorable!"</p>
              <div class="flex text-yellow-500 text-sm mt-1">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              </div>
            </div>
          </div>
        </div>

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

Componente della galleria dei prodotti

Un componente complesso e reattivo della galleria di prodotti con un'estetica di progettazione 3D e una combinazione di colori seppia/marrone, adatto per applicazioni tecnologiche/SaaS. Include più elementi interattivi e supporto per la modalità oscura.

Aperto Anteprima

                <section class="bg-stone-100 dark:bg-stone-900 py-12 px-4 sm:px-6 lg:px-8 font-sans transition-colors duration-300">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center text-stone-900 dark:text-stone-100 mb-16 relative perspective-1000" style="text-shadow: 2px 2px 5px rgba(0,0,0,0.2) dark:text-stone-100; transform-style: preserve-3d;">
      <span class="block transform rotateX-15 rotateY-5 translateZ-20 bg-clip-text text-transparent bg-gradient-to-br from-amber-800 to-amber-950 dark:from-amber-600 dark:to-amber-900">Our Showcase</span>
      <span class="block text-2xl sm:text-3xl text-stone-700 dark:text-stone-300 mt-4 font-normal tracking-wide transform rotateX-10 translateZ-10">Explore Solutions with Depth</span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 justify-items-center">

      <!-- Product Card 1 -->
      <div class="group w-full max-w-sm rounded-xl overflow-hidden shadow-xl hover:shadow-2xl dark:shadow-stone-700/50 dark:hover:shadow-stone-600/70 transition-all duration-500 transform hover:scale-102 hover:rotate-3 hover:skew-y-1 relative bg-gradient-to-br from-stone-200 to-stone-100 dark:from-stone-800 dark:to-stone-900 border border-stone-300 dark:border-stone-700 perspective-1000">
        <div class="relative p-6 pt-10 pb-20 rounded-xl transform-style-preserve-3d backface-hidden group-hover:rotate-y-10 group-hover:rotate-x-5 transition-transform duration-500">
          <div class="absolute inset-0 bg-no-repeat bg-center opacity-5 dark:opacity-10" style="background-image: url('https://picsum.photos/id/60/300/200'); background-size: cover; filter: grayscale(100%) brightness(50%) sepia(100%);">
          </div>
          <div class="relative z-10">
            <img src="https://picsum.photos/id/1015/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-6 shadow-md dark:shadow-none hover:shadow-lg transition-shadow duration-300 transform translateZ-20 perspective-1000">
            <h3 class="text-2xl font-bold text-amber-950 dark:text-amber-500 mb-3 transform translateZ-10">Data Insight Engine</h3>
            <p class="text-stone-800 dark:text-stone-300 text-base mb-6 transform translateZ-5">
              Uncover hidden patterns and make data-driven decisions with unparalleled precision and speed.
            </p>
            <div class="flex justify-between items-center transform translateZ-15">
              <span class="text-lg font-semibold text-amber-800 dark:text-amber-400">$499/mo</span>
              <a href="#" class="inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-stone-100 bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-300 transform translateZ-10 perspective-1000 group-hover:translateZ-20">
                Learn More
                <svg class="ml-2 -mr-1 w-5 h-5 group-hover:rotate-z-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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><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"></path></svg>
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="group w-full max-w-sm rounded-xl overflow-hidden shadow-xl hover:shadow-2xl dark:shadow-stone-700/50 dark:hover:shadow-stone-600/70 transition-all duration-500 transform hover:scale-102 hover:-rotate-3 hover:-skew-y-1 relative bg-gradient-to-br from-stone-200 to-stone-100 dark:from-stone-800 dark:to-stone-900 border border-stone-300 dark:border-stone-700 perspective-1000">
        <div class="relative p-6 pt-10 pb-20 rounded-xl transform-style-preserve-3d backface-hidden group-hover:rotate-y-10 group-hover:rotate-x-5 transition-transform duration-500">
          <div class="absolute inset-0 bg-no-repeat bg-center opacity-5 dark:opacity-10" style="background-image: url('https://picsum.photos/id/61/300/200'); background-size: cover; filter: grayscale(100%) brightness(50%) sepia(100%);">
          </div>
          <div class="relative z-10">
            <img src="https://picsum.photos/id/1018/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-6 shadow-md dark:shadow-none hover:shadow-lg transition-shadow duration-300 transform translateZ-20 perspective-1000">
            <h3 class="text-2xl font-bold text-amber-950 dark:text-amber-500 mb-3 transform translateZ-10">Cloud Security Hub</h3>
            <p class="text-stone-800 dark:text-stone-300 text-base mb-6 transform translateZ-5">
              Protect your cloud infrastructure with advanced threat detection and real-time monitoring.
            </p>
            <div class="flex justify-between items-center transform translateZ-15">
              <span class="text-lg font-semibold text-amber-800 dark:text-amber-400">$799/mo</span>
              <a href="#" class="inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-stone-100 bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-300 transform translateZ-10 perspective-1000 group-hover:translateZ-20">
                Learn More
                <svg class="ml-2 -mr-1 w-5 h-5 group-hover:rotate-z-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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><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"></path></svg>
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="group w-full max-w-sm rounded-xl overflow-hidden shadow-xl hover:shadow-2xl dark:shadow-stone-700/50 dark:hover:shadow-stone-600/70 transition-all duration-500 transform hover:scale-102 hover:rotate-3 hover:skew-y-1 relative bg-gradient-to-br from-stone-200 to-stone-100 dark:from-stone-800 dark:to-stone-900 border border-stone-300 dark:border-stone-700 perspective-1000">
        <div class="relative p-6 pt-10 pb-20 rounded-xl transform-style-preserve-3d backface-hidden group-hover:rotate-y-10 group-hover:rotate-x-5 transition-transform duration-500">
          <div class="absolute inset-0 bg-no-repeat bg-center opacity-5 dark:opacity-10" style="background-image: url('https://picsum.photos/id/62/300/200'); background-size: cover; filter: grayscale(100%) brightness(50%) sepia(100%);">
          </div>
          <div class="relative z-10">
            <img src="https://picsum.photos/id/1025/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-6 shadow-md dark:shadow-none hover:shadow-lg transition-shadow duration-300 transform translateZ-20 perspective-1000">
            <h3 class="text-2xl font-bold text-amber-950 dark:text-amber-500 mb-3 transform translateZ-10">Enhanced Workflow Automation</h3>
            <p class="text-stone-800 dark:text-stone-300 text-base mb-6 transform translateZ-5">
              Streamline operations and boost team productivity with intelligent automation solutions.
            </p>
            <div class="flex justify-between items-center transform translateZ-15">
              <span class="text-lg font-semibold text-amber-800 dark:text-amber-400">$599/mo</span>
              <a href="#" class="inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-stone-100 bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-300 transform translateZ-10 perspective-1000 group-hover:translateZ-20">
                Learn More
                <svg class="ml-2 -mr-1 w-5 h-5 group-hover:rotate-z-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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><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"></path></svg>
              </a>
            </div>
          </div>
        </div>
      </div>

    </div>

    <!-- Testimonial / Featured Clients Section -->
    <div class="mt-20 text-center">
      <h3 class="text-3xl font-bold text-stone-900 dark:text-stone-100 mb-8">Trusted by Industry Leaders</h3>
      <div class="flex flex-wrap justify-center items-center gap-8 md:gap-12">
        <img class="h-10 opacity-70 hover:opacity-100 dark:invert transition-opacity duration-300" src="https://www.svgrepo.com/show/303657/microsoft-logo-2012-text.svg" alt="Client Logo 1">
        <img class="h-10 opacity-70 hover:opacity-100 dark:invert transition-opacity duration-300" src="https://www.svgrepo.com/show/303490/google-1.svg" alt="Client Logo 2">
        <img class="h-10 opacity-70 hover:opacity-100 dark:invert transition-opacity duration-300" src="https://www.svgrepo.com/show/303273/apple.svg" alt="Client Logo 3">
        <img class="h-10 opacity-70 hover:opacity-100 dark:invert transition-opacity duration-300" src="https://www.svgrepo.com/show/303102/amazon-2-logo.svg" alt="Client Logo 4">
        <img class="h-10 opacity-70 hover:opacity-100 dark:invert transition-opacity duration-300" src="https://www.svgrepo.com/show/303681/meta.svg" alt="Client Logo 5">
      </div>
    </div>

  </div>
</section>

<style>
  /* Custom perspective for 3D effects */
  .perspective-1000 {
    perspective: 1000px;
  }

  /* Tailwind does not have transform-style: preserve-3d, so adding it */
  .transform-style-preserve-3d {
    transform-style: preserve-3d;
  }

  /* Tailwind does not have backface-visibility: hidden, so adding it */
  .backface-hidden {
    backface-visibility: hidden;
  }

  /* Custom 3D transforms for interactivity */
  .group:hover .rotate-y-10 {
    transform: rotateY(10deg);
  }
  .group:hover .rotate-x-5 {
    transform: rotateX(5deg);
  }
  .group:hover .rotate-z-10 {
    transform: rotateZ(10deg);
  }

  .transform-rotateX-15 {
    transform: rotateX(15deg);
  }
  .transform-rotateY-5 {
    transform: rotateY(5deg);
  }
  .transform-translateZ-20 {
    transform: translateZ(20px);
  }
  .transform-translateZ-10 {
    transform: translateZ(10px);
  }
  .transform-translateZ-5 {
    transform: translateZ(5px);
  }
  .transform-r-translateZ-20 {
    transform: translateZ(-20px);
  }

  @media (min-width: 1024px) {
    .group:hover .group-hover\\:translateZ-20 {
      transform: translateZ(20px);
    }
  }
</style>

Componente della galleria dei prodotti

Un componente reattivo della galleria di prodotti con un design ispirato alla carta/stampa, una combinazione di colori neutri caldi e supporto per la modalità scura, adatto per piattaforme di intrattenimento/multimediali.

Aperto Anteprima

                <div class="p-4 sm:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-800 dark:to-stone-900 font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl font-bold text-center mb-12 relative text-stone-800 dark:text-stone-200 leading-tight tracking-tight">
      Featured Releases
      <span class="block w-24 h-1.5 bg-yellow-600 dark:bg-yellow-400 mx-auto mt-4 rounded-full"></span>
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">

      <!-- Product Card 1 -->
      <div class="group relative overflow-hidden bg-white dark:bg-stone-700 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 border border-stone-300 dark:border-stone-600 print-effect">
        <img src="https://picsum.photos/id/1025/400/300" alt="Product Image" loading="lazy" class="w-full h-48 object-cover rounded-t-lg transition-transform duration-300 group-hover:scale-105">
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 text-stone-900 dark:text-stone-100">The Echoing Abyss</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-2">Immerse yourself in a gripping narrative of mystery and suspense. A true cinematic masterpiece.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">$19.99</span>
            <div class="flex space-x-1">
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-stone-400 dark:text-stone-500">&#9733;</span>
            </div>
          </div>
          <button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-semibold py-3 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-500 dark:hover:bg-yellow-600">
            View Details
          </button>
        </div>
        <div class="absolute top-0 right-0 p-2 bg-yellow-600 dark:bg-yellow-500 text-white text-xs font-bold rounded-bl-lg animate-pulse-once">
          New
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="group relative overflow-hidden bg-white dark:bg-stone-700 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 border border-stone-300 dark:border-stone-600 print-effect">
        <img src="https://picsum.photos/id/1018/400/300" alt="Product Image" loading="lazy" class="w-full h-48 object-cover rounded-t-lg transition-transform duration-300 group-hover:scale-105">
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 text-stone-900 dark:text-stone-100">Whispers of the Stars</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-2">An epic journey through cosmic wonders and ancient prophecies. Visually stunning!</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">$24.99</span>
            <div class="flex space-x-1">
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
            </div>
          </div>
          <button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-semibold py-3 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-500 dark:hover:bg-yellow-600">
            Pre-order Now
          </button>
        </div>
        <div class="absolute top-0 right-0 p-2 bg-purple-600 dark:bg-purple-500 text-white text-xs font-bold rounded-bl-lg animate-pulse-once">
          Pre-order
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="group relative overflow-hidden bg-white dark:bg-stone-700 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 border border-stone-300 dark:border-stone-600 print-effect">
        <img src="https://picsum.photos/id/10/400/300" alt="Product Image" loading="lazy" class="w-full h-48 object-cover rounded-t-lg transition-transform duration-300 group-hover:scale-105">
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 text-stone-900 dark:text-stone-100">Lost in the Glitch</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-2">A mind-bending sci-fi thriller exploring virtual realities and forgotten memories.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">$16.50</span>
            <div class="flex space-x-1">
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-stone-400 dark:text-stone-500">&#9733;</span>
              <span class="text-stone-400 dark:text-stone-500">&#9733;</span>
            </div>
          </div>
          <button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-semibold py-3 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-500 dark:hover:bg-yellow-600">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="group relative overflow-hidden bg-white dark:bg-stone-700 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 border border-stone-300 dark:border-stone-600 print-effect">
        <img src="https://picsum.photos/id/1060/400/300" alt="Product Image" loading="lazy" class="w-full h-48 object-cover rounded-t-lg transition-transform duration-300 group-hover:scale-105">
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-2 text-stone-900 dark:text-stone-100">Chronicles of Eldoria</h3>
          <p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-2">A classic fantasy adventure, now remastered in breathtaking 4K UHD. Limited Edition!</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">$29.99</span>
            <div class="flex space-x-1">
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-yellow-500 dark:text-yellow-400">&#9733;</span>
              <span class="text-stone-400 dark:text-stone-500">&#9733;</span>
            </div>
          </div>
          <button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-semibold py-3 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-500 dark:hover:bg-yellow-600">
            Buy Now
          </button>
        </div>
        <div class="absolute top-0 right-0 p-2 bg-red-600 dark:bg-red-500 text-white text-xs font-bold rounded-bl-lg animate-pulse-once">
          Limited
        </div>
      </div>

    </div>

    <div class="mt-16 text-center">
      <button class="px-8 py-4 bg-yellow-600 hover:bg-yellow-700 text-white text-lg font-semibold rounded-full shadow-lg hover:shadow-xl transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-500 dark:hover:bg-yellow-600 dark:focus:ring-yellow-400">
        Explore All Products
      </button>
    </div>

  </div>
</div>

<style>
/* Simple 'paper curl' effect for cards (optional, for visual flair) */
.print-effect {
  position: relative;
  /* filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1)); */
}

.print-effect::before {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 5%;
  width: 90%;
  height: 10px;
  background: rgba(0,0,0,0.05);
  border-radius: 50%;
  filter: blur(4px);
  z-index: -1;
  transition: transform 0.3s ease-out;
}

.print-effect:hover::before {
  transform: scale(1.05);
  background: rgba(0,0,0,0.1);
}

/* Custom animation for badges */
@keyframes pulse-once {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.9; }
  100% { transform: scale(1); opacity: 1; }
}

.animate-pulse-once {
  animation: pulse-once 1.2s ease-out 1;
}
</style>

Componente della galleria dei prodotti

Un componente semplice e reattivo per la galleria di prodotti con uno stile di design glassmorphism, combinazione di colori in bianco e nero con un accento brillante, adatto per bacheche di lavoro o piattaforme di carriera. Include il supporto per la modalità oscura.

Aperto Anteprima

                <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>

Brutalist_RealEstate_Product_Gallery

Un componente complesso della galleria di prodotti in stile brutalista per gli annunci immobiliari, caratterizzato da toni gioiello, colori ricchi e saturi, contrasto elevato e supporto per la modalità scura. Progettato per la visualizzazione dei dettagli delle proprietà con più elementi interattivi.

Aperto Anteprima

                <div class="font-sans bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-4 sm:p-8 md:p-12 lg:p-16 antialiased">

  <!-- Section Header -->
  <div class="mb-8 md:mb-12 border-b-4 border-l-4 border-emerald-700 dark:border-red-700 p-4 bg-emerald-100 dark:bg-stone-800">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold uppercase tracking-tight text-emerald-900 dark:text-red-600 mb-2 leading-none">
      Hot Property Listings
    </h1>
    <p class="text-lg sm:text-xl md:text-2xl font-semibold text-emerald-800 dark:text-red-400">
      Explore our brutalist collection of available properties.
    </p>
  </div>

  <!-- Product Grid -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-12">

    <!-- Property Card 1 -->
    <div class="relative bg-stone-50 dark:bg-stone-950 border-4 border-red-700 dark:border-emerald-700 shadow-[10px_10px_0px_0px_rgba(12,74,110,1)] dark:shadow-[10px_10px_0px_0px_rgba(146,64,14,1)] transition-all duration-300 hover:shadow-[16px_16px_0px_0px_rgba(12,74,110,1)] dark:hover:shadow-[16px_16px_0px_0px_rgba(146,64,14,1)]">
      <div class="absolute top-0 left-0 bg-red-700 dark:bg-emerald-700 p-2 text-stone-50 text-xs font-bold uppercase tracking-wider -translate-x-2 -translate-y-2 rotate-3 hover:rotate-0 transition-transform">FEATURED</div>
      <img src="https://picsum.photos/id/1018/600/400" alt="Modern Apartment Building" class="w-full h-64 object-cover border-b-4 border-red-700 dark:border-emerald-700">
      <div class="p-6">
        <h2 class="text-2xl sm:text-3xl font-extra-bold uppercase text-emerald-900 dark:text-emerald-500 mb-2 border-b-2 border-red-500 pb-2">Urban Loft Residence</h2>
        <p class="text-stone-800 dark:text-stone-300 text-lg mb-4 leading-relaxed line-clamp-3">A striking, industrial-inspired loft in the heart of downtown. Concrete finishes and exposed ductwork provide a raw, authentic living experience.</p>
        
        <div class="grid grid-cols-2 gap-y-2 mb-4 text-sm font-bold uppercase tracking-wide">
          <div class="flex items-center text-emerald-800 dark:text-emerald-400"><span class="mr-2 text-xl">&#x2611;</span> 3 Beds</div>
          <div class="flex items-center text-emerald-800 dark:text-emerald-400"><span class="mr-2 text-xl">&#x2611;</span> 2 Baths</div>
          <div class="flex items-center text-emerald-800 dark:text-emerald-400"><span class="mr-2 text-xl">&#x2611;</span> 1,800 sqft</div>
          <div class="flex items-center text-emerald-800 dark:text-emerald-400"><span class="mr-2 text-xl">&#x2611;</span> Built 1978</div>
        </div>

        <div class="flex items-baseline justify-between mb-6 border-t-2 border-red-500 pt-4">
          <span class="text-4xl sm:text-5xl font-extrabold text-red-700 dark:text-red-400">$850K</span>
          <span class="text-xl font-bold text-emerald-700 dark:text-emerald-400">Negotiable</span>
        </div>

        <div class="flex flex-col sm:flex-row gap-4">
          <button class="flex-1 bg-emerald-700 dark:bg-ruby-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-emerald-900 dark:hover:bg-ruby-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
            View Details
          </button>
          <button class="flex-none bg-red-700 dark:bg-sapphire-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-red-900 dark:hover:bg-sapphire-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
            Call Agent
          </button>
        </div>

        <div class="mt-6 pt-4 border-t-2 border-emerald-500 flex items-center justify-between">
          <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-red-700 dark:border-slate-300 mr-3">
            <div>
              <p class="text-sm font-semibold text-emerald-800 dark:text-emerald-300">Agent: John Smith</p>
              <p class="text-xs text-stone-600 dark:text-stone-400">Available 24/7</p>
            </div>
          </div>
          <a href="#" class="text-sm font-bold text-emerald-700 dark:text-emerald-400 hover:underline border-b-2 border-transparent hover:border-emerald-700 dark:hover:border-emerald-400 transition-colors">Message</a>
        </div>
      </div>
    </div>

    <!-- Property Card 2 -->
    <div class="relative bg-stone-50 dark:bg-stone-950 border-4 border-emerald-700 dark:border-red-700 shadow-[10px_10px_0px_0px_rgba(146,64,14,1)] dark:shadow-[10px_10px_0px_0px_rgba(12,74,110,1)] transition-all duration-300 hover:shadow-[16px_16px_0px_0px_rgba(146,64,14,1)] dark:hover:shadow-[16px_16px_0px_0px_rgba(12,74,110,1)]">
      <div class="absolute top-0 right-0 bg-emerald-700 dark:bg-red-700 p-2 text-stone-50 text-xs font-bold uppercase tracking-wider translate-x-2 -translate-y-2 -rotate-3 hover:rotate-0 transition-transform">NEW LISTING</div>
      <img src="https://picsum.photos/id/1041/600/400" alt="Scenic Countryside Home" class="w-full h-64 object-cover border-b-4 border-emerald-700 dark:border-red-700">
      <div class="p-6">
        <h2 class="text-2xl sm:text-3xl font-extra-bold uppercase text-red-900 dark:text-red-500 mb-2 border-b-2 border-emerald-500 pb-2">Brutalist Countryside Retreat</h2>
        <p class="text-stone-800 dark:text-stone-300 text-lg mb-4 leading-relaxed line-clamp-3">An unapologetic concrete masterpiece nestled in serene landscapes. Stripped-back design meets rural tranquility, offering profound escapism.</p>
        
        <div class="grid grid-cols-2 gap-y-2 mb-4 text-sm font-bold uppercase tracking-wide">
          <div class="flex items-center text-red-800 dark:text-red-400"><span class="mr-2 text-xl">&#x2611;</span> 4 Beds</div>
          <div class="flex items-center text-red-800 dark:text-red-400"><span class="mr-2 text-xl">&#x2611;</span> 3 Baths</div>
          <div class="flex items-center text-red-800 dark:text-red-400"><span class="mr-2 text-xl">&#x2611;</span> 2,500 sqft</div>
          <div class="flex items-center text-red-800 dark:text-red-400"><span class="mr-2 text-xl">&#x2611;</span> Built 2005</div>
        </div>

        <div class="flex items-baseline justify-between mb-6 border-t-2 border-emerald-500 pt-4">
          <span class="text-4xl sm:text-5xl font-extrabold text-emerald-700 dark:text-emerald-400">$1.2M</span>
          <span class="text-xl font-bold text-red-700 dark:text-red-400">Fixed Price</span>
        </div>

        <div class="flex flex-col sm:flex-row gap-4">
          <button class="flex-1 bg-red-700 dark:bg-sapphire-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-red-900 dark:hover:bg-sapphire-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
            View Details
          </button>
          <button class="flex-none bg-emerald-700 dark:bg-ruby-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-emerald-900 dark:hover:bg-ruby-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
            Call Agent
          </button>
        </div>

        <div class="mt-6 pt-4 border-t-2 border-red-500 flex items-center justify-between">
          <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/women/7.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-emerald-700 dark:border-slate-300 mr-3">
            <div>
              <p class="text-sm font-semibold text-red-800 dark:text-red-300">Agent: Jane Doe</p>
              <p class="text-xs text-stone-600 dark:text-stone-400">Response time: 1hr</p>
            </div>
          </div>
          <a href="#" class="text-sm font-bold text-red-700 dark:text-red-400 hover:underline border-b-2 border-transparent hover:border-red-700 dark:hover:border-red-400 transition-colors">Message</a>
        </div>
      </div>
    </div>

    <!-- Property Card 3 -->
    <div class="relative bg-stone-50 dark:bg-stone-950 border-4 border-sapphire-700 dark:border-emerald-700 shadow-[10px_10px_0px_0px_rgba(12,74,110,1)] dark:shadow-[10px_10px_0px_0px_rgba(146,64,14,1)] transition-all duration-300 hover:shadow-[16px_16px_0px_0px_rgba(12,74,110,1)] dark:hover:shadow-[16px_16px_0px_0px_rgba(146,64,14,1)]">
      <div class="absolute top-0 left-0 bg-sapphire-700 dark:bg-emerald-700 p-2 text-stone-50 text-xs font-bold uppercase tracking-wider -translate-x-2 -translate-y-2 rotate-3 hover:rotate-0 transition-transform">PREMIUM</div>
      <img src="https://picsum.photos/id/1050/600/400" alt="Commercial Space" class="w-full h-64 object-cover border-b-4 border-sapphire-700 dark:border-emerald-700">
      <div class="p-6">
        <h2 class="text-2xl sm:text-3xl font-extra-bold uppercase text-sapphire-900 dark:text-sapphire-500 mb-2 border-b-2 border-red-500 pb-2">Commercial Block B</h2>
        <p class="text-stone-800 dark:text-stone-300 text-lg mb-4 leading-relaxed line-clamp-3">A robust, imposing commercial building ready for redevelopment. Massive potential with a no-nonsense, concrete structure.</p>
        
        <div class="grid grid-cols-2 gap-y-2 mb-4 text-sm font-bold uppercase tracking-wide">
          <div class="flex items-center text-sapphire-800 dark:text-sapphire-400"><span class="mr-2 text-xl">&#x2611;</span> 5 Floors</div>
          <div class="flex items-center text-sapphire-800 dark:text-sapphire-400"><span class="mr-2 text-xl">&#x2611;</span> 10 Offices</div>
          <div class="flex items-center text-sapphire-800 dark:text-sapphire-400"><span class="mr-2 text-xl">&#x2611;</span> 10,000 sqft</div>
          <div class="flex items-center text-sapphire-800 dark:text-sapphire-400"><span class="mr-2 text-xl">&#x2611;</span> Built 1960</div>
        </div>

        <div class="flex items-baseline justify-between mb-6 border-t-2 border-red-500 pt-4">
          <span class="text-4xl sm:text-5xl font-extrabold text-red-700 dark:text-red-400">$3.5M</span>
          <span class="text-xl font-bold text-sapphire-700 dark:text-sapphire-400">Offer Welcome</span>
        </div>

        <div class="flex flex-col sm:flex-row gap-4">
          <button class="flex-1 bg-sapphire-700 dark:bg-emerald-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-sapphire-900 dark:hover:bg-emerald-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
            View Details
          </button>
          <button class="flex-none bg-red-700 dark:bg-sapphire-700 text-stone-50 p-4 font-bold uppercase border-2 border-stone-900 dark:border-stone-50 hover:bg-red-900 dark:hover:bg-sapphire-900 transition-colors shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)]">
            Call Agent
          </button>
        </div>

        <div class="mt-6 pt-4 border-t-2 border-sapphire-500 flex items-center justify-between">
          <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/9.jpg" alt="Agent" class="w-10 h-10 rounded-full border-2 border-sapphire-700 dark:border-slate-300 mr-3">
            <div>
              <p class="text-sm font-semibold text-sapphire-800 dark:text-sapphire-300">Agent: Mike Ross</p>
              <p class="text-xs text-stone-600 dark:text-stone-400">Key Holder</p>
            </div>
          </div>
          <a href="#" class="text-sm font-bold text-sapphire-700 dark:text-sapphire-400 hover:underline border-b-2 border-transparent hover:border-sapphire-700 dark:hover:border-sapphire-400 transition-colors">Message</a>
        </div>
      </div>
    </div>

  </div>

  <!-- Call to action/Footer space -->
  <div class="mt-12 md:mt-16 text-center border-t-4 border-r-4 border-emerald-700 dark:border-red-700 p-6 bg-emerald-100 dark:bg-stone-800">
    <p class="text-xl sm:text-2xl font-bold uppercase text-emerald-900 dark:text-red-500 mb-4">Ready to find your brutalist dream?</p>
    <button class="inline-block bg-red-700 dark:bg-sapphire-700 text-stone-50 px-8 py-4 text-xl font-bold uppercase border-4 border-stone-900 dark:border-stone-50 hover:bg-red-900 dark:hover:bg-sapphire-900 transition-colors shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)]">
      Browse All Properties
    </button>
  </div>

  <!-- Custom Colors for Brutalism Jewel Tones -->
  <style>
    .dark .bg-ruby-700 { background-color: rgb(150, 40, 60); } /* Darker Ruby */
    .dark .hover\:bg-ruby-900:hover { background-color: rgb(110, 20, 40); } /* Even darker Ruby */
    .dark .bg-sapphire-700 { background-color: rgb(60, 80, 150); } /* Darker Sapphire */
    .dark .hover\:bg-sapphire-900:hover { background-color: rgb(40, 60, 110); } /* Even darker Sapphire */
    .text-emerald-900 { color: rgb(0, 50, 20); } /* Darker Emerald */
    .text-red-900 { color: rgb(70, 0, 0); } /* Darker Red */
    .text-sapphire-900 { color: rgb(0, 0, 40); } /* Darker Sapphire */

    /* Light mode custom colors */
    .bg-emerald-700 { background-color: rgb(5, 150, 105); } /* Emerald Green */
    .hover\:bg-emerald-900:hover { background-color: rgb(4, 120, 85); } /* Darker Emerald for hover */
    .border-emerald-700 { border-color: rgb(5, 150, 105); } /* Emerald Border */
    .text-emerald-700 { color: rgb(5, 150, 105); } /* Emerald Text */
    .text-emerald-800 { color: rgb(4, 130, 95); } /* Slightly darker Emerald Text */
    .text-emerald-900 { color: rgb(3, 100, 75); } /* Even darker Emerald Text */
    .border-emerald-500 { border-color: rgb(6, 175, 125); } /* Lighter Emerald Border */
    .text-emerald-400 { color: rgb(4, 185, 130); } /* Lighter Emerald Text */
    .text-emerald-300 { color: rgb(5, 200, 140); } /* Even lighter Emerald Text */

    .bg-red-700 { background-color: rgb(220, 38, 38); } /* Ruby Red */
    .hover\:bg-red-900:hover { background-color: rgb(180, 30, 30); } /* Darker Ruby for hover */
    .border-red-700 { border-color: rgb(220, 38, 38); } /* Ruby Border */
    .text-red-700 { color: rgb(220, 38, 38); } /* Ruby Text */
    .text-red-800 { color: rgb(190, 35, 35); } /* Slightly darker Ruby Text */
    .text-red-900 { color: rgb(150, 30, 30); } /* Even darker Ruby Text */
    .border-red-500 { border-color: rgb(239, 68, 68); } /* Lighter Ruby Border */
    .text-red-400 { color: rgb(248, 113, 113); } /* Lighter Ruby Text */
    .text-red-300 { color: rgb(252, 165, 165); } /* Even lighter Ruby Text */

    .bg-sapphire-700 { background-color: rgb(37, 99, 235); } /* Sapphire Blue */
    .hover\:bg-sapphire-900:hover { background-color: rgb(29, 78, 216); } /* Darker Sapphire for hover */
    .border-sapphire-700 { border-color: rgb(37, 99, 235); } /* Sapphire Border */
    .text-sapphire-700 { color: rgb(37, 99, 235); } /* Sapphire Text */
    .text-sapphire-800 { color: rgb(30, 80, 190); } /* Slightly darker Sapphire Text */
    .text-sapphire-900 { color: rgb(20, 60, 150); } /* Even darker Sapphire Text */
    .border-sapphire-500 { border-color: rgb(59, 130, 246); } /* Lighter Sapphire Border */
    .text-sapphire-400 { color: rgb(96, 165, 250); } /* Lighter Sapphire Text */
    .text-sapphire-300 { color: rgb(147, 197, 253); } /* Even lighter Sapphire Text */

  </style>
</div>