Data Visualization Components Component

<div class="bg-gray-100 dark:bg-gray-900 py-12 px-4 min-h-screen flex items-center justify-center">
    <div class="max-w-7xl w-full mx-auto">
        <div class="glass rounded-xl p-8 md:p-12 backdrop-filter backdrop-blur-lg bg-opacity-20 border border-gray-200 dark:border-gray-700">
            <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-8 text-center">Site Traffic Overview</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- Traffic Source Breakdown -->
                <div class="glass rounded-xl p-6 backdrop-filter backdrop-blur-lg bg-opacity-20 border border-gray-200 dark:border-gray-700">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Traffic Source Breakdown</h3>
                    <div class="h-48 flex items-center justify-center">
                        <!-- Placeholder for Pie Chart -->
                        <div class="w-32 h-32 rounded-full bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 animate-pulse"></div>
                    </div>
                    <ul class="mt-4 space-y-2 text-gray-800 dark:text-gray-200">
                        <li>Direct: <span class="font-semibold">35%</span></li>
                        <li>Search Engines: <span class="font-semibold">45%</span></li>
                        <li>Referral: <span class="font-semibold">15%</span></li>
                        <li>Social Media: <span class="font-semibold">5%</span></li>
                    </ul>
                </div>

                <!-- Page Views Over Time -->
                <div class="glass rounded-xl p-6 backdrop-filter backdrop-blur-lg bg-opacity-20 border border-gray-200 dark:border-gray-700">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Page Views Over Time</h3>
                    <div class="h-48 flex items-center justify-center">
                        <!-- Placeholder for Line Chart -->
                        <div class="w-full h-32 bg-gradient-to-r from-green-500 via-yellow-500 to-red-500 animate-pulse"></div>
                    </div>
                    <div class="mt-4 text-center text-gray-800 dark:text-gray-200">
                        Daily Average: <span class="font-semibold">1,200</span>
                    </div>
                </div>
            </div>

            <!-- Popular Articles -->
            <div class="glass rounded-xl p-6 md:p-8 mt-8 backdrop-filter backdrop-blur-lg bg-opacity-20 border border-gray-200 dark:border-gray-700">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Popular Articles</h3>
                <div class="space-y-4">

                    <div class="flex items-center glass rounded-xl p-4 backdrop-filter backdrop-blur-lg bg-opacity-20 border border-gray-200 dark:border-gray-700">
                        <img src="https://picsum.photos/80/80?random=1" alt="Article thumbnail" class="w-16 h-16 object-cover rounded-lg mr-4">
                        <div>
                            <h4 class="font-semibold text-gray-800 dark:text-white">How to Master Tailwind CSS</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Views: <span class="font-semibold">5,400</span></p>
                        </div>
                    </div>

                    <div class="flex items-center glass rounded-xl p-4 backdrop-filter backdrop-blur-lg bg-opacity-20 border border-gray-200 dark:border-gray-700">
                        <img src="https://picsum.photos/80/80?random=2" alt="Article thumbnail" class="w-16 h-16 object-cover rounded-lg mr-4">
                        <div>
                            <h4 class="font-semibold text-gray-800 dark:text-white">Getting Started with Glassmorphism</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Views: <span class="font-semibold">3,800</span></p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Add a basic glassmorphism effect using a pseudo-element or backdrop-filter */
.glass {
    /* Example glassmorphism styles */
    /* The backdrop-filter and background-color with opacity are key */
    /* backdrop-filter: blur(10px); */
    /* background-color: rgba(255, 255, 255, 0.1); */
    /* border: 1px solid rgba(255, 255, 255, 0.2); */
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
}
</style>