Компонент визуализации данных (Neon/Glow)

<div class="font-sans bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-4 sm:p-6 md:p-8 rounded-lg shadow-xl dark:shadow-2xl transition-colors duration-300 relative overflow-hidden">
    <!-- Background Glow Effect (Subtle) -->
    <div class="absolute inset-0 bg-gradient-to-br from-stone-200 via-stone-50 to-stone-200 dark:from-stone-800 dark:via-stone-950 dark:to-stone-800 rounded-lg animate-pulse-glow-bg opacity-20 dark:opacity-10 blur-xl"></div>

    <div class="relative z-10">
        <!-- Header -->
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 border-b border-stone-200 dark:border-stone-700 pb-4">
            <h2 class="text-2xl sm:text-3xl font-extrabold text-stone-800 dark:text-stone-50 mb-2 sm:mb-0 relative">
                Overall Performance
                <span class="absolute -bottom-1 left-0 w-full h-0.5 bg-gradient-to-r from-lime-400 to-sky-400 dark:from-lime-600 dark:to-sky-600 rounded-full shadow-glow-sm"></span>
            </h2>
            <div class="flex items-center space-x-3 text-sm">
                <span class="text-stone-500 dark:text-stone-400">Last 30 Days</span>
                <button class="flex items-center px-4 py-2 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700 rounded-full text-stone-700 dark:text-stone-200 hover:bg-stone-300 dark:hover:bg-stone-700 transition-all duration-200 relative group overflow-hidden">
                    <span class="absolute inset-0 bg-gradient-to-r from-transparent via-lime-400 to-transparent opacity-0 group-hover:opacity-20 animate-shine"></span>
                    <span class="relative">Filter <svg class="w-4 h-4 ml-1" 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="M19 9l-7 7-7-7"></path></svg></span>
                </button>
            </div>
        </div>

        <!-- Key Metrics Cards -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <!-- Metric Card 1 -->
            <div class="bg-stone-50 dark:bg-stone-800 rounded-lg p-5 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden group">
                <div class="absolute inset-0 bg-gradient-to-br from-lime-300 to-transparent dark:from-lime-600 opacity-20 blur-xl animate-pulse-glow-sm group-hover:opacity-40 transition-opacity duration-300"></div>
                <div class="relative z-10">
                    <p class="text-stone-500 dark:text-stone-400 text-sm mb-1">New Users</p>
                    <p class="text-2xl font-bold text-stone-900 dark:text-stone-50 mb-2">12,345 <span class="text-lime-500 text-base font-normal ml-1">+12.5%</span></p>
                    <div class="h-2 bg-stone-200 dark:bg-stone-700 rounded-full overflow-hidden">
                        <div class="h-full bg-lime-400 dark:bg-lime-600 w-3/4 rounded-full shadow-glow-xs"></div>
                    </div>
                </div>
            </div>
            <!-- Metric Card 2 -->
            <div class="bg-stone-50 dark:bg-stone-800 rounded-lg p-5 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden group">
                <div class="absolute inset-0 bg-gradient-to-br from-sky-300 to-transparent dark:from-sky-600 opacity-20 blur-xl animate-pulse-glow-sm group-hover:opacity-40 transition-opacity duration-300"></div>
                <div class="relative z-10">
                    <p class="text-stone-500 dark:text-stone-400 text-sm mb-1">Revenue</p>
                    <p class="text-2xl font-bold text-stone-900 dark:text-stone-50 mb-2">$87,654 <span class="text-red-500 text-base font-normal ml-1">-3.2%</span></p>
                    <div class="h-2 bg-stone-200 dark:bg-stone-700 rounded-full overflow-hidden">
                        <div class="h-full bg-sky-400 dark:bg-sky-600 w-2/3 rounded-full shadow-glow-xs"></div>
                    </div>
                </div>
            </div>
            <!-- Metric Card 3 -->
            <div class="bg-stone-50 dark:bg-stone-800 rounded-lg p-5 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden group">
                <div class="absolute inset-0 bg-gradient-to-br from-purple-300 to-transparent dark:from-purple-600 opacity-20 blur-xl animate-pulse-glow-sm group-hover:opacity-40 transition-opacity duration-300"></div>
                <div class="relative z-10">
                    <p class="text-stone-500 dark:text-stone-400 text-sm mb-1">Active Sessions</p>
                    <p class="text-2xl font-bold text-stone-900 dark:text-stone-50 mb-2">4,567 <span class="text-lime-500 text-base font-normal ml-1">+8.1%</span></p>
                    <div class="h-2 bg-stone-200 dark:bg-stone-700 rounded-full overflow-hidden">
                        <div class="h-full bg-purple-400 dark:bg-purple-600 w-4/5 rounded-full shadow-glow-xs"></div>
                    </div>
                </div>
            </div>
            <!-- Metric Card 4 -->
            <div class="bg-stone-50 dark:bg-stone-800 rounded-lg p-5 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden group">
                <div class="absolute inset-0 bg-gradient-to-br from-orange-300 to-transparent dark:from-orange-600 opacity-20 blur-xl animate-pulse-glow-sm group-hover:opacity-40 transition-opacity duration-300"></div>
                <div class="relative z-10">
                    <p class="text-stone-500 dark:text-stone-400 text-sm mb-1">Conversion Rate</p>
                    <p class="text-2xl font-bold text-stone-900 dark:text-stone-50 mb-2">4.7% <span class="text-lime-500 text-base font-normal ml-1">+0.8%</span></p>
                    <div class="h-2 bg-stone-200 dark:bg-stone-700 rounded-full overflow-hidden">
                        <div class="h-full bg-orange-400 dark:bg-orange-600 w-1/2 rounded-full shadow-glow-xs"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Charts Section -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Large Chart (Left) -->
            <div class="lg:col-span-2 bg-stone-50 dark:bg-stone-800 rounded-lg p-6 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden">
                <div class="absolute inset-0 bg-gradient-to-tr from-stone-100 to-transparent dark:from-stone-900 opacity-10 blur-xl animate-pulse-glow-reverse"></div>
                <div class="relative z-10">
                    <h3 class="text-xl font-semibold mb-4 text-stone-800 dark:text-stone-50">
                        Monthly Trends
                        <span class="block w-1/4 h-0.5 bg-gradient-to-r from-sky-400 to-purple-400 dark:from-sky-600 dark:to-purple-600 rounded-full mt-1 shadow-glow-sm"></span>
                    </h3>
                    <!-- Placeholder for Chart -->
                    <div class="w-full h-64 sm:h-80 md:h-96 bg-stone-100 dark:bg-stone-900 rounded-md flex items-center justify-center text-stone-400 dark:text-stone-600 border border-dashed border-stone-300 dark:border-stone-700 relative">
                        <p>Line Chart Placeholder</p>
                        <!-- Example data points with glow -->
                        <div class="absolute top-1/2 left-1/4 w-3 h-3 bg-lime-400 dark:bg-lime-600 rounded-full shadow-glow-md animate-bounce-slow"></div>
                        <div class="absolute top-1/3 left-1/2 w-3 h-3 bg-sky-400 dark:bg-sky-600 rounded-full shadow-glow-md animate-bounce-slow delay-100"></div>
                        <div class="absolute top-3/4 left-3/4 w-3 h-3 bg-purple-400 dark:bg-purple-600 rounded-full shadow-glow-md animate-bounce-slow delay-200"></div>
                    </div>
                </div>
            </div>

            <!-- Small Charts / Stats (Right) -->
            <div class="lg:col-span-1 flex flex-col gap-6">
                <!-- Top Source Card -->
                <div class="bg-stone-50 dark:bg-stone-800 rounded-lg p-5 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden group">
                    <div class="absolute inset-0 bg-gradient-to-br from-teal-300 to-transparent dark:from-teal-600 opacity-20 blur-xl animate-pulse-glow-sm group-hover:opacity-40 transition-opacity duration-300"></div>
                    <div class="relative z-10">
                        <h3 class="text-lg font-semibold mb-3 text-stone-800 dark:text-stone-50">Top Source</h3>
                        <div class="flex items-center mb-2">
                            <img src="https://picsum.photos/40/40?grayscale&random=1" alt="Source Icon" class="w-10 h-10 rounded-full mr-3 border border-stone-300 dark:border-stone-600">
                            <div>
                                <p class="font-medium text-stone-900 dark:text-stone-100">Google Search</p>
                                <p class="text-sm text-stone-500 dark:text-stone-400">55% of traffic</p>
                            </div>
                        </div>
                        <div class="h-2 bg-stone-200 dark:bg-stone-700 rounded-full overflow-hidden">
                            <div class="h-full bg-teal-400 dark:bg-teal-600 w-[55%] rounded-full shadow-glow-xs"></div>
                        </div>
                    </div>
                </div>

                <!-- User Activity Stream -->
                <div class="bg-stone-50 dark:bg-stone-800 rounded-lg p-5 shadow-md dark:shadow-lg border border-stone-200 dark:border-stone-700 relative overflow-hidden group">
                    <div class="absolute inset-0 bg-gradient-to-bl from-amber-300 to-transparent dark:from-amber-600 opacity-20 blur-xl animate-pulse-glow-sm group-hover:opacity-40 transition-opacity duration-300"></div>
                    <div class="relative z-10">
                        <h3 class="text-lg font-semibold mb-3 text-stone-800 dark:text-stone-50">Recent Activity</h3>
                        <ul class="space-y-3">
                            <li class="flex items-center text-sm">
                                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-600">
                                <div>
                                    <span class="font-medium text-stone-900 dark:text-stone-100">John D.</span> viewed <span class="text-sky-500 dark:text-sky-400">'Analytics Dashboard'</span>
                                    <span class="block text-xs text-stone-500 dark:text-stone-400">2 minutes ago</span>
                                </div>
                            </li>
                            <li class="flex items-center text-sm">
                                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar" class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-600">
                                <div>
                                    <span class="font-medium text-stone-900 dark:text-stone-100">Jane S.</span> updated <span class="text-purple-500 dark:text-purple-400">'Campaign Data'</span>
                                    <span class="block text-xs text-stone-500 dark:text-stone-400">15 minutes ago</span>
                                </div>
                            </li>
                            <li class="flex items-center text-sm">
                                <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="User avatar" class="w-8 h-8 rounded-full mr-3 border border-stone-300 dark:border-stone-600">
                                <div>
                                    <span class="font-medium text-stone-900 dark:text-stone-100">Mike R.</span> logged in
                                    <span class="block text-xs text-stone-500 dark:text-stone-400">1 hour ago</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Tailwind CSS animated glows and pulse effects -->
