Organic_Nature_Inspired_Real_Estate_Footer

<footer class="bg-gradient-to-br from-green-50 to-blue-50 text-gray-800 py-12 dark:from-green-950 dark:to-blue-950 dark:text-gray-200 overflow-hidden relative">
  <!-- Background organic shapes - these are visual only and might need careful positioning -->
  <div class="absolute -bottom-20 -left-20 w-80 h-80 rounded-full bg-green-200 opacity-30 blur-3xl dark:bg-green-700 dark:opacity-20 transition-all duration-500 ease-in-out"></div>
  <div class="absolute -top-10 -right-10 w-96 h-96 rounded-full bg-blue-200 opacity-30 blur-3xl dark:bg-blue-700 dark:opacity-20 transition-all duration-500 ease-in-out"></div>
  <div class="absolute bottom-1/4 left-1/4 w-60 h-60 rounded-full bg-green-100 opacity-20 blur-2xl dark:bg-green-800 dark:opacity-10 transition-all duration-500 ease-in-out"></div>

  <div class="container mx-auto px-4 relative z-10">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 lg:gap-12">

      <!-- Company Info / Logo -->
      <div class="lg:col-span-2 flex flex-col items-start">
        <a href="#" class="flex items-center space-x-3 mb-6 transition-transform hover:scale-105 duration-300">
          <img src="https://picsum.photos/id/10/50/50" alt="Nature Estate Logo" class="rounded-full shadow-lg border-2 border-green-400 dark:border-green-600">
          <span class="font-extrabold text-3xl text-green-700 dark:text-green-300 font-serif">NatureNest</span>
        </a>
        <p class="text-base leading-relaxed text-gray-700 dark:text-gray-300 mb-6 max-w-sm">
          Discover your dream home nestled in harmony with nature. We connect you to serene properties that breathe life into your living.
        </p>
        <form class="w-full max-w-sm relative group">
          <input type="email" placeholder="Your email for updates..." class="w-full p-3 rounded-full bg-white bg-opacity-70 border-2 border-green-300 dark:bg-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent dark:border-green-700 pr-12 transition-all duration-300 group-focus-within:shadow-lg group-focus-within:border-blue-400">
          <button type="submit" class="absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-green-500 rounded-full text-white hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-green-600 dark:hover:bg-green-700 transition-all duration-300">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
              <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
          </button>
        </form>
      </div>

      <!-- Quick Links -->
      <div>
        <h3 class="text-xl font-bold mb-6 text-green-700 dark:text-green-300 border-b-2 border-green-400 pb-2 inline-block transition-colors duration-300">Quick Links</h3>
        <ul class="space-y-4">
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Properties</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>About Us</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Contact</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Blog</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Careers</a></li>
        </ul>
      </div>

      <!-- Services -->
      <div>
        <h3 class="text-xl font-bold mb-6 text-green-700 dark:text-green-300 border-b-2 border-green-400 pb-2 inline-block transition-colors duration-300">Services</h3>
        <ul class="space-y-4">
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Buy Property</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Sell Property</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Property Valuation</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Mortgage Advice</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Rental Management</a></li>
        </ul>
      </div>

      <!-- Contact Info -->
      <div>
        <h3 class="text-xl font-bold mb-6 text-green-700 dark:text-green-300 border-b-2 border-green-400 pb-2 inline-block transition-colors duration-300">Connect</h3>
        <ul class="space-y-4">
          <li class="flex items-start">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 mt-1 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.727A8 8 0 016.343 7.273L7.757 8.687a6 6 0 008.486 8.486l1.414 1.414z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 7.273a4 4 0 115.656 5.656L10 17.657 4.343 12zm0 0L4.343 7.273m0 0L9.172 2.445" />
            </svg>
            <address class="not-italic text-gray-700 dark:text-gray-300">
              123 EcoLane, Green Oasis City, GO 45678
            </address>
          </li>
          <li class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9.071c.325.399.075.95-.476 1.113l-1.424.378a12.013 12.013 0 008.68-8.68l.377-1.425c.164-.551.715-.801 1.113-.476l4.045 1.554A1 1 0 0121 16.72V19a2 2 0 01-2 2H5a2 2 0 01-2-2v-5.28a1 1 0 01.684-.948l1.554-4.045z" />
            </svg>
            <a href="tel:+1234567890" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">+1 (234) 567-890</a>
          </li>
          <li class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26c.73.48 1.67.48 2.4 0L21 8m-18 8V6a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
            </svg>
            <a href="mailto:[email protected]" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">[email protected]</a>
          </li>
        </ul>
      </div>

    </div>

    <div class="mt-12 pt-8 border-t border-green-300 dark:border-green-700 flex flex-col md:flex-row items-center justify-between text-sm text-gray-600 dark:text-gray-400">
      <p class="mb-4 md:mb-0">&copy; 2023 NatureNest. All rights reserved. <span class="hidden md:inline">|</span> <br class="md:hidden"> Designed with nature in mind.</p>
      <div class="flex space-x-6">
        <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Privacy Policy</a>
        <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Terms of Service</a>
        <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Sitemap</a>
      </div>
    </div>
  </div>
</footer>