3D_Vibrant_Columns_Component

<section class="py-16 px-4 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-teal-950 sm:px-6 lg:px-8 overflow-hidden">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-600 dark:from-purple-400 dark:to-pink-400 mb-16 relative z-10 animate-fade-in">
      Unleash Your Knowledge
      <span class="block text-lg mt-2 text-purple-700 dark:text-purple-300 font-medium">Dive Deep into Our Comprehensive Documentation</span>
    </h2>

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

      <!-- Column 1: Getting Started -->
      <article class="relative group perspective-1000">
        <div class="relative transform-style-preserve-3d transition-transform duration-700 group-hover:rotateY-10 group-hover:scale-105 active:rotateY-20 active:scale-110 shadow-2xl rounded-3xl overflow-hidden bg-white dark:bg-gray-800 p-8 pt-20 border-t-8 border-purple-500 dark:border-purple-600 animate-slide-up">
          <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-700 opacity-20 dark:opacity-30 blur-xl z-0"></div>
          <div class="absolute -top-6 left-1/2 -ml-12 w-24 h-24 bg-purple-600 dark:bg-purple-500 rounded-full flex items-center justify-center shadow-lg transform translateZ-40 group-hover:scale-110 transition-transform duration-300">
            <svg class="w-12 h-12 text-white" 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 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m1.636 6.364l.707-.707M6 21v-1m-4.636-1.636l.707-.707M12 10.5V19m-7.954-1-1.603-2.264M15.954 18l1.603-2.264M5.462 14.5L7.72 16.634C7.882 16.71 8 16.75 8 17s-.118.29-.28.366L5.462 19.5"></path>
            </svg>
          </div>
          <div class="relative z-10">
            <h3 class="text-3xl font-bold text-gray-900 dark:text-white mb-4 transform translateZ-20">Getting Started</h3>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6 transform translateZ-10">Kickstart your journey with our easy-to-follow setup guides and basic concepts. Perfect for beginners!</p>
            <ul class="space-y-3 mb-8">
              <li><a href="#" class="flex items-center text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 transition duration-200 transform translateZ-5 hover:translate-x-1">
                <svg class="w-5 h-5 mr-2" 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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
                Installation Guide
              </a></li>
              <li><a href="#" class="flex items-center text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 transition duration-200 transform translateZ-5 hover:translate-x-1">
                <svg class="w-5 h-5 mr-2" 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="M8 14v3m4-3v3m4-3v3M3 21h18M3 10V7a2 2 0 012-2h14a2 2 0 012 2v3m-2 10h.01M5 10h.01"></path></svg>
                Core Concepts
              </a></li>
            </ul>
            <a href="#" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-semibold rounded-full shadow-lg hover:from-purple-700 hover:to-pink-700 transform translateZ-30 transition-all duration-300 group-hover:scale-105 active:scale-95">
              Explore Guides
              <svg class="ml-2 w-5 h-5" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
            </a>
          </div>
        </div>
      </article>

      <!-- Column 2: Advanced Topics -->
      <article class="relative group perspective-1000">
        <div class="relative transform-style-preserve-3d transition-transform duration-700 group-hover:rotateY-10 group-hover:scale-105 active:rotateY-20 active:scale-110 shadow-2xl rounded-3xl overflow-hidden bg-white dark:bg-gray-800 p-8 pt-20 border-t-8 border-teal-500 dark:border-teal-600 animate-slide-up animation-delay-200">
          <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-teal-500 to-blue-500 dark:from-teal-700 dark:to-blue-700 opacity-20 dark:opacity-30 blur-xl z-0"></div>
          <div class="absolute -top-6 left-1/2 -ml-12 w-24 h-24 bg-teal-600 dark:bg-teal-500 rounded-full flex items-center justify-center shadow-lg transform translateZ-40 group-hover:scale-110 transition-transform duration-300">
            <svg class="w-12 h-12 text-white" 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 20l-1 1h8l-1-1-1.25-3M15 10V7a3 3 0 00-3-3m-4 10H8m4 0h4m-4 0c1.333-1 2.5-4 2.5-4S13 9 12 8s-2.5 4-2.5 4S9 9 10 8c1.333-1 2.5-4 2.5-4z"></path>
            </svg>
          </div>
          <div class="relative z-10">
            <h3 class="text-3xl font-bold text-gray-900 dark:text-white mb-4 transform translateZ-20">Advanced Topics</h3>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6 transform translateZ-10">Deep dive into complex features, optimization, and specific use cases for experienced users.</p>
            <ul class="space-y-3 mb-8">
              <li><a href="#" class="flex items-center text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-200 transition duration-200 transform translateZ-5 hover:translate-x-1">
                <svg class="w-5 h-5 mr-2" 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 12l2 2 4-4M7.835 4.697A3.42 3.42 0 007 9.111v3.089L8.104 21H15.896L17 12.2V9.111a3.42 3.42 0 00-.835-4.414C14.456 2.012 11.917 1 9.5 1S4.544 2.012 2.835 4.697z"></path></svg>
                API Reference
              </a></li>
              <li><a href="#" class="flex items-center text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-200 transition duration-200 transform translateZ-5 hover:translate-x-1">
                <svg class="w-5 h-5 mr-2" 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="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
                Performance Optimization
              </a></li>
            </ul>
            <a href="#" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-teal-600 to-blue-600 text-white font-semibold rounded-full shadow-lg hover:from-teal-700 hover:to-blue-700 transform translateZ-30 transition-all duration-300 group-hover:scale-105 active:scale-95">
              View Advanced Docs
              <svg class="ml-2 w-5 h-5" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
            </a>
          </div>
        </div>
      </article>

      <!-- Column 3: Community & Support -->
      <article class="relative group perspective-1000">
        <div class="relative transform-style-preserve-3d transition-transform duration-700 group-hover:rotateY-10 group-hover:scale-105 active:rotateY-20 active:scale-110 shadow-2xl rounded-3xl overflow-hidden bg-white dark:bg-gray-800 p-8 pt-20 border-t-8 border-orange-500 dark:border-orange-600 animate-slide-up animation-delay-400">
          <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-orange-500 to-red-500 dark:from-orange-700 dark:to-red-700 opacity-20 dark:opacity-30 blur-xl z-0"></div>
          <div class="absolute -top-6 left-1/2 -ml-12 w-24 h-24 bg-orange-600 dark:bg-orange-500 rounded-full flex items-center justify-center shadow-lg transform translateZ-40 group-hover:scale-110 transition-transform duration-300">
            <svg class="w-12 h-12 text-white" 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="M17 20h2a2 2 0 002-2V9.667a1 1 0 00-.5-.866l-6-3.75a2 2 0 00-2 0l-6 3.75a1 1 0 00-.5.866V18a2 2 0 002 2h2m0 0v-2a3 3 0 013-3h2a3 3 0 013 3v2m-6 0h6m-7 2l-1 1H4a2 2 0 01-2-2v-4a2 2 0 012-2h16c1.105 0 2 .895 2 2v4a2 2 0 01-2 2h-1l-1-1m-10-8h.01M16 12h.01"></path>
            </svg>
          </div>
          <div class="relative z-10">
            <h3 class="text-3xl font-bold text-gray-900 dark:text-white mb-4 transform translateZ-20">Community & Support</h3>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6 transform translateZ-10">Connect with fellow users, get help from experts, and contribute to the knowledge base.</p>
            <ul class="space-y-3 mb-8">
              <li><a href="#" class="flex items-center text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-200 transition duration-200 transform translateZ-5 hover:translate-x-1">
                <svg class="w-5 h-5 mr-2" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
                Forums & Discord
              </a></li>
              <li><a href="#" class="flex items-center text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-200 transition duration-200 transform translateZ-5 hover:translate-x-1">
                <svg class="w-5 h-5 mr-2" 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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
                Report an Issue
              </a></li>
            </ul>
            <a href="#" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-orange-600 to-red-600 text-white font-semibold rounded-full shadow-lg hover:from-orange-700 hover:to-red-700 transform translateZ-30 transition-all duration-300 group-hover:scale-105 active:scale-95">
              Join the Community
              <svg class="ml-2 w-5 h-5" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
            </a>
          </div>
        </div>
      </article>

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

