Skeuomorphic_Analogous_Simple_Business_Component

<div class="p-4 sm:p-8 md:p-12 bg-gradient-to-br from-amber-50 to-orange-100 dark:from-stone-900 dark:to-zinc-800 font-sans">
  <div class="max-w-4xl mx-auto bg-gradient-to-br from-amber-200 to-orange-300 dark:from-zinc-700 dark:to-stone-700 p-6 rounded-3xl shadow-xl dark:shadow-2xl-dark transform transition-transform duration-300 hover:scale-[1.01] border-t border-l border-white/50 dark:border-stone-600/50 border-r border-b border-orange-400/50 dark:border-zinc-800/50 relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-radial from-transparent via-transparent to-amber-200/30 dark:to-zinc-700/30 pointer-events-none rounded-3xl"></div>
    <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-orange-400/20 dark:bg-zinc-600/20 rounded-full blur-xl pointer-events-none"></div>
    <div class="absolute -top-10 -left-10 w-40 h-40 bg-orange-300/20 dark:bg-zinc-500/20 rounded-full blur-xl pointer-events-none"></div>

    <div class="relative z-10 flex flex-col items-center text-center">
      <h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-orange-800 dark:text-zinc-200 mb-4 tracking-tight drop-shadow-md dark:drop-shadow-sm-dark">
        <span class="block">Our Business Solutions</span>
        <span class="text-orange-600 dark:text-zinc-400">for Your Success</span>
      </h2>
      <p class="text-base sm:text-lg text-orange-700 dark:text-zinc-300 mb-8 max-w-2xl leading-relaxed">
        We combine innovative strategies with a deep understanding of your needs to deliver unparalleled results.
        Experience the difference of a partnership built on trust and excellence.
      </p>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 w-full">

        <div class="p-6 rounded-2xl bg-gradient-to-br from-amber-300 to-orange-200 dark:from-zinc-600 dark:to-stone-600 shadow-lg dark:shadow-xl-dark transform transition-transform duration-300 hover:scale-[1.02] active:scale-95 border-t border-l border-amber-50/70 dark:border-zinc-500/70 border-r border-b border-orange-400/70 dark:border-stone-700/70 group relative overflow-hidden">
          <div class="absolute inset-0 bg-dots opacity-10 dark:opacity-5 pointer-events-none"></div>
          <svg class="w-12 h-12 text-orange-700 dark:text-zinc-300 mb-4 mx-auto block drop-shadow-sm dark:drop-shadow-xs-dark group-hover:text-amber-800 dark:group-hover:text-zinc-100 transition-colors duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L12 20.25M12 20.25L14.25 17M12 20.25V4M5.75 12H18.25"></path></svg>

          <h3 class="text-xl font-semibold text-orange-900 dark:text-zinc-100 mb-2 drop-shadow-sm dark:drop-shadow-xs-dark">Strategic Vision</h3>
          <p class="text-orange-800 dark:text-zinc-200 text-sm leading-relaxed">
            We help you define clear, actionable strategies to navigate the future and achieve long-term growth.
          </p>
        </div>

        <div class="p-6 rounded-2xl bg-gradient-to-br from-amber-300 to-orange-200 dark:from-zinc-600 dark:to-stone-600 shadow-lg dark:shadow-xl-dark transform transition-transform duration-300 hover:scale-[1.02] active:scale-95 border-t border-l border-amber-50/70 dark:border-zinc-500/70 border-r border-b border-orange-400/70 dark:border-stone-700/70 group relative overflow-hidden">
            <div class="absolute inset-0 bg-dots opacity-10 dark:opacity-5 pointer-events-none"></div>
            <svg class="w-12 h-12 text-orange-700 dark:text-zinc-300 mb-4 mx-auto block drop-shadow-sm dark:drop-shadow-xs-dark group-hover:text-amber-800 dark:group-hover:text-zinc-100 transition-colors duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.25 10.5h19.5m-19.5 0a2.25 2.25 0 01-2.25-2.25V6.75M21.75 10.5a2.25 2.25 0 002.25-2.25V6.75m0 0a2.25 2.25 0 00-2.25-2.25H2.25A2.25 2.25 0 000 6.75v10.5a2.25 2.25 0 002.25 2.25h19.5a2.25 2.25 0 002.25-2.25V10.5m-19.5 0a2.25 2.25 0 00-2.25 2.25V17.25m4.5-6.75a.75.75 0 01.75-.75h.008v.008h-.008a.75.75 0 01-.75-.75V10.5zM12 17.25h.008v.008H12V17.25z"></path></svg>

            <h3 class="text-xl font-semibold text-orange-900 dark:text-zinc-100 mb-2 drop-shadow-sm dark:drop-shadow-xs-dark">Innovative Solutions</h3>
            <p class="text-orange-800 dark:text-zinc-200 text-sm leading-relaxed">
              We craft custom, cutting-edge solutions tailored to overcome your unique business challenges.
            </p>
        </div>

        <div class="md:col-span-2 p-6 rounded-2xl bg-gradient-to-br from-amber-300 to-orange-200 dark:from-zinc-600 dark:to-stone-600 shadow-lg dark:shadow-xl-dark transform transition-transform duration-300 hover:scale-[1.02] active:scale-95 border-t border-l border-amber-50/70 dark:border-zinc-500/70 border-r border-b border-orange-400/70 dark:border-stone-700/70 group relative overflow-hidden">
            <div class="absolute inset-0 bg-dots opacity-10 dark:opacity-5 pointer-events-none"></div>
            <svg class="w-12 h-12 text-orange-700 dark:text-zinc-300 mb-4 mx-auto block drop-shadow-sm dark:drop-shadow-xs-dark group-hover:text-amber-800 dark:group-hover:text-zinc-100 transition-colors duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0zM12 10.5a.75.75 0 00-.75.75v3.75a.75.75 0 00.75.75h.008v.008h-.008v-.008z"></path></svg>

            <h3 class="text-xl font-semibold text-orange-900 dark:text-zinc-100 mb-2 drop-shadow-sm dark:drop-shadow-xs-dark">Guaranteed Results</h3>
            <p class="text-orange-800 dark:text-zinc-200 text-sm leading-relaxed">
              Our commitment to excellence translates into measurable outcomes, ensuring your investment yields significant returns.
            </p>
        </div>

      </div>

      <a href="#" class="mt-10 px-8 py-3 bg-orange-500 dark:bg-stone-500 text-white dark:text-zinc-100 font-semibold rounded-full shadow-lg hover:shadow-xl dark:hover:shadow-2xl-dark transform transition-transform duration-300 hover:scale-105 active:scale-95 text-lg
        border-t border-l border-orange-200 dark:border-stone-400
        border-r border-b border-orange-600 dark:border-zinc-600
        relative overflow-hidden group">
        <span class="relative z-10">Learn More</span>
        <span class="absolute inset-0 bg-orange-600/20 dark:bg-zinc-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-full"></span>
      </a>
    </div>
  </div>

  <style>
    .shadow-2xl-dark {
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
    }
    .drop-shadow-sm-dark {
      filter: drop-shadow(0 1px 1px rgba(0,0,0,0.7));
    }
    .drop-shadow-xs-dark {
      filter: drop-shadow(0 0.5px 0.5px rgba(0,0,0,0.6));
    }
    .bg-dots {
      background-image: radial-gradient(circle, #fcd34d 1px, transparent 1px);
      background-size: 8px 8px;
      background-position: 0 0;
    }
    .dark .bg-dots {
      background-image: radial-gradient(circle, #71717a 1px, transparent 1px);
    }
    .bg-gradient-radial {
        background-image: radial-gradient(circle at center, var(--tw-gradient-stops));
    }
  </style>
</div>