Footer-Komponente - Swiss Pastel Consulting

<footer class="bg-violet-50 text-violet-800 dark:bg-gray-800 dark:text-gray-200 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8 informational-footer">
    <!-- About Section -->
    <div class="col-span-1 md:col-span-2 lg:col-span-1">
      <h3 class="text-lg font-semibold mb-4 text-violet-700 dark:text-violet-300">About Us</h3>
      <p class="text-sm leading-relaxed mb-4">Providing expert consulting services to help your business thrive. Our approach is rooted in precision, clarity, and measurable results.</p>
      <div class="flex space-x-4">
        <a href="#" class="text-violet-600 hover:text-violet-800 dark:text-violet-400 dark:hover:text-violet-200 transition-colors duration-200">
          <svg class="w-5 h-5" 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.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="text-violet-600 hover:text-violet-800 dark:text-violet-400 dark:hover:text-violet-200 transition-colors duration-200">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.002 3.797.048 1.05.056 1.62.231 2.062.409.54.225.9-.475 1.706-1.129 1.16-.677 2.1-1.42 2.574-2.834.786-.289.479-.933.864-1.178.683-.437 1.26-.931 1.785-1.465.526-.534.981-1.077 1.341-1.58.36-.502 1.4-1.745 1.4-1.745s-.192-.613-.192-1.242V8.91c0-2.427-4.997-2.738-4.997-2.738v0h12.518V9.1h6.623V4.492c0-.527-.427-.954-.954-.954H2c-.527 0-.954.427-.954.954V19.508c0,.527.427.954.954.954h20c.527 0 .954-.427.954-.954h.001ZM12 4.41c-4.148 0-7.51 3.362-7.51 7.51s3.362 7.51 7.51 7.51 7.51-3.362 7.51-7.51-3.362-7.51-7.51-7.51Zm0 12.235c-2.612 0-4.725-2.113-4.725-4.725S9.388 7.185 12 7.185s4.725 2.113 4.725 4.725-2.113 4.725-4.725 4.725Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="text-violet-600 hover:text-violet-800 dark:text-violet-400 dark:hover:text-violet-200 transition-colors duration-200">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.29 20.89c-.58 0-1.05-.47-1.05-1.05v-5.69c0-.58.47-1.05 1.05-1.05h1.2v1.5H8.29v4.19h8.22v-4.19h-1.2v-1.5h1.2c.58 0 1.05.47 1.05 1.05v5.69c0 .58-.47 1.05-1.05 1.05H8.29zM12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-4.75-9.21H8c.28-.48.65-.92 1.08-1.3l-1.33-1.33c-.45.45-.85.95-1.2 1.48zm-1.89-1.89h1.77L12 4.14 17.58 9.5h1.77L12 2zM12 10.5c-1.38 0-2.5 1.12-2.5 2.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5zm0 3.5c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/>
          </svg>
        </a>
      </div>
    </div>

    <!-- Services Section -->
    <div>
      <h3 class="text-lg font-semibold mb-4 text-violet-700 dark:text-violet-300">Our Services</h3>
      <ul class="space-y-2 text-sm">
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Strategy Consulting</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Operations Consulting</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Technology Consulting</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Financial Advisory</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Market Research</a></li>
      </ul>
    </div>

    <!-- Quick Links Section -->
    <div>
      <h3 class="text-lg font-semibold mb-4 text-violet-700 dark:text-violet-300">Quick Links</h3>
      <ul class="space-y-2 text-sm">
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Home</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">About Us</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Services</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Blog</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Contact</a></li>
      </ul>
    </div>

    <!-- Contact Info Section -->
    <div>
      <h3 class="text-lg font-semibold mb-4 text-violet-700 dark:text-violet-300">Contact Us</h3>
      <div class="space-y-2 text-sm">
        <p>123 Consulting Rd<br>Suite 100, Business City<br>BC 12345, Country</p>
        <p><a href="tel:+1234567890" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">+1 (234) 567-890</a></p>
        <p><a href="mailto:[email protected]" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">[email protected]</a></p>
        <p>
          <img src="https://picsum.photos/id/1084/100/60" alt="Office map placeholder" class="w-full max-w-xs h-auto rounded-md shadow-sm mt-4 object-cover">
        </p>
      </div>
    </div>
  </div>

  <div class="border-t border-violet-200 dark:border-gray-700 mt-12 pt-8 text-center text-sm">
    <p>&copy; <time datetime="2023">2023</time> Consulting Firm. All rights reserved.</p>
  </div>
</footer>