Site Map Component

<div class="bg-gray-800 dark:bg-gray-900 p-4">
    <h1 class="text-3xl font-bold text-white mb-4">Site Map</h1>
    <ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Home</h2>
            <p class="text-gray-600 dark:text-gray-400">Welcome to our website.</p>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">About Us</h2>
            <p class="text-gray-600 dark:text-gray-400">Learn more about our company.</p>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Services</h2>
            <p class="text-gray-600 dark:text-gray-400">Discover our services.</p>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Portfolio</h2>
            <p class="text-gray-600 dark:text-gray-400">View our work.</p>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Blog</h2>
            <p class="text-gray-600 dark:text-gray-400">Read our latest posts.</p>
        </li>
        <li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
            <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Contact</h2>
            <p class="text-gray-600 dark:text-gray-400">Get in touch with us.</p>
        </li>
    </ul>
    <div class="mt-8">
        <h2 class="text-xl font-bold text-white mb-2">Team Members</h2>
        <div class="flex flex-wrap gap-4">
            <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg flex flex-col items-center">
                <img class="w-24 h-24 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Team Member">
                <h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">John Doe</h3>
                <p class="text-gray-600 dark:text-gray-400">CEO</p>
            </div>
            <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg flex flex-col items-center">
                <img class="w-24 h-24 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Team Member">
                <h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">Jane Smith</h3>
                <p class="text-gray-600 dark:text-gray-400">CTO</p>
            </div>
        </div>
    </div>
    <div class="mt-8">
        <h2 class="text-xl font-bold text-white mb-2">Gallery</h2>
        <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
            <img class="w-full h-32 object-cover rounded-lg bg-gray-300 dark:bg-gray-600" src="https://picsum.photos/200/300?random=1" alt="Gallery Image">
            <img class="w-full h-32 object-cover rounded-lg bg-gray-300 dark:bg-gray-600" src="https://picsum.photos/200/300?random=2" alt="Gallery Image">
            <img class="w-full h-32 object-cover rounded-lg bg-gray-300 dark:bg-gray-600" src="https://picsum.photos/200/300?random=3" alt="Gallery Image">
            <img class="w-full h-32 object-cover rounded-lg bg-gray-300 dark:bg-gray-600" src="https://picsum.photos/200/300?random=4" alt="Gallery Image">
        </div>
    </div>
</div>