Neumorphic_Real_Estate_Sitemap_Component

<div class="p-4 sm:p-6 lg:p-8 min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="w-full max-w-4xl p-6 sm:p-8 lg:p-10 rounded-3xl backdrop-blur-sm shadow-xl
              bg-gradient-to-br from-green-300 via-blue-300 to-purple-300
              dark:from-gray-800 dark:via-gray-850 dark:to-gray-900
              dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.6),_0_4px_8px_rgba(0,0,0,0.8)]
              shadow-[inset_0_2px_4px_rgba(255,255,255,0.7),_0_4px_8px_rgba(150,150,150,0.3)]
              transform transition-all duration-300 ease-in-out">
    <h2 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-center mb-8
               bg-clip-text text-transparent bg-gradient-to-r from-red-500 via-yellow-500 to-indigo-500
               dark:from-red-300 dark:via-yellow-300 dark:to-indigo-300
               drop-shadow-lg">
      Explore Our Properties
    </h2>

    <nav class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
      <!-- Category 1: Buy Homes -->
      <div class="p-5 rounded-2xl flex flex-col items-center justify-center
                  bg-gray-200 dark:bg-gray-800
                  shadow-[5px_5px_10px_#bebebe,-5px_-5px_10px_#ffffff]
                  dark:shadow-[5px_5px_10px_#0a0a0a,-5px_-5px_10px_#262626]
                  transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-[7px_7px_14px_#bebebe,-7px_-7px_14px_#ffffff]
                  dark:hover:shadow-[7px_7px_14px_#0a0a0a,-7px_-7px_14px_#262626]">
        <h3 class="text-lg sm:text-xl font-semibold mb-3
                   bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-cyan-500
                   dark:from-teal-300 dark:to-cyan-300">
          Buy Homes
        </h3>
        <ul class="text-center space-y-2 text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Houses for Sale</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Condos & Apartments</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">New Constructions</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Luxury Estates</a></li>
        </ul>
      </div>

      <!-- Category 2: Rent Homes -->
      <div class="p-5 rounded-2xl flex flex-col items-center justify-center
                  bg-gray-200 dark:bg-gray-800
                  shadow-[5px_5px_10px_#bebebe,-5px_-5px_10px_#ffffff]
                  dark:shadow-[5px_5px_10px_#0a0a0a,-5px_-5px_10px_#262626]
                  transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-[7px_7px_14px_#bebebe,-7px_-7px_14px_#ffffff]
                  dark:hover:shadow-[7px_7px_14px_#0a0a0a,-7px_-7px_14px_#262626]">
        <h3 class="text-lg sm:text-xl font-semibold mb-3
                   bg-clip-text text-transparent bg-gradient-to-r from-orange-500 to-yellow-500
                   dark:from-orange-300 dark:to-yellow-300">
          Rent Homes
        </h3>
        <ul class="text-center space-y-2 text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Houses for Rent</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Apartments for Rent</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Pet-Friendly Rentals</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Short-Term Rentals</a></li>
        </ul>
      </div>

      <!-- Category 3: Sell Your Home -->
      <div class="p-5 rounded-2xl flex flex-col items-center justify-center
                  bg-gray-200 dark:bg-gray-800
                  shadow-[5px_5px_10px_#bebebe,-5px_-5px_10px_#ffffff]
                  dark:shadow-[5px_5px_10px_#0a0a0a,-5px_-5px_10px_#262626]
                  transform transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-[7px_7px_14px_#bebebe,-7px_-7px_14px_#ffffff]
                  dark:hover:shadow-[7px_7px_14px_#0a0a0a,-7px_-7px_14px_#262626]">
        <h3 class="text-lg sm:text-xl font-semibold mb-3
                   bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500
                   dark:from-purple-300 dark:to-pink-300">
          Sell Your Home
        </h3>
        <ul class="text-center space-y-2 text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Get a Home Value</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Find an Agent</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Selling Process</a></li>
          <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400 text-sm sm:text-base">Listing Your Property</a></li>
        </ul>
      </div>
    </nav>

    <div class="mt-10 pt-6 border-t-2 border-gray-300 dark:border-gray-700
                flex flex-col sm:flex-row justify-between items-center text-center sm:text-left">
      <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base mb-4 sm:mb-0">© 2023 Real Estate Inc. All rights reserved.</p>
      <ul class="flex flex-wrap justify-center sm:justify-start space-x-4 sm:space-x-6 text-gray-700 dark:text-gray-300 text-sm sm:text-base">
        <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400">Privacy Policy</a></li>
        <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400">Terms of Service</a></li>
        <li><a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400">Contact Us</a></li>
      </ul>
    </div>
  </div>
</div>