Spaces:
Running
Running
| <html lang="pt-br" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CYBERTECH | Transformação Digital para a Neoindustrialização</title> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Google Fonts: Inter --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <!-- Custom CSS for theme --> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f8fafc; /* slate-50 */ | |
| } | |
| .gradient-text { | |
| background: linear-gradient(to right, #0ea5e9, #2563eb); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-slate-800"> | |
| <!-- Header & Navigation --> | |
| <header class="bg-white/80 backdrop-blur-lg sticky top-0 z-50 shadow-sm"> | |
| <nav class="container mx-auto px-6 py-4 flex justify-between items-center"> | |
| <a href="#" class="flex items-center gap-2 text-2xl font-bold text-slate-900"> | |
| <img src="logo-cybertech.png" alt="Logo Cybertech" class="h-8 w-auto" onerror="this.style.display='none'"> | |
| <span>CYBER<span class="text-sky-500">TECH</span></span> | |
| </a> | |
| <div class="hidden md:flex space-x-8 items-center"> | |
| <a href="#projeto" class="text-slate-600 hover:text-sky-500 transition-colors">O Projeto</a> | |
| <a href="#arquitetura" class="text-slate-600 hover:text-sky-500 transition-colors">Arquitetura</a> | |
| <a href="#investimentos" class="text-slate-600 hover:text-sky-500 transition-colors">Investimentos</a> | |
| <a href="#visao" class="text-slate-600 hover:text-sky-500 transition-colors">Visão Futura</a> | |
| <a href="#contato" class="text-slate-600 hover:text-sky-500 transition-colors">Contato</a> | |
| </div> | |
| <a href="#contato" class="hidden md:block bg-sky-500 text-white px-5 py-2 rounded-lg hover:bg-sky-600 transition-transform hover:scale-105 shadow-md"> | |
| Fale Conosco | |
| </a> | |
| <button id="mobile-menu-button" class="md:hidden text-slate-800"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg> | |
| </button> | |
| </nav> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden px-6 pb-4"> | |
| <a href="#projeto" class="block py-2 text-slate-600 hover:text-sky-500">O Projeto</a> | |
| <a href="#arquitetura" class="block py-2 text-slate-600 hover:text-sky-500">Arquitetura</a> | |
| <a href="#investimentos" class="block py-2 text-slate-600 hover:text-sky-500">Investimentos</a> | |
| <a href="#visao" class="block py-2 text-slate-600 hover:text-sky-500">Visão Futura</a> | |
| <a href="#contato" class="block mt-2 text-center w-full bg-sky-500 text-white px-5 py-2 rounded-lg hover:bg-sky-600">Contato</a> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- Hero Section --> | |
| <section class="relative min-h-[60vh] md:min-h-[80vh] flex items-center bg-slate-100"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-extrabold text-slate-900 leading-tight"> | |
| Centro de Referência em <span class="gradient-text">Transformação Digital</span> para a Neoindustrialização | |
| </h1> | |
| <p class="mt-4 text-lg md:text-xl text-slate-600 max-w-3xl mx-auto"> | |
| Fase 1: Implementando a infraestrutura e conectividade que definirão o futuro da manufatura no Brasil. | |
| </p> | |
| <div class="mt-8"> | |
| <a href="#projeto" class="bg-sky-500 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-sky-600 transition-transform hover:scale-105 shadow-lg"> | |
| Conheça o Projeto | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Background Decoration --> | |
| <div class="absolute inset-0 bg-grid-slate-300/[0.2] [mask-image:linear-gradient(to_bottom,white_10%,transparent_100%)] -z-10"></div> | |
| </section> | |
| <!-- Project Overview Section --> | |
| <section id="projeto" class="py-20 md:py-28 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-12 md:mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold">O Projeto CYBERTECH</h2> | |
| <p class="mt-3 text-lg text-slate-600 max-w-2xl mx-auto">Integrando competências para criar um ecossistema de inovação e tecnologia.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-slate-50 p-8 rounded-xl shadow-md border border-slate-200 hover:shadow-xl hover:-translate-y-1 transition-all"> | |
| <h3 class="text-xl font-semibold mb-3 text-sky-600">O que é o CYBERTECH?</h3> | |
| <p class="text-slate-600">Um Centro de Referência para ampliar e integrar as competências do laboratório MULTICYBER e dos Institutos de Inovação e Tecnologia do SENAI.</p> | |
| </div> | |
| <div class="bg-slate-50 p-8 rounded-xl shadow-md border border-slate-200 hover:shadow-xl hover:-translate-y-1 transition-all"> | |
| <h3 class="text-xl font-semibold mb-3 text-sky-600">Objetivo Principal (Fase 1)</h3> | |
| <p class="text-slate-600">Estabelecer a fundação de infraestrutura e conectividade com tecnologias de ponta para simulação avançada e digitalização da manufatura.</p> | |
| </div> | |
| <div class="bg-slate-50 p-8 rounded-xl shadow-md border border-slate-200 hover:shadow-xl hover:-translate-y-1 transition-all md:col-span-2 lg:col-span-1"> | |
| <h3 class="text-xl font-semibold mb-3 text-sky-600">Resultado Chave Esperado</h3> | |
| <p class="text-slate-600">A integração total e sinérgica entre <strong class="font-semibold">5G, Inteligência Artificial (IA) e Simulação Avançada.</strong> Duração da Fase 1: 6 meses.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Technology Architecture Section --> | |
| <section id="arquitetura" class="py-20 md:py-28 bg-slate-100"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-12 md:mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold">Arquitetura Tecnológica de Ponta</h2> | |
| <p class="mt-3 text-lg text-slate-600 max-w-2xl mx-auto">O coração do CYBERTECH: um ecossistema de manufatura digital coeso e poderoso.</p> | |
| </div> | |
| <!-- PLM vs ERP --> | |
| <div class="bg-white p-8 md:p-12 rounded-xl shadow-lg border border-slate-200 mb-16"> | |
| <h3 class="text-2xl md:text-3xl font-bold text-center mb-6">Uma Mudança de Paradigma: <span class="gradient-text">PLM como Núcleo</span></h3> | |
| <div class="grid md:grid-cols-2 gap-8 items-center"> | |
| <div> | |
| <p class="text-slate-600 mb-4">O projeto CYBERTECH substitui o ERP tradicional pelo <strong>PLM (Product Lifecycle Management)</strong> como sistema central. O Siemens Teamcenter é o "coração" do nosso metaverso industrial.</p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"><span class="text-sky-500 mr-3 mt-1">✓</span><span><strong>Fonte Única da Verdade:</strong> Garante dados integrados e consistentes.</span></li> | |
| <li class="flex items-start"><span class="text-sky-500 mr-3 mt-1">✓</span><span><strong>Colaboração Eficiente:</strong> Conecta todas as equipes em uma única plataforma.</span></li> | |
| <li class="flex items-start"><span class="text-sky-500 mr-3 mt-1">✓</span><span><strong>Base para o Gêmeo Digital:</strong> Fornece a estrutura de dados essencial para Gêmeos Digitais.</span></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <img src="arquitetura Teamcenter.png" alt="Diagrama mostrando o PLM no centro do ecossistema" class="w-full h-auto rounded-lg shadow-md"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CORRECTED SECTION WITH GOOGLE DRIVE LINKS --> | |
| <div class="bg-white p-8 md:p-12 rounded-xl shadow-lg border border-slate-200"> | |
| <h3 class="text-2xl md:text-3xl font-bold text-center mb-6">Arquitetura da Solução Integrada</h3> | |
| <p class="text-center text-slate-600 max-w-3xl mx-auto mb-8">Nossa arquitetura conecta o chão de fábrica à nuvem, garantindo fluxo de dados contínuo e processamento de alta performance on-premise. <br><strong>Clique em uma imagem para visualizar o diagrama em uma nova aba.</strong></p> | |
| <div class="grid md:grid-cols-2 gap-8 items-start mt-8"> | |
| <div class="text-center"> | |
| <h4 class="font-semibold text-lg mb-4 text-slate-800">Diagrama de Aplicações e Rede</h4> | |
| <a href="https://drive.google.com/file/d/1uFiTu6YfzwbS_rZ-6KPWSvFoLX0PHCP2/view?usp=sharing" target="_blank" rel="noopener noreferrer" title="Clique para abrir o diagrama em uma nova aba"> | |
| <img src="arquitetura Cibertech - aplicações.png" alt="Diagrama de Aplicações do Projeto Cybertech" class="w-full h-auto rounded-lg shadow-md border border-slate-200 hover:shadow-xl hover:ring-2 hover:ring-sky-500 transition-all"> | |
| </a> | |
| </div> | |
| <div class="text-center"> | |
| <h4 class="font-semibold text-lg mb-4 text-slate-800">Diagrama de 5G</h4> | |
| <a href="https://drive.google.com/file/d/1oZ4C1jkg2BvZ5UxZJRVJ_FRH9dINcb9S/view?usp=sharing" target="_blank" rel="noopener noreferrer" title="Clique para abrir o diagrama em uma nova aba"> | |
| <img src="arquitetura Cibertech - 5g.png" alt="Diagrama de Rede 5G do Projeto Cybertech" class="w-full h-auto rounded-lg shadow-md border border-slate-200 hover:shadow-xl hover:ring-2 hover:ring-sky-500 transition-all"> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Investments Section --> | |
| <section id="investimentos" class="py-20 md:py-28 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-12 md:mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold">Investimentos Estratégicos (Fase 1)</h2> | |
| <p class="mt-3 text-lg text-slate-600 max-w-2xl mx-auto">Viabilizando nossa visão com aquisições e alocação de recursos em hardware, software e capital humano.</p> | |
| </div> | |
| <div class="overflow-x-auto bg-white p-6 rounded-xl shadow-lg border border-slate-200"> | |
| <table class="min-w-full"> | |
| <thead class="bg-slate-100"> | |
| <tr> | |
| <th class="text-left font-semibold p-4">Rubrica</th> | |
| <th class="text-left font-semibold p-4">Item</th> | |
| <th class="text-left font-semibold p-4">Justificativa</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-slate-200"> | |
| <tr class="bg-sky-50"><td colspan="3" class="p-2 font-bold text-sky-800">Equipamentos e Software</td></tr> | |
| <tr> | |
| <td class="p-4 font-semibold text-sky-700 align-top">vWorkstations e Omniverse</td> | |
| <td class="p-4 text-slate-600">2 Servidores NVIDIA com 1 e 4 GPUs L40S e licenças <strong>Omniverse</strong> e <strong>vWorkstations</strong>.</td> | |
| <td class="p-4 text-slate-600">Espinha dorsal da plataforma de renderização avançada para dados sintéticos e colaboração do metaverso industrial.</td> | |
| </tr> | |
| <tr> | |
| <td class="p-4 font-semibold text-sky-700 align-top">Simulação de Hardware</td> | |
| <td class="p-4 text-slate-600">Sistema <strong>Typhoon HIL</strong> com Hardware e Software.</td> | |
| <td class="p-4 text-slate-600">Simulação em tempo real em Hardware para pesquisa e desenvolvimento em sistemas ciberfísicos.</td> | |
| </tr> | |
| <tr> | |
| <td class="p-4 font-semibold text-sky-700 align-top">Simulação Avançada</td> | |
| <td class="p-4 text-slate-600">Licenças <strong>Sysweld (ESI)</strong> e <strong>Ansys CFD</strong>.</td> | |
| <td class="p-4 text-slate-600">Simluações avançadas em contextos específicos.</td> | |
| </tr> | |
| <tr> | |
| <td class="p-4 font-semibold text-sky-700 align-top">Software Siemens PLM</td> | |
| <td class="p-4 text-slate-600">Servidor e Licenças <strong>Siemens Teamcenter</strong> .</td> | |
| <td class="p-4 text-slate-600">Fundamentais para a gestão do ciclo de vida do produto e conexão entre os nodos do projeto.</td> | |
| </tr> | |
| <tr> | |
| <td class="p-4 font-semibold text-sky-700 align-top">Infraestrutura de Conectividade 5G</td> | |
| <td class="p-4 text-slate-600">Implementação de <strong>Rede 5G Privativa</strong>.</td> | |
| <td class="p-4 text-slate-600">Garante conectividade de baixa latência para pesquisas avançadas</td> | |
| </tr> | |
| <tr> | |
| <td class="p-4 font-semibold text-sky-700 align-top">Computação de Alto Desempenho</td> | |
| <td class="p-4 text-slate-600">Implementação de <strong>HPC NVIDIA DGX H200</strong> e <strong>Switch Melanox</strong>.</td> | |
| <td class="p-4 text-slate-600">Garante poder computacional para IA com tecnologia alinhada ao projeto de Futuro de HPCs.</td> | |
| </tr> | |
| <tr class="bg-green-50"><td colspan="3" class="p-2 font-bold text-green-800">Recursos Humanos</td></tr> | |
| <tr> | |
| <td class="p-4 font-semibold text-green-700 align-top">Horas e Serviços</td> | |
| <td class="p-4 text-slate-600">Horas de <strong>pesquisadores, desenvolvedores e gestores</strong> de projeto, além de <strong>Terceiros</strong>.</td> | |
| <td class="p-4 text-slate-600">Capital intelectual e serviços especialializados para garantir treinamento, execução, integração e gestão eficaz do projeto.</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Vision Section --> | |
| <section id="visao" class="py-20 md:py-28 bg-slate-100"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <div class="mb-12 md:mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold">Próximos Passos e Visão de Futuro</h2> | |
| <p class="mt-3 text-lg text-slate-600 max-w-2xl mx-auto">Construindo hoje o futuro da indústria nacional.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8 text-left"> | |
| <div class="bg-white p-8 rounded-xl shadow-sm"><h3 class="text-2xl font-bold mb-4">Conclusão da Fase 1</h3><ul class="space-y-3 text-slate-600"><li class="flex items-start"><span class="text-sky-500 mr-3 mt-1">●</span>Infraestrutura de ponta, operacional e pronta para suportar projetos de P&D.</li><li class="flex items-start"><span class="text-sky-500 mr-3 mt-1">●</span>Integração de 5G, IA e simulação, criando um laboratório único no Brasil.</li></ul></div> | |
| <div class="bg-white p-8 rounded-xl shadow-sm"><h3 class="text-2xl font-bold mb-4">Visão de Futuro</h3><ul class="space-y-3 text-slate-600"><li class="flex items-start"><span class="text-sky-500 mr-3 mt-1">●</span>Posicionar o CYBERTECH como líder nacional na <strong>neoindustrialização</strong>.</li><li class="flex items-start"><span class="text-sky-500 mr-3 mt-1">●</span>Capacitar a indústria brasileira com Gêmeos Digitais e Manufatura 4.0.</li><li class="flex items-start"><span class="text-sky-500 mr-3 mt-1">●</span>Expandir a colaboração entre os institutos SENAI, criando uma rede de excelência.</li></ul></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Form Section --> | |
| <section id="contato" class="py-20 md:py-28 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-12 md:mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold">Entre em Contato</h2> | |
| <p class="mt-3 text-lg text-slate-600 max-w-2xl mx-auto">Tem alguma dúvida ou gostaria de propor uma parceria? Preencha o formulário abaixo.</p> | |
| </div> | |
| <div class="max-w-2xl mx-auto bg-white p-8 rounded-xl shadow-lg border border-slate-200"> | |
| <form action="https://formspree.io/f/mqabqywz" method="POST"> | |
| <div class="mb-4"> | |
| <label for="name" class="block text-slate-700 font-semibold mb-2">Nome</label> | |
| <input type="text" id="name" name="name" required class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-sky-500 transition-shadow"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email" class="block text-slate-700 font-semibold mb-2">Seu Email</label> | |
| <input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-sky-500 transition-shadow"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-slate-700 font-semibold mb-2">Mensagem</label> | |
| <textarea id="message" name="message" rows="5" required class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-sky-500 transition-shadow"></textarea> | |
| </div> | |
| <div class="text-center"> | |
| <button type="submit" class="bg-sky-500 text-white px-8 py-3 rounded-lg text-lg font-semibold hover:bg-sky-600 transition-transform hover:scale-105 shadow-md"> | |
| Enviar Mensagem | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-slate-900 text-slate-300"> | |
| <div class="container mx-auto px-6 py-12"> | |
| <div class="text-center"> | |
| <h3 class="text-xl font-bold text-white mb-2">CYBER<span class="text-sky-500">TECH</span></h3> | |
| <p class="text-sm text-slate-400">Transformando a indústria brasileira através da tecnologia e inovação.</p> | |
| </div> | |
| <div class="mt-8 border-t border-slate-800 pt-6 text-center text-sm text-slate-500"> | |
| <p>© <span id="current-year"></span> Projeto CYBERTECH. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Script for mobile menu | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| const mobileMenuLinks = mobileMenu.getElementsByTagName('a'); | |
| for (let link of mobileMenuLinks) { | |
| link.addEventListener('click', () => { | |
| mobileMenu.classList.add('hidden'); | |
| }); | |
| } | |
| // Script for current year in footer | |
| document.getElementById('current-year').textContent = new Date().getFullYear(); | |
| // SCRIPT for forcing PDF downloads from local files | |
| document.querySelectorAll('.pdf-download-link').forEach(link => { | |
| link.addEventListener('click', function(event) { | |
| event.preventDefault(); // Prevents the link from navigating to '#' | |
| const pdfPath = this.getAttribute('data-pdf'); | |
| if (!pdfPath) return; | |
| const tempLink = document.createElement('a'); | |
| tempLink.href = pdfPath; | |
| const fileName = pdfPath.split('/').pop(); | |
| tempLink.download = fileName; | |
| document.body.appendChild(tempLink); | |
| tempLink.click(); | |
| document.body.removeChild(tempLink); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |