Retro_Vintage_Sunset_Carousel_Slider_Component

<div class="relative w-full max-w-7xl mx-auto py-8 px-4 font-mono dark:bg-gray-900 bg-gradient-to-br from-yellow-100 via-orange-200 to-red-100 rounded-lg shadow-xl dark:shadow-2xl dark:shadow-orange-900 overflow-hidden">
  <h2 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-center mb-10 tracking-wider uppercase text-red-800 dark:text-orange-300 drop-shadow-lg leading-tight">
    <span class="block">Data Flux</span>
    <span class="block text-2xl md:text-3xl text-orange-600 dark:text-yellow-500 normal-case">Analysis Center</span>
  </h2>

  <div class="relative w-full overflow-hidden group">
    <!-- Carousel Wrapper -->
    <div class="flex transition-transform duration-700 ease-in-out" style="transform: translateX(0%);">
      <!-- Slide 1 -->
      <div class="w-full flex-shrink-0 p-4 md:p-8 lg:p-12 bg-yellow-50 dark:bg-gray-800 rounded-xl shadow-inner dark:shadow-orange-900/50 border-4 border-dashed border-red-300 dark:border-orange-700/70">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-orange-200 dark:border-gray-600 transform hover:scale-105 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=1" alt="Chart 1" class="w-full h-40 object-cover rounded mb-4 border-2 border-orange-300 dark:border-orange-600">
            <h3 class="text-2xl font-bold text-orange-700 dark:text-orange-300 mb-2">Sales Overview</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm">Quarterly sales performance with year-over-year comparison. Up 12% from last quarter.</p>
            <span class="inline-block bg-teal-400 dark:bg-teal-700 text-white text-xs px-3 py-1 rounded-full mt-3 font-semibold">+12% Growth</span>
          </div>
          <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-orange-200 dark:border-gray-600 transform hover:scale-105 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=2" alt="Chart 2" class="w-full h-40 object-cover rounded mb-4 border-2 border-orange-300 dark:border-orange-600">
            <h3 class="text-2xl font-bold text-orange-700 dark:text-orange-300 mb-2">User Activity</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm">Daily unique visitors and engagement rates. Hovered around 1.5M average.</p>
            <span class="inline-block bg-blue-400 dark:bg-blue-700 text-white text-xs px-3 py-1 rounded-full mt-3 font-semibold">1.5M Users</span>
          </div>
          <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-orange-200 dark:border-gray-600 transform hover:scale-105 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=3" alt="Chart 3" class="w-full h-40 object-cover rounded mb-4 border-2 border-orange-300 dark:border-orange-600">
            <h3 class="text-2xl font-bold text-orange-700 dark:text-orange-300 mb-2">Inventory Status</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm">Current stock levels and reorder points for key products. Stock levels critical for item C.</p>
            <span class="inline-block bg-red-400 dark:bg-red-700 text-white text-xs px-3 py-1 rounded-full mt-3 font-semibold">Critical Stock</span>
          </div>
        </div>
      </div>

      <!-- Slide 2 -->
      <div class="w-full flex-shrink-0 p-4 md:p-8 lg:p-12 bg-yellow-50 dark:bg-gray-800 rounded-xl shadow-inner dark:shadow-orange-900/50 border-4 border-dashed border-red-300 dark:border-orange-700/70">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-orange-200 dark:border-gray-600 transform hover:scale-105 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=4" alt="Chart 4" class="w-full h-40 object-cover rounded mb-4 border-2 border-orange-300 dark:border-orange-600">
            <h3 class="text-2xl font-bold text-orange-700 dark:text-orange-300 mb-2">Customer Feedback</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm">Sentiment analysis from recent surveys. Overall positive, minor issues reported.</p>
            <span class="inline-block bg-green-400 dark:bg-green-700 text-white text-xs px-3 py-1 rounded-full mt-3 font-semibold">92% Positive</span>
          </div>
          <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-orange-200 dark:border-gray-600 transform hover:scale-105 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=5" alt="Chart 5" class="w-full h-40 object-cover rounded mb-4 border-2 border-orange-300 dark:border-orange-600">
            <h3 class="text-2xl font-bold text-orange-700 dark:text-orange-300 mb-2">Website Traffic</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm">Geographic distribution of website visitors. Peak traffic from North America.</p>
            <span class="inline-block bg-purple-400 dark:bg-purple-700 text-white text-xs px-3 py-1 rounded-full mt-3 font-semibold">Global Reach</span>
          </div>
          <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-orange-200 dark:border-gray-600 transform hover:scale-105 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=6" alt="Chart 6" class="w-full h-40 object-cover rounded mb-4 border-2 border-orange-300 dark:border-orange-600">
            <h3 class="text-2xl font-bold text-orange-700 dark:text-orange-300 mb-2">Team Performance</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm">Average task completion time per team. Team Alpha leading with efficiency.</p>
            <span class="inline-block bg-indigo-400 dark:bg-indigo-700 text-white text-xs px-3 py-1 rounded-full mt-3 font-semibold">Team Alpha</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Navigation Buttons - Hidden by default, shown on hover/focus -->
    <button aria-label="Previous slide" class="absolute top-1/2 left-4 transform -translate-y-1/2 bg-gradient-to-r from-red-600 to-orange-500 dark:from-orange-700 dark:to-orange-500 text-white p-3 rounded-full shadow-lg opacity-80 hover:opacity-100 transition-opacity duration-300 z-10 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700 border-2 border-white dark:border-gray-900 group-hover:opacity-100 lg:scale-125">
      <svg class="h-6 w-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="3" d="M15 19l-7-7 7-7"></path></svg>
    </button>
    <button aria-label="Next slide" class="absolute top-1/2 right-4 transform -translate-y-1/2 bg-gradient-to-r from-orange-500 to-red-600 dark:from-orange-500 dark:to-orange-700 text-white p-3 rounded-full shadow-lg opacity-80 hover:opacity-100 transition-opacity duration-300 z-10 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700 border-2 border-white dark:border-gray-900 group-hover:opacity-100 lg:scale-125">
      <svg class="h-6 w-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="3" d="M9 5l7 7-7 7"></path></svg>
    </button>
  </div>

  <!-- Pagination Dots -->
  <div class="flex justify-center items-center space-x-3 mt-8">
    <button aria-label="Go to slide 1" class="h-4 w-4 rounded-full bg-red-500 dark:bg-orange-400 border-2 border-white dark:border-gray-900 shadow-md focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700 transition-all duration-300 transform hover:scale-125 focus:scale-125"></button>
    <button aria-label="Go to slide 2" class="h-3 w-3 rounded-full bg-orange-400 dark:bg-red-500 border-2 border-white dark:border-gray-900 shadow-md focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700 transition-all duration-300 transform hover:scale-125 focus:scale-125"></button>
  </div>

  <!-- Retro Footer Accent -->
  <div class="mt-12 text-center text-orange-700 dark:text-orange-300 text-sm opacity-75">
    <p>&copy; 1988 - <span class="font-bold">ANALOG ANALYTICS CORP.</span> - All Rights Reserved</p>
    <p class="mt-2 text-xs">SYSTEM STATUS: <span class="text-lime-500 dark:text-lime-400">OPERATIONAL</span></p>
  </div>

  <!-- Retro Scanline Overlay (Visual only, no interaction) -->
  <div class="pointer-events-none absolute inset-0 z-20 opacity-5 dark:opacity-10" style="background: repeating-linear-gradient(rgba(0,0,0,0) 0px, rgba(0,0,0,.05) 1px, rgba(0,0,0,0) 2px);">
  </div>

  <!-- Retro Vignette Overlay -->
  <div class="pointer-events-none absolute inset-0 z-20" style="box-shadow: inset 0 0 100px rgba(0,0,0,.4);">
  </div>
</div>