<style>
    @keyframes pulse-glow-bg {
        0%, 100% { transform: scale(1); opacity: 0.2; }
        50% { transform: scale(1.02); opacity: 0.3; }
    }
    @keyframes pulse-glow-bg-dark {
        0%, 100% { transform: scale(1); opacity: 0.1; }
        50% { transform: scale(1.02); opacity: 0.15; }
    }
    @keyframes pulse-glow-sm {
        0%, 100% { transform: scale(1); opacity: 0.2; }
        50% { transform: scale(1.01); opacity: 0.3; }
    }
    @keyframes pulse-glow-reverse {
        0%, 100% { transform: scale(1); opacity: 0.1; }
        50% { transform: scale(0.98); opacity: 0.15; }
    }
    @keyframes shine {
        0% { transform: translateX(-100%); }
        60% { transform: translateX(100%); }
        100% { transform: translateX(100%); }
    }
    @keyframes bounce-slow {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-5px); }
    }

    .animate-pulse-glow-bg {
        animation: pulse-glow-bg 6s infinite ease-in-out;
    }
    .dark .animate-pulse-glow-bg {
        animation: pulse-glow-bg-dark 6s infinite ease-in-out;
    }
    .animate-pulse-glow-sm {
        animation: pulse-glow-sm 4s infinite ease-in-out;
    }
    .animate-pulse-glow-reverse {
        animation: pulse-glow-reverse 5s infinite ease-in-out;
    }
    .animate-shine {
        animation: shine 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    .animate-bounce-slow {
        animation: bounce-slow 3s infinite ease-in-out;
    }

    .shadow-glow-xs {
        filter: drop-shadow(0 0px 3px var(--tw-shadow-color));
        --tw-shadow-color: rgba(74, 222, 128, 0.6);
    }
    .dark .shadow-glow-xs {
        --tw-shadow-color: rgba(34, 197, 94, 0.6);
    }
    .shadow-glow-sm {
        filter: drop-shadow(0 0px 8px var(--tw-shadow-color));
        --tw-shadow-color: rgba(74, 222, 128, 0.8);
    }
    .dark .shadow-glow-sm {
        --tw-shadow-color: rgba(34, 197, 94, 0.8);
    }
    .shadow-glow-md {
        filter: drop-shadow(0 0px 10px var(--tw-shadow-color));
        --tw-shadow-color: rgba(59, 130, 246, 0.8);
    }
    .dark .shadow-glow-md {
        --tw-shadow-color: rgba(37, 99, 235, 0.8);
    }
</style>