Product Gallery 구성 요소

3D 디자인 미학과 세피아/갈색 색상 구성표를 갖춘 복잡하고 반응이 빠른 제품 갤러리 구성 요소로, 기술/SaaS 애플리케이션에 적합합니다. 여러 대화형 요소와 다크 모드 지원이 포함됩니다.
미리 보기

HTML 코드

<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>
Product Gallery 구성 요소

미리 보기

HTML 코드

관련 구성 요소

Product Gallery 구성 요소

Brutalist_RealEstate_Product_Gallery

Product Gallery 구성 요소
