제품 카드 구성 요소

<div class="font-sans antialiased bg-purple-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-12 lg:py-20">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12 sm:mb-16 lg:mb-20">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-purple-900 dark:text-purple-300 mb-4 sm:mb-6 leading-tight">
        Our Premium Offerings
      </h2>
      <p class="text-lg sm:text-xl text-purple-700 dark:text-purple-400 max-w-2xl mx-auto">
        Discover a curated selection of our most advanced and robust solutions designed to empower your business.
      </p>
    </div>

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

      <!-- Product Card 1 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border border-purple-100 dark:border-gray-700 flex flex-col">
        <a href="#" class="block relative group overflow-hidden">
          <img src="https://picsum.photos/600/400?random=1" alt="Advanced Analytics Platform" class="w-full h-56 object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500 ease-in-out" loading="lazy">
          <div class="absolute inset-0 bg-gradient-to-t from-purple-800 to-transparent opacity-0 group-hover:opacity-75 transition-opacity duration-300 flex items-end p-4">
            <p class="text-white font-semibold text-lg">Explore Now</p>
          </div>
        </a>
        <div class="p-6 flex-grow flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold text-purple-900 dark:text-purple-300 mb-3">
              <a href="#" class="hover:text-purple-700 dark:hover:text-purple-400 transition-colors duration-200">Advanced Analytics Platform</a>
            </h3>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
              Unleash deep insights with our cutting-edge AI-powered analytics, transforming raw data into actionable knowledge.
            </p>
          </div>
          <div class="mt-auto">
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <svg class="w-5 h-5 mr-2 text-purple-600 dark:text-purple-400" 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.75 17L9.25 10m-3.25 7V10m6.5 7V10m2 7V10m-2 2a2 2 0 11-4 0 2 2 0 014 0zM12 2a10 10 0 100 20 10 10 0 000-20z" />
              </svg>
              <span class="font-medium text-purple-600 dark:text-purple-400">Data Science</span> &middot; <time datetime="2023-10-26">Oct 26, 2023</time>
            </div>
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Author Avatar" class="w-9 h-9 rounded-full object-cover mr-3 border-2 border-purple-300 dark:border-purple-600" loading="lazy">
                <span class="text-sm font-medium text-gray-600 dark:text-gray-300">By John Doe</span>
              </div>
              <button class="px-5 py-2 bg-purple-600 text-white rounded-full font-semibold text-base hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 transition-colors duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
                Learn More
              </button>
            </div>
          </div>
        </div>
      </article>

      <!-- Product Card 2 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border border-purple-100 dark:border-gray-700 flex flex-col">
        <a href="#" class="block relative group overflow-hidden">
          <img src="https://picsum.photos/600/400?random=2" alt="Secure Cloud Solutions" class="w-full h-56 object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500 ease-in-out" loading="lazy">
          <div class="absolute inset-0 bg-gradient-to-t from-purple-800 to-transparent opacity-0 group-hover:opacity-75 transition-opacity duration-300 flex items-end p-4">
            <p class="text-white font-semibold text-lg">Discover Security</p>
          </div>
        </a>
        <div class="p-6 flex-grow flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold text-purple-900 dark:text-purple-300 mb-3">
              <a href="#" class="hover:text-purple-700 dark:hover:text-purple-400 transition-colors duration-200">Secure Cloud Infrastructure</a>
            </h3>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
              Fortify your digital assets with our robust, scalable, and highly secure cloud computing environments.
            </p>
          </div>
          <div class="mt-auto">
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <svg class="w-5 h-5 mr-2 text-purple-600 dark:text-purple-400" 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="M5 13l4 4L19 7" />
              </svg>
              <span class="font-medium text-purple-600 dark:text-purple-400">Cybersecurity</span> &middot; <time datetime="2023-10-25">Oct 25, 2023</time>
            </div>
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Author Avatar" class="w-9 h-9 rounded-full object-cover mr-3 border-2 border-purple-300 dark:border-purple-600" loading="lazy">
                <span class="text-sm font-medium text-gray-600 dark:text-gray-300">By Jane Smith</span>
              </div>
              <button class="px-5 py-2 bg-purple-600 text-white rounded-full font-semibold text-base hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 transition-colors duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
                Learn More
              </button>
            </div>
          </div>
        </div>
      </article>

      <!-- Product Card 3 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border border-purple-100 dark:border-gray-700 flex flex-col">
        <a href="#" class="block relative group overflow-hidden">
          <img src="https://picsum.photos/600/400?random=3" alt="Enterprise AI Solutions" class="w-full h-56 object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500 ease-in-out" loading="lazy">
          <div class="absolute inset-0 bg-gradient-to-t from-purple-800 to-transparent opacity-0 group-hover:opacity-75 transition-opacity duration-300 flex items-end p-4">
            <p class="text-white font-semibold text-lg">Get Started</p>
          </div>
        </a>
        <div class="p-6 flex-grow flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold text-purple-900 dark:text-purple-300 mb-3">
              <a href="#" class="hover:text-purple-700 dark:hover:text-purple-400 transition-colors duration-200">Enterprise AI Automation</a>
            </h3>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
              Revolutionize workflows and boost efficiency with intelligent automation powered by our bespoke AI models.
            </p>
          </div>
          <div class="mt-auto">
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <svg class="w-5 h-5 mr-2 text-purple-600 dark:text-purple-400" 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 9v6m-3-4h6m4 0a10 10 0 11-20 0 10 10 0 0120 0z" />
              </svg>
              <span class="font-medium text-purple-600 dark:text-purple-400">Artificial Intelligence</span> &middot; <time datetime="2023-10-24">Oct 24, 2023</time>
            </div>
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/29.jpg" alt="Author Avatar" class="w-9 h-9 rounded-full object-cover mr-3 border-2 border-purple-300 dark:border-purple-600" loading="lazy">
                <span class="text-sm font-medium text-gray-600 dark:text-gray-300">By David Lee</span>
              </div>
              <button class="px-5 py-2 bg-purple-600 text-white rounded-full font-semibold text-base hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 transition-colors duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
                Learn More
              </button>
            </div>
          </div>
        </div>
      </article>

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