Skeuomorphic_Grayscale_Business_Footer

<footer class="bg-gray-100 dark:bg-gray-900 border-t border-gray-300 dark:border-gray-700 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1),inset_0_-1px_0_0_rgba(0,0,0,0.1)] dark:shadow-[inset_0_1px_0_0_rgba(0,0,0,0.2),inset_0_-1px_0_0_rgba(255,255,255,0.05)] pt-12 pb-8">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 text-gray-700 dark:text-gray-300">

      <!-- Company Info Section -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200 border-b border-gray-300 dark:border-gray-700 pb-2 shadow-[0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-[0_1px_0_0_rgba(0,0,0,0.2)]">
          <span class="block transform -translate-x-0.5 -translate-y-0.5">About Us</span>
        </h3>
        <p class="text-sm leading-relaxed mb-4">
          Providing innovative solutions with a commitment to excellence. We create value through technology and expertise.
        </p>
        <div class="flex space-x-4">
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.361 21.056 22 16.299 22 12z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12.996 9.832L14.77 2H18l-5.6 6.4L20 22h-4.432l-3.376-7.056L8 22H4l5.367-12.7L2 2H6.42l3.714 5.3L12.996 9.832zm-2.88 1.134l-.794-1.127L5.704 3H3.04l8.307 10.97L20.89 21h2.748L12.016 9.966l-1.905-.001z"/>
            </svg>
          </a>
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.83 9.504.475.083.677-.217.677-.48C9.51 20.259 9.51 18.665 9.51 16.03V15.03c0-1.076-.23-1.477-.45-1.74a.5.5 0 00-.09-.08c-.14-.07-.35-.14-.75-.14-.94 0-1.5-.94-.09-1.34.8-.4 1.25.1 1.25.1a1.9 1.9 0 00.94.31c.88 0 1.2-.18.94-.48-.68-.2-1.35-.61-1.35-.61C7.8 10.02 7.02 9.4 7.02 8.5c0-1.77 1.83-2.02 2.37-2.02.48 0 1.05.27 1.25.48a1.53 1.53 0 00.31-.05c.8-.08 1.5-.18 2-.18C14.73 5.48 15.65 6 15.65 7c0 .54-.2 1.48-.94 1.74a.5.5 0 00-.08.08c-.2.27-.45.67-.45 1.74v1.07c0 2.63.003 4.22.003 4.48 0 .26.2.56.677.48A10 10 0 0022 12.017C22 6.484 17.523 2 12 2z" clip-rule="evenodd" />
            </svg>
          </a>
        </div>
      </div>

      <!-- Quick Links Section -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200 border-b border-gray-300 dark:border-gray-700 pb-2 shadow-[0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-[0_1px_0_0_rgba(0,0,0,0.2)]">
          <span class="block transform -translate-x-0.5 -translate-y-0.5">Quick Links</span>
        </h3>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Services</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Portfolio</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Team</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Blog</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Careers</a></li>
        </ul>
      </div>

      <!-- Resources Section -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200 border-b border-gray-300 dark:border-gray-700 pb-2 shadow-[0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-[0_1px_0_0_rgba(0,0,0,0.2)]">
          <span class="block transform -translate-x-0.5 -translate-y-0.5">Resources</span>
        </h3>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Support Center</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">FAQs</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Privacy Policy</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Terms of Service</a></li>
          <li><a href="#" class="inline-block py-1 hover:underline hover:text-gray-900 dark:hover:text-gray-100 transform active:translate-y-0.5 active:translate-x-0.5 transition duration-150 ease-in-out">Site Map</a></li>
        </ul>
      </div>

      <!-- Contact Us Section -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200 border-b border-gray-300 dark:border-gray-700 pb-2 shadow-[0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-[0_1px_0_0_rgba(0,0,0,0.2)]">
          <span class="block transform -translate-x-0.5 -translate-y-0.5">Contact Us</span>
        </h3>
        <address class="not-italic text-sm space-y-2">
          <p class="flex items-center"><svg class="w-4 h-4 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M9.667 2.115C13.25 1.523 16.48.513 18.062 2.213A3.684 3.684 0 0020 5.467V16.5c0 .356-.125.688-.346.953A4.6 4.6 0 0117.5 19h-15C1.84 19 1 18.156 1 17V3.5C1 2.399 2.5 2 4.14 2 5.568 2 7.153 2.502 9.667 2.115zM5 9c0-.552.448-1 1-1h.01c.552 0 1 .448 1 1s-.448 1-1 1H6c-.552 0-1-.448-1-1zm5 0c0-.552.448-1 1-1h.01c.552 0 1 .448 1 1s-.448 1-1 1H11c-.552 0-1-.448-1-1zm5 0c0-.552.448-1 1-1h.01c.552 0 1 .448 1 1s-.448 1-1 1H16c-.552 0-1-.448-1-1zm-10 4c0-.552.448-1 1-1h.01c.552 0 1 .448 1 1s-.448 1-1 1H6c-.552 0-1-.448-1-1zm5 0c0-.552.448-1 1-1h.01c.552 0 1 .448 1 1s-.448 1-1 1H11c-.552 0-1-.448-1-1zm5 0c0-.552.448-1 1-1h.01c.552 0 1 .448 1 1s-.448 1-1 1H16c-.552 0-1-.448-1-1z" clip-rule="evenodd"></path></svg> 123 Business Rd, Suite 456</p>
          <p class="pl-6">City, State 12345</p>
          <p class="flex items-center"><svg class="w-4 h-4 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg> +1 (555) 123-4567</p>
          <p class="flex items-center"><svg class="w-4 h-4 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path></svg> [email protected]</p>
        </address>
      </div>
    </div>

    <!-- Copyright and Logo Section -->
    <div class="mt-12 pt-8 text-center border-t border-gray-300 dark:border-gray-700 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-[inset_0_1px_0_0_rgba(0,0,0,0.2)]">
      <div class="flex flex-col items-center justify-center space-y-4 md:flex-row md:space-y-0 md:space-x-8">
        <img src="https://picsum.photos/seed/companylogo/80/40" alt="Company Logo" class="w-20 h-10 object-contain filter grayscale invert dark:invert-0 shadow-[2px_2px_4px_rgba(0,0,0,0.2),-2px_-2px_4px_rgba(255,255,255,0.8)] dark:shadow-[2px_2px_4px_rgba(0,0,0,0.8),-2px_-2px_4px_rgba(255,255,255,0.1)] rounded-sm p-1">
        <p class="text-sm text-gray-600 dark:text-gray-400">&copy; 2023 Your Company, Inc. All rights reserved.</p>
      </div>
    </div>
  </div>
</footer>