Componente de componentes interactivos

<div class="min-h-screen bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-950 dark:to-purple-800 p-4 sm:p-6 md:p-8 flex items-center justify-center font-sans">
  <div class="relative w-full max-w-5xl bg-white dark:bg-purple-900 rounded-3xl shadow-xl overflow-hidden
    border-4 border-purple-500 dark:border-purple-600
    after:absolute after:inset-0 after:z-0 after:pointer-events-none
    after:bg-gradient-to-tr after:from-purple-300/[0.3] dark:after:from-purple-700/[0.3]
    after:to-yellow-300/[0.1] dark:after:to-teal-700/[0.1]
    after:bg-[length:200%_200%] after:animate-memphis-pattern">

    <!-- Memphis Design elements (absolute positioning for playfulness but behind content) -->
    <div class="absolute top-0 left-0 w-24 h-24 bg-purple-300 dark:bg-purple-700 rounded-br-full -translate-x-8 -translate-y-8 blur-lg opacity-30"></div>
    <div class="absolute bottom-0 right-0 w-32 h-32 bg-yellow-200 dark:bg-amber-600 rounded-tl-full translate-x-8 translate-y-8 blur-lg opacity-30"></div>
    <div class="absolute top-1/4 right-5 w-16 h-16 bg-blue-200 dark:bg-blue-700 rounded-full opacity-20 transform rotate-45"></div>
    <div class="absolute bottom-1/3 left-5 w-20 h-10 bg-pink-200 dark:bg-pink-700 rounded-xl opacity-20 transform -rotate-30"></div>

    <!-- Content Wrapper -->
    <div class="relative z-10 p-6 sm:p-8 md:p-12">
      <div class="flex flex-col md:flex-row gap-8">
        <!-- Left Column: Primary Information & Call to Action -->
        <div class="flex-1 flex flex-col gap-6">
          <h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-purple-800 dark:text-purple-100 leading-tight tracking-tighter">
            Streamline Your <br class="hidden sm:inline"/>Customer Interactions.
          </h2>
          <p class="text-lg text-purple-700 dark:text-purple-200 leading-relaxed">
            Gain clear insights, automate workflows, and build stronger relationships with our intuitive CRM tools.
          </p>

          <div class="flex items-center gap-4 group mt-4">
            <button class="px-6 py-3 bg-purple-600 hover:bg-purple-700 active:scale-95 transition-all duration-200 ease-out
                           text-white font-semibold rounded-lg shadow-lg
                           dark:bg-purple-700 dark:hover:bg-purple-600 dark:text-purple-50
                           group-hover:translate-x-1 group-hover:-translate-y-1 group-hover:shadow-purple-400/[0.5]">
              Get Started Now
            </button>
            <a href="#" class="text-purple-600 hover:text-purple-800 dark:text-purple-300 dark:hover:text-purple-100
                              font-medium flex items-center group-hover:underline transition-colors">
              Learn More
              <svg class="w-5 h-5 ml-1 transition-transform group-hover:translate-x-1" 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 5l7 7-7 7"></path></svg>
            </a>
          </div>

          <!-- Featured Customers/Logos -->
          <div class="mt-8">
            <p class="text-sm text-purple-500 dark:text-purple-400 font-medium uppercase tracking-wider mb-3">Trusted by:</p>
            <div class="flex flex-wrap gap-4 items-center">
              <img src="https://picsum.photos/id/237/80/40" alt="Client Logo 1" class="h-6 opacity-70 hover:opacity-100 transition-opacity dark:invert ease-out duration-200">
              <img src="https://picsum.photos/id/238/80/40" alt="Client Logo 2" class="h-7 opacity-70 hover:opacity-100 transition-opacity dark:invert ease-out duration-200">
              <img src="https://picsum.photos/id/239/80/40" alt="Client Logo 3" class="h-6 opacity-70 hover:opacity-100 transition-opacity dark:invert ease-out duration-200">
            </div>
          </div>
        </div>

        <!-- Right Column: Interactive Elements (Tabs/Accordion) -->
        <div class="flex-1 flex flex-col gap-4 bg-purple-50 dark:bg-purple-800 p-5 sm:p-6 rounded-2xl shadow-inner
          border border-dotted border-purple-300 dark:border-purple-700">
          <h3 class="text-xl sm:text-2xl font-bold text-purple-700 dark:text-purple-200 mb-2">Key Features</h3>

          <!-- Feature Item 1 -->
          <div class="group cursor-pointer bg-purple-100 dark:bg-purple-850 p-4 rounded-xl transition-all duration-300 ease-out
                      hover:bg-purple-200 dark:hover:bg-purple-700 hover:shadow-md">
            <div class="flex items-center justify-between">
              <h4 class="text-lg font-semibold text-purple-800 dark:text-purple-100">Unified Dashboard</h4>
              <svg class="w-6 h-6 text-purple-500 dark:text-purple-400 group-hover:text-purple-600 dark:group-hover:text-purple-200 transition-transform group-[.active]:rotate-90" 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 5l7 7-7 7"></path></svg>
            </div>
            <p class="text-purple-600 dark:text-purple-300 text-sm mt-2 opacity-0 max-h-0 overflow-hidden transition-all duration-300 ease-in-out group-[.active]:opacity-100 group-[.active]:max-h-24">
              Get a 360-degree view of your customer interactions, sales pipeline, and marketing efforts in real-time.
            </p>
          </div>

          <!-- Feature Item 2 -->
          <div class="group cursor-pointer bg-purple-100 dark:bg-purple-850 p-4 rounded-xl transition-all duration-300 ease-out
                      hover:bg-purple-200 dark:hover:bg-purple-700 hover:shadow-md">
            <div class="flex items-center justify-between">
              <h4 class="text-lg font-semibold text-purple-800 dark:text-purple-100">Automated Workflows</h4>
              <svg class="w-6 h-6 text-purple-500 dark:text-purple-400 group-hover:text-purple-600 dark:group-hover:text-purple-200 transition-transform group-[.active]:rotate-90" 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 5l7 7-7 7"></path></svg>
            </div>
            <p class="text-purple-600 dark:text-purple-300 text-sm mt-2 opacity-0 max-h-0 overflow-hidden transition-all duration-300 ease-in-out group-[.active]:opacity-100 group-[.active]:max-h-24">
              Set up automated email sequences, task assignments, and lead nurturing processes to save time.
            </p>
          </div>

          <!-- Feature Item 3 -->
          <div class="group cursor-pointer bg-purple-100 dark:bg-purple-850 p-4 rounded-xl transition-all duration-300 ease-out
                      hover:bg-purple-200 dark:hover:bg-purple-700 hover:shadow-md">
            <div class="flex items-center justify-between">
              <h4 class="text-lg font-semibold text-purple-800 dark:text-purple-100">Advanced Analytics</h4>
              <svg class="w-6 h-6 text-purple-500 dark:text-purple-400 group-hover:text-purple-600 dark:group-hover:text-purple-200 transition-transform group-[.active]:rotate-90" 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 5l7 7-7 7"></path></svg>
            </div>
            <p class="text-purple-600 dark:text-purple-300 text-sm mt-2 opacity-0 max-h-0 overflow-hidden transition-all duration-300 ease-in-out group-[.active]:opacity-100 group-[.active]:max-h-24">
              Leverage powerful reporting tools to identify trends, measure campaign effectiveness, and optimize strategies.
            </p>
          </div>

          <!-- Feature Item 4 -->
          <div class="group cursor-pointer bg-purple-100 dark:bg-purple-850 p-4 rounded-xl transition-all duration-300 ease-out
                      hover:bg-purple-200 dark:hover:bg-purple-700 hover:shadow-md">
            <div class="flex items-center justify-between">
              <h4 class="text-lg font-semibold text-purple-800 dark:text-purple-100">Integrated Communication</h4>
              <svg class="w-6 h-6 text-purple-500 dark:text-purple-400 group-hover:text-purple-600 dark:group-hover:text-purple-200 transition-transform group-[.active]:rotate-90" 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 5l7 7-7 7"></path></svg>
            </div>
            <p class="text-purple-600 dark:text-purple-300 text-sm mt-2 opacity-0 max-h-0 overflow-hidden transition-all duration-300 ease-in-out group-[.active]:opacity-100 group-[.active]:max-h-24">
              Communicate seamlessly with customers across multiple channels right from your CRM platform.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- To make the accordion-like functionality work without JS, you'd typically need radio buttons/checkboxes or actual JS. -->
<!-- For this example, I'm adding a simple CSS animation with a placeholder '.active' class -->
<!-- Actual implementation requires JavaScript to toggle the 'active' class on click. -->

<style>
/* Animated Memphis Pattern background */
@keyframes memphis-pattern {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

/* Example of how you'd toggle an active state for accordion-like behavior with JS */
/* This CSS will define the open state, JS adds/removes the 'active' class */
.group.active .max-h-0 {
  max-height: 96px; /* A safe height for the text content */
  opacity: 1;
}
.group.active svg {
    transform: rotate(90deg);
}
</style>