Crie um site inovador, dinâmico e visualmente cativante chamado Portal X, focado no universo geek e da cultura pop, cobrindo conteúdos sobre filmes, séries, games, animes, HQs e eventos nerds. O site deve ter uma estética única com identidade própria — misturando estilo retrofuturista, cyberpunk ou neon moderno, com animações suaves, transições interativas e uma paleta de cores que remete à nostalgia dos anos 80 (tons de magenta, azul ciano, roxo e preto). O design deve ser responsivo e otimizado para performance. 🔧 Funcionalidades Recomendadas: Página inicial com carrossel de destaques, últimas notícias, trailers recentes e postagens populares. Sistema de avaliações com notas e reações (emoji ou barra de hype). Área para teorias e debates, com upvotes e rankings de comentários. Guia interativo de personagens e universos (tipo enciclopédia pop). Sistema de comunidade com perfis de usuário, conquistas e fórum. Calendário de estreias de filmes/séries com contagem regressiva. Widget de trilhas sonoras temáticas (ambiente imersivo). Integração com redes sociais e opção de login com Google/Discord. Dark mode / Light mode alternáveis. Loja virtual geek com produtos personalizados, colecionáveis e drops exclusivos. ✍️ Tons e Voz do Conteúdo: Jovem, ousado, geek e criativo. Textos com linguagem divertida, memes e referências pop. Seções tipo: “Você sabia?”, “Top 5”, “Teorias de explodir a mente”, “O que ninguém te contou sobre...”. 🧩 Sugestão de Seções/Categorias: 🔥 Em Alta 🎬 Filmes e Séries 🎮 Games e e-Sports 📚 HQs e Mangás 💥 Cultura Pop e Curiosidades 🎭 Teorias e Universo Expandido 📆 Estreias e Eventos 🛒 Geek Store 💡 Extras criativos: Backgrounds com parallax animado ou efeitos glitch. Notificações sonoras geek (ex: som de lightsaber ao curtir algo). Avatar personalizado para comentaristas frequentes. Página “Hall da Fama Nerd” com ranking de usuários ativos. Modo “Nerd Nostalgia”: altera o visual para estilo 8-bit. Portal X será o portal definitivo para quem respira cultura geek. Um lugar onde tudo que está em alta — do cinema ao controle do videogame — ganha vida de forma única e interativa. - Initial Deployment
85fcc07 verified | <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Portal X | O Universo Geek em um só lugar</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| cyberpink: '#ff2a6d', | |
| cyberblue: '#05d9e8', | |
| cyberpurple: '#d300c5', | |
| cyberdark: '#0d0221', | |
| cybernavy: '#0c0e30', | |
| }, | |
| fontFamily: { | |
| 'orbitron': ['Orbitron', 'sans-serif'], | |
| 'rajdhani': ['Rajdhani', 'sans-serif'], | |
| }, | |
| animation: { | |
| 'glow': 'glow 2s ease-in-out infinite alternate', | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'pulse-slow': 'pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| }, | |
| keyframes: { | |
| glow: { | |
| '0%': { 'text-shadow': '0 0 5px #fff, 0 0 10px #fff, 0 0 15px #ff2a6d, 0 0 20px #ff2a6d' }, | |
| '100%': { 'text-shadow': '0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff2a6d, 0 0 40px #ff2a6d' } | |
| }, | |
| float: { | |
| '0%': { transform: 'translateY(0px)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| '100%': { transform: 'translateY(0px)' } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Rajdhani', sans-serif; | |
| background-color: #0d0221; | |
| color: #fff; | |
| overflow-x: hidden; | |
| } | |
| .cyber-border { | |
| border: 2px solid transparent; | |
| border-image: linear-gradient(45deg, #ff2a6d, #05d9e8, #d300c5); | |
| border-image-slice: 1; | |
| } | |
| .cyber-box { | |
| box-shadow: 0 0 15px rgba(5, 217, 232, 0.5), | |
| inset 0 0 10px rgba(255, 42, 109, 0.3); | |
| } | |
| .cyber-text { | |
| background: linear-gradient(90deg, #ff2a6d, #05d9e8, #d300c5); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .grid-pattern { | |
| background: | |
| linear-gradient(rgba(5, 217, 232, 0.1) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(5, 217, 232, 0.1) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| } | |
| .glitch { | |
| position: relative; | |
| } | |
| .glitch::before, .glitch::after { | |
| content: attr(data-text); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .glitch::before { | |
| color: #05d9e8; | |
| animation: glitch-effect 3s infinite; | |
| clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); | |
| } | |
| .glitch::after { | |
| color: #ff2a6d; | |
| animation: glitch-effect 2s infinite reverse; | |
| clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%); | |
| } | |
| @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); } | |
| } | |
| .scanline { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .scanline::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(to bottom, | |
| transparent 0%, | |
| rgba(5, 217, 232, 0.1) 50%, | |
| transparent 100%); | |
| animation: scan 8s linear infinite; | |
| } | |
| @keyframes scan { | |
| 0% { transform: translateY(-100%); } | |
| 100% { transform: translateY(100%); } | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #0c0e30; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: linear-gradient(#ff2a6d, #d300c5); | |
| border-radius: 6px; | |
| } | |
| /* 8-bit mode */ | |
| .pixelated { | |
| image-rendering: pixelated; | |
| } | |
| .mode-8bit { | |
| font-family: 'Press Start 2P', cursive; | |
| background-color: #000; | |
| color: #0f0; | |
| } | |
| .mode-8bit .cyber-text { | |
| background: none; | |
| color: #f0f; | |
| text-shadow: 2px 2px 0 #0f0; | |
| } | |
| .mode-8bit .cyber-border { | |
| border: 4px solid #0f0; | |
| border-image: none; | |
| } | |
| .mode-8bit .cyber-box { | |
| box-shadow: 4px 4px 0 #f0f, -4px -4px 0 #0ff; | |
| } | |
| </style> | |
| </head> | |
| <body class="grid-pattern"> | |
| <!-- 8-bit Mode Toggle --> | |
| <div class="fixed bottom-4 right-4 z-50"> | |
| <button id="bitModeToggle" class="bg-cyberpurple hover:bg-cyberpink text-white font-bold py-2 px-4 rounded-full transition-all duration-300 flex items-center"> | |
| <i class="fas fa-gamepad mr-2"></i> 8-bit Mode | |
| </button> | |
| </div> | |
| <!-- Audio Elements --> | |
| <audio id="hoverSound" src="https://assets.mixkit.co/sfx/preview/mixkit-arcade-game-jump-coin-216.mp3" preload="auto"></audio> | |
| <audio id="clickSound" src="https://assets.mixkit.co/sfx/preview/mixkit-quick-jump-arcade-game-239.mp3" preload="auto"></audio> | |
| <!-- Navigation --> | |
| <nav class="bg-cybernavy bg-opacity-90 backdrop-blur-md sticky top-0 z-40 cyber-border"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center py-4"> | |
| <div class="flex items-center space-x-4"> | |
| <a href="#" class="text-3xl font-bold font-orbitron cyber-text hover:text-cyberblue transition-colors duration-300" onmouseenter="document.getElementById('hoverSound').play()" onclick="document.getElementById('clickSound').play()"> | |
| PORTAL <span class="text-white">X</span> | |
| </a> | |
| <div class="hidden md:flex space-x-1"> | |
| <a href="#" class="nav-link px-3 py-2">🔥 Em Alta</a> | |
| <a href="#" class="nav-link px-3 py-2">🎬 Filmes/Séries</a> | |
| <a href="#" class="nav-link px-3 py-2">🎮 Games</a> | |
| <a href="#" class="nav-link px-3 py-2">📚 HQs/Mangás</a> | |
| <a href="#" class="nav-link px-3 py-2">💥 Cultura Pop</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative hidden md:block"> | |
| <input type="text" placeholder="Buscar no multiverso..." class="bg-cyberdark text-white px-4 py-2 rounded-full focus:outline-none focus:ring-2 focus:ring-cyberpink w-64"> | |
| <button class="absolute right-3 top-2 text-cyberblue"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="social-btn hover:bg-cyberpink"> | |
| <i class="fab fa-discord"></i> | |
| </button> | |
| <button class="social-btn hover:bg-cyberblue"> | |
| <i class="fab fa-google"></i> | |
| </button> | |
| <button class="social-btn hover:bg-cyberpurple"> | |
| <i class="fas fa-user-astronaut"></i> | |
| </button> | |
| </div> | |
| <button id="mobileMenuBtn" class="md:hidden text-2xl text-cyberblue focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobileMenu" class="hidden md:hidden pb-4"> | |
| <div class="flex flex-col space-y-2"> | |
| <a href="#" class="nav-link px-3 py-2">🔥 Em Alta</a> | |
| <a href="#" class="nav-link px-3 py-2">🎬 Filmes/Séries</a> | |
| <a href="#" class="nav-link px-3 py-2">🎮 Games</a> | |
| <a href="#" class="nav-link px-3 py-2">📚 HQs/Mangás</a> | |
| <a href="#" class="nav-link px-3 py-2">💥 Cultura Pop</a> | |
| <div class="relative mt-2"> | |
| <input type="text" placeholder="Buscar no multiverso..." class="bg-cyberdark text-white px-4 py-2 rounded-full focus:outline-none focus:ring-2 focus:ring-cyberpink w-full"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Carousel --> | |
| <section class="relative overflow-hidden h-96 md:h-screen max-h-screen"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-cyberdark to-transparent z-10"></div> | |
| <div class="absolute inset-0 bg-gradient-to-r from-cyberdark to-transparent z-10"></div> | |
| <div id="heroCarousel" class="h-full w-full relative"> | |
| <!-- Slide 1 --> | |
| <div class="carousel-slide absolute inset-0 w-full h-full flex items-center bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1536440136628-849c177e76a1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80')"> | |
| <div class="container mx-auto px-4 relative z-20"> | |
| <div class="max-w-2xl cyber-box bg-cybernavy bg-opacity-70 p-6 rounded-lg backdrop-blur-sm"> | |
| <span class="bg-cyberpink text-white text-sm font-bold px-3 py-1 rounded-full mb-3 inline-block">NOVO TRAILER</span> | |
| <h2 class="text-4xl md:text-6xl font-bold font-orbitron mb-4 text-white glitch" data-text="GTA VI: O Retorno">GTA VI: O Retorno</h2> | |
| <p class="text-lg md:text-xl mb-6 text-gray-300">O aguardado trailer finalmente chegou! Descubra todos os segredos e easter eggs do novo jogo da Rockstar.</p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-cyberpink hover:bg-cyberpurple text-white font-bold py-3 px-6 rounded-full transition-all duration-300 flex items-center"> | |
| <i class="fas fa-play mr-2"></i> Assistir | |
| </button> | |
| <button class="bg-transparent border-2 border-cyberblue text-cyberblue hover:bg-cyberblue hover:text-white font-bold py-3 px-6 rounded-full transition-all duration-300 flex items-center"> | |
| <i class="fas fa-info-circle mr-2"></i> Detalhes | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 2 --> | |
| <div class="carousel-slide absolute inset-0 w-full h-full flex items-center bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1633613286848-e6f43bbafb8d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80')"> | |
| <div class="container mx-auto px-4 relative z-20"> | |
| <div class="max-w-2xl cyber-box bg-cybernavy bg-opacity-70 p-6 rounded-lg backdrop-blur-sm"> | |
| <span class="bg-cyberblue text-white text-sm font-bold px-3 py-1 rounded-full mb-3 inline-block">ESTREIA</span> | |
| <h2 class="text-4xl md:text-6xl font-bold font-orbitron mb-4 text-white glitch" data-text="Homem-Aranha 2">Homem-Aranha 2</h2> | |
| <p class="text-lg md:text-xl mb-6 text-gray-300">O novo filme do universo do Homem-Aranha promete reviravoltas e conexões com o multiverso. Veja nossa análise sem spoilers!</p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-cyberpink hover:bg-cyberpurple text-white font-bold py-3 px-6 rounded-full transition-all duration-300 flex items-center"> | |
| <i class="fas fa-ticket-alt mr-2"></i> Comprar Ingressos | |
| </button> | |
| <button class="bg-transparent border-2 border-cyberblue text-cyberblue hover:bg-cyberblue hover:text-white font-bold py-3 px-6 rounded-full transition-all duration-300 flex items-center"> | |
| <i class="fas fa-star mr-2"></i> Avaliar | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 3 --> | |
| <div class="carousel-slide absolute inset-0 w-full h-full flex items-center bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80')"> | |
| <div class="container mx-auto px-4 relative z-20"> | |
| <div class="max-w-2xl cyber-box bg-cybernavy bg-opacity-70 p-6 rounded-lg backdrop-blur-sm"> | |
| <span class="bg-cyberpurple text-white text-sm font-bold px-3 py-1 rounded-full mb-3 inline-block">EVENTO</span> | |
| <h2 class="text-4xl md:text-6xl font-bold font-orbitron mb-4 text-white glitch" data-text="Comic Con 2023">Comic Con 2023</h2> | |
| <p class="text-lg md:text-xl mb-6 text-gray-300">Tudo o que rolou no maior evento geek do ano! Confira os melhores cosplays, anúncios e exclusividades.</p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-cyberpink hover:bg-cyberpurple text-white font-bold py-3 px-6 rounded-full transition-all duration-300 flex items-center"> | |
| <i class="fas fa-images mr-2"></i> Galeria | |
| </button> | |
| <button class="bg-transparent border-2 border-cyberblue text-cyberblue hover:bg-cyberblue hover:text-white font-bold py-3 px-6 rounded-full transition-all duration-300 flex items-center"> | |
| <i class="fas fa-calendar-alt mr-2"></i> Próximos Eventos | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-4 left-0 right-0 z-20 flex justify-center space-x-2"> | |
| <button class="carousel-indicator w-3 h-3 rounded-full bg-white bg-opacity-30 hover:bg-opacity-100 transition-all duration-300"></button> | |
| <button class="carousel-indicator w-3 h-3 rounded-full bg-white bg-opacity-30 hover:bg-opacity-100 transition-all duration-300"></button> | |
| <button class="carousel-indicator w-3 h-3 rounded-full bg-white bg-opacity-30 hover:bg-opacity-100 transition-all duration-300"></button> | |
| </div> | |
| </section> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-12"> | |
| <!-- Trending Now --> | |
| <section class="mb-16"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl md:text-4xl font-bold font-orbitron cyber-text flex items-center"> | |
| <i class="fas fa-fire mr-4"></i> Trending Now | |
| </h2> | |
| <a href="#" class="text-cyberblue hover:text-cyberpink font-bold flex items-center"> | |
| Ver tudo <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Trending Card 1 --> | |
| <div class="cyber-box bg-cybernavy rounded-lg overflow-hidden hover:translate-y-2 transition-transform duration-300 scanline"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1598899134739-24c8f4f8d3a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="The Witcher" class="w-full h-full object-cover"> | |
| <div class="absolute top-2 right-2 bg-cyberpink text-white text-xs font-bold px-2 py-1 rounded-full">NOVO</div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <div class="flex items-center"> | |
| <div class="flex space-x-1 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> | |
| <span class="text-white text-sm ml-2">4.7</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-bold mb-2">The Witcher: Temporada 3</h3> | |
| <p class="text-gray-400 text-sm mb-4">A última jornada de Geralt de Rívia começa com revelações chocantes.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-cyberblue text-sm font-bold">SÉRIES</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-cyberpink hover:text-cyberpurple"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <button class="text-cyberblue hover:text-white"> | |
| <i class="far fa-comment"></i> | |
| </button> | |
| <button class="text-cyberpurple hover:text-white"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trending Card 2 --> | |
| <div class="cyber-box bg-cybernavy rounded-lg overflow-hidden hover:translate-y-2 transition-transform duration-300 scanline"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1545569341-9eb8b30979d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Zelda" class="w-full h-full object-cover"> | |
| <div class="absolute top-2 right-2 bg-cyberblue text-white text-xs font-bold px-2 py-1 rounded-full">HOT</div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <div class="flex items-center"> | |
| <div class="flex space-x-1 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> | |
| <span class="text-white text-sm ml-2">5.0</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-bold mb-2">Zelda: Tears of the Kingdom</h3> | |
| <p class="text-gray-400 text-sm mb-4">O jogo mais aguardado do ano supera expectativas com mecânicas inovadoras.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-cyberblue text-sm font-bold">GAMES</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-cyberpink hover:text-cyberpurple"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <button class="text-cyberblue hover:text-white"> | |
| <i class="far fa-comment"></i> | |
| </button> | |
| <button class="text-cyberpurple hover:text-white"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trending Card 3 --> | |
| <div class="cyber-box bg-cybernavy rounded-lg overflow-hidden hover:translate-y-2 transition-transform duration-300 scanline"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1630001845387-e8c52a3a643a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="D&D" class="w-full h-full object-cover"> | |
| <div class="absolute top-2 right-2 bg-cyberpurple text-white text-xs font-bold px-2 py-1 rounded-full">POPULAR</div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <div class="flex items-center"> | |
| <div class="flex space-x-1 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="far fa-star"></i> | |
| </div> | |
| <span class="text-white text-sm ml-2">4.2</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-bold mb-2">Dungeons & Dragons: Filme</h3> | |
| <p class="text-gray-400 text-sm mb-4">Surpreendente adaptação que agrada fãs e novatos. Veja os easter eggs!</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-cyberblue text-sm font-bold">FILMES</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-cyberpink hover:text-cyberpurple"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <button class="text-cyberblue hover:text-white"> | |
| <i class="far fa-comment"></i> | |
| </button> | |
| <button class="text-cyberpurple hover:text-white"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trending Card 4 --> | |
| <div class="cyber-box bg-cybernavy rounded-lg overflow-hidden hover:translate-y-2 transition-transform duration-300 scanline"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1630405511228-8d2e22a3d0c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="One Piece" class="w-full h-full object-cover"> | |
| <div class="absolute top-2 right-2 bg-cyberpink text-white text-xs font-bold px-2 py-1 rounded-full">VÍRUS</div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <div class="flex items-center"> | |
| <div class="flex space-x-1 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> | |
| <span class="text-white text-sm ml-2">5.0</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-bold mb-2">One Piece Live-Action</h3> | |
| <p class="text-gray-400 text-sm mb-4">A adaptação que ninguém esperava ser boa está quebrando a internet.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-cyberblue text-sm font-bold">ANIME</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-cyberpink hover:text-cyberpurple"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| <button class="text-cyberblue hover:text-white"> | |
| <i class="far fa-comment"></i> | |
| </button> | |
| <button class="text-cyberpurple hover:text-white"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- News & Updates --> | |
| <section class="mb-16"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl md:text-4xl font-bold font-orbitron cyber-text flex items-center"> | |
| <i class="fas fa-newspaper mr-4"></i> Notícias & Updates | |
| </h2> | |
| <a href="#" class="text-cyberblue hover:text-cyberpink font-bold flex items-center"> | |
| Ver tudo <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Main News --> | |
| <div class="lg:col-span-2 cyber-box bg-cybernavy rounded-lg overflow-hidden scanline"> | |
| <div class="relative h-80 md:h-96"> | |
| <img src="https://images.unsplash.com/photo-1580130732478-4d3396a0988a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80" alt="Marvel" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> | |
| <div class="absolute bottom-0 left-0 right-0 p-6"> | |
| <span class="bg-cyberpink text-white text-sm font-bold px-3 py-1 rounded-full mb-2 inline-block">EXCLUSIVO</span> | |
| <h3 class="text-2xl md:text-3xl font-bold mb-3">Marvel anuncia novo arco dos X-Men no MCU</h3> | |
| <p class="text-gray-300 mb-4">Kevin Feige revela detalhes sobre a integração dos mutantes no Universo Cinematográfico Marvel. Prepare-se para o retorno de Wolverine!</p> | |
| <div class="flex items-center text-sm"> | |
| <span class="text-cyberblue mr-4"><i class="far fa-clock mr-1"></i> 2 horas atrás</span> | |
| <span class="text-cyberpurple"><i class="far fa-comment mr-1"></i> 142 comentários</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Side News --> | |
| <div class="space-y-6"> | |
| <!-- News Item 1 --> | |
| <div class="cyber-box bg-cybernavy rounded-lg p-4 flex scanline"> | |
| <div class="flex-shrink-0 w-24 h-24 overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1551103782-8ab07afd45c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Starfield" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="font-bold mb-1">Starfield: Review completo</h3> | |
| <p class="text-gray-400 text-sm mb-2">O novo RPG da Bethesda vale a pena? Descubra em nossa análise detalhada.</p> | |
| <div class="flex items-center text-xs"> | |
| <span class="text-cyberblue mr-3"><i class="far fa-clock mr-1"></i> 5h</span> | |
| <span class="text-cyberpurple"><i class="far fa-comment mr-1"></i> 87</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- News Item 2 --> | |
| <div class="cyber-box bg-cybernavy rounded-lg p-4 flex scanline"> | |
| <div class="flex-shrink-0 w-24 h-24 overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1608889825100-d2f38b61517a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Cyberpunk" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="font-bold mb-1">Cyberpunk 2077: DLC revoluciona</h3> | |
| <p class="text-gray-400 text-sm mb-2">A expansão Phantom Redemption finalmente entrega o jogo que foi prometido.</p> | |
| <div class="flex items-center text-xs"> | |
| <span class="text-cyberblue mr-3"><i class="far fa-clock mr-1"></i> 1d</span> | |
| <span class="text-cyberpurple"><i class="far fa-comment mr-1"></i> 203</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- News Item 3 --> | |
| <div class="cyber-box bg-cybernavy rounded-lg p-4 flex scanline"> | |
| <div class="flex-shrink-0 w-24 h-24 overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Nintendo" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="font-bold mb-1">Nintendo Switch 2: Vazamentos</h3> | |
| <p class="text-gray-400 text-sm mb-2">Novos rumores sugerem lançamento em 2024 com hardware impressionante.</p> | |
| <div class="flex items-center text-xs"> | |
| <span class="text-cyberblue mr-3"><i class="far fa-clock mr-1"></i> 2d</span> | |
| <span class="text-cyberpurple"><i class="far fa-comment mr-1"></i> 156</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- News Item 4 --> | |
| <div class="cyber-box bg-cybernavy rounded-lg p-4 flex scanline"> | |
| <div class="flex-shrink-0 w-24 h-24 overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1630006783913-d6a5d8f5b8c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Batman" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="font-bold mb-1">Novo jogo do Batman em desenvolvimento</h3> | |
| <p class="text-gray-400 text-sm mb-2">Estúdio da Warner anuncia projeto não relacionado à série Arkham.</p> | |
| <div class="flex items-center text-xs"> | |
| <span class="text-cyberblue mr-3"><i class="far fa-clock mr-1"></i> 3d</span> | |
| <span class="text-cyberpurple"><i class="far fa-comment mr-1"></i> 312</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Upcoming Releases --> | |
| <section class="mb-16"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl md:text-4xl font-bold font-orbitron cyber-text flex items-center"> | |
| <i class="fas fa-calendar-star mr-4"></i> Próximas Estreias | |
| </h2> | |
| <a href="#" class="text-cyberblue hover:text-cyberpink font-bold flex items-center"> | |
| Ver calendário completo <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6"> | |
| <!-- Release 1 --> | |
| <div class="cyber-box bg-cybernavy rounded-lg p-4 text-center scanline hover:scale-105 transition-transform duration-300"> | |
| <div class="h-40 w-40 mx-auto mb-4 rounded-full overflow-hidden border-4 border-cyberpink"> | |
| <img src="https://images.unsplash.com/photo-1630006784755-180ad2f1d407?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" alt="Dune" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="font-bold mb-1">Duna: Parte 2</h3> | |
| <p class="text-cyberblue text-sm mb-3">15 de Novembro</p> | |
| <div class="countdown text-xs" data-date="2023-11-15"> | |
| <div class="flex justify-center space-x-1"> | |
| <span class="days font-bold">00</span><span>d</span> | |
| <span class="hours font-bold">00</span><span>h</span> | |
| <span class="minutes font-bold">00</span><span>m</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Release 2 --> | |
| <div class="cyber-box bg-cybernavy rounded-lg p-4 text-center scanline hover:scale-105 transition-transform duration-300"> | |
| <div class="h-40 w-40 mx-auto mb-4 rounded-full overflow-hidden border-4 border-cyberblue"> | |
| <img src="https://images.unsplash.com/photo-1630006783927-9f0e0a028a0a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" alt="Spider-Man" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="font-bold mb-1">Homem-Aranha 2</h3> | |
| <p class="text-cyberblue text-sm mb-3">20 de Outubro</p> | |
| <div class="countdown text-xs" data-date="2023-10-20"> | |
| <div class="flex justify-center space-x-1"> | |
| <span class="days font-bold">00</span><span>d</span> | |
| <span class="hours font-bold">00</span><span>h</span> | |
| <span class="minutes font-bold">00</span><span>m</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Release 3 --> | |
| <div class="cyber-box bg-cybernavy rounded-lg p-4 text-center scanline hover:scale-105 transition-transform duration-300"> | |
| <div class="h-40 w-40 mx-auto mb-4 rounded-full overflow-hidden border-4 border-cyberpurple"> | |
| <img src="https://images.unsplash.com/photo-1630006783923-3b4a3a0e0b0a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" alt="Avengers" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="font-bold mb-1">The Marvels</h3> | |
| <p class="text-cyberblue text-sm mb-3">10 de Novembro</p> | |
| <div class="countdown text-xs" data-date="2023-11-10"> | |
| <div class="flex justify-center space-x-1"> | |
| <span class="days font-bold">00</span><span>d</span> | |
| <span class="hours font-bold">00</span><span>h</span> | |
| <span class="minutes font-bold">00</span><span>m</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Release 4 --> | |
| <div class="cyber-box bg-cybernavy rounded-lg p-4 text-center scanline hover:scale-105 transition-transform duration-300"> | |
| <div class="h-40 w-40 mx-auto mb-4 rounded-full overflow-hidden border-4 border-cyberpink"> | |
| <img src="https://images.unsplash.com/photo-1630006783913-d6a5d8f5b8c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" alt="The Flash" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="font-bold mb-1">The Flash</h3> | |
| <p class="text-cyberblue text-sm mb-3">16 de Junho</p> | |
| <div class="countdown text-xs" data-date="2023-06-16"> | |
| <div class="flex justify-center space-x-1"> | |
| <span class="days font-bold">00</span><span>d</span> | |
| <span class="hours font-bold">00</span><span>h</span> | |
| <span class="minutes font-bold">00</span><span>m</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Release 5 --> | |
| <div class="cyber-box bg-cybernavy rounded-lg p-4 text-center scanline hover:scale-105 transition-transform duration-300"> | |
| <div class="h-40 w-40 mx-auto mb-4 rounded-full overflow-hidden border-4 border-cyberblue"> | |
| <img src="https://images.unsplash.com/photo-1630006783913-d6a5d8f5b8c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" alt="Indiana Jones" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="font-bold mb-1">Indiana Jones 5</h3> | |
| <p class="text-cyberblue text-sm mb-3">30 de Junho</p> | |
| <div class="countdown text-xs" data-date="2023-06-30"> | |
| <div class="flex justify-center space-x-1"> | |
| <span class="days font-bold">00</span><span>d</span> | |
| <span class="hours font-bold">00</span><span>h</span> | |
| <span class="minutes font-bold">00</span><span>m</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Community & Theories --> | |
| <section class="mb-16"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl md:text-4xl font-bold font-orbitron cyber-text flex items-center"> | |
| <i class="fas fa-users mr-4"></i> Comunidade & Teorias | |
| </h2> | |
| <a href="#" class="text-cyberblue hover:text-cyberpink font-bold flex items-center"> | |
| Ver tudo <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- Top Theories --> | |
| <div class="cyber-box bg-cybernavy rounded-lg p-6 scanline"> | |
| <h3 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i class="fas fa-brain mr-3 text-cyberpink"></i> Top Teorias da Semana | |
| </h3> | |
| <div class="space-y-6"> | |
| <!-- Theory 1 --> | |
| <div class="theory-item"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 w-12 h-12 rounded-full overflow-hidden border-2 border-cyberblue"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <h4 class="font-bold">SarahConnor</h4> | |
| <span class="text-xs bg-cyberpurple text-white px-2 py-1 rounded-full">FILMES</span> | |
| </div> | |
| <p class="text-sm mb-2">O verdadeiro vilão do novo filme do Batman não é o Pinguim, mas sim o Coringa disfarçado!</p> | |
| <div class="flex items-center text-xs text-gray-400"> | |
| <span class="mr-3"><i class="fas fa-arrow-up mr-1 text-cyberblue"></i> 245</span> | |
| <span class="mr-3"><i class="fas fa-comment mr-1"></i> 87</span> | |
| <span><i class="far fa-clock mr-1"></i> 2d</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Theory 2 --> | |
| <div class="theory-item"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 w-12 h-12 rounded-full overflow-hidden border-2 border-cyberpink"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <h4 class="font-bold">MasterChief117</h4> | |
| <span class="text-xs bg-cyberblue text-white px-2 py-1 rounded-full">GAMES</span> | |
| </div> | |
| <p class="text-sm mb-2">Halo Infinite vai ter um DLC surpresa conectando com o universo de Destiny!</p> | |
| <div class="flex items-center text-xs text-gray-400"> | |
| <span class="mr-3"><i class="fas fa-arrow-up mr-1 text-cyberblue"></i> 189</span> | |
| <span class="mr-3"><i class="fas fa-comment mr-1"></i> 64</span> | |
| <span><i class="far fa-clock mr-1"></i> 1d</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Theory 3 --> | |
| <div class="theory-item"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 w-12 h-12 rounded-full overflow-hidden border-2 border-cyberpurple"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <h4 class="font-bold">WonderWoman84</h4> | |
| <span class="text-xs bg-cyberpink text-white px-2 py-1 rounded-full">SÉRIES</span> | |
| </div> | |
| <p class="text-sm mb-2">The Boys vai matar o Homelander na próxima temporada e substituí-lo por...</p> | |
| <div class="flex items-center text-xs text-gray-400"> | |
| <span class="mr-3"><i class="fas fa-arrow-up mr-1 text-cyberblue"></i> 312</span> | |
| <span class="mr-3"><i class="fas fa-comment mr-1"></i> 143</span> | |
| <span><i class="far fa-clock mr-1"></i> 3d</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-6 bg-cyberdark hover:bg-cybernavy text-cyberblue font-bold py-3 px-4 rounded-lg border border-cyberblue transition-all duration-300"> | |
| Ver mais teorias <i class="fas fa-chevron-down ml-2"></i> | |
| </button> | |
| </div> | |
| <!-- Community Spotlight --> | |
| <div class="cyber-box bg-cybernavy rounded-lg p-6 scanline"> | |
| <h3 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i class="fas fa-star mr-3 text-cyberblue"></i> Destaque da Comunidade | |
| </h3> | |
| <div class="text-center mb-8"> | |
| <div class="w-32 h-32 mx-auto rounded-full overflow-hidden border-4 border-cyberpink mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User" class="w-full h-full object-cover"> | |
| </div> | |
| <h4 class="text-xl font-bold mb-1">DarthVader92</h4> | |
| <p class="text-cyberblue mb-3">Nível 42 | Jedi Master</p> | |
| <div class="flex justify-center space-x-2 mb-4"> | |
| <span class="bg-cyberdark text-cyberpink text-xs font-bold px-2 py-1 rounded-full">Filmes</span> | |
| <span class="bg-cyberdark text-cyberblue text-xs font-bold px-2 py-1 rounded-full">Games</span> | |
| <span class="bg-cyberdark text-cyberpurple text-xs font-bold px-2 py-1 rounded-full">HQs</span> | |
| </div> | |
| <p class="text-sm text-gray-300 mb-4">"A força está comigo e com todos os nerds deste portal! Juntos dominaremos a galáxia!"</p> | |
| <button class="bg-cyberpink hover:bg-cyberpurple text-white font-bold py-2 px-6 rounded-full text-sm transition-all duration-300"> | |
| Seguir <i class="fas fa-user-astronaut ml-1"></i> | |
| </button> | |
| </div> | |
| <div class="border-t border-gray-700 pt-6"> | |
| <h4 class="font-bold mb-4 flex items-center"> | |
| <i class="fas fa-trophy mr-2 text-yellow-400"></i> Hall da Fama Nerd | |
| </h4> | |
| <div class="space-y-4"> | |
| <!-- Rank 1 --> | |
| <div class="flex items-center"> | |
| <span class="text-xl font-bold text-yellow-400 w-8">1</span> | |
| <div class="w-10 h-10 rounded-full overflow-hidden border-2 border-yellow-400"> | |
| <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <h5 class="font-bold">LeiaOrgana</h5> | |
| <p class="text-xs text-gray-400">5.2k pontos</p> | |
| </div> | |
| <span class="text-sm bg-cyberpink text-white px-2 py-1 rounded-full">Lenda</span> | |
| </div> | |
| <!-- Rank 2 --> | |
| <div class="flex items-center"> | |
| <span class="text-xl font-bold text-gray-300 w-8">2</span> | |
| <div class="w-10 h-10 rounded-full overflow-hidden border-2 border-gray-500"> | |
| <img src="https://randomuser.me/api/portraits/men/41.jpg" alt="User" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <h5 class="font-bold">BatmanBegins</h5> | |
| <p class="text-xs text-gray-400">4.8k pontos</p> | |
| </div> | |
| <span class="text-sm bg-cyberblue text-white px-2 py-1 rounded-full">Mestre</span> | |
| </div> | |
| <!-- Rank 3 --> | |
| <div class="flex items-center"> | |
| <span class="text-xl font-bold text-yellow-600 w-8">3</span> | |
| <div class="w-10 h-10 rounded-full overflow-hidden border-2 border-yellow-600"> | |
| <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="User" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <h5 class="font-bold">HermioneGranger</h5> | |
| <p class="text-xs text-gray-400">4.5k pontos</p> | |
| </div> | |
| <span class="text-sm bg-cyberpurple text-white px-2 py-1 rounded-full">Expert</span> | |
| </div> | |
| </div> | |
| <button class="w-full mt-6 bg-cyberdark hover:bg-cybernavy text-cyberblue font-bold py-3 px-4 rounded-lg border border-cyberblue transition-all duration-300"> | |
| Ver ranking completo <i class="fas fa-chevron-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Geek Store --> | |
| <section class="mb-16"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl md:text-4xl font-bold font-orbitron cyber-text flex items-center"> | |
| <i class="fas fa-shopping-bag mr-4"></i> Geek Store | |
| </h2> | |
| <a href="#" class="text-cyberblue hover:text-cyberpink font-bold flex items-center"> | |
| Ver loja completa <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Product 1 --> | |
| <div class="cyber-box bg-cybernavy rounded-lg overflow-hidden scanline group"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1630006783927-9f0e0a028a0a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Product" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> | |
| <div class="absolute top-2 right-2 bg-cyberpink text-white text-xs font-bold px-2 py-1 rounded-full">-20%</div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold mb-1">Camiseta Homem-Aranha</h3> | |
| <p class="text-gray-400 text-sm mb-3">Edição limitada do novo filme</p> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <span class="text-cyberpink font-bold">R$ 59,90</span> | |
| <span class="text-gray-500 text-sm line-through ml-2">R$ 74,90</span> | |
| </div> | |
| <button class="text-cyberblue hover:text-white"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="cyber-box bg-cybernavy rounded-lg overflow-hidden scanline group"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1630006783923-3b4a3a0e0b0a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Product" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> | |
| <div class="absolute top-2 right-2 bg-cyberblue text-white text-xs font-bold px-2 py-1 rounded-full">LANÇAMENTO</div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold mb-1">Action Figure Vingadores</h3> | |
| <p class="text-gray-400 text-sm mb-3">Coleção especial 10 anos</p> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <span class="text-cyberpink font-bold">R$ 129,90</span> | |
| </div> | |
| <button class="text-cyberblue hover:text-white"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="cyber-box bg-cybernavy rounded-lg overflow-hidden scanline group"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1630006783913-d6a5d8f5b8c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Product" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> | |
| <div class="absolute top-2 right-2 bg-cyberpurple text-white text-xs font-bold px-2 py-1 rounded-full">ESGOTANDO</div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold mb-1">Caneca Star Wars</h3> | |
| <p class="text-gray-400 text-sm mb-3">Mude de cor com líquido quente</p> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <span class="text-cyberpink font-bold">R$ 39,90</span> | |
| </div> | |
| <button class="text-cyberblue hover:text-white"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product 4 --> | |
| <div class="cyber-box bg-cybernavy rounded-lg overflow-hidden scanline group"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1630006783927-9f0e0a028a0a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Product" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"> | |
| <div class="absolute top-2 right-2 bg-cyberpink text-white text-xs font-bold px-2 py-1 rounded-full">DESTAQUE</div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold mb-1">Poster Cyberpunk 2077</h3> | |
| <p class="text-gray-400 text-sm mb-3">Edição Phantom Liberty</p> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <span class="text-cyberpink font-bold">R$ 29,90</span> | |
| </div> | |
| <button class="text-cyberblue hover:text-white"> | |
| <i class="fas fa-shopping-cart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Did You Know? --> | |
| <section class="mb-16"> | |
| <div class="cyber-box bg-cybernavy rounded-lg p-8 scanline"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/3 mb-6 md:mb-0 flex justify-center"> | |
| <div class="w-48 h-48 rounded-full overflow-hidden border-4 border-cyberblue"> | |
| <img src="https://images.unsplash.com/photo-1630006783927-9f0e0a028a0a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80" alt="Fun Fact" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 md:pl-8"> | |
| <h2 class="text-3xl font-bold font-orbitron cyber-text mb-4 flex items-center"> | |
| <i class="fas fa-question-circle mr-4"></i> Você Sabia? | |
| </h2> | |
| <p class="text-lg mb-4">O icônico traje preto do Homem-Aranha foi originalmente criado por um artista brasileiro? Alex Ross, filho de brasileiros, foi o responsável pelo design do uniforme simbionte que apareceu pela primeira vez em "Secret Wars" #8 em 1984.</p> | |
| <p class="text-sm text-gray-400">Fonte: Marvel Comics #Archives</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-cybernavy cyber-border-t pt-12 pb-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <!-- About --> | |
| <div> | |
| <h3 class="text-xl font-bold font-orbitron cyber-text mb-4">PORTAL X</h3> | |
| <p class="text-gray-400 mb-4">O universo geek em um só lugar. Desde 2023 trazendo as melhores notícias, reviews e teorias da cultura pop.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="social-btn hover:bg-cyberpink"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="social-btn hover:bg-cyberblue"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="social-btn hover:bg-cyberpurple"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="social-btn hover:bg-red-500"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Quick Links --> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Links Rápidos</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-cyberblue transition-colors duration-300">Início</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-cyberblue transition-colors duration-300">Sobre Nós</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-cyberblue transition-colors duration-300">Equipe</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-cyberblue transition-colors duration-300">Contato</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-cyberblue transition-colors duration-300">Anuncie</a></li> | |
| </ul> | |
| </div> | |
| <!-- Categories --> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Categorias</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-cyberpink transition-colors duration-300">Filmes & Séries</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-cyberpink transition-colors duration-300">Games & eSports</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-cyberpink transition-colors duration-300">HQs & Mangás</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-cyberpink transition-colors duration-300">Anime</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-cyberpink transition-colors duration-300">Tecnologia</a></li> | |
| </ul> | |
| </div> | |
| <!-- Newsletter --> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Newsletter</h3> | |
| <p class="text-gray-400 mb-4">Assine e receba as últimas notícias do universo geek diretamente no seu e-mail.</p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Seu e-mail" class="bg-cyberdark text-white px-4 py-2 rounded-l-full focus:outline-none focus:ring-2 focus:ring-cyberpink w-full"> | |
| <button type="submit" class="bg-cyberpink hover:bg-cyberpurple text-white px-4 py-2 rounded-r-full transition-colors duration-300"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 | |
| <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=Euogay/nerd" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |