Sitemap-Komponente

<div class="bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-purple-900 dark:via-pink-900 dark:to-yellow-900 min-h-screen p-4 sm:p-6 md:p-8 flex items-center justify-center font-sans">
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-6 sm:p-8 md:p-10 lg:p-12 w-full max-w-6xl transition-all duration-300 ease-in-out">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-center mb-10 text-purple-600 dark:text-purple-300 drop-shadow-lg leading-tight">
      <span class="block">Explore Our World</span> <span class="text-pink-500 dark:text-pink-400">Find Your Match</span>
    </h1>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8 md:gap-10">

      <!-- Section 1: About Us -->
      <div class="bg-purple-50 dark:bg-gray-700 rounded-lg p-5 shadow-md hover:shadow-lg transition-shadow duration-300 border-b-4 border-purple-300 dark:border-purple-600">
        <h2 class="text-2xl font-bold mb-4 text-purple-700 dark:text-purple-200">About Us</h2>
        <ul class="space-y-2 text-md text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:text-purple-500 dark:hover:text-purple-400 transform hover:translate-x-1 transition-transform duration-200 block">Our Story</a></li>
          <li><a href="#" class="hover:text-purple-500 dark:hover:text-purple-400 transform hover:translate-x-1 transition-transform duration-200 block">Mission & Values</a></li>
          <li><a href="#" class="hover:text-purple-500 dark:hover:text-purple-400 transform hover:translate-x-1 transition-transform duration-200 block">Team</a></li>
          <li><a href="#" class="hover:text-purple-500 dark:hover:text-purple-400 transform hover:translate-x-1 transition-transform duration-200 block">Careers</a></li>
        </ul>
      </div>

      <!-- Section 2: Discover -->
      <div class="bg-pink-50 dark:bg-gray-700 rounded-lg p-5 shadow-md hover:shadow-lg transition-shadow duration-300 border-b-4 border-pink-300 dark:border-pink-600">
        <h2 class="text-2xl font-bold mb-4 text-pink-700 dark:text-pink-200">Discover</h2>
        <ul class="space-y-2 text-md text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:text-pink-500 dark:hover:text-pink-400 transform hover:translate-x-1 transition-transform duration-200 block">Browse Profiles</a></li>
          <li><a href="#" class="hover:text-pink-500 dark:hover:text-pink-400 transform hover:translate-x-1 transition-transform duration-200 block">Local Matches</a></li>
          <li><a href="#" class="hover:text-pink-500 dark:hover:text-pink-400 transform hover:translate-x-1 transition-transform duration-200 block">Zodiac Compatibility</a></li>
          <li><a href="#" class="hover:text-pink-500 dark:hover:text-pink-400 transform hover:translate-x-1 transition-transform duration-200 block">Success Stories</a></li>
        </ul>
        <div class="mt-4">
          <img src="https://picsum.photos/id/1025/150/100" alt="Love in the Air" class="rounded-md shadow-sm w-full h-24 object-cover">
        </div>
      </div>

      <!-- Section 3: Features -->
      <div class="bg-yellow-50 dark:bg-gray-700 rounded-lg p-5 shadow-md hover:shadow-lg transition-shadow duration-300 border-b-4 border-yellow-300 dark:border-yellow-600">
        <h2 class="text-2xl font-bold mb-4 text-yellow-700 dark:text-yellow-200">Features</h2>
        <ul class="space-y-2 text-md text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:text-yellow-500 dark:hover:text-yellow-400 transform hover:translate-x-1 transition-transform duration-200 block">Messaging & Chat</a></li>
          <li><a href="#" class="hover:text-yellow-500 dark:hover:text-yellow-400 transform hover:translate-x-1 transition-transform duration-200 block">Video Dates</a></li>
          <li><a href="#" class="hover:text-yellow-500 dark:hover:text-yellow-400 transform hover:translate-x-1 transition-transform duration-200 block">Icebreakers</a></li>
          <li><a href="#" class="hover:text-yellow-500 dark:hover:text-yellow-400 transform hover:translate-x-1 transition-transform duration-200 block">Profile Boosts</a></li>
          <li><a href="#" class="hover:text-yellow-500 dark:hover:text-yellow-400 transform hover:translate-x-1 transition-transform duration-200 block">Moderation</a></li>
        </ul>
      </div>

      <!-- Section 4: Support & Legal -->
      <div class="bg-blue-50 dark:bg-gray-700 rounded-lg p-5 shadow-md hover:shadow-lg transition-shadow duration-300 border-b-4 border-blue-300 dark:border-blue-600">
        <h2 class="text-2xl font-bold mb-4 text-blue-700 dark:text-blue-200">Help & Legal</h2>
        <ul class="space-y-2 text-md text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:text-blue-500 dark:hover:text-blue-400 transform hover:translate-x-1 transition-transform duration-200 block">FAQ</a></li>
          <li><a href="#" class="hover:text-blue-500 dark:hover:text-blue-400 transform hover:translate-x-1 transition-transform duration-200 block">Contact Us</a></li>
          <li><a href="#" class="hover:text-blue-500 dark:hover:text-blue-400 transform hover:translate-x-1 transition-transform duration-200 block">Terms of Service</a></li>
          <li><a href="#" class="hover:text-blue-500 dark:hover:text-blue-400 transform hover:translate-x-1 transition-transform duration-200 block">Privacy Policy</a></li>
          <li><a href="#" class="hover:text-blue-500 dark:hover:text-blue-400 transform hover:translate-x-1 transition-transform duration-200 block">Safety Tips</a></li>
        </ul>
      </div>

      <!-- Section 5: Community & Blog (Spans 2 columns on larger screens) -->
      <div class="lg:col-span-2 bg-green-50 dark:bg-gray-700 rounded-lg p-5 shadow-md hover:shadow-lg transition-shadow duration-300 border-b-4 border-green-300 dark:border-green-600 relative overflow-hidden group">
        <h2 class="text-2xl font-bold mb-4 text-green-700 dark:text-green-200">Community & Blog</h2>
        <ul class="grid grid-cols-1 sm:grid-cols-2 gap-y-2 gap-x-6 text-md text-gray-700 dark:text-gray-300 relative z-10">
          <li><a href="#" class="hover:text-green-500 dark:hover:text-green-400 transform hover:translate-x-1 transition-transform duration-200 block">User Forums</a></li>
          <li><a href="#" class="hover:text-green-500 dark:hover:text-green-400 transform hover:translate-x-1 transition-transform duration-200 block">Dating Advice</a></li>
          <li><a href="#" class="hover:text-green-500 dark:hover:text-green-400 transform hover:translate-x-1 transition-transform duration-200 block">Events & Meetups</a></li>
          <li><a href="#" class="hover:text-green-500 dark:hover:text-green-400 transform hover:translate-x-1 transition-transform duration-200 block">Success Stories</a></li>
          <li><a href="#" class="hover:text-green-500 dark:hover:text-green-400 transform hover:translate-x-1 transition-transform duration-200 block">Love Stories (Blog)</a></li>
          <li><a href="#" class="hover:text-green-500 dark:hover:text-green-400 transform hover:translate-x-1 transition-transform duration-200 block">Podcast</a></li>
        </ul>
        <div class="absolute -bottom-4 -right-4 w-24 h-24 bg-green-200 dark:bg-green-800 rounded-full opacity-30 group-hover:opacity-60 transition-opacity duration-300 blur-md"></div>
        <div class="absolute -top-2 -left-2 w-16 h-16 bg-green-200 dark:bg-green-800 rounded-full opacity-20 group-hover:opacity-50 transition-opacity duration-300 blur-md"></div>
      </div>

      <!-- Section 6: User Settings (Includes an avatar) -->
      <div class="bg-indigo-50 dark:bg-gray-700 rounded-lg p-5 shadow-md hover:shadow-lg transition-shadow duration-300 border-b-4 border-indigo-300 dark:border-indigo-600 flex flex-col items-center text-center">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-20 h-20 rounded-full object-cover mb-4 border-4 border-indigo-400 dark:border-indigo-500 shadow-md">
        <h2 class="text-2xl font-bold mb-4 text-indigo-700 dark:text-indigo-200">Your Account</h2>
        <ul class="space-y-2 text-md text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:text-indigo-500 dark:hover:text-indigo-400 transform hover:translate-x-1 transition-transform duration-200 block">Profile Settings</a></li>
          <li><a href="#" class="hover:text-indigo-500 dark:hover:text-indigo-400 transform hover:translate-x-1 transition-transform duration-200 block">Privacy Preferences</a></li>
          <li><a href="#" class="hover:text-indigo-500 dark:hover:text-indigo-400 transform hover:translate-x-1 transition-transform duration-200 block">Notifications</a></li>
          <li><a href="#" class="hover:text-indigo-500 dark:hover:text-indigo-400 transform hover:translate-x-1 transition-transform duration-200 block">Subscription</a></li>
          <li><a href="#" class="hover:text-indigo-500 dark:hover:text-indigo-400 transform hover:translate-x-1 transition-transform duration-200 block">Logout</a></li>
        </ul>
      </div>

      <!-- Section 7: Mobile Apps -->
      <div class="bg-red-50 dark:bg-gray-700 rounded-lg p-5 shadow-md hover:shadow-lg transition-shadow duration-300 border-b-4 border-red-300 dark:border-red-600">
        <h2 class="text-2xl font-bold mb-4 text-red-700 dark:text-red-200">Mobile Apps</h2>
        <ul class="space-y-2 text-md text-gray-700 dark:text-gray-300">
          <li><a href="#" class="hover:text-red-500 dark:hover:text-red-400 transform hover:translate-x-1 transition-transform duration-200 block">iOS App</a></li>
          <li><a href="#" class="hover:text-red-500 dark:hover:text-red-400 transform hover:translate-x-1 transition-transform duration-200 block">Android App</a></li>
          <li><a href="#" class="hover:text-red-500 dark:hover:text-red-400 transform hover:translate-x-1 transition-transform duration-200 block">App Features</a></li>
        </ul>
        <div class="mt-4 flex justify-around">
          <img src="https://picsum.photos/id/83/60/60" alt="App Store" class="rounded-lg shadow-sm">
          <img src="https://picsum.photos/id/95/60/60" alt="Google Play" class="rounded-lg shadow-sm">
        </div>
      </div>

    </div>

    <div class="mt-12 text-center text-md text-gray-600 dark:text-gray-400">
      <p>&copy; 2023 LoveConnect. All rights reserved. <span class="hidden sm:inline">Designed with ❤️ for finding your perfect match.</span></p>
    </div>
  </div>
</div>