Spaces:
Configuration error
Configuration error
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Kombat Zone | Torneios de Luta Online</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Bungee&family=Press+Start+2P&display=swap" rel="stylesheet"> | |
| <style> | |
| .font-bungee { font-family: 'Bungee', cursive; } | |
| .font-pixel { font-family: 'Press Start 2P', cursive; } | |
| .nav-bg { background-color: #0a1a2e; } | |
| .main-bg { background-color: #1a2a3a; } | |
| .card-bg { background-color: #223344; } | |
| .highlight { color: #c1272d; } | |
| .btn-primary { background-color: #0a1a2e; } | |
| .btn-primary:hover { background-color: #0f2542; } | |
| .btn-secondary { background-color: #c1272d; } | |
| .btn-secondary:hover { background-color: #d1383e; } | |
| </style> | |
| </head> | |
| <body class="bg-gray-800 text-gray-100"> | |
| <!-- Navbar --> | |
| <nav class="nav-bg p-4 shadow-lg border-b border-gray-700"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="/static/kombatzone-logo.svg" alt="Kombat Zone Logo" class="h-8"> | |
| <h1 class="font-bungee text-2xl">KOMBAT ZONE</h1> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-yellow-300 font-bold">Torneios</a> | |
| <a href="#" class="hover:text-yellow-300 font-bold">Comunidade</a> | |
| <a href="#" class="hover:text-yellow-300 font-bold">Ranking</a> | |
| <a href="#" class="hover:text-yellow-300 font-bold">Sobre</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-full font-bold">Login</button> | |
| <button class="bg-yellow-400 hover:bg-yellow-500 text-black px-4 py-2 rounded-full font-bold">Cadastre-se</button> | |
| <button class="md:hidden"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="nav-bg py-20 border-b border-gray-700"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="font-bungee text-5xl md:text-7xl mb-6 pulse-animation">DOMINE A ARENA!</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Participe dos maiores torneios de jogos de luta online. Conecte-se, compita e mostre suas habilidades!</p> | |
| <div class="flex flex-col md:flex-row justify-center gap-4"> | |
| <button class="btn-secondary hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full text-lg">Criar Torneio</button> | |
| <button class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-8 rounded-full text-lg">Explorar Eventos</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Tournaments --> | |
| <section class="py-16 main-bg"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="font-bungee text-3xl mb-8 text-center">TORNEIOS EM DESTAQUE</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Tournament Card 1 --> | |
| <div class="card-bg rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-transform hover:-translate-y-1"> | |
| <div class="h-48 bg-gray-700 flex items-center justify-center border-b border-gray-600"> | |
| <span class="font-pixel text-2xl">STREET FIGHTER VI</span> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Campeonato Brasileiro</h3> | |
| <p class="text-gray-300 mb-4">25/05 - Premiação: R$5.000</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="flex items-center text-yellow-400"> | |
| <i data-feather="users" class="mr-2"></i> 128/256 | |
| </span> | |
| <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-full text-sm">Inscrever-se</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tournament Card 2 --> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow"> | |
| <div class="h-48 bg-blue-600 flex items-center justify-center"> | |
| <span class="font-pixel text-2xl">TEKKEN 8</span> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Torneio Relâmpago</h3> | |
| <p class="text-gray-300 mb-4">18/05 - Premiação: R$2.500</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="flex items-center text-yellow-400"> | |
| <i data-feather="users" class="mr-2"></i> 64/128 | |
| </span> | |
| <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-full text-sm">Inscrever-se</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tournament Card 3 --> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow"> | |
| <div class="h-48 bg-green-600 flex items-center justify-center"> | |
| <span class="font-pixel text-2xl">MORTAL KOMBAT 1</span> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Kombat League</h3> | |
| <p class="text-gray-300 mb-4">30/05 - Premiação: R$3.000</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="flex items-center text-yellow-400"> | |
| <i data-feather="users" class="mr-2"></i> 32/64 | |
| </span> | |
| <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-full text-sm">Inscrever-se</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-16 nav-bg border-t border-gray-700"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="font-bungee text-3xl mb-12 text-center">POR QUE ESCOLHER KOMBAT ZONE?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="text-center p-6 card-bg rounded-lg border border-gray-700"> | |
| <div class="w-16 h-16 bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4 border border-gray-600"> | |
| <i data-feather="users" class="w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Comunidade Ativa</h3> | |
| <p class="text-gray-300">Conecte-se com milhares de jogadores apaixonados por jogos de luta.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="text-center p-6 bg-gray-800 rounded-lg"> | |
| <div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="award" class="w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Torneios Profissionais</h3> | |
| <p class="text-gray-300">Participe de competições com premiações e reconhecimento.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="text-center p-6 bg-gray-800 rounded-lg"> | |
| <div class="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="message-square" class="w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Chat Integrado</h3> | |
| <p class="text-gray-300">Converse com adversários e organize partidas diretamente na plataforma.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="nav-bg py-16 border-t border-gray-700"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="font-bungee text-3xl md:text-4xl mb-6">PRONTO PARA ENTRAR NA ZONA?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Cadastre-se agora e comece sua jornada competitiva!</p> | |
| <button class="btn-secondary hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full text-lg">Começar Agora</button> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="nav-bg py-8 border-t border-gray-700 text-gray-400"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-2 mb-4 md:mb-0"> | |
| <i data-feather="activity" class="text-yellow-300"></i> | |
| <h2 class="font-bungee text-xl">KOMBAT ZONE</h2> | |
| </div> | |
| <div class="flex space-x-6 mb-4 md:mb-0"> | |
| <a href="#" class="hover:highlight"><i data-feather="twitter"></i></a> | |
| <a href="#" class="hover:highlight"><i data-feather="instagram"></i></a> | |
| <a href="#" class="hover:highlight"><i data-feather="facebook"></i></a> | |
| <a href="#" class="hover:highlight"><i data-feather="twitch"></i></a> | |
| <a href="#" class="hover:highlight"><i data-feather="youtube"></i></a> | |
| </div> | |
| <div class="text-sm text-gray-400"> | |
| © 2023 Kombat Zone. Todos os direitos reservados. | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| feather.replace(); | |
| // Simple animation for tournament cards on hover | |
| document.querySelectorAll('.bg-gray-700').forEach(card => { | |
| card.addEventListener('mouseenter', () => { | |
| card.style.transform = 'translateY(-5px)'; | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| card.style.transform = 'translateY(0)'; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |