Komponente "Immobiliengalerie"

<div class="bg-blue-50 dark:bg-gray-900 py-8 lg:py-12">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-8 lg:mb-12">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-200 mb-4">Premium Property Listings</h2>
      <p class="text-lg text-blue-700 dark:text-blue-300 max-w-2xl mx-auto">Explore our wide selection of exquisite properties, meticulously curated to meet your highest standards.</p>
    </div>

    <!-- Filters & Sort -->
    <div class="flex flex-col sm:flex-row items-center justify-between mb-8 space-y-4 sm:space-y-0 sm:space-x-4">
      <div class="relative w-full sm:w-auto">
        <select class="block appearance-none w-full bg-white dark:bg-gray-800 border border-blue-200 dark:border-gray-700 text-blue-700 dark:text-blue-300 py-3 px-4 pr-8 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600">
          <option>All Locations</option>
          <option>New York</option>
          <option>Los Angeles</option>
          <option>Chicago</option>
          <option>Houston</option>
        </select>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-blue-700 dark:text-blue-300">
          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
        </div>
      </div>
      <div class="relative w-full sm:w-auto">
        <select class="block appearance-none w-full bg-white dark:bg-gray-800 border border-blue-200 dark:border-gray-700 text-blue-700 dark:text-blue-300 py-3 px-4 pr-8 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600">
          <option>All Types</option>
          <option>House</option>
          <option>Apartment</option>
          <option>Condo</option>
          <option>Land</option>
        </select>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-blue-700 dark:text-blue-300">
          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"/></svg>
        </div>
      </div>
      <div class="relative w-full sm:w-auto">
        <select class="block appearance-none w-full bg-white dark:bg-gray-800 border border-blue-200 dark:border-gray-700 text-blue-700 dark:text-blue-300 py-3 px-4 pr-8 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600">
          <option>Sort by: Newest</option>
          <option>Sort by: Price (Low to High)</option>
          <option>Sort by: Price (High to Low)</option>
          <option>Sort by: Popularity</option>
        </select>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-blue-700 dark:text-blue-300">
          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
        </div>
      </div>
    </div>

    <!-- Property Grid -->
    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

      <!-- Property Card 1 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
        <img src="https://picsum.photos/id/10/400/300" alt="Modern Home" class="w-full h-48 object-cover">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Spacious Family Home</h3>
          <p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>123 Grand Ave, City, State</p>
          <div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
            <p class="mr-4"><i class="fas fa-bed mr-1"></i> 4 Beds</p>
            <p class="mr-4"><i class="fas fa-bath mr-1"></i> 3 Baths</p>
            <p><i class="fas fa-ruler-combined mr-1"></i> 2400 SqFt</p>
          </div>
          <p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$750,000</p>
          <a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
            View Details
          </a>
        </div>
      </article>

      <!-- Property Card 2 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
        <img src="https://picsum.photos/id/20/400/300" alt="Luxury Apartment" class="w-full h-48 object-cover">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Downtown Loft Apartment</h3>
          <p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>456 High St, City, State</p>
          <div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
            <p class="mr-4"><i class="fas fa-bed mr-1"></i> 2 Beds</p>
            <p class="mr-4"><i class="fas fa-bath mr-1"></i> 2 Baths</p>
            <p><i class="fas fa-ruler-combined mr-1"></i> 1100 SqFt</p>
          </div>
          <p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$480,000</p>
          <a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
            View Details
          </a>
        </div>
      </article>

      <!-- Property Card 3 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
        <img src="https://picsum.photos/id/30/400/300" alt="Suburban House" class="w-full h-48 object-cover">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Charming Suburban Home</h3>
          <p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>789 Oak Ln, City, State</p>
          <div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
            <p class="mr-4"><i class="fas fa-bed mr-1"></i> 3 Beds</p>
            <p class="mr-4"><i class="fas fa-bath mr-1"></i> 2 Baths</p>
            <p><i class="fas fa-ruler-combined mr-1"></i> 1800 SqFt</p>
          </div>
          <p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$595,000</p>
          <a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
            View Details
          </a>
        </div>
      </article>

      <!-- Property Card 4 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
        <img src="https://picsum.photos/id/40/400/300" alt="Waterfront Villa" class="w-full h-48 object-cover">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Stunning Waterfront Villa</h3>
          <p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>101 Bay View, City, State</p>
          <div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
            <p class="mr-4"><i class="fas fa-bed mr-1"></i> 5 Beds</p>
            <p class="mr-4"><i class="fas fa-bath mr-1"></i> 4 Baths</p>
            <p><i class="fas fa-ruler-combined mr-1"></i> 3200 SqFt</p>
          </div>
          <p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$1,200,000</p>
          <a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
            View Details
          </a>
        </div>
      </article>

      <!-- Property Card 5 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
        <img src="https://picsum.photos/id/50/400/300" alt="Cozy Condo" class="w-full h-48 object-cover">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Cozy City Center Condo</h3>
          <p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>202 Metro Blvd, City, State</p>
          <div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
            <p class="mr-4"><i class="fas fa-bed mr-1"></i> 1 Bed</p>
            <p class="mr-4"><i class="fas fa-bath mr-1"></i> 1 Bath</p>
            <p><i class="fas fa-ruler-combined mr-1"></i> 750 SqFt</p>
          </div>
          <p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$320,000</p>
          <a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
            View Details
          </a>
        </div>
      </article>

      <!-- Property Card 6 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
        <img src="https://picsum.photos/id/60/400/300" alt="Rural Estate" class="w-full h-48 object-cover">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Expansive Rural Estate</h3>
          <p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>303 Country Rd, City, State</p>
          <div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
            <p class="mr-4"><i class="fas fa-bed mr-1"></i> 6 Beds</p>
            <p class="mr-4"><i class="fas fa-bath mr-1"></i> 5 Baths</p>
            <p><i class="fas fa-ruler-combined mr-1"></i> 4500 SqFt</p>
          </div>
          <p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$1,800,000</p>
          <a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
            View Details
          </a>
        </div>
      </article>

      <!-- Property Card 7 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
        <img src="https://picsum.photos/id/70/400/300" alt="Newly Built" class="w-full h-48 object-cover">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Brand New Modern Build</h3>
          <p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>404 Innovation Dr, City, State</p>
          <div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
            <p class="mr-4"><i class="fas fa-bed mr-1"></i> 4 Beds</p>
            <p class="mr-4"><i class="fas fa-bath mr-1"></i> 3 Baths</p>
            <p><i class="fas fa-ruler-combined mr-1"></i> 2800 SqFt</p>
          </div>
          <p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$890,000</p>
          <a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
            View Details
          </a>
        </div>
      </article>

      <!-- Property Card 8 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
        <img src="https://picsum.photos/id/80/400/300" alt="Renovated Charm" class="w-full h-48 object-cover">
        <div class="p-5">
          <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-2">Historic Fully Renovated</h3>
          <p class="text-blue-600 dark:text-blue-400 text-sm mb-3"><i class="fas fa-map-marker-alt mr-2"></i>505 Heritage Pkwy, City, State</p>
          <div class="flex items-center text-blue-700 dark:text-blue-300 text-sm mb-4">
            <p class="mr-4"><i class="fas fa-bed mr-1"></i> 3 Beds</p>
            <p class="mr-4"><i class="fas fa-bath mr-1"></i> 2 Baths</p>
            <p><i class="fas fa-ruler-combined mr-1"></i> 1600 SqFt</p>
          </div>
          <p class="text-2xl font-bold text-blue-900 dark:text-blue-100 mb-4">$620,000</p>
          <a href="#" class="block w-full text-center bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300">
            View Details
          </a>
        </div>
      </article>

    </div>

    <!-- Pagination (optional, but good for complex components) -->
    <div class="flex justify-center mt-10">
      <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-blue-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-gray-50 dark:hover:bg-gray-700">
          <span class="sr-only">Previous</span>
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" aria-current="page" class="z-10 bg-blue-100 dark:bg-blue-700 border-blue-500 text-blue-600 dark:text-blue-100 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
          1
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-blue-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-gray-50 dark:hover:bg-gray-700">
          2
        </a>
        <a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-blue-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-gray-50 dark:hover:bg-gray-700">
          3
        </a>
        <span class="relative inline-flex items-center px-4 py-2 border border-blue-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300">
          ...
        </span>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-blue-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-gray-50 dark:hover:bg-gray-700">
          10
        </a>
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-blue-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-gray-50 dark:hover:bg-gray-700">
          <span class="sr-only">Next</span>
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
      </nav>
    </div>

  </div>
</div>

<!-- Font Awesome for icons (optional, but used in the example) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">