Composant Plan du site de médias sociaux

<nav aria-label="Social Media Site Map" class="bg-amber-50 dark:bg-stone-900 font-sans p-4 sm:p-6 lg:p-8 min-h-screen flex items-center justify-center">
  <div class="container mx-auto max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-amber-100 dark:bg-stone-800 shadow-xl rounded-lg p-6 sm:p-8 md:p-10 border border-amber-200 dark:border-stone-700 animate-fade-in-up">
    <h2 class="text-2xl sm:text-3xl font-bold text-amber-900 dark:text-amber-50 mb-6 text-center tracking-wide">Sitemap</h2>
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-6">
      
      <a href="#profile" class="group flex items-center p-3 sm:p-4 rounded-md bg-amber-200 dark:bg-stone-700 text-amber-800 dark:text-amber-100 hover:bg-amber-300 dark:hover:bg-stone-600 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md animate-link-pop">
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-3 shrink-0 text-amber-700 dark:text-amber-200 group-hover:text-amber-900 dark:group-hover:text-amber-50 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd" />
        </svg>
        <span class="text-lg sm:text-xl font-medium">Profile</span>
      </a>

      <a href="#feed" class="group flex items-center p-3 sm:p-4 rounded-md bg-amber-200 dark:bg-stone-700 text-amber-800 dark:text-amber-100 hover:bg-amber-300 dark:hover:bg-stone-600 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md animate-link-pop">
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-3 shrink-0 text-amber-700 dark:text-amber-200 group-hover:text-amber-900 dark:group-hover:text-amber-50 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 4.5V19.5M12 4.5c2.756 0 5.466.714 7.07 2.32A7.447 7.447 0 0121 12A7.447 7.447 0 0119.07 17.18c-1.604 1.605-4.314 2.32-7.07 2.32m0-15c-2.756 0-5.466.714-7.07 2.32A7.447 7.447 0 003 12a7.447 7.447 0 001.93 5.18c1.604 1.605 4.314 2.32 7.07 2.32"></path>
        </svg>
        <span class="text-lg sm:text-xl font-medium">Feed</span>
      </a>

      <a href="#messages" class="group flex items-center p-3 sm:p-4 rounded-md bg-amber-200 dark:bg-stone-700 text-amber-800 dark:text-amber-100 hover:bg-amber-300 dark:hover:bg-stone-600 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md animate-link-pop">
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-3 shrink-0 text-amber-700 dark:text-amber-200 group-hover:text-amber-900 dark:group-hover:text-amber-50 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
           <path fill-rule="evenodd" d="M4.848 2.775C3.902 2.19 2.96 2.592 2.405 3.513l-.583.978c-.354.594-.093 1.354.52 1.67L7.232 9.517 5.918 11.66a1.711 1.711 0 002.414 2.414l2.143-1.314 4.397 2.703a1.75 1.75 0 002.366-1.077l1.785-5.95a1.75 1.75 0 00-.773-1.953L16.29 2.505a1.75 1.75 0 00-1.953-.773l-5.95 1.785a1.75 1.75 0 00-1.077 2.366L6.993 9.404l-2.143-1.314a1.711 1.711 0 00-2.414 2.414L5.918 11.66l-1.066 1.776a1.75 1.75 0 001.077 2.366l5.95 1.785a1.75 1.75 0 001.953-.773l1.785-5.95a1.75 1.75 0 00.773-1.953l-1.314-2.143a1.711 1.711 0 00-2.414-2.414L11.66 5.918 9.517 7.232l-1.776 1.066a1.75 1.75 0 00-2.366-1.077z" clip-rule="evenodd" />
        </svg>
        <span class="text-lg sm:text-xl font-medium">Messages</span>
      </a>

      <a href="#notifications" class="group flex items-center p-3 sm:p-4 rounded-md bg-amber-200 dark:bg-stone-700 text-amber-800 dark:text-amber-100 hover:bg-amber-300 dark:hover:bg-stone-600 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md animate-link-pop">
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-3 shrink-0 text-amber-700 dark:text-amber-200 group-hover:text-amber-900 dark:group-hover:text-amber-50 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.5 6v.75H5.513c-.96 0-1.76.75-1.76 1.71v.588l.643 1.623A2.88 2.88 0 0010 12.5v4.5A2.25 2.25 0 0012.25 19h.5A2.25 2.25 0 0015 16.5v-4.5a2.88 2.88 0 00-1.885-2.732l.643-1.623h-.002a2.25 2.25 0 011.76-1.71V6A2.25 2.25 0 0118 3.75h-.254V6h-2.19A2.25 2.25 0 0013.25 8.25h-.5A2.25 2.25 0 0010.5 6v-.75H7.5zm0-3.75C7.5 1.745 8.745 1 10.25 1h.5c1.505 0 2.75.745 2.75 2.75V6H7.5V2.25z" clip-rule="evenodd" />
        </svg>
        <span class="text-lg sm:text-xl font-medium">Notifications</span>
      </a>

      <a href="#friends" class="group flex items-center p-3 sm:p-4 rounded-md bg-amber-200 dark:bg-stone-700 text-amber-800 dark:text-amber-100 hover:bg-amber-300 dark:hover:bg-stone-600 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md animate-link-pop">
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-3 shrink-0 text-amber-700 dark:text-amber-200 group-hover:text-amber-900 dark:group-hover:text-amber-50 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M15 9.75a3 3 0 10-6 0 3 3 0 006 0zM12 3a2.25 2.25 0 012.25 2.25V6a2.25 2.25 0 01-4.5 0V5.25A2.25 2.25 0 0112 3zM21 12a9 9 0 11-18 0 9 9 0 0118 0zM15 15.75a3 3 0 00-6 0v.75c0 1.35.845 2.5 2.052 3.018A5.976 5.976 0 0012 21.75a5.976 5.976 0 00-2.052-.982A3 3 0 009 16.5v-.75c0-1.35.845-2.5 2.052-3.018A5.976 5.976 0 0012 12a5.976 5.976 0 002.052.982A3 3 0 0015 15.75v.75z" />
        </svg>
        <span class="text-lg sm:text-xl font-medium">Friends</span>
      </a>

      <a href="#settings" class="group flex items-center p-3 sm:p-4 rounded-md bg-amber-200 dark:bg-stone-700 text-amber-800 dark:text-amber-100 hover:bg-amber-300 dark:hover:bg-stone-600 transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md animate-link-pop">
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-3 shrink-0 text-amber-700 dark:text-amber-200 group-hover:text-amber-900 dark:group-hover:text-amber-50 transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M11.777 2.016a.75.75 0 01.446 0l9.026 2.256c.82.205 1.354.912 1.354 1.76V11.25a9 9 0 01-18 0V6.032c0-.848.534-1.555 1.354-1.76l9.026-2.256zM8.25 7a.75.75 0 01.75-.75h6a.75.75 0 010 1.5H9a.75.75 0 01-.75-.75zM12 12a.75.75 0 00-.75.75v3.5a.75.75 0 001.5 0v-3.5A.75.75 0 0012 12z" clip-rule="evenodd" />
        </svg>
        <span class="text-lg sm:text-xl font-medium">Settings</span>
      </a>
    </div>
    <div class="mt-8 text-center">
      <a href="#help" class="inline-flex items-center text-amber-700 dark:text-amber-200 hover:text-amber-900 dark:hover:text-amber-50 hover:underline transition duration-300 ease-in-out text-base sm:text-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg class="h-5 w-5 mr-1.5" 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="M8.228 9.247a4.75 4.75 0 017.544 0M15.485 12.012a6.75 6.75 0 01-11.47 0M10 18.25a.75.75 0 100-1.5.75.75 0 000 1.5zM12 19.5h.008v.008H12V19.5zM12 1.5c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10-4.477-10-10-10zm0 17.5a.75.75 0 100-1.5.75.75 0 000 1.5z"
          ></path>
        </svg>
        Help & Support
      </a>
    </div>
  </div>
</nav>

<style>
/* Define keyframes for animations */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes link-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* Apply animations */
.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards; 
}

.animate-link-pop:hover {
  animation: link-pop 0.3s ease-in-out;
}
</style>