B42/templates/includes/footer.html

{% load static %}
<footer class="bg-gray-900 text-gray-400 py-12">
  <div class="max-w-7xl mx-auto px-6 lg:px-8">

    <!-- Mobile Layout: Stacked, centered (visible only on mobile) -->
    <div class="space-y-12 md:hidden">
      <!-- Logo + Copyright -->
      <div class="text-center">
        <img src="{% static 'images/logo.svg' %}" alt="B42 Logo" class="h-10 w-auto mx-auto mb-4">
        <p class="text-sm">© 2025 SFY GmbH</p>
      </div>

      <!-- PRODUCTS -->
      <div class="text-center">
        <h3 class="text-white font-semibold uppercase mb-6">Products</h3>
        <ul class="space-y-4 text-lg">
          <li><a href="{% url 'training' %}" class="text-white hover:text-indigo-400 transition">training</a></li>
          <li><a href="{% url 'our_core_team' %}" class="text-white hover:text-indigo-400 transition">Team solution</a></li>
          <li><a href="{% url 'blog_list' %}" class="text-white hover:text-indigo-400 transition">Blog</a></li>
          <li><a href="{%url 'success_stories' %}" class="text-white hover:text-indigo-400 transition">Success Stories</a></li>
          <li><a href="{% url 'faq' %}" class="text-white hover:text-indigo-400 transition">FAQs</a></li>
        </ul>
      </div>

      <!-- PURSUE -->
      <div class="text-center">
        <h3 class="text-white font-semibold uppercase mb-6">Pursue</h3>
        <ul class="space-y-4 text-lg">
          <li><a href="{% url 'about' %}" class="text-white hover:text-indigo-400 transition">About Us</a></li>
          <li><a href="" class="text-white hover:text-indigo-400 transition">Jobs</a></li>
          <li><a href="{% url 'press' %}" class="text-white hover:text-indigo-400 transition">press</a></li>
          <li><a href="{% url 'help_and_support' %}" class="text-white hover:text-indigo-400 transition">Help & Support</a></li>
        </ul>
      </div>

      <!-- LEGAL -->
      <div class="text-center">
        <h3 class="text-white font-semibold uppercase mb-6">Legal</h3>
        <ul class="space-y-4 text-lg">
          <li><a href="{% url 'terms_conditions' %}" class="text-white hover:text-indigo-400 transition">Terms and Conditions</a></li>
          <li><a href="{% url 'data_protection' %}" class="text-white hover:text-indigo-400 transition">Data protection</a></li>
          <li><a href="{% url 'imprint' %}" class="text-white hover:text-indigo-400 transition">imprint</a></li>
        </ul>
      </div>

      <!-- SOCIAL -->
      <div class="text-center">
        <h3 class="text-white font-semibold uppercase mb-6">Social</h3>
        <ul class="space-y-4 text-lg">
          <li><a href="#" class="text-white hover:text-indigo-400 transition">Facebook</a></li>
          <li><a href="#" class="text-white hover:text-indigo-400 transition">Instagram</a></li>
          <li><a href="#" class="text-white hover:text-indigo-400 transition">YouTube</a></li>
          <li><a href="#" class="text-white hover:text-indigo-400 transition">TikTok</a></li>
          <li><a href="#" class="text-white hover:text-indigo-400 transition">LinkedIn</a></li>
        </ul>
      </div>

      <!-- App Store Buttons (centered, side-by-side) -->
      <div class="flex justify-center gap-8">
        <a href="#" class="block">
          <img src="{% static 'images/googleplay.png' %}" alt="Get it on Google Play" class="h-16 w-auto" />
        </a>
        <a href="#" class="block">
          <img src="{% static 'images/AppStore.png' %}" alt="Download on the App Store" class="h-16 w-auto" />
        </a>
      </div>

      <!-- Language Selector (centered) -->
      <div class="flex justify-center">
        <button class="border border-gray-600 rounded px-6 py-3 text-base hover:border-gray-400 transition">
          Language ▼
        </button>
      </div>
    </div>

    <!-- Desktop Layout: 5 columns (hidden on mobile, shown on md+) -->
    <div class="hidden md:grid md:grid-cols-5 gap-8">
      <!-- Logo, Copyright, App Buttons, Language -->
      <div class="space-y-8">
        <div>
          <img src="{% static 'images/logo.svg' %}" alt="B42 Logo" class="h-10 w-auto">
        </div>
        <p class="text-sm">© 2025 SFY GmbH</p>

        <!-- App Store Buttons -->
        <div class="flex flex-col items-start space-y-4">
          <a href="#" class="block">
            <img src="{% static 'images/googleplay.png' %}" alt="Get it on Google Play" class="h-12 w-auto" />
          </a>
          <a href="#" class="block">
            <img src="{% static 'images/AppStore.png' %}" alt="Download on the App Store" class="h-12 w-auto" />
          </a>
        </div>

        <!-- Language Selector -->
        <div>
          <button class="border border-gray-600 rounded px-4 py-2 text-sm hover:border-gray-400 transition">
            Language ▼
          </button>
        </div>
      </div>

      <!-- PRODUCTS -->
      <div>
        <h3 class="text-white font-semibold uppercase mb-4">Products</h3>
        <ul class="space-y-3 text-sm">
          <li><a href="{% url 'training' %}" class="text-white hover:text-indigo-400 transition">training</a></li>
          <li><a href="{% url 'our_core_team' %}" class="text-white hover:text-indigo-400 transition">Team solution</a></li>
          <li><a href="{% url 'blog_list' %}" class="text-white hover:text-indigo-400 transition">Blog</a></li>
          <li><a href="{%url 'success_stories' %}" class="text-white hover:text-indigo-400 transition">Success Stories</a></li>
          <li><a href="{% url 'faq' %}" class="text-white hover:text-indigo-400 transition">FAQs</a></li>
        </ul>
      </div>

      <!-- PURSUE -->
      <div>
        <h3 class="text-white font-semibold uppercase mb-4">Pursue</h3>
        <ul class="space-y-3 text-sm">
          <li><a href="{% url 'about' %}" class="text-white hover:text-indigo-400 transition">About Us</a></li>
          <li><a href="" class="text-white hover:text-indigo-400 transition">Jobs</a></li>
          <li><a href="{% url 'press' %}" class="text-white hover:text-indigo-400 transition">press</a></li>
          <li><a href="{% url 'help_and_support' %}" class="text-white hover:text-indigo-400 transition">Help & Support</a></li>
        </ul>
      </div>

      <!-- LEGAL -->
      <div>
        <h3 class="text-white font-semibold uppercase mb-4">Legal</h3>
        <ul class="space-y-3 text-sm">
          <li><a href="{% url 'terms_conditions' %}" class="text-white hover:text-indigo-400 transition">Terms and Conditions</a></li>
          <li><a href="{% url 'data_protection' %}" class="text-white hover:text-indigo-400 transition">Data protection</a></li>
          <li><a href="{% url 'imprint' %}" class="text-white hover:text-indigo-400 transition">imprint</a></li>
        </ul>
      </div>

      <!-- SOCIAL -->
      <div>
        <h3 class="text-white font-semibold uppercase mb-4">Social</h3>
        <ul class="space-y-3 text-sm">
          <li><a href="#" class="text-white hover:text-indigo-400 transition">Facebook</a></li>
          <li><a href="#" class="text-white hover:text-indigo-400 transition">Instagram</a></li>
          <li><a href="#" class="text-white hover:text-indigo-400 transition">YouTube</a></li>
          <li><a href="#" class="text-white hover:text-indigo-400 transition">TikTok</a></li>
          <li><a href="#" class="text-white hover:text-indigo-400 transition">LinkedIn</a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>