Skip to Content Link Component

<header class="bg-white py-4 shadow-sm dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
  <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:left-1/2 focus:-translate-x-1/2 focus:top-4 focus:z-50 px-4 py-2 bg-black text-white dark:bg-white dark:text-black rounded-md text-sm font-semibold tracking-tight uppercase focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-white transition-colors duration-200">
    Skip to Main Content
  </a>
  <nav class="container mx-auto px-4 flex justify-between items-center">
    <div class="text-2xl font-bold text-gray-900 dark:text-white uppercase tracking-tighter">
      <a href="#" class="hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-200">AthleticPulse</a>
    </div>
    <ul class="hidden md:flex space-x-8">
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium uppercase text-sm tracking-tight transition-colors duration-200">Workout Plans</a></li>
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium uppercase text-sm tracking-tight transition-colors duration-200">Nutrition Guides</a></li>
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium uppercase text-sm tracking-tight transition-colors duration-200">Team Stats</a></li>
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium uppercase text-sm tracking-tight transition-colors duration-200">Classes</a></li>
    </ul>
    <button class="md:hidden flex items-center p-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-white rounded-md" aria-label="Open menu">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
    </button>
  </nav>
</header>

<main id="main-content" class="container mx-auto px-4 py-12 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 min-h-screen">
  <h1 class="text-4xl md:text-5xl font-extrabold mb-8 text-black dark:text-white uppercase tracking-tighter leading-tight">
    Unleash Your Full Potential
  </h1>
  <p class="text-lg md:text-xl leading-relaxed mb-8 max-w-3xl">
    Welcome to AthleticPulse – your ultimate destination for achieving peak physical performance. Explore our expertly crafted workout plans, comprehensive nutrition guides, and real-time team statistics.
  </p>
  <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
    <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700">
      <img src="https://picsum.photos/400/250?random=1" alt="Workout Plan" class="w-full h-40 object-cover rounded-md mb-4 border border-gray-200 dark:border-gray-600">
      <h3 class="text-xl font-bold mb-2 text-gray-900 dark:text-white uppercase tracking-tight">Strength Training</h3>
      <p class="text-gray-700 dark:text-gray-300 text-sm">Build muscle and increase power with our tailored strength programs.</p>
    </div>
    <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700">
      <img src="https://picsum.photos/400/250?random=2" alt="Nutrition Guide" class="w-full h-40 object-cover rounded-md mb-4 border border-gray-200 dark:border-gray-600">
      <h3 class="text-xl font-bold mb-2 text-gray-900 dark:text-white uppercase tracking-tight">Balanced Diet</h3>
      <p class="text-gray-700 dark:text-gray-300 text-sm">Fuel your body right with our expert nutrition advice and meal plans.</p>
    </div>
    <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700">
      <img src="https://picsum.photos/400/250?random=3" alt="Team Stats" class="w-full h-40 object-cover rounded-md mb-4 border border-gray-200 dark:border-gray-600">
      <h3 class="text-xl font-bold mb-2 text-gray-900 dark:text-white uppercase tracking-tight">Performance Tracking</h3>
      <p class="text-gray-700 dark:text-gray-300 text-sm">Monitor your team's progress and individual achievements.</p>
    </div>
  </section>

  <div class="p-6 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-inner border border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white uppercase tracking-tight">Latest Updates</h2>
      <ul class="space-y-4">
          <li class="flex items-start">
              <div class="flex-shrink-0 w-12 h-12 rounded-full overflow-hidden mr-4 border-2 border-black dark:border-white">
                  <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-full h-full object-cover">
              </div>
              <div>
                  <p class="text-gray-800 dark:text-gray-200 font-semibold">New Speed Training Module Launched!</p>
                  <p class="text-sm text-gray-600 dark:text-gray-400">Our new module focuses on agility drills and explosive power. Available now.</p>
              </div>
          </li>
           <li class="flex items-start">
              <div class="flex-shrink-0 w-12 h-12 rounded-full overflow-hidden mr-4 border-2 border-black dark:border-white">
                  <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-full h-full object-cover">
              </div>
              <div>
                  <p class="text-gray-800 dark:text-gray-200 font-semibold">March Fitness Challenge Winners Announced!</p>
                  <p class="text-sm text-gray-600 dark:text-gray-400">A huge congratulations to all participants. Check your dashboard for insights.</p>
              </div>
          </li>
      </ul>
  </div>
</main>

<footer class="bg-black text-white dark:bg-gray-950 py-6 mt-12">
  <div class="container mx-auto px-4 text-center text-sm font-medium uppercase tracking-tight">
    &copy; 2023 AthleticPulse. All rights reserved.
  </div>
</footer>