Dark Footer

<div class="bg-black border-white/10 border-t text-white w-full">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');
  </style>
  <footer>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div class="grid md:grid-cols-4 gap-8">
        <div class="md:col-span-2">
          <a href="#overview" class="flex items-center gap-2 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-md">
            <svg class="md:w-14 md:h-14 w-[36px] h-[36px]" viewBox="0 0 48 48" aria-hidden="true" stroke-width="2" style="width: 36px; height: 36px;">
              <path d="M24 10 L26 22 L38 24 L26 26 L24 38 L22 26 L10 24 L22 22 Z" fill="currentColor"></path>
            </svg>
            <span class="text-lg tracking-tight" style="font-family: 'Plus Jakarta Sans', Inter, sans-serif;">ReactPro</span>
          </a>
          <p class="mt-3 text-sm text-gray-400 max-w-md" style="font-family: 'Plus Jakarta Sans', Inter, sans-serif;">
            A modern, practical path to mastering React. Learn the patterns, tools, and architecture used by high‑performing teams.
          </p>
        </div>
        <div>
          <h4 class="text-sm" style="font-family: 'Plus Jakarta Sans', Inter, sans-serif;">Explore</h4>
          <ul class="mt-3 space-y-2 text-sm text-gray-400">
            <li>
              <a href="#curriculum" class="hover:text-gray-200" style="font-family: 'Plus Jakarta Sans', Inter, sans-serif;">Curriculum</a>
            </li>
            <li>
              <a href="#instructors" class="hover:text-gray-200" style="font-family: 'Plus Jakarta Sans', Inter, sans-serif;">Instructors</a>
            </li>
            <li>
              <a href="#pricing" class="hover:text-gray-200" style="font-family: 'Plus Jakarta Sans', Inter, sans-serif;">Pricing</a>
            </li>
            <li>
              <a href="#faq" class="hover:text-gray-200" style="font-family: 'Plus Jakarta Sans', Inter, sans-serif;">FAQ</a>
            </li>
          </ul>
        </div>
        <div>
          <h4 class="text-sm" style="font-family: 'Plus Jakarta Sans', Inter, sans-serif;">Contact</h4>
          <ul class="mt-3 space-y-2 text-sm text-gray-400">
            <li>
              <a href="mailto:team@reactpro.dev" class="hover:text-gray-200" style="font-family: 'Plus Jakarta Sans', Inter, sans-serif;">team@reactpro.dev</a>
            </li>
            <li class="flex items-center gap-3">
              <a href="#" class="hover:text-gray-200" style="font-family: 'Plus Jakarta Sans', Inter, sans-serif;">Twitter</a>
              <span class="text-gray-700" style="font-family: 'Plus Jakarta Sans', Inter, sans-serif;">•</span>
              <a href="#" class="hover:text-gray-200" style="font-family: 'Plus Jakarta Sans', Inter, sans-serif;">GitHub</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="mt-10 flex flex-col sm:flex-row items-center justify-between gap-4">
        <p class="text-xs text-gray-500" style="font-family: 'Plus Jakarta Sans', Inter, sans-serif;">
          ©React Pro Course. All rights reserved.
          <span id="year">2025</span>
        </p>
        <div class="flex items-center gap-4 text-xs text-gray-500">
          <a href="#" class="hover:text-gray-300" style="font-family: 'Plus Jakarta Sans', Inter, sans-serif;">Terms</a>
          <a href="#" class="hover:text-gray-300" style="font-family: 'Plus Jakarta Sans', Inter, sans-serif;">Privacy</a>
          <a href="#overview" class="inline-flex items-center gap-1 hover:text-gray-300" style="font-family: 'Plus Jakarta Sans', Inter, sans-serif;">
            Back to top
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 h-3.5">
              <path d="m5 12 7-7 7 7"></path>
              <path d="M12 19V5"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </footer>
</div>