Neon_Glow_Sports_Sitemap_Component
Простой, отзывчивый компонент карты сайта с неоново-светящимися эффектами и высококонтрастными цветами, адаптированный для приложений для спорта и фитнеса. Включает поддержку темного режима.
HTML-код
<section class="relative py-12 sm:py-16 md:py-20 lg:py-24 bg-gray-950 dark:bg-black overflow-hidden">
<div class="absolute inset-0 z-0 opacity-10">
<div class="absolute top-0 left-0 w-2/3 h-2/3 bg-blue-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse-slow"></div>
<div class="absolute bottom-0 right-0 w-1/2 h-1/2 bg-purple-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse-slow-reverse"></div>
</div>
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-10 sm:mb-12 md:mb-16">
<h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white leading-tight animate-fade-in">
<span class="block pb-2 lg:inline-block relative text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-blue-200 to-blue-400 dark:from-blue-600 dark:via-blue-400 dark:to-blue-600">
Explore Our Arena
<span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-full h-1 bg-blue-500 rounded-full shadow-lg shadow-blue-500/50 animate-glow-line"></span>
</span>
</h2>
<p class="mt-4 text-base sm:text-lg text-gray-400 max-w-3xl mx-auto animate-fade-in-delay-1">
Navigate through our powerful features and dedicated sections for athletes and fans.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8 lg:gap-10">
<div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-blue-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-blue-500/20 animate-fade-in-delay-2">
<div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<svg class="w-10 h-10 mb-4 text-blue-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(59,130,246,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" 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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
<h3 class="text-xl font-semibold text-white mb-2">
<a href="#" class="group-hover:text-blue-200 transition-colors duration-300">Team Stats</a>
</h3>
<p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">In-depth performance analytics.</p>
</div>
</div>
<div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-purple-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-purple-500/20 animate-fade-in-delay-3">
<div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<svg class="w-10 h-10 mb-4 text-purple-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(168,85,247,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" 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="M17 20h-2A4 4 0 0111 16V8a4 4 0 014-4h2a4 4 0 014 4v8a4 4 0 01-4 4z"></path>
</svg>
<h3 class="text-xl font-semibold text-white mb-2">
<a href="#" class="group-hover:text-purple-200 transition-colors duration-300">Player Profiles</a>
</h3>
<p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">Detailed athlete information.</p>
</div>
</div>
<div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-pink-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-pink-500/20 animate-fade-in-delay-4">
<div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<svg class="w-10 h-10 mb-4 text-pink-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(236,72,153,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" 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 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
<h3 class="text-xl font-semibold text-white mb-2">
<a href="#" class="group-hover:text-pink-200 transition-colors duration-300">Upcoming Games</a>
</h3>
<p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">Never miss a match.</p>
</div>
</div>
<div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-green-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-green-500/20 animate-fade-in-delay-5">
<div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<svg class="w-10 h-10 mb-4 text-green-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(34,197,94,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" 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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18S13.168 18.477 12 19.253"></path>
</svg>
<h3 class="text-xl font-semibold text-white mb-2">
<a href="#" class="group-hover:text-green-200 transition-colors duration-300">Fan Zone</a>
</h3>
<p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">Connect with fellow enthusiasts.</p>
</div>
</div>
<div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-indigo-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-indigo-500/20 animate-fade-in-delay-6">
<div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<svg class="w-10 h-10 mb-4 text-indigo-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(99,102,241,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" 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="M3 5a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2V5zm0 8a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-2zm0 8a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-2z"></path>
</svg>
<h3 class="text-xl font-semibold text-white mb-2">
<a href="#" class="group-hover:text-indigo-200 transition-colors duration-300">Training Logs</a>
</h3>
<p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">Track your progress.</p>
</div>
</div>
<div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-red-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-red-500/20 animate-fade-in-delay-7">
<div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<svg class="w-10 h-10 mb-4 text-red-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(239,68,68,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" 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="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
<h3 class="text-xl font-semibold text-white mb-2">
<a href="#" class="group-hover:text-red-200 transition-colors duration-300">Club Store</a>
</h3>
<p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">Gear up for glory.</p>
</div>
</div>
<div class="group relative p-6 bg-gray-900 rounded-xl border border-transparent hover:border-yellow-500 transition-all duration-300 ease-in-out shadow-lg shadow-transparent hover:shadow-yellow-500/20 animate-fade-in-delay-8">
<div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 blur-sm"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<svg class="w-10 h-10 mb-4 text-yellow-400 group-hover:text-white transition-colors duration-300 drop-shadow-[0_0_8px_rgba(251,191,36,0.7)] group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.9)]" 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="M7 8h10M7 12h10m-9 4h4M6 16.5V20a2 2 0 002 2h8a2 2 0 002-2v-3.5M4 7V4a2 2 0 012-2h12a2 2 0 012 2v3M3 10h18"></path>
</svg>
<h3 class="text-xl font-semibold text-white mb-2">
<a href="#" class="group-hover:text-yellow-200 transition-colors duration-300">Contact Us</a>
</h3>
<p class="text-gray-400 text-sm group-hover:text-gray-200 transition-colors duration-300">Get in touch with the team.</p>
</div>
</div>
</div>
</div>
<style>
@keyframes pulse-slow {
0% { transform: scale(1); opacity: 0.3; }
50% { transform: scale(1.05); opacity: 0.4; }
100% { transform: scale(1); opacity: 0.3; }
}
@keyframes pulse-slow-reverse {
0% { transform: scale(1); opacity: 0.3; }
50% { transform: scale(0.95); opacity: 0.4; }
100% { transform: scale(1); opacity: 0.3; }
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Delay animations using different keyframes or utility classes */
.animate-fade-in { animation: fade-in 0.8s ease-out forwards; opacity: 0; }
.animate-fade-in-delay-1 { animation: fade-in 0.8s ease-out 0.2s forwards; opacity: 0; }
.animate-fade-in-delay-2 { animation: fade-in 0.8s ease-out 0.4s forwards; opacity: 0; }
.animate-fade-in-delay-3 { animation: fade-in 0.8s ease-out 0.6s forwards; opacity: 0; }
.animate-fade-in-delay-4 { animation: fade-in 0.8s ease-out 0.8s forwards; opacity: 0; }
.animate-fade-in-delay-5 { animation: fade-in 0.8s ease-out 1.0s forwards; opacity: 0; }
.animate-fade-in-delay-6 { animation: fade-in 0.8s ease-out 1.2s forwards; opacity: 0; }
.animate-fade-in-delay-7 { animation: fade-in 0.8s ease-out 1.4s forwards; opacity: 0; }
.animate-fade-in-delay-8 { animation: fade-in 0.8s ease-out 1.6s forwards; opacity: 0; }
@keyframes glow-line {
0% { width: 0; opacity: 0; }
50% { width: 100%; opacity: 1; }
100% { width: 0; opacity: 0; }
}
/* Apply animations */
.animate-pulse-slow { animation: pulse-slow 6s infinite ease-in-out; }
.animate-pulse-slow-reverse { animation: pulse-slow-reverse 6s infinite ease-in-out; }
.animate-glow-line { animation: glow-line 3s infinite ease-in-out; }
/* Dark mode adjustments for glow */
.dark .group-hover\:opacity-100 {
background: linear-gradient(to br, var(--tw-gradient-stops));
}
.dark .group-hover\:shadow-blue-500\/20 {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.4) !important;
}
.dark .group-hover\:shadow-purple-500\/20 {
box-shadow: 0 0 20px rgba(168, 85, 247, 0.4) !important;
}
.dark .group-hover\:shadow-pink-500\/20 {
box-shadow: 0 0 20px rgba(236, 72, 153, 0.4) !important;
}
.dark .group-hover\:shadow-green-500\/20 {
box-shadow: 0 0 20px rgba(34, 197, 94, 0.4) !important;
}
.dark .group-hover\:shadow-indigo-500\/20 {
box-shadow: 0 0 20px rgba(99, 102, 241, 0.4) !important;
}
.dark .group-hover\:shadow-red-500\/20 {
box-shadow: 0 0 20px rgba(239, 68, 68, 0.4) !important;
}
.dark .group-hover\:shadow-yellow-500\/20 {
box-shadow: 0 0 20px rgba(251, 191, 36, 0.4) !important;
}
</style>
</section>Связанные компоненты
Компонент карты сайта
Адаптивный компонент карты сайта, выполненный в стиле брутализма с темной темой для деловых/корпоративных сайтов, включающий интерактивные функции.
Компонент карты сайта Neumorphic Site Map
Сложный, адаптивный компонент карты сайта, выполненный в неморфном стиле с драгоценными тонами, подходящий для правительственных или общественных веб-сайтов, включая поддержку темного режима.
Компонент карты сайта
Адаптивный компонент карты сайта, разработанный в темном режиме с использованием Tailwind CSS.