Luxury Residential Website Footer

<div class="selection:bg-[#1c1917] selection:text-white"
  style="background-color: #f9f8f6; color: #1c1917; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;">
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: "#1c1917",
            secondary: "rgba(28,25,23,0.65)",
            line: "rgba(28,25,23,0.12)",
            background: "#f9f8f6",
            warm: "#EDE7DE",
          },
        },
      },
    };
  </script>

  <footer class="border-line md:px-12 md:pt-14 border-t pt-28 pr-6 pb-14 pl-6">
    <div class="max-w-[1400px] mx-auto">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-12 lg:gap-20">
        <div class="flex flex-col items-start">
          <h3 class="font-serif text-3xl font-medium tracking-tight text-primary mb-8" style="font-family: serif;">
            NOVERA
          </h3>
          <p class="text-secondary text-sm font-light leading-relaxed max-w-[200px]">
            Architectural residences in the heart of Montreal, shaped by light, space, and quiet intention.
          </p>
        </div>

        <div class="flex flex-col items-start">
          <span class="block text-[10px] uppercase tracking-widest text-secondary/50 mb-8">
            Explore
          </span>
          <ul class="space-y-3 text-sm font-light">
            <li>
              <a href="#" class="text-primary hover:text-secondary transition-colors duration-300">Residences</a>
            </li>
            <li>
              <a href="#" class="text-primary hover:text-secondary transition-colors duration-300">Neighbourhoods</a>
            </li>
            <li>
              <a href="#" class="text-primary hover:text-secondary transition-colors duration-300">Inquire</a>
            </li>
          </ul>
        </div>

        <div class="flex flex-col items-start">
          <span class="block text-[10px] uppercase tracking-widest text-secondary/50 mb-8">
            Visit
          </span>
          <div class="mb-8">
            <p class="text-sm font-light text-primary leading-relaxed">
              Novera Residential<br />
              1455 Wellington Street<br />
              Montreal, QC H3C 1S4<br />
              Canada
            </p>
          </div>
          <div>
            <span class="block text-[10px] uppercase tracking-widest text-secondary/50 mb-2">
              Leasing Office
            </span>
            <p class="text-sm font-light text-secondary leading-relaxed">
              Mon–Sat — 10:00–18:00<br />
              By appointment Sunday
            </p>
          </div>
        </div>

        <div class="flex flex-col items-start">
          <span class="block text-[10px] uppercase tracking-widest text-secondary/50 mb-8">
            Ask a Question
          </span>
          <p class="text-sm font-light text-secondary mb-6 leading-relaxed max-w-[240px]">
            A member of our team will respond within 24 hours.
          </p>
          <form class="w-full relative group mb-8" onsubmit="event.preventDefault();">
            <input
              type="email"
              placeholder="Email Address"
              class="w-full bg-transparent border-b border-line py-2 text-sm font-light text-primary placeholder:text-secondary/30 focus:outline-none focus:border-primary transition-colors duration-300 pr-12"
            />
            <button
              type="submit"
              class="absolute right-0 bottom-2 text-[10px] uppercase tracking-widest text-primary hover:text-secondary transition-colors duration-300 border-b border-transparent hover:border-secondary pb-0.5"
            >
              Send
            </button>
          </form>
          <div class="flex flex-col gap-1">
            <a href="mailto:hello@novera.com"
              class="text-sm font-light text-primary hover:text-secondary transition-colors duration-300">hello@novera.com</a>
            <a href="tel:+15149002400"
              class="text-sm font-light text-secondary hover:text-primary transition-colors duration-300">+1 (514)
              900-2400</a>
          </div>
        </div>
      </div>

      <div
        class="border-t border-line mt-20 pt-10 flex flex-col md:flex-row justify-between items-start md:items-end gap-8">
        <div class="flex flex-col gap-3">
          <span class="text-[10px] uppercase tracking-widest text-secondary/40">
            Built with intention in Montreal.
          </span>
          <p class="text-[10px] uppercase tracking-widest text-secondary/60">
            © 2024 Novera Residential.
          </p>
        </div>

        <div class="flex flex-col md:flex-row items-start md:items-center gap-6 md:gap-10">
          <div class="flex gap-6 text-[10px] uppercase tracking-widest text-secondary/60">
            <a href="#" class="hover:text-primary transition-colors duration-300">Privacy</a>
            <a href="#" class="hover:text-primary transition-colors duration-300">Terms</a>
          </div>

          <div class="flex gap-5 text-secondary/50">
            <a href="#" class="hover:text-primary transition-colors duration-300" aria-label="Instagram">
              <iconify-icon icon="solar:instagram-linear" width="18"></iconify-icon>
            </a>
            <a href="#" class="hover:text-primary transition-colors duration-300" aria-label="Facebook">
              <iconify-icon icon="solar:facebook-linear" width="18"></iconify-icon>
            </a>
          </div>
        </div>
      </div>
    </div>
  </footer>
</div>