Minimalistische Sepia-Bildergalerie für Reservierungen

<div class="bg-stone-50 text-stone-800 dark:bg-stone-900 dark:text-stone-100 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl font-extrabold text-center mb-4 sm:mb-6 leading-tight">
      Our Spaces
    </h2>
    <p class="text-center text-lg text-stone-600 dark:text-stone-400 mb-8 sm:mb-12 max-w-2xl mx-auto">
      Explore our elegantly designed spaces, perfect for your next reservation.
    </p>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
      <!-- Gallery Item 1 -->
      <div class="group relative rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-102 hover:shadow-xl">
        <img src="https://picsum.photos/id/404/600/400" alt="Spacious Lounge Area" class="w-full h-56 sm:h-64 object-cover object-center transition-opacity duration-300 group-hover:opacity-90">
        <div class="p-4 bg-stone-100 dark:bg-stone-800">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-50 mb-2">The Heritage Room</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-4">Ideal for intimate gatherings and private consultations.</p>
          <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-stone-50 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:bg-stone-600 dark:hover:bg-stone-700">
            View Details
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="group relative rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-102 hover:shadow-xl">
        <img src="https://picsum.photos/id/292/600/400" alt="Modern Meeting Room" class="w-full h-56 sm:h-64 object-cover object-center transition-opacity duration-300 group-hover:opacity-90">
        <div class="p-4 bg-stone-100 dark:bg-stone-800">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-50 mb-2">The Loft Studio</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-4">A bright, airy space ideal for creative workshops.</p>
          <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-stone-50 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:bg-stone-600 dark:hover:bg-stone-700">
            View Details
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="group relative rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-102 hover:shadow-xl">
        <img src="https://picsum.photos/id/312/600/400" alt="Cozy Corner Cafe" class="w-full h-56 sm:h-64 object-cover object-center transition-opacity duration-300 group-hover:opacity-90">
        <div class="p-4 bg-stone-100 dark:bg-stone-800">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-50 mb-2">The Quiet Nook</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-4">Perfect for focused work or small, confidential meetings.</p>
          <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-stone-50 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:bg-stone-600 dark:hover:bg-stone-700">
            View Details
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="group relative rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-102 hover:shadow-xl">
        <img src="https://picsum.photos/id/296/600/400" alt="Elegant Dining Area" class="w-full h-56 sm:h-64 object-cover object-center transition-opacity duration-300 group-hover:opacity-90">
        <div class="p-4 bg-stone-100 dark:bg-stone-800">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-50 mb-2">The Grand Salon</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-4">A versatile space for larger functions and events.</p>
          <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-stone-50 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:bg-stone-600 dark:hover:bg-stone-700">
            View Details
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="group relative rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-102 hover:shadow-xl">
        <img src="https://picsum.photos/id/300/600/400" alt="Spacious Office Setup" class="w-full h-56 sm:h-64 object-cover object-center transition-opacity duration-300 group-hover:opacity-90">
        <div class="p-4 bg-stone-100 dark:bg-stone-800">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-50 mb-2">The Executive Suite</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-4">A premium setting for corporate meetings and presentations.</p>
          <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-stone-50 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:bg-stone-600 dark:hover:bg-stone-700">
            View Details
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="group relative rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-102 hover:shadow-xl">
        <img src="https://picsum.photos/id/350/600/400" alt="Outdoor Patio Area" class="w-full h-56 sm:h-64 object-cover object-center transition-opacity duration-300 group-hover:opacity-90">
        <div class="p-4 bg-stone-100 dark:bg-stone-800">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-50 mb-2">The Garden Terrace</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-4">An inviting outdoor setting for relaxed gatherings.</p>
          <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-stone-50 bg-stone-700 hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:bg-stone-600 dark:hover:bg-stone-700">
            View Details
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>