Blame for index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Team Zero | Professional Esports Team</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* Custom animations */
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        @keyframes slideIn {
            from { transform: translateX(-50px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        .float-animation {
            animation: float 3s ease-in-out infinite;
        }
        
        .pulse-animation {
            animation: pulse 2s ease-in-out infinite;
        }
        
        .slide-in {
            animation: slideIn 0.8s ease-out forwards;
        }
        
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #111827;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #374151;
            border-radius: 4px;
        }
        
        /* Hexagon shape */
        .hexagon {
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        }
        
        /* Glitch effect */
        .glitch {
            position: relative;
        }
        
        .glitch::before, .glitch::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.8;
        }
        
        .glitch::before {
            color: #9ca3af;
            z-index: -1;
            animation: glitch-effect 3s infinite;
        }
        
        .glitch::after {
            color: #6b7280;
            z-index: -2;
            animation: glitch-effect 2s infinite reverse;
        }
        
        @keyframes glitch-effect {
            0% { transform: translate(0); }
            20% { transform: translate(-3px, 3px); }
            40% { transform: translate(-3px, -3px); }
            60% { transform: translate(3px, 3px); }
            80% { transform: translate(3px, -3px); }
            100% { transform: translate(0); }
        }
        
        /* Hover effects */
        .hover-scale {
            transition: transform 0.3s ease;
        }
        
        .hover-scale:hover {
            transform: scale(1.05);
        }
        
        /* Section dividers */
        .diagonal-divider {
            position: relative;
            overflow: hidden;
        }
        
        .diagonal-divider::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 100px;
            background: linear-gradient(to bottom right, transparent 49%, #111827 50%);
            z-index: 1;
        }

        /* Game cards */
        .game-card {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .game-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }

        .game-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.8));
            z-index: 1;
        }

        /* Team member cards */
        .team-card {
            transition: all 0.3s ease;
            perspective: 1000px;
        }

        .team-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
        }

        .team-card:hover .team-social {
            opacity: 1;
            transform: translateY(0);
        }

        .team-social {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.3s ease;
        }

        /* News cards */
        .news-card {
            transition: all 0.3s ease;
        }

        .news-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        .news-card:hover .news-image {
            transform: scale(1.05);
        }

        .news-image {
            transition: transform 0.5s ease;
        }

        /* Schedule items */
        .schedule-item {
            position: relative;
            transition: all 0.3s ease;
        }

        .schedule-item:hover {
            background-color: rgba(55, 65, 81, 0.5);
        }

        .schedule-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 4px;
            background-color: #3b82f6;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .schedule-item:hover::before {
            opacity: 1;
        }

        /* Contact form */
        .form-input {
            transition: all 0.3s ease;
        }

        .form-input:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
        }

        /* Mobile menu toggle */
        #mobile-menu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }

        #mobile-menu.active {
            max-height: 500px;
        }
    </style>
