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> | |
| <!-- Chart.js --> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></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; | |
| } | |
| .accordion-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.5s ease-out; | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 350px; | |
| width: 100%; | |
| max-width: 400px; | |
| margin: auto; | |
| } | |
| .tab-button { | |
| transition: color 0.3s ease, border-color 0.3s ease; | |
| } | |
| .tab-button.active { | |
| color: #0ea5e9; /* sky-500 */ | |
| border-bottom-color: #0ea5e9; | |
| } | |
| /* Roadmap styles */ | |
| .roadmap-line { | |
| position: absolute; | |
| left: 50%; | |
| top: 1.25rem; /* h-10/2 */ | |
| bottom: 1.25rem; | |
| width: 4px; | |
| background-color: #e2e8f0; /* slate-200 */ | |
| transform: translateX(-50%); | |
| } | |
| .roadmap-item { | |
| position: relative; | |
| } | |
| .roadmap-dot { | |
| position: absolute; | |
| left: 50%; | |
| top: 1.25rem; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| border: 4px solid #f8fafc; /* slate-50 */ | |
| transform: translate(-50%, -50%); | |
| } | |
| .roadmap-content { | |
| width: calc(50% - 2.5rem); /* width - margin */ | |
| } | |
| .step-item { | |
| transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; | |
| } | |
| .step-item.active { | |
| background-color: #0ea5e9; /* sky-500 */ | |
| border-color: #0284c7; /* sky-600 */ | |
| color: white; | |
| } | |
| .step-item.active .step-number { | |
| background-color: white; | |
| color: #0ea5e9; | |
| } | |
| .step-number { | |
| transition: background-color 0.3s ease, color 0.3s ease; | |
| } | |
| /* Aspect Ratio for image placeholders */ | |
| .aspect-16-9 { | |
| position: relative; | |
| width: 100%; | |
| padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ | |
| } | |
| .aspect-16-9 img { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| </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="#inicio" 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-6 items-center"> | |
| <a href="#projeto" class="text-slate-600 hover:text-sky-500 transition-colors">O Projeto</a> | |
| <a href="#fases" class="text-slate-600 hover:text-sky-500 transition-colors">Fases</a> | |
| <a href="#arquitetura" class="text-slate-600 hover:text-sky-500 transition-colors">Arquitetura</a> | |
| <a href="#pd" class="text-slate-600 hover:text-sky-500 transition-colors">P&D</a> | |
| <a href="#status" class="text-slate-600 hover:text-sky-500 transition-colors">Status</a> | |
| <a href="#investimentos" class="text-slate-600 hover:text-sky-500 transition-colors">Investimentos</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="#fases" class="block py-2 text-slate-600 hover:text-sky-500">Fases</a> | |
| <a href="#arquitetura" class="block py-2 text-slate-600 hover:text-sky-500">Arquitetura</a> | |
| <a href="#pd" class="block py-2 text-slate-600 hover:text-sky-500">P&D</a> | |
| <a href="#status" class="block py-2 text-slate-600 hover:text-sky-500">Status</a> | |
| <a href="#investimentos" class="block py-2 text-slate-600 hover:text-sky-500">Investimentos</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 id="inicio" 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"> | |
| 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> | |
| <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 para a indústria nacional.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-10 items-center"> | |
| <div class="text-slate-600 space-y-4"> | |
| <h3 class="text-2xl font-semibold mb-3 text-sky-600">O que é o CYBERTECH?</h3> | |
| <p>O CYBERTECH é um Centro de Referência focado na transformação digital da manufatura. Ele visa ampliar e integrar as competências do laboratório MULTICYBER do UNISENAI aos Institutos de Inovação e Tecnologia do SENAI, criando um ambiente único para pesquisa, desenvolvimento e aplicação de tecnologias da Indústria 4.0.</p> | |
| <p>Através da sinergia entre o ambiente acadêmico e as demandas da indústria, o projeto busca ser um catalisador para a neoindustrialização do Brasil.</p> | |
| </div> | |
| <div class="bg-slate-50 p-8 rounded-xl border border-slate-200"> | |
| <h3 class="text-2xl font-semibold mb-4 text-sky-600">Objetivos e Resultados</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <h4 class="font-bold text-slate-800">Objetivo Geral:</h4> | |
| <p class="text-slate-600">Posicionar o SENAI como líder na pesquisa, desenvolvimento e implementação de soluções para a manufatura avançada, capacitando a indústria brasileira para os desafios da digitalização.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-slate-800">Objetivos Específicos:</h4> | |
| <ul class="list-disc list-inside text-slate-600 space-y-1 pl-2"> | |
| <li>Integrar tecnologias habilitadoras como 5G, IA, Simulação Avançada e Gêmeos Digitais.</li> | |
| <li>Criar um ambiente para teste e validação de soluções digitais para a indústria.</li> | |
| <li>Fomentar a colaboração entre os Institutos SENAI e parceiros industriais.</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-slate-800">Resultados Chave Esperados:</h4> | |
| <ul class="list-disc list-inside text-slate-600 space-y-1 pl-2"> | |
| <li>Infraestrutura de ponta, operacional e pronta para suportar projetos de P&D.</li> | |
| <li>Modelos de IA e simulação validados para aplicações industriais.</li> | |
| <li>Uma rede de colaboração consolidada para a transformação digital.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Project Phases Section --> | |
| <section id="fases" 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">Fases do Projeto</h2> | |
| <p class="mt-3 text-lg text-slate-600 max-w-2xl mx-auto">Uma jornada estruturada em fases para garantir a construção e evolução do ecossistema CYBERTECH.</p> | |
| </div> | |
| <div class="max-w-5xl mx-auto"> | |
| <div class="border-b border-slate-200 mb-8"> | |
| <nav id="phases-tabs" class="-mb-px flex space-x-6" aria-label="Tabs"> | |
| <button onclick="changeTab(this, 0)" class="tab-button active whitespace-nowrap py-4 px-1 border-b-2 font-medium text-lg text-slate-500 border-transparent">Fase 1</button> | |
| <button onclick="changeTab(this, 1)" class="tab-button whitespace-nowrap py-4 px-1 border-b-2 font-medium text-lg text-slate-500 border-transparent">Fase 2</button> | |
| <button onclick="changeTab(this, 2)" class="tab-button whitespace-nowrap py-4 px-1 border-b-2 font-medium text-lg text-slate-500 border-transparent">Fase 3</button> | |
| </nav> | |
| </div> | |
| <div id="phases-content-container"> | |
| <!-- Phase 1 Content --> | |
| <div class="phase-content"> | |
| <div class="mb-8"> | |
| <h3 class="text-2xl font-bold text-sky-600 mb-2">Fase 1: Infraestrutura e Conectividade</h3> | |
| <p class="text-slate-600"><strong>Duração:</strong> 6 meses. <br><strong>Objetivo:</strong> Estabelecer a fundação de infraestrutura e conectividade com tecnologias de ponta, focando na integração total entre <strong>5G, Inteligência Artificial (IA) e Simulação Avançada.</strong></p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200"> | |
| <h4 class="font-semibold text-slate-800 mb-2">Rede 5G e IoT</h4> | |
| <p class="text-slate-600 text-sm">Interconexão de alta velocidade para coleta de dados em tempo real e suporte a Gêmeos Digitais.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200"> | |
| <h4 class="font-semibold text-slate-800 mb-2">HPC - NVIDIA DGX H200</h4> | |
| <p class="text-slate-600 text-sm">Supercomputação para IA avançada, treinamento de LLMs e simulações complexas.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200"> | |
| <h4 class="font-semibold text-slate-800 mb-2">NVIDIA Omniverse</h4> | |
| <p class="text-slate-600 text-sm">Plataforma para metaverso industrial, colaboração e treinamento de IA com dados sintéticos.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200"> | |
| <h4 class="font-semibold text-slate-800 mb-2">Virtual Workstations</h4> | |
| <p class="text-slate-600 text-sm">Acesso remoto de alto desempenho a softwares de simulação para 30 estações virtuais.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200"> | |
| <h4 class="font-semibold text-slate-800 mb-2">Siemens PLM</h4> | |
| <p class="text-slate-600 text-sm">Gerenciamento centralizado do ciclo de vida do produto, garantindo rastreabilidade.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200"> | |
| <h4 class="font-semibold text-slate-800 mb-2">Simulação e Validação</h4> | |
| <p class="text-slate-600 text-sm">Uso de ESI SYSWELD, Ansys CFD e Typhoon HIL para otimizar e validar processos.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 2 Content (Hidden by default) --> | |
| <div class="phase-content hidden"> | |
| <div class="mb-8"> | |
| <h3 class="text-2xl font-bold text-sky-600 mb-2">Fase 2: Desenvolvimento e Validação de Casos de Uso</h3> | |
| <p class="text-slate-600"><strong>Duração:</strong> 12 meses (Estimado). <br><strong>Objetivo:</strong> Utilizar a infraestrutura da Fase 1 para desenvolver, testar e validar soluções para desafios reais da indústria, em parceria com empresas selecionadas.</p> | |
| </div> | |
| <ul class="list-disc list-inside space-y-3 text-slate-600"> | |
| <li><strong>Execução dos Projetos de P&D:</strong> Iniciar as pesquisas definidas para criar modelos preditivos, frameworks de colaboração e otimizações de processo.</li> | |
| <li><strong>Desenvolvimento de Gêmeos Digitais:</strong> Criar e validar Gêmeos Digitais para produtos e processos específicos de parceiros industriais, utilizando dados reais e sintéticos.</li> | |
| <li><strong>Testes de Aplicações de IA:</strong> Implementar e testar algoritmos de manutenção preditiva, controle de qualidade por visão computacional e otimização de parâmetros.</li> | |
| <li><strong>Validação de Conectividade 5G:</strong> Testar a robustez e a baixa latência da rede 5G em aplicações críticas de controle e monitoramento remoto.</li> | |
| </ul> | |
| </div> | |
| <!-- Phase 3 Content (Hidden by default) --> | |
| <div class="phase-content hidden"> | |
| <div class="mb-8"> | |
| <h3 class="text-2xl font-bold text-sky-600 mb-2">Fase 3: Transferência de Tecnologia e Expansão</h3> | |
| <p class="text-slate-600"><strong>Duração:</strong> 12 meses (Estimado). <br><strong>Objetivo:</strong> Disseminar as soluções desenvolvidas, expandir a rede de colaboração e consolidar o CYBERTECH como um centro autossustentável de inovação.</p> | |
| </div> | |
| <ul class="list-disc list-inside space-y-3 text-slate-600"> | |
| <li><strong>Transferência para a Indústria:</strong> Criar pacotes de soluções e serviços para transferir as tecnologias e conhecimentos validados para o mercado.</li> | |
| <li><strong>Capacitação e Treinamento:</strong> Oferecer programas de treinamento para profissionais da indústria sobre as novas tecnologias e processos.</li> | |
| <li><strong>Expansão da Rede:</strong> Integrar novos laboratórios dos Institutos SENAI ao ecossistema CYBERTECH, ampliando a capilaridade e as capacidades da rede.</li> | |
| <li><strong>Modelo de Sustentabilidade:</strong> Desenvolver um modelo de negócio para garantir a sustentabilidade e a contínua evolução do centro a longo prazo.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Technology Architecture Section --> | |
| <section id="arquitetura" 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">Arquitetura Tecnológica e Fluxo de Trabalho</h2> | |
| <p class="mt-3 text-lg text-slate-600 max-w-3xl mx-auto">Um ecossistema de manufatura digital coeso, onde o fluxo de dados e processos é orquestrado de forma inteligente.</p> | |
| </div> | |
| <div class="bg-slate-50 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-10">Fluxo da Arquitetura CYBERTECH</h3> | |
| <div class="flex flex-col md:flex-row md:space-x-8 space-y-8 md:space-y-0"> | |
| <div id="step-buttons" class="flex flex-wrap justify-center gap-2 md:flex-col md:w-1/3"> | |
| <!-- Step buttons will be generated by JS --> | |
| </div> | |
| <div id="step-details-container" class="md:w-2/3 bg-white p-6 rounded-lg shadow-md min-h-[520px] border border-slate-200 flex flex-col"> | |
| <p class="text-slate-500 italic">Selecione um passo ao lado para ver os detalhes.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-slate-50 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">Diagramas 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.</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> | |
| <!-- P&D Section --> | |
| <section id="pd" 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">Propostas de Pesquisa e Desenvolvimento (P&D)</h2> | |
| <p class="mt-3 text-lg text-slate-600 max-w-3xl mx-auto">Sete linhas de P&D alinhadas com o fluxo da arquitetura, visando aprofundar o conhecimento e desenvolver soluções inovadoras para a indústria.</p> | |
| </div> | |
| <div id="pd-accordion-container" class="space-y-4 max-w-4xl mx-auto"> | |
| <!-- P&D items will be generated by JS --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Status e Roadmap Section --> | |
| <section id="status" class="py-20 md:py-28 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold">Status e Roadmap do Projeto</h2> | |
| <p class="mt-3 text-lg text-slate-600 max-w-3xl mx-auto">Acompanhe a evolução do CYBERTECH, desde a sua concepção até a consolidação como um pilar da indústria 4.0 no Brasil.</p> | |
| </div> | |
| <div class="relative max-w-5xl mx-auto"> | |
| <div class="roadmap-line hidden md:block"></div> | |
| <div id="roadmap-container" class="space-y-12 md:space-y-0"> | |
| <!-- Roadmap items will be generated by JS --> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Investments Section --> | |
| <section id="investimentos" 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">Investimentos Estratégicos</h2> | |
| <p class="mt-3 text-lg text-slate-600 max-w-3xl mx-auto">Viabilizando nossa visão com alocação de recursos em hardware, software e capital humano.</p> | |
| </div> | |
| <div class="max-w-5xl mx-auto"> | |
| <div class="border-b border-slate-200 mb-8"> | |
| <nav id="investment-tabs" class="-mb-px flex space-x-6" aria-label="Tabs"> | |
| <button onclick="changeTab(this, 0)" class="tab-button active whitespace-nowrap py-4 px-1 border-b-2 font-medium text-lg text-slate-500 border-transparent">Visão Geral</button> | |
| <button onclick="changeTab(this, 1)" class="tab-button whitespace-nowrap py-4 px-1 border-b-2 font-medium text-lg text-slate-500 border-transparent">Fase 1</button> | |
| <button onclick="changeTab(this, 2)" class="tab-button whitespace-nowrap py-4 px-1 border-b-2 font-medium text-lg text-slate-500 border-transparent">Fase 2</button> | |
| <button onclick="changeTab(this, 3)" class="tab-button whitespace-nowrap py-4 px-1 border-b-2 font-medium text-lg text-slate-500 border-transparent">Fase 3</button> | |
| </nav> | |
| </div> | |
| <div id="investment-content-container"> | |
| <!-- Investment Overview --> | |
| <div class="investment-content"> | |
| <h3 class="text-2xl font-bold text-sky-600 mb-4">Visão Geral do Investimento</h3> | |
| <p class="text-slate-600">O projeto CYBERTECH está estruturado em um plano de investimento multifásico, projetado para construir, validar e expandir um ecossistema de tecnologia de ponta para a indústria. O investimento inicial da Fase 1, de aproximadamente <strong class="font-semibold text-slate-800">R$ 4,88 milhões</strong>, é fundamental para adquirir a infraestrutura de hardware, software e conectividade que servirá de base para todas as atividades futuras. As fases subsequentes terão seus orçamentos detalhados conforme o avanço e a captação de novos projetos e parcerias, garantindo a sustentabilidade e o crescimento contínuo do centro.</p> | |
| </div> | |
| <!-- Investment Phase 1 --> | |
| <div class="investment-content hidden"> | |
| <div class="grid lg:grid-cols-5 gap-12 items-center"> | |
| <div class="lg:col-span-3 overflow-x-auto bg-white p-6 rounded-xl shadow-lg border border-slate-200"> | |
| <table class="min-w-full"> | |
| <thead class="bg-slate-50"> | |
| <tr> | |
| <th class="text-left font-semibold p-4">Rubrica</th> | |
| <th class="text-left font-semibold p-4">Item Principal</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-slate-200"> | |
| <tr class="bg-sky-50"><td colspan="2" class="p-2 font-bold text-sky-800">Equipamentos e Software</td></tr> | |
| <tr><td class="p-3 font-semibold text-sky-700 align-top">vWorkstations e Omniverse</td><td class="p-3 text-slate-600">Servidores NVIDIA e licenças.</td></tr> | |
| <tr><td class="p-3 font-semibold text-sky-700 align-top">Simulação de Hardware</td><td class="p-3 text-slate-600">Sistema Typhoon HIL.</td></tr> | |
| <tr><td class="p-3 font-semibold text-sky-700 align-top">Simulação Avançada</td><td class="p-3 text-slate-600">Licenças Sysweld (ESI) e Ansys CFD.</td></tr> | |
| <tr><td class="p-3 font-semibold text-sky-700 align-top">Software Siemens PLM</td><td class="p-3 text-slate-600">Servidor e Licenças Siemens Teamcenter.</td></tr> | |
| <tr><td class="p-3 font-semibold text-sky-700 align-top">Infraestrutura 5G</td><td class="p-3 text-slate-600">Implementação de Rede 5G Privativa.</td></tr> | |
| <tr><td class="p-3 font-semibold text-sky-700 align-top">Computação de Alto Desempenho</td><td class="p-3 text-slate-600">HPC NVIDIA DGX H200 e Switch.</td></tr> | |
| <tr class="bg-green-50"><td colspan="2" class="p-2 font-bold text-green-800">Recursos Humanos</td></tr> | |
| <tr><td class="p-3 font-semibold text-green-700 align-top">Horas e Serviços</td><td class="p-3 text-slate-600">Pesquisadores, desenvolvedores e gestores.</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="lg:col-span-2 text-center"> | |
| <h3 class="text-xl font-semibold mb-4">Distribuição do Orçamento (Fase 1)</h3> | |
| <div class="chart-container"> | |
| <canvas id="budgetChartPhase1"></canvas> | |
| </div> | |
| <p class="text-sm text-slate-600 mt-4">Total estimado da Fase 1: <strong class="font-bold">~R$ 4,88 Milhões</strong>.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Investment Phase 2 --> | |
| <div class="investment-content hidden"> | |
| <div class="grid lg:grid-cols-5 gap-12 items-center"> | |
| <div class="lg:col-span-3 overflow-x-auto bg-white p-6 rounded-xl shadow-lg border border-slate-200"> | |
| <table class="min-w-full"> | |
| <thead class="bg-slate-50"> | |
| <tr><th class="text-left font-semibold p-4" colspan="2">Principais Áreas de Alocação (Estimativa)</th></tr> | |
| </thead> | |
| <tbody class="divide-y divide-slate-200"> | |
| <tr><td class="p-3 font-semibold text-sky-700">Recursos Humanos</td><td class="p-3 text-slate-600">Horas de pesquisadores e especialistas para desenvolvimento.</td></tr> | |
| <tr><td class="p-3 font-semibold text-sky-700">Materiais e Insumos</td><td class="p-3 text-slate-600">Aquisição de materiais de consumo para prototipagem e validação.</td></tr> | |
| <tr><td class="p-3 font-semibold text-sky-700">Gestão e Parcerias</td><td class="p-3 text-slate-600">Custos associados à gestão de projetos e colaboração com a indústria.</td></tr> | |
| <tr><td class="p-3 font-semibold text-sky-700">Licenciamento de Software</td><td class="p-3 text-slate-600">Renovação ou aquisição de licenças específicas para os casos de uso.</td></tr> | |
| </tbody> | |
| </table> | |
| <p class="mt-4 text-slate-500 italic text-sm">O detalhamento financeiro desta fase será definido ao final da Fase 1.</p> | |
| </div> | |
| <div class="lg:col-span-2 text-center"> | |
| <h3 class="text-xl font-semibold mb-4">Foco do Investimento (Fase 2)</h3> | |
| <div class="chart-container"> | |
| <canvas id="budgetChartPhase2"></canvas> | |
| </div> | |
| <p class="text-sm text-slate-600 mt-4">Orçamento focado na execução de P&D e projetos piloto.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Investment Phase 3 --> | |
| <div class="investment-content hidden"> | |
| <div class="grid lg:grid-cols-5 gap-12 items-center"> | |
| <div class="lg:col-span-3 overflow-x-auto bg-white p-6 rounded-xl shadow-lg border border-slate-200"> | |
| <table class="min-w-full"> | |
| <thead class="bg-slate-50"> | |
| <tr><th class="text-left font-semibold p-4" colspan="2">Principais Áreas de Alocação (Estimativa)</th></tr> | |
| </thead> | |
| <tbody class="divide-y divide-slate-200"> | |
| <tr><td class="p-3 font-semibold text-sky-700">Transferência de Tecnologia</td><td class="p-3 text-slate-600">Desenvolvimento de produtos e serviços para o mercado.</td></tr> | |
| <tr><td class="p-3 font-semibold text-sky-700">Marketing e Comercial</td><td class="p-3 text-slate-600">Ações para divulgação e comercialização das soluções do centro.</td></tr> | |
| <tr><td class="p-3 font-semibold text-sky-700">Expansão da Rede</td><td class="p-3 text-slate-600">Investimento na integração de novos laboratórios e infraestrutura.</td></tr> | |
| <tr><td class="p-3 font-semibold text-sky-700">Capacitação</td><td class="p-3 text-slate-600">Criação e oferta de programas de treinamento para a indústria.</td></tr> | |
| </tbody> | |
| </table> | |
| <p class="mt-4 text-slate-500 italic text-sm">O modelo de negócio a ser consolidado nesta fase definirá a estrutura de custos e receitas.</p> | |
| </div> | |
| <div class="lg:col-span-2 text-center"> | |
| <h3 class="text-xl font-semibold mb-4">Foco do Investimento (Fase 3)</h3> | |
| <div class="chart-container"> | |
| <canvas id="budgetChartPhase3"></canvas> | |
| </div> | |
| <p class="text-sm text-slate-600 mt-4">Orçamento focado na sustentabilidade e expansão do centro.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </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> | |
| // Mobile menu | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| document.querySelectorAll('#mobile-menu a').forEach(link => { | |
| link.addEventListener('click', () => { | |
| mobileMenu.classList.add('hidden'); | |
| }); | |
| }); | |
| // Current year in footer | |
| document.getElementById('current-year').textContent = new Date().getFullYear(); | |
| // Generic Tab Changer | |
| function changeTab(buttonEl, tabIndex) { | |
| const tabContainer = buttonEl.closest('nav'); | |
| if (!tabContainer) return; | |
| const contentContainerId = tabContainer.id.replace('-tabs', '-content-container'); | |
| const contentContainer = document.getElementById(contentContainerId); | |
| // This assumes the content class is the container ID with "-container" replaced by "-content" | |
| // For example, 'phases-content-container' -> 'phase-content' | |
| const contentClass = tabContainer.id.replace('-tabs', '-content').replace('s-content', '-content'); | |
| if (!contentContainer) return; | |
| tabContainer.querySelectorAll('.tab-button').forEach((tab) => { | |
| tab.classList.remove('active'); | |
| }); | |
| buttonEl.classList.add('active'); | |
| contentContainer.querySelectorAll(`.${contentClass}`).forEach((content, index) => { | |
| content.classList.toggle('hidden', index !== tabIndex); | |
| }); | |
| } | |
| // Data and functions for interactive elements | |
| const stepsData = [ | |
| { title: "1. Definição Digital (PLM)", content: "Criação e gerenciamento centralizado de todas as informações do produto e do seu processo de fabricação no sistema Siemens Teamcenter PLM. Inclui modelos CAD 3D, listas de materiais (BOMs), especificações e planos de teste.", imageUrl: "arquitetura Teamcenter.png" }, | |
| { title: "2. Modelagem e Simulação", content: "Processos de fabricação são modelados e simulados virtualmente usando softwares como Siemens Process Simulate, Plant Simulation, ESI SYSWELD e Ansys CFD para reduzir protótipos e gerar dados sintéticos para IA.", imageUrl: "https://placehold.co/600x400/e0f2fe/0ea5e9?text=Virtual+Simulation" }, | |
| { title: "3. Treinamento de IA (HPC)", content: "A infraestrutura NVIDIA DGX H200 é usada para treinar modelos de IA com dados sintéticos e reais, para aplicações como manutenção preditiva e otimização de processos.", imageUrl: "https://placehold.co/600x400/e0f2fe/0ea5e9?text=AI+Training+%26+HPC" }, | |
| { title: "4. Metaverso Industrial", content: "A plataforma NVIDIA Omniverse integra modelos digitais e simulações para criar uma réplica virtual 3D da planta, permitindo colaboração e validação em tempo real.", imageUrl: "https://placehold.co/600x400/e0f2fe/0ea5e9?text=Industrial+Metaverse" }, | |
| { title: "5. Validação HIL", content: "Algoritmos de controle são validados usando um sistema Typhoon HIL, que simula o comportamento dos componentes físicos em tempo real sem risco ao hardware.", imageUrl: "https://placehold.co/600x400/e0f2fe/0ea5e9?text=Hardware-in-the-Loop" }, | |
| { title: "6. Implementação e Coleta de Dados", content: "Processos validados são implementados nos equipamentos físicos. A rede 5G garante comunicação de alta velocidade para coleta de dados em tempo real, monitorando o desempenho.", imageUrl: "https://placehold.co/600x400/e0f2fe/0ea5e9?text=Physical+Implementation" }, | |
| { title: "7. Análise e Otimização", content: "Dados reais e de simulação são analisados no HPC/DGX para alimentar um ciclo de melhoria contínua, otimizando processos e refinando o gêmeo digital.", imageUrl: "https://placehold.co/600x400/e0f2fe/0ea5e9?text=Data+Analysis" } | |
| ]; | |
| const stepButtonsContainer = document.getElementById('step-buttons'); | |
| const stepDetailsContainer = document.getElementById('step-details-container'); | |
| if (stepButtonsContainer && stepDetailsContainer) { | |
| stepsData.forEach((step, index) => { | |
| const button = document.createElement('button'); | |
| button.classList.add('step-item', 'w-full', 'text-left', 'p-3', 'rounded-lg', 'border', 'border-slate-300', 'hover:bg-slate-200', 'focus:outline-none', 'flex', 'items-center', 'space-x-3'); | |
| button.innerHTML = `<span class="step-number bg-slate-200 text-slate-700 rounded-full w-8 h-8 flex items-center justify-center text-sm font-semibold flex-shrink-0">${index + 1}</span><span class="font-medium">${step.title}</span>`; | |
| button.onclick = () => showStepDetail(index); | |
| stepButtonsContainer.appendChild(button); | |
| }); | |
| function showStepDetail(index) { | |
| stepDetailsContainer.innerHTML = ` | |
| <div class="aspect-16-9 mb-4 rounded-lg overflow-hidden shadow-sm bg-slate-200"> | |
| <img src="${stepsData[index].imageUrl}" alt="${stepsData[index].title}" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-1"> | |
| <h4 class="text-xl font-bold text-sky-600 mb-3">${stepsData[index].title}</h4> | |
| <p class="text-slate-600 leading-relaxed">${stepsData[index].content}</p> | |
| </div> | |
| `; | |
| document.querySelectorAll('#step-buttons .step-item').forEach((btn, i) => { | |
| btn.classList.toggle('active', i === index); | |
| }); | |
| } | |
| if(stepsData.length > 0) showStepDetail(0); | |
| } | |
| const pdData = [ | |
| { title: "P&D 1: Otimização da Representação Digital Multi-Domínio no PLM para Manufatura Aditiva e Híbrida", objective: "Desenvolver e validar metodologias para estruturar informações complexas de produto e processo (incluindo dados de design mecânico, eletrônico, software, e parâmetros de processo de manufatura aditiva ou processos a laser, além de cargas de trabalho para simulação avança no Omniverse e Modelos de IA para DGX H200) dentro do ambiente Teamcenter. A pesquisa visa definir melhores práticas para a criação de BOMs digitais que suportem processos de fabricação não convencionais e integrar rastreabilidade de materiais e parâmetros de processo desde a fase de design até a execução física. Isso é particularmente relevante para a indústria metalmecânica e os processos a laser onde o ISI Laser tem expertise. A falta de detalhamento na metodologia foi um ponto observado na análise de mérito do projeto.", justification:"A integração eficaz de dados de diferentes domínios e a representação precisa de processos complexos em um sistema PLM são cruciais para garantir a consistência do gêmeo digital e permitir simulações e otimizações downstream. A otimização da representação digital pode reduzir erros de design/processo e acelerar o tempo de desenvolvimento." }, | |
| { title: "P&D 2: Simulação Multi-escala e Multi-física para Otimização de Processos Críticos de Manufatura Metalmecânica", objective: "Realizar pesquisa aprofundada em simulação computacional de processos específicos da indústria metalmecânica com alto impacto na qualidade e custo. Exemplos podem incluir a simulação de processos de união a laser para prever deformações e propriedades microestruturais, ou a simulação detalhada do desempenho térmico de componentes durante a operação, como o exemplo ocorrido na utilização de nylon para usinagem, onde na percebeu-se apenas na etapa física que o mesmo derrete durante o processo, também a necessidade de calibração da localização do robô com câmera, entre outros. A pesquisa envolveria a integração de simulações em diferentes escalas (micro e macro) e de diferentes domínios físicos (mecânica, térmica, fluidos). Os resultados da simulação seriam usados para otimizar parâmetros de processo e gerar dados sintéticos de alta fidelidade para treinamento de modelos de IA (Passo 3). A capacidade de simulação de processos de manufatura é uma demanda mundial e utilizaria as soluções Siemens, Ansys CFD e SYSWELD.", justification: "Simulações detalhadas reduzem a necessidade de testes físicos caros e demorados. Prever o comportamento do material e do produto sob condições de processo específicas é essencial para otimizar a qualidade e a eficiência. A simulação multinível permite que o usuário/cliente simule do produto à planta industrial." }, | |
| { title: "P&D 3: Desenvolvimento de Modelos Preditivos de Manutenção e Desempenho Baseados em IA (PINNs e Gêmeos Digitais Preditivos)", objective: "Pesquisar e desenvolver modelos de IA, incluindo Physics-Informed Neural Networks (PINNs) e modelos de Gêmeos Digitais Preditivos, utilizando a capacidade de processamento do DGX. O foco seria prever falhas em equipamentos críticos na linha de manufatura (ex: robôs, máquinas a laser) e otimizar seu desempenho, como o caminho do robô considerando dados reais da planta, como câmeras que pode indicar restrições no caminho, o dados de máquinas para validar melhor tempo de produção. Os modelos seriam treinados combinando dados sintéticos de simulações detalhadas (Passo 2) com dados históricos e em tempo real coletados dos ativos físicos (Passo 6). A pesquisa em IA é um objetivo chave do projeto.", justification: "Modelos preditivos avançados permitem a manutenção baseada na condição real do equipamento, evitando paradas não planejadas e reduzindo custos. O uso de PINNs pode levar a modelos mais precisos e eficientes ao incorporar o conhecimento físico." }, | |
| { title: "P&D 4: Desenvolvimento de um Framework de Colaboração e Treinamento Imersivo no Metaverso Industrial para Processos de Montagem Robótica", objective: "Pesquisar e desenvolver um framework dentro do ambiente NVIDIA Omniverse que permita a colaboração remota e imersiva para o design e validação de células de manufatura, especificamente para tarefas de montagem robótica complexas como a do amplificador. O projeto envolveria a integração de modelos CAD precisos (Passo 1) e dados de simulação de processo (Passo 2) em um ambiente virtual compartilhado. A pesquisa se focaria em como usuários (engenheiros, operadores, roboticistas) podem interagir, simular operações, identificar ergonomia ou riscos de segurança, e validar instruções de trabalho em tempo real dentro do metaverso. Poderia incluir o desenvolvimento de módulos de treinamento baseados em realidade virtual/aumentada. Como Objetivo adicional, pesquisar e desenvolver um framework dentro do ambiente NVIDIA Omniverse que permita o uso de dados sintéticos para treinamento e validação de modelos de visão computacional utilizando simulações ultra realistas. O projeto envolveria a simulação atual do MULTICYBER no ambiente Omniver se a coleta de streaming de images para treinamento e validação de modelos de visão computacional. A pesquisa se focaria em como gerar e utilizar dados sintéticos podem melhorar e reduzir custos e tempo de desenvolvimento de modelos de visão computacional .", justification: "O metaverso industrial oferece um ambiente rico para a colaboração e tomada de decisão, permitindo que equipes de diferentes locais trabalhem juntas em uma representação digital precisa da fábrica. A validação virtual acelera o ciclo de design e comissionamento e melhora o treinamento de operadores. Além disso, o uso de dados sintéticos de ambientes simulados pode reduzir significativamente o custo e tempo de desenvolvimento de modelos de visão computacional." }, | |
| { title: "P&D 5: Validação de Controladores Baseados em IA para Robótica Colaborativa em Ambientes de Manufatura Metalmecânica Utilizando HIL", objective: "Desenvolver e testar rigorosamente controladores de robótica colaborativa (ex: KUKA KMR, CLP S7 1500, etc) baseados em algoritmos de IA (Passo 3), utilizando o sistema Typhoon HIL. A pesquisa se concentraria em simular cenários de interação humano-robô e tarefas de manipulação precisa de peças metálicas. O objetivo seria validar a segurança, precisão e robustez dos controladores em tempo real sob diversas condições simuladas, incluindo detecção de colisão e adaptação a mudanças no ambiente de trabalho. Os requisitos de teste e os resultados seriam integrados ao Teamcenter PLM.", justification: "O HIL é uma etapa crucial para reduzir o risco associado à implementação de algoritmos complexos de controle em hardware físico. Validar controladores de robôs colaborativos em um ambiente simulado garante a segurança dos operadores e a eficiência das operações antes da implantação na fábrica." }, | |
| { title: "P&D 6: Pesquisa e Desenvolvimento de um Sistema de Coleta e Análise de Dados de Baixa Latência Via 5G para Otimização em Tempo Real de Processos Críticos", objective: "Pesquisar e implementar um sistema de coleta de dados e controle remoto em tempo real dos equipamentos físicos de manufatura, utilizando a infraestrutura de rede 5G privada. O foco seria em sensores e controladores críticos que monitoram a qualidade do processo e o estado do equipamento (ex: temperatura, vibração, corrente, imagens), deslocamento e visão. A pesquisa envolveria a otimização da transmissão de dados via 5G para garantir baixa latência e alta confiabilidade, e o desenvolvimento de algoritmos de processamento de dados na borda (edge computing) para análise preliminar e filtragem antes do envio para o ambiente central (Passo 7), como nuvem de pontos dos sensores do robô.", justification: "A transmissão de dados de alta velocidade e baixa latência via 5G é fundamental para o monitoramento e controle em tempo real, detecção de anomalias e otimização dinâmica de processos de fabricação. A pesquisa em edge computing permite reagir mais rapidamente a eventos críticos na planta e habilitar o controle remoto de equipamentos, incluindo a partir de decisões baseadas em modelos de IA." }, | |
| { title: "P&D 7: Desenvolvimento de um Sistema de Otimização Preditiva e Feedback de Ciclo Fechado Baseado em Análise de Dados Multi-Font", objective: "Pesquisar e desenvolver um sistema avançado que integre e analise dados de todas as fontes (PLM, simulação, HIL, dados reais) para fornecer recomendações de otimização preditiva para processos de manufatura. A pesquisa envolveria o desenvolvimento de algoritmos de fusão de dados e o uso de IA (treinada no Passo 3) para identificar padrões complexos e prever o impacto de mudanças nos parâmetros de processo ou na manutenção. O sistema seria projetado para fornecer feedback automatizado para atualizar o gêmeo digital no PLM e, eventualmente, enviar parâmetros otimizados de volta para os controladores das máquinas (Passo 6). A capacidade de transformar dados em decisões estratégicas é um foco do CYBERTECH.", justification: "A integração da análise de dados de diversas fontes e o feedback contínuo são essenciais para alcançar a verdadeira transformação digital e a otimização contínua na manufatura. Um sistema de ciclo fechado acelera o processo de inovação e permite que a fábrica se adapte dinamicamente a novas condições." } | |
| ]; | |
| const pdAccordionContainer = document.getElementById('pd-accordion-container'); | |
| if (pdAccordionContainer) { | |
| pdData.forEach(item => { | |
| const div = document.createElement('div'); | |
| div.classList.add('bg-white', 'rounded-xl', 'shadow-sm', 'border', 'border-slate-200', 'overflow-hidden'); | |
| div.innerHTML = ` | |
| <button onclick="toggleAccordion(this)" class="w-full text-left p-5 font-semibold text-slate-800 hover:text-sky-600 flex justify-between items-center"> | |
| <span>${item.title}</span> | |
| <span class="accordion-icon transform transition-transform duration-300 text-2xl text-slate-400">+</span> | |
| </button> | |
| <div class="accordion-content"> | |
| <div class="px-5 pb-5"> | |
| <p class="text-sm text-slate-600 pt-4 border-t border-slate-200"><strong>Objetivo:</strong> ${item.objective}</p> | |
| </div> | |
| <div class="px-5 pb-5"> | |
| <p class="text-sm text-slate-600 pt-4 border-t border-slate-200"><strong>Justificativa:</strong> ${item.justification}</p> | |
| </div> | |
| </div> | |
| `; | |
| pdAccordionContainer.appendChild(div); | |
| }); | |
| } | |
| function toggleAccordion(button) { | |
| const content = button.nextElementSibling; | |
| const icon = button.querySelector('.accordion-icon'); | |
| const isOpen = content.style.maxHeight && content.style.maxHeight !== '0px'; | |
| document.querySelectorAll('#pd-accordion-container .accordion-content').forEach(acc => { | |
| if (acc !== content) { | |
| acc.style.maxHeight = '0px'; | |
| let otherIcon = acc.previousElementSibling.querySelector('.accordion-icon'); | |
| if (otherIcon) { | |
| otherIcon.textContent = '+'; | |
| } | |
| } | |
| }); | |
| if (isOpen) { | |
| content.style.maxHeight = '0px'; | |
| icon.textContent = '+'; | |
| } else { | |
| content.style.maxHeight = content.scrollHeight + 'px'; | |
| icon.textContent = '×'; | |
| } | |
| } | |
| // Roadmap Data | |
| const roadmapData = [ | |
| { year: "2025", title: "Fase 1: Fundação", description: "Aquisição, implantação e integração da infraestrutura de 5G, HPC, Omniverse e PLM.", status: "in-progress" }, | |
| { year: "2026", title: "Fase 2: Validação", description: "Desenvolvimento dos primeiros casos de uso com a indústria, validação dos Gêmeos Digitais e execução de projetos de P&D.", status: "future" }, | |
| { year: "2027", title: "Fase 3: Expansão", description: "Transferência de tecnologia para o mercado, expansão da rede de laboratórios e consolidação do modelo de negócio.", status: "future" }, | |
| { year: "Futuro", title: "Liderança Nacional", description: "Posicionar o CYBERTECH como um centro de excelência autossustentável e referência nacional em manufatura 4.0.", status: "future" } | |
| ]; | |
| const roadmapContainer = document.getElementById('roadmap-container'); | |
| if (roadmapContainer) { | |
| roadmapData.forEach((item, index) => { | |
| const isEven = index % 2 === 0; | |
| const statusColors = { | |
| "in-progress": "bg-sky-500", | |
| "future": "bg-slate-400" | |
| }; | |
| const itemDiv = document.createElement('div'); | |
| itemDiv.className = `roadmap-item flex md:justify-between items-center w-full mb-8 ${isEven ? 'flex-row-reverse md:flex-row-reverse' : 'flex-row-reverse md:flex-row'}`; | |
| itemDiv.innerHTML = ` | |
| <div class="roadmap-content ${isEven ? 'text-left md:text-right' : 'text-left'}"> | |
| <div class="bg-white p-6 rounded-xl shadow-md border border-slate-200"> | |
| <p class="text-sky-500 font-bold mb-1">${item.year}</p> | |
| <h4 class="text-xl font-bold text-slate-800 mb-2">${item.title}</h4> | |
| <p class="text-slate-600 text-sm">${item.description}</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:block roadmap-dot ${statusColors[item.status]}"></div> | |
| <div class="roadmap-content"></div> | |
| `; | |
| roadmapContainer.appendChild(itemDiv); | |
| }); | |
| } | |
| // Budget Charts | |
| const commonChartOptions = { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { display: false }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| let label = context.label || ''; | |
| if (label) { label += ': '; } | |
| if (context.parsed !== null) { | |
| let value = context.dataset.isCurrency ? new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(context.parsed) : context.parsed + '%'; | |
| return value; | |
| } | |
| return label; | |
| } | |
| } | |
| } | |
| } | |
| }; | |
| // Phase 1 Chart | |
| const budgetDataPhase1 = { | |
| labels: ['Infra 5G & IoT', 'HPC (DGX)', 'Servidores e PLM', 'vWorkstations', 'Omniverse', 'Software Simulação', 'Validação HIL'], | |
| datasets: [{ | |
| data: [1108607.02, 2416565.64, 241417.50, 111290.26, 267425.24, 606996.78, 128796.49], | |
| backgroundColor: ['#0ea5e9', '#3b82f6', '#8b5cf6', '#ec4899', '#f97316', '#facc15', '#10b981'], | |
| borderColor: '#fff', borderWidth: 3, hoverOffset: 4, isCurrency: true | |
| }] | |
| }; | |
| const budgetChartCtx1 = document.getElementById('budgetChartPhase1'); | |
| if (budgetChartCtx1) new Chart(budgetChartCtx1, { type: 'doughnut', data: budgetDataPhase1, options: commonChartOptions }); | |
| // Phase 2 Chart (Illustrative) | |
| const budgetDataPhase2 = { | |
| labels: ['Recursos Humanos (P&D)', 'Materiais de Prototipagem', 'Gestão de Projetos'], | |
| datasets: [{ data: [60, 25, 15], backgroundColor: ['#3b82f6', '#f97316', '#8b5cf6'], borderColor: '#fff', borderWidth: 3, hoverOffset: 4, isCurrency: false }] | |
| }; | |
| const budgetChartCtx2 = document.getElementById('budgetChartPhase2'); | |
| if(budgetChartCtx2) new Chart(budgetChartCtx2, { type: 'doughnut', data: budgetDataPhase2, options: commonChartOptions }); | |
| // Phase 3 Chart (Illustrative) | |
| const budgetDataPhase3 = { | |
| labels: ['Transferência de Tec.', 'Marketing & Comercial', 'Expansão da Rede', 'Capacitação'], | |
| datasets: [{ data: [40, 25, 20, 15], backgroundColor: ['#10b981', '#ec4899', '#0ea5e9', '#facc15'], borderColor: '#fff', borderWidth: 3, hoverOffset: 4, isCurrency: false }] | |
| }; | |
| const budgetChartCtx3 = document.getElementById('budgetChartPhase3'); | |
| if(budgetChartCtx3) new Chart(budgetChartCtx3, { type: 'doughnut', data: budgetDataPhase3, options: commonChartOptions }); | |
| </script> | |
| </body> | |
| </html> | |