Componente de mapa del sitio

<div class="max-w-4xl mx-auto p-6 bg-gray-900 dark:bg-gray-800 rounded-lg shadow-md">
    <h1 class="text-4xl text-white font-bold text-center mb-6">Site Map</h1>
    <ul class="list-disc list-inside space-y-4">
        <li class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
            <div>
                <a href="#" class="text-white hover:text-gray-400">Home</a>
                <p class="text-gray-400 text-sm">Our homepage with latest updates</p>
            </div>
        </li>
        <li class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
            <div>
                <a href="#" class="text-white hover:text-gray-400">Profile</a>
                <p class="text-gray-400 text-sm">Your personal profile page</p>
            </div>
        </li>
        <li class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
            <div>
                <a href="#" class="text-white hover:text-gray-400">Messages</a>
                <p class="text-gray-400 text-sm">View your messages</p>
            </div>
        </li>
        <li class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="Profile Picture" class="w-12 h-12 rounded-full border-2 border-gray-600">
            <div>
                <a href="#" class="text-white hover:text-gray-400">Settings</a>
                <p class="text-gray-400 text-sm">Manage your account settings</p>
            </div>
        </li>
    </ul>
    <div class="mt-6">
        <h2 class="text-2xl text-white font-bold mb-2">Gallery</h2>
        <div class="grid grid-cols-2 gap-4">  
            <img src="https://picsum.photos/200/200?random=1" alt="Gallery Image 1" class="rounded-lg">
            <img src="https://picsum.photos/200/200?random=2" alt="Gallery Image 2" class="rounded-lg">
            <img src="https://picsum.photos/200/200?random=3" alt="Gallery Image 3" class="rounded-lg">
            <img src="https://picsum.photos/200/200?random=4" alt="Gallery Image 4" class="rounded-lg">
        </div>
    </div>
</div>