Luxury_Sepia_SaaS_Cards_Component

<div class="font-sans bg-amber-50 text-stone-800 dark:bg-stone-900 dark:text-stone-100 py-16 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <div class="text-center mb-16">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-stone-900 dark:text-stone-50 mb-6 leading-tight tracking-tight">
        Elevate Your Platform
      </h2>
      <p class="text-lg sm:text-xl text-stone-700 dark:text-stone-300 max-w-3xl mx-auto">
        Discover how our cutting-edge solutions empower businesses to achieve unprecedented efficiency and growth.
      </p>
    </div>

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

      <!-- Card 1: Advanced Analytics -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col group">
        <div class="relative w-full h-56 overflow-hidden">
          <img src="https://picsum.photos/id/1015/600/400" alt="Advanced Analytics" class="absolute inset-0 w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500 rounded-t-3xl">
          <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent rounded-t-3xl"></div>
          <div class="absolute bottom-0 left-0 p-6">
            <h3 class="text-white text-3xl font-bold mb-2">Advanced Analytics</h3>
            <span class="text-amber-300 text-sm font-semibold uppercase tracking-wider">Data Intelligence</span>
          </div>
        </div>
        <div class="p-8 flex-grow flex flex-col">
          <p class="text-stone-600 dark:text-stone-300 leading-relaxed mb-6 flex-grow">
            Unlock profound insights with our sophisticated analytics suite. Transform raw data into actionable strategies that drive business growth and optimize performance.
          </p>
          <ul class="space-y-3 mb-6 text-stone-700 dark:text-stone-200">
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Real-time data processing</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Predictive modeling tools</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Customizable dashboards</li>
          </ul>
          <a href="#" class="mt-auto inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-300 self-start">
            Learn More
            <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><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>
          </a>
        </div>
      </div>

      <!-- Card 2: Secure Cloud Infrastructure -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col group">
        <div class="relative w-full h-56 overflow-hidden">
          <img src="https://picsum.photos/id/1041/600/400" alt="Secure Cloud Infrastructure" class="absolute inset-0 w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500 rounded-t-3xl">
          <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent rounded-t-3xl"></div>
          <div class="absolute bottom-0 left-0 p-6">
            <h3 class="text-white text-3xl font-bold mb-2">Secure Cloud</h3>
            <span class="text-amber-300 text-sm font-semibold uppercase tracking-wider">Infrastructure</span>
          </div>
        </div>
        <div class="p-8 flex-grow flex flex-col">
          <p class="text-stone-600 dark:text-stone-300 leading-relaxed mb-6 flex-grow">
            Protect your valuable data with our robust and secure cloud infrastructure. Enjoy peace of mind knowing your operations are fortified against modern threats.
          </p>
          <ul class="space-y-3 mb-6 text-stone-700 dark:text-stone-200">
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>End-to-end encryption</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Compliance certifications</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>24/7 Threat monitoring</li>
          </ul>
          <a href="#" class="mt-auto inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-300 self-start">
            Explore Security
            <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><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>
          </a>
        </div>
      </div>

      <!-- Card 3: Seamless Integration -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col group">
        <div class="relative w-full h-56 overflow-hidden">
          <img src="https://picsum.photos/id/1043/600/400" alt="Seamless Integration" class="absolute inset-0 w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500 rounded-t-3xl">
          <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent rounded-t-3xl"></div>
          <div class="absolute bottom-0 left-0 p-6">
            <h3 class="text-white text-3xl font-bold mb-2">Seamless Integration</h3>
            <span class="text-amber-300 text-sm font-semibold uppercase tracking-wider">Ecosystem Harmony</span>
          </div>
        </div>
        <div class="p-8 flex-grow flex flex-col">
          <p class="text-stone-600 dark:text-stone-300 leading-relaxed mb-6 flex-grow">
            Connect effortlessly with your existing tools and workflows. Our platform is designed for maximum compatibility, ensuring a smooth transition and enhanced productivity.
          </p>
          <ul class="space-y-3 mb-6 text-stone-700 dark:text-stone-200">
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>API-first architecture</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Pre-built connectors</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Developer-friendly documentation</li>
          </ul>
          <a href="#" class="mt-auto inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-300 self-start">
            View Integrations
            <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><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>
          </a>
        </div>
      </div>

    </div>

    <div class="mt-16 text-center">
      <h3 class="text-3xl font-semibold text-stone-900 dark:text-stone-50 mb-6">What Our Clients Say</h3>
      <div class="max-w-xl mx-auto bg-white dark:bg-stone-800 rounded-3xl shadow-xl p-8 flex flex-col md:flex-row items-center space-y-6 md:space-y-0 md:space-x-8">
        <div class="flex-shrink-0">
          <img class="h-24 w-24 rounded-full object-cover ring-4 ring-amber-500 dark:ring-amber-400" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client Avatar">
        </div>
        <div class="text-center md:text-left">
          <p class="text-lg text-stone-700 dark:text-stone-200 mb-4 italic leading-relaxed">
            "This platform has transformed our data analysis process. The insights are incredibly precise, and the ease of integration is unmatched."
          </p>
          <p class="text-stone-900 dark:text-stone-50 font-bold text-xl">Jane Doe</p>
          <p class="text-amber-700 dark:text-amber-400 text-sm font-medium">CEO, Global Innovations</p>
        </div>
      </div>
    </div>

  </div>
</div>