| <!DOCTYPE html> |
| <html lang="pt-br"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Slime War - Jogo de Ação Arcade Premium</title> |
| <meta name="description" content="Slime War é um jogo de ação arcade premium com gráficos impressionantes, física avançada e compatibilidade total para todas as plataformas."> |
| <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> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap'); |
| |
| :root { |
| --primary: #00ffaa; |
| --primary-dark: #00cc88; |
| --secondary: #7b61ff; |
| --dark: #0f172a; |
| --darker: #0a1120; |
| } |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: var(--darker); |
| color: #e2e8f0; |
| overflow-x: hidden; |
| } |
| |
| .hero-gradient { |
| background: linear-gradient(135deg, var(--darker) 0%, #1e293b 100%); |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .hero-gradient::before { |
| content: ''; |
| position: absolute; |
| top: -50%; |
| left: -50%; |
| width: 200%; |
| height: 200%; |
| background: radial-gradient(circle, rgba(0,255,170,0.1) 0%, transparent 70%); |
| animation: rotate 30s linear infinite; |
| z-index: 0; |
| } |
| |
| @keyframes rotate { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| |
| .game-container { |
| position: relative; |
| overflow: hidden; |
| border-radius: 1.5rem; |
| box-shadow: 0 20px 50px rgba(0, 255, 170, 0.15); |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| border: 1px solid rgba(0, 255, 170, 0.1); |
| background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%); |
| } |
| |
| .game-container:hover { |
| transform: translateY(-8px); |
| box-shadow: 0 25px 60px rgba(0, 255, 170, 0.25); |
| } |
| |
| .slime-pulse { |
| animation: pulse 2s infinite ease-in-out; |
| } |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 255, 170, 0.4); } |
| 50% { transform: scale(1.08); box-shadow: 0 0 0 15px rgba(0, 255, 170, 0); } |
| 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 255, 170, 0); } |
| } |
| |
| .btn-primary { |
| background: linear-gradient(45deg, var(--primary), var(--secondary)); |
| transition: all 0.3s ease; |
| position: relative; |
| overflow: hidden; |
| z-index: 1; |
| } |
| |
| .btn-primary::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: -100%; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(45deg, var(--secondary), var(--primary)); |
| transition: all 0.4s ease; |
| z-index: -1; |
| } |
| |
| .btn-primary:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 10px 25px rgba(0, 255, 170, 0.4); |
| } |
| |
| .btn-primary:hover::before { |
| left: 0; |
| } |
| |
| .feature-card { |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| background: rgba(30, 41, 59, 0.6); |
| backdrop-filter: blur(12px); |
| border: 1px solid rgba(0, 255, 170, 0.05); |
| } |
| |
| .feature-card:hover { |
| transform: translateY(-8px); |
| background: rgba(30, 41, 59, 0.8); |
| box-shadow: 0 15px 30px rgba(0, 255, 170, 0.1); |
| border-color: rgba(0, 255, 170, 0.2); |
| } |
| |
| .glow-text { |
| text-shadow: 0 0 15px rgba(0, 255, 170, 0.7); |
| } |
| |
| .floating { |
| animation: floating 4s ease-in-out infinite; |
| } |
| |
| @keyframes floating { |
| 0% { transform: translateY(0px) rotate(0deg); } |
| 50% { transform: translateY(-15px) rotate(2deg); } |
| 100% { transform: translateY(0px) rotate(0deg); } |
| } |
| |
| .particles { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: 0; |
| overflow: hidden; |
| } |
| |
| .particle { |
| position: absolute; |
| background: rgba(0, 255, 170, 0.5); |
| border-radius: 50%; |
| animation: float linear infinite; |
| } |
| |
| @keyframes float { |
| 0% { transform: translateY(0) translateX(0); opacity: 1; } |
| 100% { transform: translateY(-100vh) translateX(100px); opacity: 0; } |
| } |
| |
| .stats-item { |
| background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.8)); |
| border: 1px solid rgba(0, 255, 170, 0.1); |
| transition: all 0.3s ease; |
| } |
| |
| .stats-item:hover { |
| transform: scale(1.05); |
| border-color: rgba(0, 255, 170, 0.3); |
| box-shadow: 0 10px 25px rgba(0, 255, 170, 0.1); |
| } |
| |
| .testimonial-card { |
| background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.6)); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(0, 255, 170, 0.1); |
| } |
| |
| .slime-badge { |
| position: absolute; |
| top: -15px; |
| right: -15px; |
| background: var(--secondary); |
| color: white; |
| width: 50px; |
| height: 50px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: bold; |
| box-shadow: 0 5px 15px rgba(123, 97, 255, 0.4); |
| animation: pulse 2s infinite; |
| } |
| |
| .slider-container { |
| scroll-snap-type: x mandatory; |
| scroll-behavior: smooth; |
| } |
| |
| .slider-item { |
| scroll-snap-align: start; |
| flex: 0 0 auto; |
| } |
| |
| .slider-nav { |
| scroll-snap-type: x mandatory; |
| } |
| |
| .slider-dot { |
| scroll-snap-align: start; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div class="particles" id="particles"></div> |
| |
| |
| <header class="hero-gradient relative overflow-hidden"> |
| <div class="container mx-auto px-4 py-16 md:py-24 relative z-10"> |
| <div class="max-w-5xl mx-auto text-center"> |
| <div class="flex justify-center mb-6"> |
| <div class="w-24 h-24 bg-gradient-to-br from-teal-400 to-cyan-500 rounded-full flex items-center justify-center shadow-xl slime-pulse relative"> |
| <i class="fas fa-gamepad text-4xl text-gray-900"></i> |
| <div class="slime-badge"> |
| <span>NEW</span> |
| </div> |
| </div> |
| </div> |
| <h1 class="text-5xl md:text-7xl font-bold mb-4 text-white glow-text"> |
| <span class="text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-cyan-400">Slime War</span> |
| </h1> |
| <p class="text-xl md:text-2xl text-gray-300 mb-8">A evolução dos jogos arcade está aqui!</p> |
| |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| <a href="#play" class="btn-primary text-gray-900 font-bold py-4 px-10 rounded-full inline-flex items-center justify-center text-lg"> |
| <i class="fas fa-play mr-3"></i> Jogar Agora |
| </a> |
| <a href="#trailer" class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-4 px-10 rounded-full inline-flex items-center justify-center transition-all border border-gray-700"> |
| <i class="fas fa-play-circle mr-3"></i> Ver Trailer |
| </a> |
| </div> |
| |
| <div class="mt-12 flex justify-center"> |
| <div class="flex items-center space-x-6"> |
| <div class="flex items-center"> |
| <i class="fas fa-star text-yellow-400 mr-2 text-xl"></i> |
| <span class="text-gray-300">4.9/5</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-download text-teal-400 mr-2 text-xl"></i> |
| <span class="text-gray-300">1M+ Downloads</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-globe text-cyan-400 mr-2 text-xl"></i> |
| <span class="text-gray-300">Multiplataforma</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 py-12 relative z-10"> |
| |
| <div id="trailer-modal" class="fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center hidden"> |
| <div class="relative w-full max-w-4xl"> |
| <button id="close-trailer" class="absolute -top-12 right-0 text-white text-3xl hover:text-teal-400 transition-colors"> |
| <i class="fas fa-times"></i> |
| </button> |
| <div class="aspect-w-16 aspect-h-9"> |
| <iframe id="trailer-video" class="w-full h-[500px]" src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
| </div> |
| </div> |
| </div> |
| |
| |
| <section id="play" class="mb-24"> |
| <div class="max-w-6xl mx-auto"> |
| <h2 class="text-4xl font-bold mb-8 text-center text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-cyan-400">Jogue Slime War</h2> |
| |
| |
| <div class="bg-gray-800 rounded-xl p-6 mb-8 text-center border border-gray-700"> |
| <div class="h-[90px] flex items-center justify-center bg-gray-900 rounded-lg"> |
| <span class="text-gray-500">Anúncio</span> |
| </div> |
| </div> |
| |
| |
| <div class="game-container"> |
| <iframe src="game/index.html" title="Slime War" class="w-full h-[600px]"></iframe> |
| </div> |
| |
| |
| <div class="mt-6 bg-amber-900/20 border border-amber-500/50 rounded-xl p-5 text-amber-200 flex items-start max-w-2xl mx-auto"> |
| <i class="fas fa-mobile-alt mr-4 mt-1 text-2xl"></i> |
| <div> |
| <h4 class="font-bold mb-2">Melhor experiência em dispositivos móveis</h4> |
| <p>Para jogabilidade ideal, recomenda-se usar o modo paisagem (horizontal) e fones de ouvido para imersão total no jogo.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="mb-24"> |
| <div class="max-w-6xl mx-auto"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> |
| <div class="stats-item p-6 rounded-xl text-center"> |
| <div class="text-4xl font-bold text-teal-400 mb-2">50+</div> |
| <div class="text-gray-400">Fases Únicas</div> |
| </div> |
| <div class="stats-item p-6 rounded-xl text-center"> |
| <div class="text-4xl font-bold text-purple-400 mb-2">15</div> |
| <div class="text-gray-400">Tipos de Inimigos</div> |
| </div> |
| <div class="stats-item p-6 rounded-xl text-center"> |
| <div class="text-4xl font-bold text-cyan-400 mb-2">10</div> |
| <div class="text-gray-400">Poderes Especiais</div> |
| </div> |
| <div class="stats-item p-6 rounded-xl text-center"> |
| <div class="text-4xl font-bold text-pink-400 mb-2">∞</div> |
| <div class="text-gray-400">Diversão Garantida</div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section id="features" class="mb-24"> |
| <div class="max-w-6xl mx-auto"> |
| <h2 class="text-4xl font-bold mb-12 text-center text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-cyan-400">Recursos Premium</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="feature-card p-8 rounded-xl"> |
| <div class="w-16 h-16 bg-gradient-to-br from-teal-500/20 to-cyan-500/20 rounded-2xl flex items-center justify-center mb-5 text-teal-400 mx-auto"> |
| <i class="fas fa-gamepad text-3xl"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-3 text-white text-center">Jogabilidade Refinada</h3> |
| <p class="text-gray-400 text-center">Controles precisos com resposta tátil, física avançada e sistema de combate fluido que oferece uma experiência premium.</p> |
| </div> |
| |
| |
| <div class="feature-card p-8 rounded-xl"> |
| <div class="w-16 h-16 bg-gradient-to-br from-purple-500/20 to-indigo-500/20 rounded-2xl flex items-center justify-center mb-5 text-purple-400 mx-auto"> |
| <i class="fas fa-paint-brush text-3xl"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-3 text-white text-center">Gráficos HD</h3> |
| <p class="text-gray-400 text-center">Visuais impressionantes com efeitos de partículas, iluminação dinâmica e animações suaves em 60FPS.</p> |
| </div> |
| |
| |
| <div class="feature-card p-8 rounded-xl"> |
| <div class="w-16 h-16 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 rounded-2xl flex items-center justify-center mb-5 text-cyan-400 mx-auto"> |
| <i class="fas fa-trophy text-3xl"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-3 text-white text-center">Sistema de Progressão</h3> |
| <p class="text-gray-400 text-center">Desbloqueie habilidades, skins exclusivas e melhore seu slime através de um sistema de progressão profundo.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="mb-24"> |
| <div class="max-w-6xl mx-auto"> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> |
| <div class="order-2 lg:order-1"> |
| <h2 class="text-4xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-cyan-400">Sobre o Jogo</h2> |
| <p class="text-lg text-gray-300 mb-6 leading-relaxed"> |
| Slime War redefine o gênero arcade com uma experiência premium que combina ação frenética, estratégia profunda e um universo vibrante. |
| Como um slime guerreiro, você explorará mundos exóticos, desvendará mistérios antigos e enfrentará chefes épicos. |
| </p> |
| <p class="text-lg text-gray-300 mb-8 leading-relaxed"> |
| Com uma trilha sonora orquestral original, dublagem profissional e um sistema de física avançado, Slime War oferece uma experiência |
| imersiva que desafia jogadores de todos os níveis. |
| </p> |
| <div class="flex flex-wrap gap-3"> |
| <span class="bg-gray-800 px-4 py-2 rounded-full text-sm font-medium text-teal-300 flex items-center border border-teal-400/20"> |
| <i class="fas fa-star mr-2"></i> +50 Fases Desafiadoras |
| </span> |
| <span class="bg-gray-800 px-4 py-2 rounded-full text-sm font-medium text-purple-300 flex items-center border border-purple-400/20"> |
| <i class="fas fa-ghost mr-2"></i> 15 Inimigos Únicos |
| </span> |
| <span class="bg-gray-800 px-4 py-2 rounded-full text-sm font-medium text-cyan-300 flex items-center border border-cyan-400/20"> |
| <i class="fas fa-magic mr-2"></i> 10 Poderes Especiais |
| </span> |
| </div> |
| </div> |
| <div class="order-1 lg:order-2 relative"> |
| <div class="floating"> |
| <div class="relative"> |
| <img src="https://placehold.co/600x400/1e293b/e2e8f0?text=Slime+War+Gameplay" alt="Slime War Screenshot" class="rounded-2xl shadow-2xl w-full border-2 border-teal-400/20"> |
| <div class="absolute -bottom-5 -right-5 bg-gradient-to-br from-purple-600 to-pink-600 text-white font-bold py-2 px-4 rounded-full flex items-center shadow-lg"> |
| <i class="fas fa-play mr-2"></i> Trailer |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="mb-24"> |
| <div class="max-w-6xl mx-auto bg-gradient-to-br from-gray-800/50 to-gray-900/50 rounded-2xl p-10 backdrop-blur-sm border border-gray-700"> |
| <h2 class="text-4xl font-bold mb-10 text-center text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-cyan-400">Controles Intuitivos</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-10"> |
| <div> |
| <h3 class="text-2xl font-bold mb-6 text-white flex items-center justify-center md:justify-start"> |
| <i class="fas fa-desktop mr-4 text-teal-400"></i> Desktop |
| </h3> |
| <ul class="space-y-4"> |
| <li class="flex items-start"> |
| <span class="bg-gray-700 text-teal-400 rounded-xl w-10 h-10 flex items-center justify-center mr-4 mt-1 flex-shrink-0"> |
| <i class="fas fa-mouse-pointer"></i> |
| </span> |
| <div> |
| <h4 class="font-bold text-white">Movimento</h4> |
| <p class="text-gray-400">Clique com o mouse para mover seu slime com precisão</p> |
| </div> |
| </li> |
| <li class="flex items-start"> |
| <span class="bg-gray-700 text-teal-400 rounded-xl w-10 h-10 flex items-center justify-center mr-4 mt-1 flex-shrink-0"> |
| <i class="fas fa-mouse"></i> |
| </span> |
| <div> |
| <h4 class="font-bold text-white">Ataque</h4> |
| <p class="text-gray-400">Clique e arraste para executar combos e habilidades especiais</p> |
| </div> |
| </li> |
| <li class="flex items-start"> |
| <span class="bg-gray-700 text-teal-400 rounded-xl w-10 h-10 flex items-center justify-center mr-4 mt-1 flex-shrink-0"> |
| <i class="fas fa-keyboard"></i> |
| </span> |
| <div> |
| <h4 class="font-bold text-white">Atalhos</h4> |
| <p class="text-gray-400">Teclas 1-4 para habilidades, ESC para menu e Espaço para pausa</p> |
| </div> |
| </li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-2xl font-bold mb-6 text-white flex items-center justify-center md:justify-start"> |
| <i class="fas fa-mobile-alt mr-4 text-teal-400"></i> Mobile |
| </h3> |
| <ul class="space-y-4"> |
| <li class="flex items-start"> |
| <span class="bg-gray-700 text-teal-400 rounded-xl w-10 h-10 flex items-center justify-center mr-4 mt-1 flex-shrink-0"> |
| <i class="fas fa-hand-pointer"></i> |
| </span> |
| <div> |
| <h4 class="font-bold text-white">Movimento</h4> |
| <p class="text-gray-400">Toque na tela para mover com controles otimizados para touch</p> |
| </div> |
| </li> |
| <li class="flex items-start"> |
| <span class="bg-gray-700 text-teal-400 rounded-xl w-10 h-10 flex items-center justify-center mr-4 mt-1 flex-shrink-0"> |
| <i class="fas fa-hand-holding"></i> |
| </span> |
| <div> |
| <h4 class="font-bold text-white">Ataque</h4> |
| <p class="text-gray-400">Gestos intuitivos para combos e habilidades especiais</p> |
| </div> |
| </li> |
| <li class="flex items-start"> |
| <span class="bg-gray-700 text-teal-400 rounded-xl w-10 h-10 flex items-center justify-center mr-4 mt-1 flex-shrink-0"> |
| <i class="fas fa-sliders-h"></i> |
| </span> |
| <div> |
| <h4 class="font-bold text-white">Personalização</h4> |
| <p class="text-gray-400">Interface totalmente customizável para sua preferência</p> |
| </div> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="mb-24"> |
| <div class="max-w-6xl mx-auto"> |
| <h2 class="text-4xl font-bold mb-12 text-center text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-cyan-400">O Que Dizem Os Jogadores</h2> |
| |
| <div class="slider-container flex overflow-x-auto pb-6 -mx-4 px-4 scrollbar-hide" id="testimonials-slider"> |
| |
| <div class="slider-item testimonial-card p-8 rounded-2xl flex-shrink-0 w-full md:w-1/2 lg:w-1/3 px-4"> |
| <div class="flex items-center mb-6"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Player" class="w-12 h-12 rounded-full mr-4 border-2 border-teal-400"> |
| <div> |
| <h4 class="font-bold text-white">Ana Silva</h4> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-300 italic">"Slime War é viciante! A jogabilidade é perfeita e os gráficos são lindos. Já recomendei para todos os meus amigos!"</p> |
| </div> |
| |
| |
| <div class="slider-item testimonial-card p-8 rounded-2xl flex-shrink-0 w-full md:w-1/2 lg:w-1/3 px-4"> |
| <div class="flex items-center mb-6"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Player" class="w-12 h-12 rounded-full mr-4 border-2 border-purple-400"> |
| <div> |
| <h4 class="font-bold text-white">Carlos Oliveira</h4> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-300 italic">"O melhor jogo arcade que já joguei no celular. A física dos slimes é incrível e o sistema de progressão mantém o jogo interessante."</p> |
| </div> |
| |
| |
| <div class="slider-item testimonial-card p-8 rounded-2xl flex-shrink-0 w-full md:w-1/2 lg:w-1/3 px-4"> |
| <div class="flex items-center mb-6"> |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Player" class="w-12 h-12 rounded-full mr-4 border-2 border-cyan-400"> |
| <div> |
| <h4 class="font-bold text-white">Mariana Costa</h4> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-300 italic">"Adoro como o jogo é fácil de aprender mas difícil de dominar. Os chefes são desafiadores e as habilidades especiais são muito satisfatórias de usar."</p> |
| </div> |
| </div> |
| |
| <div class="flex justify-center mt-8 space-x-2 slider-nav"> |
| <button class="slider-dot w-3 h-3 rounded-full bg-gray-700 focus:outline-none" data-index="0"></button> |
| <button class="slider-dot w-3 h-3 rounded-full bg-gray-700 focus:outline-none" data-index="1"></button> |
| <button class="slider-dot w-3 h-3 rounded-full bg-gray-700 focus:outline-none" data-index="2"></button> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="mb-24"> |
| <div class="max-w-6xl mx-auto bg-gradient-to-r from-teal-900/40 to-cyan-900/40 rounded-2xl p-12 text-center border border-teal-500/30 relative overflow-hidden"> |
| <div class="absolute -top-20 -right-20 w-40 h-40 bg-teal-400 rounded-full filter blur-3xl opacity-20"></div> |
| <div class="absolute -bottom-20 -left-20 w-40 h-40 bg-cyan-400 rounded-full filter blur-3xl opacity-20"></div> |
| <h2 class="text-4xl font-bold mb-6 text-white relative z-10">Pronto para a Batalha Épica?</h2> |
| <p class="text-xl text-gray-300 mb-8 relative z-10">Junte-se a milhões de jogadores e comece sua jornada slime agora mesmo!</p> |
| <a href="#play" class="btn-primary text-gray-900 font-bold py-4 px-12 rounded-full inline-flex items-center justify-center text-lg relative z-10"> |
| <i class="fas fa-play mr-3"></i> Jogar Slime War |
| </a> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <footer class="bg-gray-900/80 py-16 border-t border-gray-800 relative z-10"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col lg:flex-row justify-between items-center mb-12"> |
| <div class="mb-8 lg:mb-0"> |
| <div class="flex items-center"> |
| <div class="w-12 h-12 bg-gradient-to-br from-teal-400 to-cyan-500 rounded-full flex items-center justify-center mr-4 shadow-lg"> |
| <i class="fas fa-gamepad text-xl text-gray-900"></i> |
| </div> |
| <span class="text-2xl font-bold text-white">Slime War</span> |
| </div> |
| <p class="text-gray-500 mt-3 text-sm">A evolução dos jogos arcade</p> |
| </div> |
| |
| <div class="flex space-x-6 mb-8 lg:mb-0"> |
| <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors text-2xl"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors text-2xl"> |
| <i class="fab fa-facebook"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors text-2xl"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors text-2xl"> |
| <i class="fab fa-discord"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors text-2xl"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| </div> |
| |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-6"> |
| <a href="#" class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-3 px-6 rounded-full inline-flex items-center justify-center transition-all border border-gray-700"> |
| <i class="fas fa-download mr-2"></i> Baixar |
| </a> |
| <a href="#" class="bg-gradient-to-br from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-bold py-3 px-6 rounded-full inline-flex items-center justify-center transition-all"> |
| <i class="fas fa-shopping-cart mr-2"></i> Comprar Premium |
| </a> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 pt-12"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-12"> |
| <div> |
| <h4 class="text-lg font-semibold text-white mb-5">Explorar</h4> |
| <ul class="space-y-3"> |
| <li><a href="#" class="text-gray-400 hover:text-teal-400 transition-colors">Início</a></li> |
| <li><a href="#play" class="text-gray-400 hover:text-teal-400 transition-colors">Jogar</a></li> |
| <li><a href="#features" class="text-gray-400 hover:text-teal-400 transition-colors">Recursos</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-teal-400 transition-colors">Galeria</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-semibold text-white mb-5">Suporte</h4> |
| <ul class="space-y-3"> |
| <li><a href="#" class="text-gray-400 hover:text-teal-400 transition-colors">FAQ</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-teal-400 transition-colors">Tutoriais</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-teal-400 transition-colors">Relatar Bug</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-teal-400 transition-colors">Feedback</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-semibold text-white mb-5">Legal</h4> |
| <ul class="space-y-3"> |
| <li><a href="#" class="text-gray-400 hover:text-teal-400 transition-colors">Termos de Uso</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-teal-400 transition-colors">Política de Privacidade</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-teal-400 transition-colors">Cookies</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-teal-400 transition-colors">Licenças</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-semibold text-white mb-5">Contato</h4> |
| <ul class="space-y-3"> |
| <li class="flex items-start"> |
| <i class="fas fa-envelope text-teal-400 mr-3 mt-1"></i> |
| <span class="text-gray-400">contato@slimewar.com</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-map-marker-alt text-teal-400 mr-3 mt-1"></i> |
| <span class="text-gray-400">São Paulo, Brasil</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-phone-alt text-teal-400 mr-3 mt-1"></i> |
| <span class="text-gray-400">+55 11 98765-4321</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-16 text-center text-gray-500 text-sm"> |
| <p>© 2025 Slime Games Studio. Todos os direitos reservados.</p> |
| <p class="mt-2">Slime War é uma marca registrada da Slime Games Studio.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div class="fixed bottom-6 right-6 z-50 flex flex-col space-y-4"> |
| <a href="#play" class="w-16 h-16 bg-gradient-to-br from-teal-500 to-cyan-500 hover:from-teal-600 hover:to-cyan-600 rounded-full flex items-center justify-center shadow-xl transition-all transform hover:scale-110"> |
| <i class="fas fa-gamepad text-2xl text-gray-900"></i> |
| </a> |
| <a href="#" class="w-16 h-16 bg-gradient-to-br from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 rounded-full flex items-center justify-center shadow-xl transition-all transform hover:scale-110"> |
| <i class="fas fa-shopping-cart text-xl text-white"></i> |
| </a> |
| </div> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const particlesContainer = document.getElementById('particles'); |
| const particleCount = 30; |
| |
| for (let i = 0; i < particleCount; i++) { |
| const particle = document.createElement('div'); |
| particle.classList.add('particle'); |
| |
| |
| const size = Math.random() * 4 + 2; |
| particle.style.width = `${size}px`; |
| particle.style.height = `${size}px`; |
| |
| |
| particle.style.left = `${Math.random() * 100}%`; |
| particle.style.bottom = `-${size}px`; |
| |
| |
| const duration = Math.random() * 10 + 10; |
| particle.style.animationDuration = `${duration}s`; |
| |
| |
| particle.style.animationDelay = `${Math.random() * 10}s`; |
| |
| particlesContainer.appendChild(particle); |
| } |
| |
| |
| const slider = document.getElementById('testimonials-slider'); |
| const dots = document.querySelectorAll('.slider-dot'); |
| |
| dots.forEach(dot => { |
| dot.addEventListener('click', function() { |
| const index = parseInt(this.getAttribute('data-index')); |
| const itemWidth = document.querySelector('.slider-item').offsetWidth; |
| slider.scrollTo({ |
| left: index * (itemWidth + 32), |
| behavior: 'smooth' |
| }); |
| |
| |
| dots.forEach(d => d.classList.remove('bg-teal-400')); |
| this.classList.add('bg-teal-400'); |
| }); |
| }); |
| |
| |
| dots[0].classList.add('bg-teal-400'); |
| |
| |
| const trailerModal = document.getElementById('trailer-modal'); |
| const closeTrailer = document.getElementById('close-trailer'); |
| const trailerLinks = document.querySelectorAll('[href="#trailer"]'); |
| |
| trailerLinks.forEach(link => { |
| link.addEventListener('click', function(e) { |
| e.preventDefault(); |
| trailerModal.classList.remove('hidden'); |
| document.body.style.overflow = 'hidden'; |
| }); |
| }); |
| |
| closeTrailer.addEventListener('click', function() { |
| trailerModal.classList.add('hidden'); |
| document.body.style.overflow = ''; |
| |
| |
| const iframe = document.getElementById('trailer-video'); |
| iframe.src = iframe.src; |
| }); |
| |
| |
| trailerModal.addEventListener('click', function(e) { |
| if (e.target === this) { |
| this.classList.add('hidden'); |
| document.body.style.overflow = ''; |
| |
| |
| const iframe = document.getElementById('trailer-video'); |
| iframe.src = iframe.src; |
| } |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Xacodavt/cs" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