</head>
<body class="bg-gray-900 text-gray-200 font-sans">
    <!-- Navigation -->
    <nav class="bg-gray-800/90 backdrop-blur-md sticky top-0 z-50 shadow-lg">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <span class="text-gray-300 font-bold text-2xl tracking-wider">TEAM <span class="text-white">ZERO</span></span>
                    </div>
                    <div class="hidden md:block">
                        <div class="ml-10 flex items-baseline space-x-4">
                            <a href="#home" class="text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700/50 transition">Home</a>
                            <a href="#about" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700/50 transition">About</a>
                            <a href="#team" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700/50 transition">Team</a>
                            <a href="#games" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700/50 transition">Games</a>
                            <a href="#news" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700/50 transition">News</a>
                            <a href="#schedule" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700/50 transition">Schedule</a>
                            <a href="#contact" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700/50 transition">Contact</a>
                        </div>
                    </div>
                </div>
                <div class="hidden md:block">
                    <div class="ml-4 flex items-center md:ml-6">
                        <a href="#" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-md text-sm font-medium transition hover-scale">
                            Join Our Discord
                        </a>
                    </div>
                </div>
                <div class="-mr-2 flex md:hidden">
                    <button onclick="document.getElementById('mobile-menu').classList.toggle('active')" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Mobile menu -->
        <div id="mobile-menu" class="md:hidden bg-gray-800/95 backdrop-blur-sm">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="#home" class="text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-700/50">Home</a>
                <a href="#about" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-700/50">About</a>
                <a href="#team" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-700/50">Team</a>
                <a href="#games" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-700/50">Games</a>
                <a href="#news" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-700/50">News</a>
                <a href="#schedule" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-700/50">Schedule</a>
                <a href="#contact" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-700/50">Contact</a>
            </div>
            <div class="pt-4 pb-3 border-t border-gray-700">
                <div class="flex items-center px-5">
                    <a href="#" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-md text-sm font-medium w-full transition hover-scale text-center">
                        Join Our Discord
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="home" class="relative bg-gradient-to-b from-gray-900 to-gray-800 h-screen flex items-center justify-center overflow-hidden">
        <div class="absolute inset-0 z-0">
            <div class="absolute inset-0 bg-black/60"></div>
            <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-10"></div>
            <div class="absolute inset-0 flex items-center justify-center overflow-hidden">
                <div class="hexagon w-64 h-64 bg-gray-800/30 absolute top-1/4 left-1/4 float-animation"></div>
                <div class="hexagon w-96 h-96 bg-gray-800/20 absolute bottom-1/4 right-1/4 float-animation" style="animation-delay: 2s"></div>
                <div class="hexagon w-80 h-80 bg-gray-800/10 absolute top-1/3 right-1/3 float-animation" style="animation-delay: 1s"></div>
            </div>
        </div>
        
        <div class="relative z-10 text-center px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto">
            <h1 class="text-4xl md:text-6xl font-extrabold mb-6 text-white glitch" data-text="ZERO LIMITS">
                <span class="text-gray-300">ZERO</span> LIMITS
            </h1>
            <p class="text-xl md:text-2xl text-gray-400 mb-8 slide-in">
                Dominating the esports arena in Valorant, League of Legends, and CS:GO with precision and strategy.
            </p>
            <div class="flex flex-col sm:flex-row justify-center gap-4 slide-in" style="animation-delay: 0.2s">
                <a href="#team" class="bg-gray-700 hover:bg-gray-600 text-white px-8 py-3 rounded-lg text-lg font-semibold transition hover-scale text-center">
                    Meet The Team
                </a>
                <a href="#" class="bg-transparent border-2 border-gray-600 text-white px-8 py-3 rounded-lg text-lg font-semibold transition hover-scale hover:bg-gray-800/30 text-center">
                    Watch Live
                </a>
            </div>
        </div>
        
        <div class="absolute bottom-10 left-0 right-0 flex justify-center pulse-animation">
            <a href="#about" class="text-gray-400">
                <svg class="w-8 h-8" 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 14l-7 7m0 0l-7-7m7 7V3"></path>
                </svg>
            </a>
        </div>
    </section>

    <!-- Welcome Section -->
    <section class="py-20 bg-gray-800 diagonal-divider">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Welcome to Team Zero</h2>
                <div class="w-20 h-1 bg-gray-600 mx-auto mb-6"></div>
                <p class="text-xl text-gray-400 max-w-3xl mx-auto">
                    Team Zero is a premier esports organization dedicated to excellence in competitive gaming. 
                    Founded by passionate gamers, we've grown into a powerhouse competing at the highest levels 
                    of Valorant, League of Legends, and CS:GO. Explore our site to meet our players, 
                    follow our journey, and join our growing community of fans.
                </p>
            </div>
            
            <!-- Featured Content -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Latest News -->
                <div class="bg-gray-700/50 rounded-xl overflow-hidden shadow-lg hover-scale backdrop-blur-sm border border-gray-600/30">
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="bg-gray-600 p-2 rounded-full mr-3">
                                <i class="fas fa-newspaper text-gray-300"></i>
                            </div>
                            <h3 class="text-xl font-bold text-white">Latest News</h3>
                        </div>
                        <div class="space-y-4">
                            <div class="border-l-4 border-gray-600 pl-4">
                                <h4 class="font-semibold text-white">Victory at the Valorant Champions Tour!</h4>
                                <p class="text-gray-400 text-sm">Team Zero secures first place in the regional finals.</p>
                            </div>
                            <div class="border-l-4 border-gray-600 pl-4">
                                <h4 class="font-semibold text-white">New Partnership with HyperX</h4>
                                <p class="text-gray-400 text-sm">Exciting new gear coming to our players.</p>
                            </div>
                        </div>
                        <a href="#news" class="mt-4 text-gray-400 hover:text-gray-300 text-sm font-medium transition inline-block">
                            View All News <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </div>

</html>