跳至内容链接组件

<div class="bg-green-50 dark:bg-gray-900 min-h-screen p-4 sm:p-6 md:p-8 flex items-center justify-center font-sans relative">
  <!-- Skip to Content Link -->
  <a href="#main-content" class="
      absolute top-0 left-1/2 -translate-x-1/2 -translate-y-full px-4 py-2 mt-2
      bg-yellow-600 text-white rounded-md shadow-lg
      focus:translate-y-0 focus:z-50
      transition-transform duration-300 ease-out
      text-sm sm:text-base
      dark:bg-yellow-700 dark:text-gray-100
      border-2 border-transparent focus:border-green-800 dark:focus:border-green-300
      font-bold tracking-wide
    ">Skip to Main Content</a>

  <!-- Main content area (example) -->
  <main id="main-content" class="
      bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 sm:p-8 md:p-10
      max-w-4xl w-full text-center
      border-t-8 border-yellow-500 dark:border-yellow-600
      relative overflow-hidden
    ">
    <!-- Artistic element: Subtle green watercolor splash -->
    <div class="
        absolute top-0 left-0 w-full h-full
        bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-green-100/50 to-transparent
        dark:from-green-900/30 dark:to-transparent
        pointer-events-none
        opacity-70 dark:opacity-50
      "></div>
    <h1 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-green-800 dark:text-green-300 mb-4 sm:mb-6 leading-tight">
      Harvesting Growth, Nurturing Nature
    </h1>
    <p class="text-gray-700 dark:text-gray-300 text-base sm:text-lg mb-6 sm:mb-8 max-w-2xl mx-auto leading-relaxed">
      Welcome to our agricultural hub. We cultivate innovation and sustainable practices,
      bringing forth the bounty of the earth.
    </p>
    <img src="https://picsum.photos/seed/agriculture/800/450" alt="Agricultural field at sunset" class="rounded-lg shadow-md mb-6 sm:mb-8 w-full h-auto object-cover">
    <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base leading-relaxed">
      Our commitment extends from seed to harvest, ensuring quality and fostering a thriving ecosystem.
      Explore our offerings below.
    </p>
    <div class="mt-8 flex flex-col sm:flex-row justify-center gap-4">
      <button class="
        bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg
        shadow-md transition duration-300 ease-in-out
        dark:bg-blue-700 dark:hover:bg-blue-800
        border-2 border-transparent hover:border-blue-800 dark:hover:border-blue-300
        relative overflow-hidden
      ">
        <span class="relative z-10">Learn More</span>
        <span class="
          absolute inset-0 bg-white/10 dark:bg-white/20 opacity-0
          hover:opacity-100 transition-opacity duration-300 ease-in-out
        "></span>
      </button>
      <button class="
        bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-6 rounded-lg
        shadow-md transition duration-300 ease-in-out
        dark:bg-green-800 dark:hover:bg-green-900
        border-2 border-transparent hover:border-green-900 dark:hover:border-green-400
        relative overflow-hidden
      ">
        <span class="relative z-10">Our Products</span>
        <span class="
          absolute inset-0 bg-white/10 dark:bg-white/20 opacity-0
          hover:opacity-100 transition-opacity duration-300 ease-in-out
        "></span>
      </button>
    </div>
  </main>
</div>