Memphis_Grayscale_Photography_Layout

<div class="p-4 sm:p-6 md:p-8 min-h-screen bg-neutral-100 dark:bg-neutral-900 font-sans">
  <header class="flex flex-col sm:flex-row justify-between items-center mb-8 sm:mb-12 p-4 border-b-4 border-black dark:border-white shadow-lg bg-neutral-200 dark:bg-neutral-800">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight text-neutral-800 dark:text-neutral-200 mb-4 sm:mb-0 transform -rotate-3 transition-transform duration-300 ease-in-out hover:rotate-0">
      GALLERY
    </h1>
    <nav class="flex flex-wrap gap-x-6 gap-y-2 text-xl font-semibold">
      <a href="#" class="text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white transition-colors duration-200 transform hover:scale-105 perspective-square relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-1 after:bg-black dark:after:bg-white after:scale-x-0 after:origin-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-left">Portfolio</a>
      <a href="#" class="text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white transition-colors duration-200 transform hover:scale-105 perspective-square relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-1 after:bg-black dark:after:bg-white after:scale-x-0 after:origin-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-left">About</a>
      <a href="#" class="text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white transition-colors duration-200 transform hover:scale-105 perspective-square relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-1 after:bg-black dark:after:bg-white after:scale-x-0 after:origin-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-left">Contact</a>
    </nav>
  </header>

  <main class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">

    <!-- Featured Photographer Section -->
    <section class="md:col-span-3 lg:col-span-4 p-6 bg-gradient-to-br from-neutral-300 to-neutral-500 dark:from-neutral-700 dark:to-neutral-900 border-4 border-black dark:border-white shadow-xl flex flex-col sm:flex-row items-center justify-center relative overflow-hidden group">
      <div class="absolute top-0 left-0 w-24 h-24 bg-black dark:bg-white clip-path-polygon-top-left transform -translate-x-1/2 -translate-y-1/2 rotate-45 group-hover:rotate-0 transition-transform duration-500"></div>
      <div class="absolute bottom-0 right-0 w-24 h-24 bg-black dark:bg-white clip-path-polygon-bottom-right transform translate-x-1/2 translate-y-1/2 rotate-45 group-hover:rotate-0 transition-transform duration-500"></div>

      <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Photographer Profile" class="w-32 h-32 sm:w-40 sm:h-40 rounded-full object-cover border-4 border-black dark:border-white shadow-lg z-10 sm:mr-8 mb-6 sm:mb-0 transform hover:scale-110 transition-transform duration-300 ease-in-out">
      <div class="text-center sm:text-left z-10">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-black dark:text-white mb-2 transform rotate-1 transition-transform duration-300 group-hover:rotate-0">Featured Artist: Jane Doe</h2>
        <p class="text-xl sm:text-2xl text-neutral-800 dark:text-neutral-200 font-semibold mb-4">Master of Monochrome</p>
        <a href="#" class="inline-block px-6 py-3 bg-black dark:bg-white text-white dark:text-black font-bold text-lg uppercase tracking-wider border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="absolute top-0 left-0 w-0 h-full bg-neutral-300 dark:bg-neutral-600 transition-all duration-300 group-hover:w-full"></span>
          <span class="relative z-10">View Profile</span>
        </a>
      </div>
    </section>

    <!-- Gallery Filters/Categories -->
    <section class="md:col-span-1 p-6 bg-black dark:bg-white text-neutral-100 dark:text-neutral-900 border-4 border-white dark:border-black shadow-lg transform translate-y-4 dark:translate-y-0 translate-x-4 dark:translate-x-0">
      <h3 class="text-2xl font-bold mb-4 border-b-2 border-neutral-100 dark:border-neutral-900 pb-2">Categories</h3>
      <ul class="space-y-3">
        <li><a href="#" class="block text-lg font-medium hover:text-neutral-400 dark:hover:text-neutral-600 transition-colors duration-200 relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-3 before:h-3 before:bg-white dark:before:bg-black before:transition-all before:duration-300 hover:before:rotate-45 pl-6">Portraits</a></li>
        <li><a href="#" class="block text-lg font-medium hover:text-neutral-400 dark:hover:text-neutral-600 transition-colors duration-200 relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-3 before:h-3 before:bg-white dark:before:bg-black before:transition-all before:duration-300 hover:before:rotate-45 pl-6">Landscapes</a></li>
        <li><a href="#" class="block text-lg font-medium hover:text-neutral-400 dark:hover:text-neutral-600 transitional-colors duration-200 relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-3 before:h-3 before:bg-white dark:before:bg-black before:transition-all before:duration-300 hover:before:rotate-45 pl-6">Street</a></li>
        <li><a href="#" class="block text-lg font-medium hover:text-neutral-400 dark:hover:text-neutral-600 transition-colors duration-200 relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-3 before:h-3 before:bg-white dark:before:bg-black before:transition-all before:duration-300 hover:before:rotate-45 pl-6">Abstract</a></li>
        <li><a href="#" class="block text-lg font-medium hover:text-neutral-400 dark:hover:text-neutral-600 transition-colors duration-200 relative before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-3 before:h-3 before:bg-white dark:before:bg-black before:transition-all before:duration-300 hover:before:rotate-45 pl-6">Events</a></li>
      </ul>
      <div class="mt-8">
        <h3 class="text-2xl font-bold mb-4 border-b-2 border-neutral-100 dark:border-neutral-900 pb-2">Tools</h3>
        <input type="text" placeholder="Search photos..." class="w-full px-4 py-3 bg-neutral-800 dark:bg-neutral-200 text-neutral-100 dark:text-neutral-900 placeholder-neutral-400 dark:placeholder-neutral-600 border-2 border-white dark:border-black focus:outline-none focus:ring-2 focus:ring-white dark:focus:ring-black mb-4">
        <button class="w-full px-6 py-3 bg-white dark:bg-black text-black dark:text-white font-bold text-lg uppercase tracking-wide border-2 border-transparent hover:border-white dark:hover:border-black transition-all duration-300 relative group overflow-hidden">
          <span class="absolute top-0 left-0 w-0 h-full bg-neutral-300 dark:bg-neutral-600 transition-all duration-300 group-hover:w-full"></span>
          <span class="relative z-10">Apply Filters</span>
        </button>
      </div>
    </section>

    <!-- Photo Grid -->
    <section class="md:col-span-2 lg:col-span-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">

      <!-- Photo Card 1 -->
      <div class="bg-neutral-200 dark:bg-neutral-800 border-4 border-black dark:border-white shadow-lg p-4 group relative overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 ease-in-out">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-neutral-500 to-neutral-700 dark:from-neutral-300 dark:to-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        <img src="https://picsum.photos/id/1018/600/400" alt="Photo 1" class="w-full h-auto object-cover border-2 border-black dark:border-white mb-4 transform group-hover:scale-105 transition-transform duration-300 ease-in-out relative z-10">
        <h4 class="text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2 relative z-10">Urban Echoes</h4>
        <p class="text-neutral-700 dark:text-neutral-300 text-sm mb-4 relative z-10">A candid shot capturing the raw energy of city life.</p>
        <a href="#" class="inline-block px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-sm uppercase font-semibold relative z-10 border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300">
          View Details
        </a>
      </div>

      <!-- Photo Card 2 -->
      <div class="bg-neutral-200 dark:bg-neutral-800 border-4 border-black dark:border-white shadow-lg p-4 group relative overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 ease-in-out">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-neutral-500 to-neutral-700 dark:from-neutral-300 dark:to-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        <img src="https://picsum.photos/id/1043/600/400" alt="Photo 2" class="w-full h-auto object-cover border-2 border-black dark:border-white mb-4 transform group-hover:scale-105 transition-transform duration-300 ease-in-out relative z-10">
        <h4 class="text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2 relative z-10">Mountain Serenity</h4>
        <p class="text-neutral-700 dark:text-neutral-300 text-sm mb-4 relative z-10">Clouds embrace the peaks in a timeless grayscale landscape.</p>
        <a href="#" class="inline-block px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-sm uppercase font-semibold relative z-10 border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300">
          View Details
        </a>
      </div>

      <!-- Photo Card 3 (Taller) -->
      <div class="row-span-1 sm:row-span-2 bg-neutral-200 dark:bg-neutral-800 border-4 border-black dark:border-white shadow-lg p-4 group relative overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 ease-in-out">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-neutral-500 to-neutral-700 dark:from-neutral-300 dark:to-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        <img src="https://picsum.photos/id/1025/600/800" alt="Photo 3" class="w-full h-auto object-cover border-2 border-black dark:border-white mb-4 transform group-hover:scale-105 transition-transform duration-300 ease-in-out relative z-10">
        <h4 class="text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2 relative z-10">Reflections of Time</h4>
        <p class="text-neutral-700 dark:text-neutral-300 text-sm mb-4 relative z-10">A pensive portrait, capturing depth and emotion in every shade.</p>
        <a href="#" class="inline-block px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-sm uppercase font-semibold relative z-10 border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300">
          View Details
        </a>
      </div>

      <!-- Photo Card 4 -->
      <div class="bg-neutral-200 dark:bg-neutral-800 border-4 border-black dark:border-white shadow-lg p-4 group relative overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 ease-in-out">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-neutral-500 to-neutral-700 dark:from-neutral-300 dark:to-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        <img src="https://picsum.photos/id/1012/600/400" alt="Photo 4" class="w-full h-auto object-cover border-2 border-black dark:border-white mb-4 transform group-hover:scale-105 transition-transform duration-300 ease-in-out relative z-10">
        <h4 class="text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2 relative z-10">Open Road</h4>
        <p class="text-neutral-700 dark:text-neutral-300 text-sm mb-4 relative z-10">Vast plains and endless journeys, captured in monochrome.</p>
        <a href="#" class="inline-block px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-sm uppercase font-semibold relative z-10 border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300">
          View Details
        </a>
      </div>

      <!-- Photo Card 5 -->
      <div class="bg-neutral-200 dark:bg-neutral-800 border-4 border-black dark:border-white shadow-lg p-4 group relative overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 ease-in-out">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-neutral-500 to-neutral-700 dark:from-neutral-300 dark:to-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        <img src="https://picsum.photos/id/105/600/400" alt="Photo 5" class="w-full h-auto object-cover border-2 border-black dark:border-white mb-4 transform group-hover:scale-105 transition-transform duration-300 ease-in-out relative z-10">
        <h4 class="text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2 relative z-10">Abstract Light</h4>
        <p class="text-neutral-700 dark:text-neutral-300 text-sm mb-4 relative z-10">Play of shadows and light creating compelling forms.</p>
        <a href="#" class="inline-block px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-sm uppercase font-semibold relative z-10 border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300">
          View Details
        </a>
      </div>

      <!-- Photo Card 6 -->
      <div class="bg-neutral-200 dark:bg-neutral-800 border-4 border-black dark:border-white shadow-lg p-4 group relative overflow-hidden transform hover:-translate-y-2 transition-transform duration-300 ease-in-out">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-neutral-500 to-neutral-700 dark:from-neutral-300 dark:to-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"></div>
        <img src="https://picsum.photos/id/1079/600/400" alt="Photo 6" class="w-full h-auto object-cover border-2 border-black dark:border-white mb-4 transform group-hover:scale-105 transition-transform duration-300 ease-in-out relative z-10">
        <h4 class="text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2 relative z-10">Coastal Whispers</h4>
        <p class="text-neutral-700 dark:text-neutral-300 text-sm mb-4 relative z-10">The rugged beauty of the coast in stunning black and white.</p>
        <a href="#" class="inline-block px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-sm uppercase font-semibold relative z-10 border-2 border-transparent hover:border-black dark:hover:border-white transition-all duration-300">
          View Details
        </a>
      </div>

    </section>

  </main>

  <footer class="mt-12 p-6 text-center border-t-4 border-black dark:border-white bg-neutral-200 dark:bg-neutral-800 shadow-xl">
    <p class="text-neutral-800 dark:text-neutral-200 text-lg font-semibold mb-4">© 2023 Grayscale Gallery. All rights reserved.</p>
    <div class="flex justify-center flex-wrap gap-x-6 gap-y-2">
      <a href="#" class="text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white transition-colors duration-200 text-sm relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-black dark:after:bg-white after:scale-x-0 after:origin-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-left">Privacy Policy</a>
      <a href="#" class="text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white transition-colors duration-200 text-sm relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-black dark:after:bg-white after:scale-x-0 after:origin-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-left">Terms of Service</a>
      <a href="#" class="text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white transition-colors duration-200 text-sm relative after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-black dark:after:bg-white after:scale-x-0 after:origin-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-left">Sitemap</a>
    </div>
  </footer>
</div>