3D_Business_Buttons_Component

<div class="p-8 bg-gradient-to-br from-orange-50 to-red-50 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="container mx-auto px-4 py-8 max-w-4xl">
    <h2 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-center mb-12 bg-clip-text text-transparent bg-gradient-to-r from-orange-600 to-red-800 dark:from-orange-400 dark:to-red-600 drop-shadow-md">
      Elevate Your Business
    </h2>

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

      <!-- Button 1: Learn More -->
      <a href="#" class="group block w-full">
        <div class="relative p-1 rounded-2xl shadow-xl transition-all duration-300 border border-orange-100 dark:border-gray-700
                    hover:scale-[1.02] hover:shadow-2xl active:scale-[0.98]
                    bg-gradient-to-br from-orange-400 to-red-600 dark:from-orange-600 dark:to-red-800
                    transform -translate-y-1 group-hover:-translate-y-2 group-active:-translate-y-0.5">
          <div class="absolute inset-0 bg-transparent rounded-2xl group-hover:bg-black group-hover:bg-opacity-5 transition-all duration-300"></div>
          <div class="relative z-10 px-8 py-10 text-center rounded-xl bg-orange-50 dark:bg-gray-800
                      transform translate-z-10 group-hover:bg-orange-100 dark:group-hover:bg-gray-900
                      transition-all duration-300 overflow-hidden
                      after:content-[''] after:absolute after:inset-0 after:rounded-xl after:bg-gradient-to-br
                      after:from-orange-200 after:to-red-300 after:dark:from-gray-700 after:dark:to-gray-900
                      after:opacity-0 group-hover:after:opacity-100 group-hover:after:brightness-125 group-active:after:opacity-75
                      after:transition-all after:duration-300 after:mix-blend-overlay">
            <p class="text-5xl mb-4 text-orange-600 dark:text-orange-400 group-hover:text-red-700 dark:group-hover:text-red-500 transition-colors duration-300">
              <span class="block transform group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300">&#x1F4A1;</span>
            </p>
            <h3 class="text-2xl font-bold text-red-800 dark:text-red-400 mb-2 group-hover:text-orange-700 dark:group-hover:text-orange-300 transition-colors duration-300">
              Learn More
            </h3>
            <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
              Dive deep into our offerings and discover how we can help your business thrive.
            </p>
            <span class="mt-6 inline-flex px-6 py-3 rounded-full bg-orange-600 text-white font-semibold shadow-md
                         group-hover:bg-red-700 group-active:bg-orange-700 transition-all duration-300
                         transform group-hover:scale-105 group-active:scale-95
                         shadow-[0_4px_15px_rgba(234,88,12,0.4)] group-hover:shadow-[0_6px_20px_rgba(220,38,38,0.5)]">
              Explore Now
            </span>
          </div>
        </div>
      </a>

      <!-- Button 2: Get Started -->
      <a href="#" class="group block w-full">
        <div class="relative p-1 rounded-2xl shadow-xl transition-all duration-300 border border-orange-100 dark:border-gray-700
                    hover:scale-[1.02] hover:shadow-2xl active:scale-[0.98]
                    bg-gradient-to-br from-yellow-400 to-orange-600 dark:from-yellow-600 dark:to-orange-800
                    transform -translate-y-1 group-hover:-translate-y-2 group-active:-translate-y-0.5">
          <div class="absolute inset-0 bg-transparent rounded-2xl group-hover:bg-black group-hover:bg-opacity-5 transition-all duration-300"></div>
          <div class="relative z-10 px-8 py-10 text-center rounded-xl bg-yellow-50 dark:bg-gray-800
                      transform translate-z-10 group-hover:bg-yellow-100 dark:group-hover:bg-gray-900
                      transition-all duration-300 overflow-hidden
                      after:content-[''] after:absolute after:inset-0 after:rounded-xl after:bg-gradient-to-br
                      after:from-yellow-200 after:to-orange-300 after:dark:from-gray-700 after:dark:to-gray-900
                      after:opacity-0 group-hover:after:opacity-100 group-hover:after:brightness-125 group-active:after:opacity-75
                      after:transition-all after:duration-300 after:mix-blend-overlay">
            <p class="text-5xl mb-4 text-orange-600 dark:text-orange-400 group-hover:text-red-700 dark:group-hover:text-red-500 transition-colors duration-300">
              <span class="block transform group-hover:scale-110 group-hover:-rotate-6 transition-transform duration-300">&#x1F680;</span>
            </p>
            <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-400 mb-2 group-hover:text-red-700 dark:group-hover:text-red-300 transition-colors duration-300">
              Get Started
            </h3>
            <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
              Begin your journey with us today. It's quick, easy, and rewarding.
            </p>
            <span class="mt-6 inline-flex px-6 py-3 rounded-full bg-orange-600 text-white font-semibold shadow-md
                         group-hover:bg-red-700 group-active:bg-orange-700 transition-all duration-300
                         transform group-hover:scale-105 group-active:scale-95
                         shadow-[0_4px_15px_rgba(245,158,11,0.4)] group-hover:shadow-[0_6px_20px_rgba(220,38,38,0.5)]">
              Sign Up Now
            </span>
          </div>
        </div>
      </a>

      <!-- Button 3: Contact Us -->
      <a href="#" class="group block w-full">
        <div class="relative p-1 rounded-2xl shadow-xl transition-all duration-300 border border-orange-100 dark:border-gray-700
                    hover:scale-[1.02] hover:shadow-2xl active:scale-[0.98]
                    bg-gradient-to-br from-red-400 to-yellow-600 dark:from-red-600 dark:to-yellow-800
                    transform -translate-y-1 group-hover:-translate-y-2 group-active:-translate-y-0.5">
          <div class="absolute inset-0 bg-transparent rounded-2xl group-hover:bg-black group-hover:bg-opacity-5 transition-all duration-300"></div>
          <div class="relative z-10 px-8 py-10 text-center rounded-xl bg-red-50 dark:bg-gray-800
                      transform translate-z-10 group-hover:bg-red-100 dark:group-hover:bg-gray-900
                      transition-all duration-300 overflow-hidden
                      after:content-[''] after:absolute after:inset-0 after:rounded-xl after:bg-gradient-to-br
                      after:from-red-200 after:to-yellow-300 after:dark:from-gray-700 after:dark:to-gray-900
                      after:opacity-0 group-hover:after:opacity-100 group-hover:after:brightness-125 group-active:after:opacity-75
                      after:transition-all after:duration-300 after:mix-blend-overlay">
            <p class="text-5xl mb-4 text-red-600 dark:text-red-400 group-hover:text-orange-700 dark:group-hover:text-orange-500 transition-colors duration-300">
              <span class="block transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300">&#x1F4DE;</span>
            </p>
            <h3 class="text-2xl font-bold text-red-800 dark:text-red-400 mb-2 group-hover:text-orange-700 dark:group-hover:text-orange-300 transition-colors duration-300">
              Contact Us
            </h3>
            <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
              Have questions? Reach out to our team. We're here to help you.
            </p>
            <span class="mt-6 inline-flex px-6 py-3 rounded-full bg-orange-600 text-white font-semibold shadow-md
                         group-hover:bg-red-700 group-active:bg-orange-700 transition-all duration-300
                         transform group-hover:scale-105 group-active:scale-95
                         shadow-[0_4px_15px_rgba(239,68,68,0.4)] group-hover:shadow-[0_6px_20px_rgba(220,38,38,0.5)]">
              Get in Touch
            </span>
          </div>
        </div>
      </a>

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