Composant Galerie

<div class="container mx-auto p-4 font-sans">

  <!-- Retro/Vintage Header -->
  <header class="text-center mb-8">
    <h1 class="text-5xl font-extrabold text-blue-700 dark:text-blue-300 mb-2 uppercase tracking-wide">The VINTAGE Gallery</h1>
    <p class="text-xl text-yellow-600 dark:text-yellow-400">A Glimpse into the Past, Vibrant as Ever</p>
  </header>

  <!-- Gallery Grid -->
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">

    <!-- Gallery Item 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 border-4 border-yellow-500 dark:border-yellow-600">
      <img src="https://picsum.photos/seed/vintage1/400/300" alt="Vintage Camera" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-2xl font-bold text-red-600 dark:text-red-400 mb-2">Classic Capture</h2>
        <p class="text-gray-700 dark:text-gray-300 text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#" class="mt-4 inline-block text-blue-600 dark:text-blue-400 hover:underline font-semibold">View Details</a>
      </div>
    </div>

    <!-- Gallery Item 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 border-4 border-purple-500 dark:border-purple-600">
      <img src="https://picsum.photos/seed/retro2/400/300" alt="Retro Car" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-2xl font-bold text-red-600 dark:text-red-400 mb-2">Ride in Style</h2>
        <p class="text-gray-700 dark:text-gray-300 text-sm">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <a href="#" class="mt-4 inline-block text-blue-600 dark:text-blue-400 hover:underline font-semibold">View Details</a>
      </div>
    </div>

    <!-- Gallery Item 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 border-4 border-green-500 dark:border-green-600">
      <img src="https://picsum.photos/seed/vintage3/400/300" alt="Old Radio" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-2xl font-bold text-red-600 dark:text-red-400 mb-2">Broadcast Blasts</h2>
        <p class="text-gray-700 dark:text-gray-300 text-sm">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <a href="#" class="mt-4 inline-block text-blue-600 dark:text-blue-400 hover:underline font-semibold">View Details</a>
      </div>
    </div>

    <!-- Gallery Item 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 border-4 border-red-500 dark:border-red-600">
      <img src="https://picsum.photos/seed/retro4/400/300" alt="Vinyl Record" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-2xl font-bold text-red-600 dark:text-red-400 mb-2">Spinning Tunes</h2>
        <p class="text-gray-700 dark:text-gray-300 text-sm">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <a href="#" class="mt-4 inline-block text-blue-600 dark:text-blue-400 hover:underline font-semibold">View Details</a>
      </div>
    </div>

  </div>

  <!-- About Section (Moderate Complexity) -->
  <section class="mt-12 bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl border-4 border-blue-500 dark:border-blue-600">
    <h2 class="text-4xl font-bold text-blue-700 dark:text-blue-300 mb-6 text-center">About Our Collection</h2>
    <div class="flex flex-col md:flex-row items-center justify-center space-y-6 md:space-y-0 md:space-x-8">
      <div class="md:w-1/2">
        <p class="text-gray-700 dark:text-gray-300 text-lg leading-relaxed mb-4">
          Step back in time with our curated collection of vintage and retro-inspired imagery. Each piece is selected to evoke nostalgia and a sense of timeless charm. We believe in vibrant storytelling through visual experiences.
        </p>
        <div class="flex items-center space-x-4">
          <img src="https://randomuser.me/api/portraits/men/80.jpg" alt="Curator Avatar" class="w-16 h-16 rounded-full border-4 border-yellow-500">
          <div>
            <p class="font-bold text-red-600 dark:text-red-400">Jane Doe</p>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Chief Curator</p>
          </div>
        </div>
      </div>
      <div class="md:w-1/2">
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2">
          <li>Authentic Retro Aesthetics</li>
          <li>High-Quality Digital Renders</li>
          <li>Optimized for Blog/Content Integration</li>
          <li>Fully Responsive Design</li>
          <li>Dark Mode Ready</li>
        </ul>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="text-center mt-12 p-4 text-gray-600 dark:text-gray-400 text-sm">
    <p>&copy; 2023 Vintage Vibes Gallery. All rights reserved.</p>
  </footer>

</div>