ArtDeco_EarthTones_Cards_Technology_SaaS

<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-950 min-h-screen flex items-center justify-center font-serif">
  <div class="container mx-auto px-4 py-8 sm:py-12 md:py-16">
    <h2 class="text-center text-3xl sm:text-4xl md:text-5xl font-extrabold text-stone-800 dark:text-stone-100 mb-6 sm:mb-8 md:mb-12 tracking-wide">
      <span class="block">Our <span class="text-amber-700 dark:text-amber-500">SaaS</span> Offerings</span>
    </h2>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">

      <!-- Card 1: Core Analytics -->
      <div class="group bg-stone-50 dark:bg-stone-800 rounded-lg overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-amber-500/30 border-2 border-stone-200 dark:border-stone-700 relative">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-100/30 via-stone-100/30 to-zinc-100/30 dark:from-amber-900/20 dark:via-stone-900/20 dark:to-zinc-900/20 rounded-lg opacity-0 transition-opacity duration-300 group-hover:opacity-100" style="clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%);"></div>
        <div class="relative p-6 sm:p-8 z-10">
          <img class="w-16 h-16 mb-4 sm:mb-6 mx-auto" src="https://picsum.photos/id/25/64/64" alt="Analytics Icon">
          <h3 class="text-2xl sm:text-3xl font-bold text-amber-800 dark:text-amber-500 mb-3 text-center tracking-wider">Core Analytics</h3>
          <p class="text-stone-700 dark:text-stone-300 text-base sm:text-lg leading-relaxed mb-6 text-center">
            Gain profound insights with our advanced, real-time data analytics. Understand patterns, predict trends.
          </p>
          <ul class="space-y-3 mb-6">
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
              Intuitive Dashboards
            </li>
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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 Processing
            </li>
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
              Customizable Reports
            </li>
          </ul>
          <button class="block w-full py-3 px-6 rounded-md bg-amber-700 text-stone-50 font-semibold text-lg uppercase tracking-wider shadow-md hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:bg-amber-600 dark:hover:bg-amber-700 dark:focus:ring-amber-400 transition-colors duration-300">
            Learn More
          </button>
        </div>
      </div>

      <!-- Card 2: Secure Cloud Storage -->
      <div class="group bg-stone-50 dark:bg-stone-800 rounded-lg overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-amber-500/30 border-2 border-stone-200 dark:border-stone-700 relative">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-100/30 via-stone-100/30 to-zinc-100/30 dark:from-amber-900/20 dark:via-stone-900/20 dark:to-zinc-900/20 rounded-lg opacity-0 transition-opacity duration-300 group-hover:opacity-100" style="clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%);"></div>
        <div class="relative p-6 sm:p-8 z-10">
          <img class="w-16 h-16 mb-4 sm:mb-6 mx-auto" src="https://picsum.photos/id/29/64/64" alt="Storage Icon">
          <h3 class="text-2xl sm:text-3xl font-bold text-amber-800 dark:text-amber-500 mb-3 text-center tracking-wider">Secure Cloud Storage</h3>
          <p class="text-stone-700 dark:text-stone-300 text-base sm:text-lg leading-relaxed mb-6 text-center">
            Keep your data safe with our robust, encrypted cloud storage solutions.
          </p>
          <ul class="space-y-3 mb-6">
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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 text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
              Automated Backups
            </li>
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
              Access Controls
            </li>
          </ul>
          <button class="block w-full py-3 px-6 rounded-md bg-amber-700 text-stone-50 font-semibold text-lg uppercase tracking-wider shadow-md hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:bg-amber-600 dark:hover:bg-amber-700 dark:focus:ring-amber-400 transition-colors duration-300">
            Explore Features
          </button>
        </div>
      </div>

      <!-- Card 3: Collaborative Workspace -->
      <div class="group bg-stone-50 dark:bg-stone-800 rounded-lg overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-amber-500/30 border-2 border-stone-200 dark:border-stone-700 relative">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-100/30 via-stone-100/30 to-zinc-100/30 dark:from-amber-900/20 dark:via-stone-900/20 dark:to-zinc-900/20 rounded-lg opacity-0 transition-opacity duration-300 group-hover:opacity-100" style="clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%);"></div>
        <div class="relative p-6 sm:p-8 z-10">
          <img class="w-16 h-16 mb-4 sm:mb-6 mx-auto" src="https://picsum.photos/id/35/64/64" alt="Collaboration Icon">
          <h3 class="text-2xl sm:text-3xl font-bold text-amber-800 dark:text-amber-500 mb-3 text-center tracking-wider">Collaborate Seamlessly</h3>
          <p class="text-stone-700 dark:text-stone-300 text-base sm:text-lg leading-relaxed mb-6 text-center">
            Empower your team with a shared, dynamic workspace for optimal productivity.
          </p>
          <ul class="space-y-3 mb-6">
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
              Live Document Editing
            </li>
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
              Integrated Communication
            </li>
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
              Task Management
            </li>
          </ul>
          <button class="block w-full py-3 px-6 rounded-md bg-amber-700 text-stone-50 font-semibold text-lg uppercase tracking-wider shadow-md hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:bg-amber-600 dark:hover:bg-amber-700 dark:focus:ring-amber-400 transition-colors duration-300">
            Start Collaborating
          </button>
        </div>
      </div>

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