<style>
/* Define perspective for 3D effect */
.perspective-1000 {
  perspective: 1000px;
}

/* Common 3D transforms */
.transform-style-preserve-3d {
  transform-style: preserve-3d;
}

.rotateY-10 {
  transform: rotateY(10deg);
}

.rotateY-20 {
  transform: rotateY(20deg);
}

/* z-axis translations for layering */
.translateZ-40 {
  transform: translateZ(40px);
}
.translateZ-30 {
  transform: translateZ(30px);
}
.translateZ-20 {
  transform: translateZ(20px);
}
.translateZ-10 {
  transform: translateZ(10px);
}
.translateZ-5 {
  transform: translateZ(5px);
}

/* Keyframes for animations */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(50px) rotateX(-5deg); }
  to { opacity: 1; transform: translateY(0) rotateX(0deg); }
}

.animate-fade-in {
  animation: fade-in 1s ease-out forwards;
}

.animate-slide-up {
  animation: slide-up 0.7s ease-out forwards;
  opacity: 0;
}

.animation-delay-200 {
  animation-delay: 0.2s;
}

.animation-delay-400 {
  animation-delay: 0.4s;
}

/* Ensure animations are paused if prefers-reduced-motion is enabled */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .animate-slide-up,
  .animation-delay-200,
  .animation-delay-400,
  .group-hover\:rotateY-10,
  .group-hover\:scale-105,
  .active\:rotateY-20,
  .active\:scale-110,
  .group-hover\:scale-110,
  .group-hover\:scale-105,
  .active\:scale-95
  {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}
</style>