| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>LIMA.TEC - Tecnologia Avançada</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> |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap'); |
| |
| .tech-font { |
| font-family: 'Orbitron', sans-serif; |
| } |
| |
| .circuit-board { |
| background-image: |
| linear-gradient(to right, #1a1a1a 1px, transparent 1px), |
| linear-gradient(to bottom, #1a1a1a 1px, transparent 1px); |
| background-size: 20px 20px; |
| } |
| |
| .data-stream { |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .data-stream::after { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: linear-gradient( |
| to bottom, |
| rgba(0,0,0,0) 0%, |
| rgba(0,0,0,0.7) 30%, |
| rgba(0,0,0,0.7) 70%, |
| rgba(0,0,0,0) 100% |
| ); |
| } |
| |
| .data-bit { |
| position: absolute; |
| background-color: #f97316; |
| animation: dataFlow linear infinite; |
| } |
| |
| @keyframes dataFlow { |
| 0% { transform: translateY(-100px); } |
| 100% { transform: translateY(calc(100vh + 100px)); } |
| } |
| |
| .glow { |
| filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.7)); |
| } |
| |
| .holographic-effect { |
| background: linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(31,41,55,0.8) 50%, rgba(0,0,0,0.9) 100%); |
| box-shadow: 0 0 15px rgba(249, 115, 22, 0.4); |
| } |
| |
| .binary-code { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| overflow: hidden; |
| opacity: 0.15; |
| z-index: 0; |
| } |
| |
| .binary-digit { |
| position: absolute; |
| color: #f97316; |
| font-family: monospace; |
| font-size: 14px; |
| animation: binaryFall linear infinite; |
| } |
| |
| @keyframes binaryFall { |
| 0% { transform: translateY(-100px); } |
| 100% { transform: translateY(calc(100vh + 100px)); } |
| } |
| |
| .tech-border { |
| border: 1px solid rgba(249, 115, 22, 0.3); |
| box-shadow: inset 0 0 10px rgba(249, 115, 22, 0.2), 0 0 15px rgba(249, 115, 22, 0.3); |
| } |
| |
| .pulse { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { opacity: 0.3; } |
| 50% { opacity: 1; } |
| 100% { opacity: 0.3; } |
| } |
| |
| .corner-node { |
| width: 12px; |
| height: 12px; |
| background-color: #f97316; |
| position: absolute; |
| } |
| |
| .tech-nav { |
| backdrop-filter: blur(10px); |
| background-color: rgba(10, 10, 10, 0.7); |
| border-bottom: 1px solid rgba(249, 115, 22, 0.2); |
| } |
| |
| .tech-card { |
| background: linear-gradient(145deg, rgba(31, 41, 55, 0.8), rgba(17, 24, 39, 0.9)); |
| border: 1px solid rgba(249, 115, 22, 0.2); |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); |
| transition: all 0.3s ease; |
| } |
| |
| .tech-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(249, 115, 22, 0.2); |
| } |
| |
| .tech-btn { |
| background: linear-gradient(to right, rgba(249, 115, 22, 0.8), rgba(249, 115, 22, 0.6)); |
| border: 1px solid rgba(249, 115, 22, 0.3); |
| transition: all 0.3s ease; |
| } |
| |
| .tech-btn:hover { |
| background: linear-gradient(to right, rgba(249, 115, 22, 1), rgba(249, 115, 22, 0.8)); |
| box-shadow: 0 0 15px rgba(249, 115, 22, 0.5); |
| } |
| |
| .tech-footer { |
| background: linear-gradient(to top, rgba(10, 10, 10, 1), rgba(17, 24, 39, 0.9)); |
| border-top: 1px solid rgba(249, 115, 22, 0.2); |
| } |
| |
| .tech-input { |
| background-color: rgba(31, 41, 55, 0.5); |
| border: 1px solid rgba(249, 115, 22, 0.3); |
| transition: all 0.3s ease; |
| } |
| |
| .tech-input:focus { |
| border-color: rgba(249, 115, 22, 0.7); |
| box-shadow: 0 0 10px rgba(249, 115, 22, 0.3); |
| } |
| |
| .tech-divider { |
| height: 1px; |
| background: linear-gradient(to right, transparent, rgba(249, 115, 22, 0.5), transparent); |
| } |
| |
| .tech-highlight { |
| position: relative; |
| display: inline-block; |
| } |
| |
| .tech-highlight::after { |
| content: ''; |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| width: 100%; |
| height: 2px; |
| background: linear-gradient(to right, rgba(249, 115, 22, 0.8), transparent); |
| } |
| </style> |
| </head> |
| <body class="bg-black text-white min-h-screen overflow-hidden"> |
| |
| <div class="binary-code" id="binaryContainer"></div> |
| |
| |
| <nav class="tech-nav fixed top-0 left-0 right-0 z-50 py-4 px-6"> |
| <div class="max-w-7xl mx-auto flex items-center justify-between"> |
| <div class="flex items-center space-x-8"> |
| |
| <div class="relative w-32 h-16"> |
| |
| <div class="absolute inset-0 circuit-board rounded-lg tech-border"></div> |
| |
| |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <div class="w-11/12 h-5/6 bg-gray-900 border border-orange-500 flex items-center justify-center relative"> |
| |
| <div class="data-stream w-full h-full bg-black relative overflow-hidden"> |
| |
| <div id="dataBits"></div> |
| |
| |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <h1 class="tech-font text-xl font-bold glow"> |
| <span class="text-white">LIMA</span> |
| <span class="text-orange-500">.</span> |
| <span class="text-orange-500">TEC</span> |
| </h1> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="corner-node top-0 left-0 pulse" style="animation-delay: 0s;"></div> |
| <div class="corner-node top-0 right-0 pulse" style="animation-delay: 0.5s;"></div> |
| <div class="corner-node bottom-0 left-0 pulse" style="animation-delay: 1s;"></div> |
| <div class="corner-node bottom-0 right-0 pulse" style="animation-delay: 1.5s;"></div> |
| </div> |
| |
| <div class="hidden md:flex space-x-6"> |
| <a href="#" class="tech-font text-orange-400 hover:text-orange-300 transition">Início</a> |
| <a href="#" class="tech-font text-gray-300 hover:text-orange-300 transition">Serviços</a> |
| <a href="#" class="tech-font text-gray-300 hover:text-orange-300 transition">Soluções</a> |
| <a href="#" class="tech-font text-gray-300 hover:text-orange-300 transition">Sobre Nós</a> |
| <a href="#" class="tech-font text-gray-300 hover:text-orange-300 transition">Contato</a> |
| </div> |
| </div> |
| |
| <div class="flex items-center space-x-4"> |
| <button class="tech-btn tech-font px-4 py-2 rounded-lg text-sm"> |
| <i class="fas fa-terminal mr-2"></i>Login |
| </button> |
| <button class="md:hidden text-orange-400"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| </div> |
| </div> |
| </nav> |
| |
| |
| <section class="relative pt-32 pb-20 px-6"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-12 md:mb-0"> |
| <h1 class="tech-font text-4xl md:text-6xl font-bold mb-6"> |
| <span class="text-white">TECNOLOGIA</span> |
| <span class="text-orange-500">.</span> |
| <span class="text-orange-500">INOVAÇÃO</span> |
| <span class="text-orange-500">.</span> |
| <span class="text-white">FUTURO</span> |
| </h1> |
| <p class="text-gray-300 mb-8 text-lg"> |
| Transformando ideias em soluções digitais avançadas com tecnologia de ponta e expertise em desenvolvimento. |
| </p> |
| <div class="flex space-x-4"> |
| <button class="tech-btn tech-font px-6 py-3 rounded-lg"> |
| <i class="fas fa-rocket mr-2"></i>Comece Agora |
| </button> |
| <button class="tech-font px-6 py-3 rounded-lg border border-orange-500 text-orange-400 hover:bg-orange-500 hover:bg-opacity-10 transition"> |
| <i class="fas fa-play-circle mr-2"></i>Assistir Vídeo |
| </button> |
| </div> |
| </div> |
| |
| <div class="md:w-1/2 flex justify-center"> |
| |
| <div class="relative w-96 h-48"> |
| |
| <div class="absolute inset-0 circuit-board rounded-lg tech-border"></div> |
| |
| |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <div class="w-11/12 h-5/6 bg-gray-900 border border-orange-500 flex items-center justify-center relative"> |
| |
| <div class="data-stream w-full h-full bg-black relative overflow-hidden"> |
| |
| <div id="dataBitsHero"></div> |
| |
| |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <h1 class="tech-font text-6xl font-bold glow"> |
| <span class="text-white">LIMA</span> |
| <span class="text-orange-500">.</span> |
| <span class="text-orange-500">TEC</span> |
| </h1> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="corner-node top-0 left-0 pulse" style="animation-delay: 0s;"></div> |
| <div class="corner-node top-0 right-0 pulse" style="animation-delay: 0.5s;"></div> |
| <div class="corner-node bottom-0 left-0 pulse" style="animation-delay: 1s;"></div> |
| <div class="corner-node bottom-0 right-0 pulse" style="animation-delay: 1.5s;"></div> |
| |
| |
| <div class="absolute top-0 left-0 w-full h-full pointer-events-none"> |
| <svg width="100%" height="100%" class="absolute inset-0"> |
| <line x1="6" y1="6" x2="390" y2="6" stroke="#f97316" stroke-width="1" stroke-opacity="0.5" /> |
| <line x1="6" y1="6" x2="6" y2="42" stroke="#f97316" stroke-width="1" stroke-opacity="0.5" /> |
| <line x1="390" y1="6" x2="390" y2="42" stroke="#f97316" stroke-width="1" stroke-opacity="0.5" /> |
| <line x1="6" y1="42" x2="390" y2="42" stroke="#f97316" stroke-width="1" stroke-opacity="0.5" /> |
| |
| <line x1="6" y1="234" x2="390" y2="234" stroke="#f97316" stroke-width="1" stroke-opacity="0.5" /> |
| <line x1="6" y1="234" x2="6" y2="198" stroke="#f97316" stroke-width="1" stroke-opacity="0.5" /> |
| <line x1="390" y1="234" x2="390" y2="198" stroke="#f97316" stroke-width="1" stroke-opacity="0.5" /> |
| <line x1="6" y1="198" x2="390" y2="198" stroke="#f97316" stroke-width="1" stroke-opacity="0.5" /> |
| </svg> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="py-20 px-6 bg-gradient-to-b from-gray-900 to-black"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="text-center mb-16"> |
| <h2 class="tech-font text-3xl md:text-4xl font-bold mb-4"> |
| <span class="text-white">NOSSOS</span> |
| <span class="text-orange-500">.</span> |
| <span class="text-orange-500">SERVIÇOS</span> |
| </h2> |
| <div class="tech-divider w-32 mx-auto my-6"></div> |
| <p class="text-gray-400 max-w-2xl mx-auto"> |
| Oferecemos soluções tecnológicas completas para impulsionar seu negócio na era digital. |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| |
| <div class="tech-card p-8 rounded-xl"> |
| <div class="w-16 h-16 mb-6 bg-gray-800 rounded-lg flex items-center justify-center text-orange-500 text-3xl border border-orange-500"> |
| <i class="fas fa-laptop-code"></i> |
| </div> |
| <h3 class="tech-font text-xl font-bold mb-3">Desenvolvimento Web</h3> |
| <p class="text-gray-300 mb-4"> |
| Sites e aplicações web personalizadas com as mais recentes tecnologias. |
| </p> |
| <a href="#" class="text-orange-400 tech-font text-sm flex items-center"> |
| Saiba mais <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| |
| |
| <div class="tech-card p-8 rounded-xl"> |
| <div class="w-16 h-16 mb-6 bg-gray-800 rounded-lg flex items-center justify-center text-orange-500 text-3xl border border-orange-500"> |
| <i class="fas fa-mobile-alt"></i> |
| </div> |
| <h3 class="tech-font text-xl font-bold mb-3">Aplicativos Móveis</h3> |
| <p class="text-gray-300 mb-4"> |
| Aplicativos nativos e híbridos para iOS e Android com design intuitivo. |
| </p> |
| <a href="#" class="text-orange-400 tech-font text-sm flex items-center"> |
| Saiba mais <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| |
| |
| <div class="tech-card p-8 rounded-xl"> |
| <div class="w-16 h-16 mb-6 bg-gray-800 rounded-lg flex items-center justify-center text-orange-500 text-3xl border border-orange-500"> |
| <i class="fas fa-robot"></i> |
| </div> |
| <h3 class="tech-font text-xl font-bold mb-3">Inteligência Artificial</h3> |
| <p class="text-gray-300 mb-4"> |
| Soluções de IA e machine learning para automatizar e otimizar processos. |
| </p> |
| <a href="#" class="text-orange-400 tech-font text-sm flex items-center"> |
| Saiba mais <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="py-20 px-6 bg-black"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12"> |
| <h2 class="tech-font text-3xl md:text-4xl font-bold mb-6"> |
| <span class="text-white">SOBRE</span> |
| <span class="text-orange-500">.</span> |
| <span class="text-orange-500">NÓS</span> |
| </h2> |
| <div class="tech-divider w-32 my-6"></div> |
| <p class="text-gray-300 mb-6"> |
| A LIMA.TEC é uma empresa de tecnologia inovadora, especializada em desenvolvimento de software e soluções digitais. Nossa equipe de especialistas está comprometida em entregar produtos de alta qualidade que impulsionam o sucesso de nossos clientes. |
| </p> |
| <p class="text-gray-300 mb-8"> |
| Combinamos criatividade, tecnologia e estratégia para criar soluções personalizadas que atendem às necessidades específicas de cada negócio. |
| </p> |
| <button class="tech-btn tech-font px-6 py-3 rounded-lg"> |
| <i class="fas fa-book-open mr-2"></i>Nossa História |
| </button> |
| </div> |
| |
| <div class="md:w-1/2"> |
| <div class="relative"> |
| <div class="tech-card p-8 rounded-xl"> |
| <div class="grid grid-cols-2 gap-6"> |
| |
| <div class="tech-indicator"> |
| <div class="w-12 h-12 mx-auto bg-gray-800 rounded-lg flex items-center justify-center text-orange-500 text-2xl mb-2 border border-orange-500"> |
| <i class="fas fa-server"></i> |
| </div> |
| <p class="tech-font text-xs text-center text-gray-400">INFRA</p> |
| </div> |
| <div class="tech-indicator"> |
| <div class="w-12 h-12 mx-auto bg-gray-800 rounded-lg flex items-center justify-center text-orange-500 text-2xl mb-2 border border-orange-500"> |
| <i class="fas fa-robot"></i> |
| </div> |
| <p class="tech-font text-xs text-center text-gray-400">IA</p> |
| </div> |
| <div class="tech-indicator"> |
| <div class="w-12 h-12 mx-auto bg-gray-800 rounded-lg flex items-center justify-center text-orange-500 text-2xl mb-2 border border-orange-500"> |
| <i class="fas fa-database"></i> |
| </div> |
| <p class="tech-font text-xs text-center text-gray-400">DADOS</p> |
| </div> |
| <div class="tech-indicator"> |
| <div class="w-12 h-12 mx-auto bg-gray-800 rounded-lg flex items-center justify-center text-orange-500 text-2xl mb-2 border border-orange-500"> |
| <i class="fas fa-network-wired"></i> |
| </div> |
| <p class="tech-font text-xs text-center text-gray-400">REDES</p> |
| </div> |
| </div> |
| |
| <div class="mt-8"> |
| <div class="holographic-effect inline-block px-6 py-3 rounded-lg mb-6"> |
| <p class="tech-font text-lg text-orange-400 tracking-wider">"INOVAÇÃO EM FORMATO RETANGULAR"</p> |
| </div> |
| |
| <div class="flex items-center"> |
| <div class="w-12 h-12 bg-orange-500 rounded-full flex items-center justify-center text-black mr-4"> |
| <i class="fas fa-quote-left"></i> |
| </div> |
| <p class="text-gray-300 italic"> |
| "A tecnologia deve resolver problemas reais, não apenas impressionar." |
| </p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="absolute -top-6 -left-6 w-24 h-24 border-t-2 border-l-2 border-orange-500 rounded-tl-lg opacity-50"></div> |
| <div class="absolute -bottom-6 -right-6 w-24 h-24 border-b-2 border-r-2 border-orange-500 rounded-br-lg opacity-50"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="py-20 px-6 bg-gradient-to-b from-black to-gray-900"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="text-center mb-16"> |
| <h2 class="tech-font text-3xl md:text-4xl font-bold mb-4"> |
| <span class="text-white">FALE</span> |
| <span class="text-orange-500">.</span> |
| <span class="text-orange-500">CONOSCO</span> |
| </h2> |
| <div class="tech-divider w-32 mx-auto my-6"></div> |
| <p class="text-gray-400 max-w-2xl mx-auto"> |
| Pronto para transformar sua ideia em realidade? Entre em contato conosco hoje mesmo. |
| </p> |
| </div> |
| |
| <div class="flex flex-col md:flex-row"> |
| <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12"> |
| <form class="space-y-6"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label for="name" class="block text-gray-300 tech-font mb-2">Nome</label> |
| <input type="text" id="name" class="tech-input w-full px-4 py-3 rounded-lg focus:outline-none"> |
| </div> |
| <div> |
| <label for="email" class="block text-gray-300 tech-font mb-2">Email</label> |
| <input type="email" id="email" class="tech-input w-full px-4 py-3 rounded-lg focus:outline-none"> |
| </div> |
| </div> |
| <div> |
| <label for="subject" class="block text-gray-300 tech-font mb-2">Assunto</label> |
| <input type="text" id="subject" class="tech-input w-full px-4 py-3 rounded-lg focus:outline-none"> |
| </div> |
| <div> |
| <label for="message" class="block text-gray-300 tech-font mb-2">Mensagem</label> |
| <textarea id="message" rows="5" class="tech-input w-full px-4 py-3 rounded-lg focus:outline-none"></textarea> |
| </div> |
| <button type="submit" class="tech-btn tech-font px-6 py-3 rounded-lg w-full"> |
| <i class="fas fa-paper-plane mr-2"></i>Enviar Mensagem |
| </button> |
| </form> |
| </div> |
| |
| <div class="md:w-1/2"> |
| <div class="tech-card p-8 rounded-xl h-full"> |
| <h3 class="tech-font text-xl font-bold mb-6 text-orange-400">Informações de Contato</h3> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-orange-500 mr-4"> |
| <i class="fas fa-map-marker-alt"></i> |
| </div> |
| <div> |
| <h4 class="tech-font text-gray-300 mb-1">Endereço</h4> |
| <p class="text-gray-400">Av. Tecnológica, 1234 - Centro, São Paulo/SP</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-orange-500 mr-4"> |
| <i class="fas fa-phone-alt"></i> |
| </div> |
| <div> |
| <h4 class="tech-font text-gray-300 mb-1">Telefone</h4> |
| <p class="text-gray-400">(11) 98765-4321</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-orange-500 mr-4"> |
| <i class="fas fa-envelope"></i> |
| </div> |
| <div> |
| <h4 class="tech-font text-gray-300 mb-1">Email</h4> |
| <p class="text-gray-400">contato@lima.tec</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-orange-500 mr-4"> |
| <i class="fas fa-clock"></i> |
| </div> |
| <div> |
| <h4 class="tech-font text-gray-300 mb-1">Horário</h4> |
| <p class="text-gray-400">Seg-Sex: 9h às 18h</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8"> |
| <h4 class="tech-font text-gray-300 mb-4">Siga-nos</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-orange-500 hover:bg-orange-500 hover:text-white transition"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-orange-500 hover:bg-orange-500 hover:text-white transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-orange-500 hover:bg-orange-500 hover:text-white transition"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-orange-500 hover:bg-orange-500 hover:text-white transition"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <footer class="tech-footer py-12 px-6"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12"> |
| <div> |
| |
| <div class="relative w-32 h-16 mb-6"> |
| |
| <div class="absolute inset-0 circuit-board rounded-lg tech-border"></div> |
| |
| |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <div class="w-11/12 h-5/6 bg-gray-900 border border-orange-500 flex items-center justify-center relative"> |
| |
| <div class="data-stream w-full h-full bg-black relative overflow-hidden"> |
| |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <h1 class="tech-font text-xl font-bold glow"> |
| <span class="text-white">LIMA</span> |
| <span class="text-orange-500">.</span> |
| <span class="text-orange-500">TEC</span> |
| </h1> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="corner-node top-0 left-0 pulse" style="animation-delay: 0s;"></div> |
| <div class="corner-node top-0 right-0 pulse" style="animation-delay: 0.5s;"></div> |
| <div class="corner-node bottom-0 left-0 pulse" style="animation-delay: 1s;"></div> |
| <div class="corner-node bottom-0 right-0 pulse" style="animation-delay: 1.5s;"></div> |
| </div> |
| |
| <p class="text-gray-400 mb-4"> |
| Tecnologia e inovação em formato retangular para transformar seu negócio. |
| </p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-orange-400 transition"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-orange-400 transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-orange-400 transition"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-orange-400 transition"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="tech-font text-lg text-orange-400 mb-4">Links Rápidos</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-orange-400 transition">Início</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-orange-400 transition">Serviços</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-orange-400 transition">Soluções</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-orange-400 transition">Sobre Nós</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-orange-400 transition">Contato</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="tech-font text-lg text-orange-400 mb-4">Serviços</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-orange-400 transition">Desenvolvimento Web</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-orange-400 transition">Aplicativos Móveis</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-orange-400 transition">Inteligência Artificial</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-orange-400 transition">Consultoria em TI</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-orange-400 transition">Hospedagem Cloud</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="tech-font text-lg text-orange-400 mb-4">Newsletter</h4> |
| <p class="text-gray-400 mb-4"> |
| Assine nossa newsletter para receber as últimas novidades. |
| </p> |
| <form class="flex"> |
| <input type="email" placeholder="Seu email" class="tech-input px-4 py-3 rounded-l-lg focus:outline-none w-full"> |
| <button type="submit" class="tech-btn px-4 py-3 rounded-r-lg"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </form> |
| </div> |
| </div> |
| |
| <div class="pt-8 border-t border-gray-800"> |
| <div class="flex flex-col md:flex-row items-center justify-between"> |
| <p class="text-gray-500 text-sm mb-4 md:mb-0"> |
| © 2023 LIMA.TEC - Todos os direitos reservados. |
| </p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-500 hover:text-orange-400 transition text-sm">Termos de Serviço</a> |
| <a href="#" class="text-gray-500 hover:text-orange-400 transition text-sm">Política de Privacidade</a> |
| <a href="#" class="text-gray-500 hover:text-orange-400 transition text-sm">Cookies</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| function createBinary(containerId, count) { |
| const container = document.getElementById(containerId); |
| const digits = '01'; |
| |
| for (let i = 0; i < count; i++) { |
| const digit = document.createElement('div'); |
| digit.className = 'binary-digit'; |
| digit.textContent = digits.charAt(Math.floor(Math.random() * digits.length)); |
| digit.style.left = `${Math.random() * 100}%`; |
| digit.style.animationDuration = `${5 + Math.random() * 10}s`; |
| digit.style.animationDelay = `${Math.random() * 5}s`; |
| container.appendChild(digit); |
| } |
| } |
| |
| |
| function createDataStream(containerId, count) { |
| const container = document.getElementById(containerId); |
| |
| for (let i = 0; i < count; i++) { |
| const bit = document.createElement('div'); |
| bit.className = 'data-bit'; |
| bit.style.width = `${2 + Math.random() * 4}px`; |
| bit.style.height = `${10 + Math.random() * 20}px`; |
| bit.style.left = `${Math.random() * 100}%`; |
| bit.style.animationDuration = `${3 + Math.random() * 7}s`; |
| bit.style.animationDelay = `${Math.random() * 5}s`; |
| container.appendChild(bit); |
| } |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| createBinary('binaryContainer', 50); |
| createDataStream('dataBits', 20); |
| createDataStream('dataBitsHero', 30); |
| |
| |
| const mobileMenuButton = document.querySelector('.md\\:hidden'); |
| const mobileMenu = document.querySelector('.hidden.md\\:flex'); |
| |
| if (mobileMenuButton && mobileMenu) { |
| mobileMenuButton.addEventListener('click', function() { |
| mobileMenu.classList.toggle('hidden'); |
| mobileMenu.classList.toggle('flex'); |
| mobileMenu.classList.toggle('flex-col'); |
| mobileMenu.classList.toggle('absolute'); |
| mobileMenu.classList.toggle('top-16'); |
| mobileMenu.classList.toggle('left-0'); |
| mobileMenu.classList.toggle('right-0'); |
| mobileMenu.classList.toggle('bg-gray-900'); |
| mobileMenu.classList.toggle('p-4'); |
| mobileMenu.classList.toggle('space-y-4'); |
| mobileMenu.classList.toggle('space-x-0'); |
| mobileMenu.classList.toggle('border-t'); |
| mobileMenu.classList.toggle('border-orange-500'); |
| mobileMenu.classList.toggle('border-opacity-30'); |
| }); |
| } |
| }); |
| </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=LIMATEC/site-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
