Memphis_Muted_Consulting_Content_Display

<div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-8 md:p-12 lg:p-16 relative overflow-hidden">

  <!-- Memphis-inspired background shapes -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none opacity-20 dark:opacity-10">
    <div class="absolute top-1/4 left-1/4 w-48 h-48 sm:w-64 sm:h-64 bg-fuchsia-300 dark:bg-fuchsia-700 transform rotate-45 rounded-xl"></div>
    <div class="absolute bottom-1/3 right-1/4 w-32 h-32 sm:w-48 sm:h-48 bg-teal-300 dark:bg-teal-700 transform -rotate-12 rounded-full"></div>
    <div class="absolute top-1/2 left-0 w-24 h-24 sm:w-32 sm:h-32 bg-yellow-300 dark:bg-yellow-700 transform rotate-70 rounded-lg"></div>
    <div class="absolute bottom-0 right-0 w-56 h-56 sm:w-72 sm:h-72 bg-purple-300 dark:bg-purple-700 transform -skew-x-12 rounded-2xl"></div>
  </div>

  <div class="max-w-7xl mx-auto relative z-10">
    <header class="text-center mb-12 lg:mb-16">
      <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold leading-tight tracking-tight mb-4 text-gray-900 dark:text-gray-50">
        <span class="block">Strategic Consulting</span>
        <span class="block text-teal-600 dark:text-teal-400">for Growth</span>
      </h1>
      <p class="text-lg sm:text-xl md:text-2xl font-medium text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
        Empowering businesses with tailored insights and actionable strategies to navigate complex challenges and achieve sustainable success.
      </p>
    </header>

    <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12 lg:mb-16">

      <!-- Service Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out border-4 border-fuchsia-300 dark:border-fuchsia-700 overflow-hidden">
        <img src="https://picsum.photos/id/157/600/400" alt="Strategy Development" class="w-full h-48 object-cover rounded-t-2xl">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-3 text-teal-700 dark:text-teal-300">Strategy Development</h3>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Crafting robust strategic roadmaps for market leadership and competitive advantage.</p>
          <ul class="list-none space-y-2 text-gray-600 dark:text-gray-400 mb-6">
            <li class="flex items-center"><svg class="w-5 h-5 text-fuchsia-500 dark:text-fuchsia-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>Market Entry Analysis</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-fuchsia-500 dark:text-fuchsia-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>Growth Planning</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-fuchsia-500 dark:text-fuchsia-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>Competitive Analysis</li>
          </ul>
          <a href="#" class="inline-block px-6 py-3 bg-fuchsia-400 dark:bg-fuchsia-600 text-white font-semibold rounded-full shadow-md hover:bg-fuchsia-500 dark:hover:bg-fuchsia-700 transition-colors duration-300 animate-pulse-md">Learn More</a>
        </div>
      </div>

      <!-- Service Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out border-4 border-teal-300 dark:border-teal-700 overflow-hidden">
        <img src="https://picsum.photos/id/160/600/400" alt="Operational Efficiency" class="w-full h-48 object-cover rounded-t-2xl">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-3 text-purple-700 dark:text-purple-300">Operational Efficiency</h3>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Optimizing internal processes for enhanced productivity and cost reduction.</p>
          <ul class="list-none space-y-2 text-gray-600 dark:text-gray-400 mb-6">
            <li class="flex items-center"><svg class="w-5 h-5 text-teal-500 dark:text-teal-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>Process Re-engineering</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-teal-500 dark:text-teal-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>Supply Chain Optimization</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-teal-500 dark:text-teal-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>Tech Integration</li>
          </ul>
          <a href="#" class="inline-block px-6 py-3 bg-teal-400 dark:bg-teal-600 text-white font-semibold rounded-full shadow-md hover:bg-teal-500 dark:hover:bg-teal-700 transition-colors duration-300">Explore Solutions</a>
        </div>
      </div>

      <!-- Service Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out border-4 border-yellow-300 dark:border-yellow-700 overflow-hidden">
        <img src="https://picsum.photos/id/156/600/400" alt="Digital Transformation" class="w-full h-48 object-cover rounded-t-2xl">
        <div class="p-6">
          <h3 class="text-2xl font-bold mb-3 text-fuchsia-700 dark:text-fuchsia-300">Digital Transformation</h3>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Guiding businesses through successful digital adoption and innovation.</p>
          <ul class="list-none space-y-2 text-gray-600 dark:text-gray-400 mb-6">
            <li class="flex items-center"><svg class="w-5 h-5 text-yellow-500 dark:text-yellow-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>Cloud Adoption</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-yellow-500 dark:text-yellow-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>AI & Automation</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-yellow-500 dark:text-yellow-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>Data Analytics</li>
          </ul>
          <a href="#" class="inline-block px-6 py-3 bg-yellow-400 dark:bg-yellow-600 text-white font-semibold rounded-full shadow-md hover:bg-yellow-500 dark:hover:bg-yellow-700 transition-colors duration-300 animate-pulse-md">Discover More</a>
        </div>
      </div>

    </section>

    <section class="bg-gray-100 dark:bg-gray-800 rounded-3xl p-8 sm:p-10 lg:p-12 mb-12 lg:mb-16 border-4 border-purple-300 dark:border-purple-700 relative overflow-hidden">
      <!-- Abstract Shape for Memphis feel -->
      <div class="absolute top-0 -left-8 w-32 h-32 bg-teal-200 dark:bg-teal-800 rounded-full opacity-40 mix-blend-multiply dark:mix-blend-screen transform -rotate-12"></div>
      <div class="absolute bottom-0 -right-8 w-48 h-48 bg-fuchsia-200 dark:bg-fuchsia-800 rounded-tl-full rounded-br-full opacity-40 mix-blend-multiply dark:mix-blend-screen transform rotate-34"></div>

      <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-8 text-gray-900 dark:text-gray-50">
        Why Partner With Us?
      </h2>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
        <div class="p-4">
          <div class="text-5xl mb-4 text-fuchsia-600 dark:text-fuchsia-400 drop-shadow-lg">✨</div>
          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">Tailored Solutions</h3>
          <p class="text-gray-600 dark:text-gray-300">Custom strategies designed to fit your unique business needs.</p>
        </div>
        <div class="p-4">
          <div class="text-5xl mb-4 text-teal-600 dark:text-teal-400 drop-shadow-lg">📈</div>
          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">Proven Results</h3>
          <p class="text-gray-600 dark:text-gray-300">A track record of driving significant and measurable growth for our clients.</p>
        </div>
        <div class="p-4">
          <div class="text-5xl mb-4 text-yellow-600 dark:text-yellow-400 drop-shadow-lg">🤝</div>
          <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-100">Expert Team</h3>
          <p class="text-gray-600 dark:text-gray-300">Access to seasoned consultants with diverse industry expertise.</p>
        </div>
      </div>
    </section>

    <section class="text-center bg-purple-100 dark:bg-purple-900 rounded-3xl p-8 sm:p-10 lg:p-12 border-4 border-fuchsia-300 dark:border-fuchsia-700 relative overflow-hidden">
      <!-- Abstract Shape for Memphis feel -->
      <div class="absolute top-1/2 left-0 w-24 h-24 bg-yellow-200 dark:bg-yellow-800 rounded-full opacity-40 mix-blend-multiply dark:mix-blend-screen transform translate-x-1/2 -translate-y-1/2"></div>
      <div class="absolute bottom-0 right-1/4 w-32 h-32 bg-teal-200 dark:bg-teal-800 transform skew-y-12 opacity-40 mix-blend-multiply dark:mix-blend-screen"></div>

      <h2 class="text-3xl sm:text-4xl font-extrabold mb-6 text-gray-900 dark:text-gray-50">
        Ready to Transform Your Business?
      </h2>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
        Let's discuss how our consulting services can propel your business forward.
      </p>
      <a href="#contact" class="inline-flex items-center px-8 py-4 bg-purple-500 dark:bg-purple-700 text-white text-xl font-bold rounded-full shadow-lg hover:bg-purple-600 dark:hover:bg-purple-800 transition-colors duration-300 transform hover:scale-105 active:scale-95 animate-jump-and-pulse shadow-purple-400/50 dark:shadow-purple-900/50">
        Get in Touch
        <svg class="ml-3 w-6 h-6" 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="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
      </a>
    </section>

  </div>
</div>

<!-- Custom Keyframes (usually in CSS file but added here for isolated component) -->
<style>
  @keyframes pulse-md {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192, 132, 252, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(192, 132, 252, 0); }
  }
  @keyframes jump-and-pulse {
    0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 4px 14px rgba(168, 85, 247, 0.3); }
    50% { transform: translateY(-5px) scale(1.02); box-shadow: 0 8px 20px rgba(168, 85, 247, 0.6); }
  }
  .animate-pulse-md {
    animation: pulse-md 2s infinite ease-in-out;
    animation-delay: 0.5s; /* Staggering the animation a bit */
  }
  .animate-jump-and-pulse {
    animation: jump-and-pulse 2s infinite ease-in-out;
    animation-delay: 0.8s; /* Staggering the animation a bit */
  }
</style>