<!-- views/index.ejs -->
<footer class="bg-gray-800 text-white mt-10">
    <div class="container mx-auto px-4 py-8">
      <div class="flex flex-col md:flex-row md:justify-between">
        <!-- Logo and Description -->
        <div class="mb-6 md:mb-0">
          <h2 class="text-2xl font-bold">My Website</h2>
          <p class="mt-2 text-gray-400">A brief description of the website or company.</p>
        </div>
        <!-- Navigation Links -->
        <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8">
          <a href="#" class="hover:text-gray-300">Home</a>
          <a href="#" class="hover:text-gray-300">About</a>
          <a href="#" class="hover:text-gray-300">Services</a>
          <a href="#" class="hover:text-gray-300">Contact</a>
        </div>
      </div>
      <div class="mt-8 flex flex-col md:flex-row md:justify-between items-center">
        <!-- Social Media Icons -->
        <div class="flex space-x-4 mb-4 md:mb-0">
          <a href="#" class="hover:text-gray-300">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
              <path d="M22.5 0h-21c-.827 0-1.5.673-1.5 1.5v21c0 .827.673 1.5 1.5 1.5h21c.827 0 1.5-.673 1.5-1.5v-21c0-.827-.673-1.5-1.5-1.5zm-13.5 9h-2v4h2v11h-3v-11h-2v-4h2v-2.633c0-1.917 1.174-3.717 3.725-3.717h3.275v4h-2.625c-.293 0-.675.029-.675.75v1.6h3.3l-.45 4h-2.85v11h-3v-11zm13.5 15h-4v-15h4v15z"/>
            </svg>
          </a>
          <a href="#" class="hover:text-gray-300">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
              <path d="M22.5 0h-21c-.827 0-1.5.673-1.5 1.5v21c0 .827.673 1.5 1.5 1.5h21c.827 0 1.5-.673 1.5-1.5v-21c0-.827-.673-1.5-1.5-1.5zm-11.735 22.5h-.53v-10.226h.53v10.226zm.265-11.986c-.375 0-.735-.144-1.018-.414-.283-.27-.414-.63-.414-1.005s.144-.735.414-1.005c.283-.27.643-.414 1.018-.414s.735.144 1.018.414c.27.283.414.643.414 1.018 0 .375-.144.735-.414 1.018-.283.27-.643.414-1.018.414zm11.235 11.986h-4.53v-5.226c0-1.237-.057-2.197-1.497-2.197-1.425 0-1.67 1.111-1.67 2.167v5.256h-4.53v-10.226h4.53v1.394c.667-1.249 2.354-1.394 3.27-.831 1.207.666 1.497 1.994 1.497 3.412v6.251z"/>
            </svg>
          </a>
          <a href="#" class="hover:text-gray-300">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
              <path d="M22.5 0h-21c-.827 0-1.5.673-1.5 1.5v21c0 .827.673 1.5 1.5 1.5h21c.827 0 1.5-.673 1.5-1.5v-21c0-.827-.673-1.5-1.5-1.5zm-14.5 18.5h-4v-10.226h4v10.226zm-2-11.986c-.375 0-.735-.144-1.018-.414-.283-.27-.414-.63-.414-1.005s.144-.735.414-1.005c.283-.27.643-.414 1.018-.414s.735.144 1.018.414c.27.283.414.643.414 1.018 0 .375-.144.735-.414 1.018-.283.27-.643.414-1.018.414zm13.5 11.986h-4v-6.5c0-.689-.282-1.32-.745-1.787-.462-.467-1.093-.713-1.78-.713s-1.318.246-1.78.713c-.463.467-.745 1.098-.745 1.787v6.5h-4v-10.226h4v1.394c.667-1.249 2.354-1.394 3.27-.831 1.207.666 1.497 1.994 1.497 3.412v6.251z"/>
            </svg>
          </a>
        </div>
        <!-- Copyright -->
        <div class="text-gray-400 text-sm">
          Â© 2024 My Website. All rights reserved.
        </div>
      </div>
    </div>
  </footer>  