Download index.html from marinhows/undefined: direct link, hf CLI and curl.
- Browser
- Download file 39.4 kB
-
https://huggingface.co/spaces/marinhows/undefined/resolve/main/index.html
- Command line
-
hf download hf://spaces/marinhows/undefined/index.html
-
curl -L -o index.html https://huggingface.co/spaces/marinhows/undefined/resolve/main/index.html
39.4 kB
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CEPIS - Centro Latino-Americano de Pesquisa e Inovação</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#15292a', | |
| secondary: '#1d7478', | |
| accent: '#fe7f4c', | |
| highlight: '#b3f433' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #15292a 0%, #1d7478 50%, #fe7f4c 100%); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .stats-item { | |
| transition: all 0.3s ease; | |
| } | |
| .stats-item:hover { | |
| transform: scale(1.05); | |
| } | |
| .team-card:hover .team-overlay { | |
| opacity: 1; | |
| } | |
| .team-overlay { | |
| transition: opacity 0.3s ease; | |
| opacity: 0; | |
| } | |
| .impact-dot { | |
| width: 12px; | |
| height: 12px; | |
| display: inline-block; | |
| border-radius: 50%; | |
| margin-right: 5px; | |
| } | |
| .animate-bounce-slow { | |
| animation: bounce 3s infinite; | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center space-x-2"> | |
| <img src="https://cepis.tech/logo.png" alt="CEPIS Logo" class="h-8"> | |
| </div> | |
| <div class="hidden md:ml-10 md:flex md:space-x-8"> | |
| <a href="#hero" class="text-b3f433 border-b3f433 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Início</a> | |
| <a href="#areas" class="text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Áreas</a> | |
| <a href="#equipe" class="text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Equipe</a> | |
| <a href="#beneficios" class="text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Benefícios</a> | |
| <a href="#contato" class="text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Contato</a> | |
| <div class="relative"> | |
| <button onclick="toggleMenu()" class="text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium"> | |
| Entenda | |
| <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> | |
| </svg> | |
| </button> | |
| <div id="entendaMenu" class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 hidden"> | |
| <a href="#calculadoras" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Calculadoras</a> | |
| <a href="https://cepis.tech/manualp&d.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">P&D</a> | |
| <a href="#nossos-parceiros" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Nossos Parceiros</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button"> | |
| <span class="sr-only">Open main menu</span> | |
| <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="hidden md:hidden" id="mobile-menu"> | |
| <div class="pt-2 pb-3 space-y-1"> | |
| <a href="#hero" class="bg-[#b3f433]/20 border-[#b3f433] text-[#15292a] block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Início</a> | |
| <a href="#areas" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Áreas</a> | |
| <a href="#equipe" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Equipe</a> | |
| <a href="#beneficios" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Benefícios</a> | |
| <a href="#contato" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Contato</a> | |
| <a href="#calculadoras" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Calculadoras</a> | |
| <a href="https://cepis.tech/manualp&d.html" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">P&D</a> | |
| <a href="#nossos-parceiros" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Nossos Parceiros</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="hero" class="hero-gradient text-white py-20 md:py-32"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 animate-bounce-slow">CEPIS</h1> | |
| <h2 class="text-xl md:text-2xl font-light max-w-3xl mx-auto mb-10"> | |
| Centro Latino-Americano de Estudos e Pesquisas em Educação, Ciências, Tecnologias, Inovação e Sustentabilidade | |
| </h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto"> | |
| <div class="stats-item bg-white bg-opacity-10 p-6 rounded-lg backdrop-filter backdrop-blur-sm"> | |
| <div class="text-3xl font-bold mb-2" id="pesquisadores">0</div> | |
| <div class="text-sm">Pesquisadores Ativos</div> | |
| </div> | |
| <div class="stats-item bg-white bg-opacity-10 p-6 rounded-lg backdrop-filter backdrop-blur-sm"> | |
| <div class="text-3xl font-bold mb-2" id="pesquisadores-indiretos">0</div> | |
| <div class="text-sm">Pesquisadores Indiretos</div> | |
| </div> | |
| <div class="stats-item bg-white bg-opacity-10 p-6 rounded-lg backdrop-filter backdrop-blur-sm"> | |
| <div class="text-3xl font-bold mb-2" id="areas-pesquisa">0</div> | |
| <div class="text-sm">Áreas de Pesquisa</div> | |
| </div> | |
| <div class="stats-item bg-white bg-opacity-10 p-6 rounded-lg backdrop-filter backdrop-blur-sm"> | |
| <div class="text-3xl font-bold mb-2" id="inovacao">0%</div> | |
| <div class="text-sm">Foco em Sustentabilidade e Inovação</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About IBEDIS --> | |
| <section class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Sobre o IBEDIS</h2> | |
| <div class="max-w-4xl mx-auto text-gray-600 space-y-4 text-left"> | |
| <p>O CEPIS é o Centro de Pesquisa do <span class="font-semibold">Instituto Brasileiro de Educação e Desenvolvimento em Inovação Sustentável (IBEDIS)</span>, uma Instituição Científica, Tecnológica e de Inovação (ICT) privada reconhecida nacional e internacionalmente para execução de projetos de P,D&I.</p> | |
| <p class="bg-blue-50 p-4 rounded-lg border-l-4 border-blue-500"> | |
| Com base na legislação vigente (Lei nº 13.019/2014 e Decreto nº 9.283/2018), o IBEDIS articula saberes e práticas voltadas à capacitação de pessoas e transformação de territórios, com foco na inovação de impacto social e ambiental. | |
| </p> | |
| <p>Nossa visão é consolidar-nos como referência em educação para sustentabilidade, pesquisa interdisciplinar e soluções tecnológicas para o setor público e privado. Através de iniciativas como o CEPIS e o NIT-IBEDIS, promovemos parcerias estratégicas com universidades, empresas e governos.</p> | |
| </div> | |
| <div class="mt-6"> | |
| <a href="https://ibedis.org" target="_blank" class="inline-flex items-center bg-blue-600 text-white px-6 py-3 rounded-md font-medium hover:bg-blue-700 transition"> | |
| Saiba mais | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" /> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Areas Section --> | |
| <section id="areas" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Áreas de Atuação</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Area 1 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition card-hover"> | |
| <div class="text-4xl mb-4">🎓</div> | |
| <h3 class="text-xl font-bold mb-3">Educação Geográfica</h3> | |
| <p class="text-gray-600">Desenvolvimento de metodologias inovadoras para ensino de geografia e pensamento espacial.</p> | |
| </div> | |
| <!-- Area 2 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition card-hover"> | |
| <div class="text-4xl mb-4">🧠</div> | |
| <h3 class="text-xl font-bold mb-3">Cognição & Aprendizagem</h3> | |
| <p class="text-gray-600">Pesquisas em neurociência educacional e processos cognitivos de aprendizagem.</p> | |
| </div> | |
| <!-- Area 3 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition card-hover"> | |
| <div class="text-4xl mb-4">🌱</div> | |
| <h3 class="text-xl font-bold mb-3">Sustentabilidade</h3> | |
| <p class="text-gray-600">Estudos sobre mudanças climáticas, impactos ambientais e desenvolvimento sustentável.</p> | |
| </div> | |
| <!-- Area 4 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition card-hover"> | |
| <div class="text-4xl mb-4">💡</div> | |
| <h3 class="text-xl font-bold mb-3">Inovação Tecnológica</h3> | |
| <p class="text-gray-600">P&D em tecnologias educacionais, geoprocessamento e sistemas de informação geográfica.</p> | |
| </div> | |
| <!-- Area 5 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition card-hover"> | |
| <div class="text-4xl mb-4">👥</div> | |
| <h3 class="text-xl font-bold mb-3">Políticas Públicas</h3> | |
| <p class="text-gray-600">Análise e proposição de políticas para juventude, terceira idade e desenvolvimento urbano.</p> | |
| </div> | |
| <!-- Area 6 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition card-hover"> | |
| <div class="text-4xl mb-4">🎮</div> | |
| <h3 class="text-xl font-bold mb-3">Tecnologias Educacionais</h3> | |
| <p class="text-gray-600">Desenvolvimento de games, apps e softwares para potencializar o ensino-aprendizagem.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Team Overview Section --> | |
| <section id="equipe" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Nossa Equipe</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Team Overview --> | |
| <div class="col-span-full bg-white p-8 rounded-xl shadow-md"> | |
| <h3 class="text-2xl font-bold text-center mb-6">Nossa Equipe Multidisciplinar</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- University Researchers --> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <div class="text-4xl mb-4 text-center">🏛️</div> | |
| <h4 class="text-xl font-bold text-center mb-3">Universidades Públicas</h4> | |
| <p class="text-gray-600 text-center"> | |
| Pesquisadores das principais universidades públicas brasileiras como USP, Unicamp, UFRJ e outras instituições federais e estaduais. | |
| </p> | |
| </div> | |
| <!-- IPT Labs --> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <div class="text-4xl mb-4 text-center">🔬</div> | |
| <h4 class="text-xl font-bold text-center mb-3">Laboratórios do IPT</h4> | |
| <p class="text-gray-600 text-center"> | |
| Especialistas dos laboratórios do Instituto de Pesquisas Tecnológicas, referência em pesquisa aplicada e desenvolvimento tecnológico. | |
| </p> | |
| </div> | |
| <!-- International Network --> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <div class="text-4xl mb-4 text-center">🌎</div> | |
| <h4 class="text-xl font-bold text-center mb-3">Rede Internacional</h4> | |
| <p class="text-gray-600 text-center"> | |
| Colaboradores de universidades privadas nacionais e instituições de pesquisa internacionais da América Latina, Europa e América do Norte. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <a href="#contato" class="inline-block bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition"> | |
| Conheça nossos pesquisadores | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Benefits Section --> | |
| <section id="beneficios" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Benefícios da Parceria</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Benefit 1 --> | |
| <div class="bg-gray-50 p-8 rounded-xl text-center hover:shadow-lg transition card-hover"> | |
| <div class="text-4xl mb-4">🎯</div> | |
| <h3 class="text-xl font-bold mb-3">Inovação Direcionada</h3> | |
| <p class="text-gray-600">Pesquisas aplicadas às suas necessidades específicas</p> | |
| </div> | |
| <!-- Benefit 2 --> | |
| <div class="bg-gray-50 p-8 rounded-xl text-center hover:shadow-lg transition card-hover"> | |
| <div class="text-4xl mb-4">🔬</div> | |
| <h3 class="text-xl font-bold mb-3">P&D Especializado</h3> | |
| <p class="text-gray-600">Contratação direta para pesquisa e desenvolvimento</p> | |
| </div> | |
| <!-- Benefit 3 --> | |
| <div class="bg-gray-50 p-8 rounded-xl text-center hover:shadow-lg transition card-hover"> | |
| <div class="text-4xl mb-4">🌐</div> | |
| <h3 class="text-xl font-bold mb-3">Rede Internacional</h3> | |
| <p class="text-gray-600">Acesso a pesquisadores em toda América Latina</p> | |
| </div> | |
| <!-- Benefit 4 --> | |
| <div class="bg-gray-50 p-8 rounded-xl text-center hover:shadow-lg transition card-hover"> | |
| <div class="text-4xl mb-4">⚡</div> | |
| <h3 class="text-xl font-bold mb-3">Tecnologia Avançada</h3> | |
| <p class="text-gray-600">Desenvolvimento de protótipos e validação tecnológica</p> | |
| </div> | |
| <!-- Benefit 5 --> | |
| <div class="bg-gray-50 p-8 rounded-xl text-center hover:shadow-lg transition card-hover"> | |
| <div class="text-4xl mb-4">📊</div> | |
| <h3 class="text-xl font-bold mb-3">Estudos Técnicos</h3> | |
| <p class="text-gray-600">Pareceres científicos e análises especializadas</p> | |
| </div> | |
| <!-- Benefit 6 --> | |
| <div class="bg-gray-50 p-8 rounded-xl text-center hover:shadow-lg transition card-hover"> | |
| <div class="text-4xl mb-4">🚀</div> | |
| <h3 class="text-xl font-bold mb-3">Startups & Spin-offs</h3> | |
| <p class="text-gray-600">Criação de empresas tecnológicas a partir das pesquisas</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Calculators Section --> | |
| <section id="calculadoras" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Calculadoras</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto"></div> | |
| </div> | |
| <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- TRL Calculator --> | |
| <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition card-hover flex flex-col items-center text-center"> | |
| <div class="mb-6 text-5xl">💰</div> | |
| <h3 class="text-xl font-bold mb-4">Calculadora de Benefícios da Lei do Bem</h3> | |
| <p class="text-gray-600 mb-6">Calcule os benefícios fiscais para projetos de P&D enquadrados na Lei do Bem.</p> | |
| <a href="https://cepis.tech/lei_do_bem.html" class="mt-auto inline-block bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition">Acessar Calculadora</a> | |
| </div> | |
| <!-- Other calculators can be added here --> | |
| <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition card-hover flex flex-col items-center text-center"> | |
| <div class="mb-6 text-5xl">📈</div> | |
| <h3 class="text-xl font-bold mb-4">Calculadora de TRL</h3> | |
| <p class="text-gray-600 mb-6">Calcule o nível de maturidade tecnológica (TRL) do seu projeto ou tecnologia.</p> | |
| <a href="https://cepis.tech/trl.html" class="mt-auto inline-block bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition">Acessar Calculadora</a> | |
| </div> | |
| <!-- Viabilidade Calculator --> | |
| <div class="bg-gray-50 p-8 rounded-xl hover:shadow-lg transition card-hover flex flex-col items-center text-center"> | |
| <div class="mb-6 text-5xl">📊</div> | |
| <h3 class="text-xl font-bold mb-4">Análise de Viabilidade</h3> | |
| <p class="text-gray-600 mb-6">Avalie a viabilidade técnica e econômica de projetos de P&D.</p> | |
| <a href="https://cepis.tech/viabilidade.html" class="mt-auto inline-block bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition">Acessar Calculadora</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section id="contato" class="py-20 hero-gradient text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Pronto para Inovar Conosco?</h2> | |
| <p class="text-sm mb-4">Parceria com IBEDIS</p> | |
| <p class="text-xl mb-10 max-w-3xl mx-auto">Junte-se ao CEPIS e seja parte da transformação educacional e tecnológica da América Latina</p> | |
| <div class="max-w-md mx-auto bg-white bg-opacity-20 backdrop-filter backdrop-blur-sm rounded-xl p-8 text-center"> | |
| <div class="flex justify-center mb-6"> | |
| <img src="https://cepis.tech/logo.png" alt="CEPIS Logo" class="h-16"> | |
| </div> | |
| <h3 class="text-xl font-bold mb-6">Fale Conosco via WhatsApp</h3> | |
| <p class="mb-8">Entre em contato diretamente com nossa equipe pelo WhatsApp para tirar dúvidas ou solicitar informações.</p> | |
| <a href="https://wa.me/5511958270951" | |
| class="inline-flex items-center bg-green-600 text-white px-8 py-4 rounded-lg font-bold hover:bg-green-700 transition"> | |
| <i class="fab fa-whatsapp text-2xl mr-3"></i> | |
| Enviar Mensagem | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Partners Section --> | |
| <section id="nossos-parceiros" class="py-16 bg-gray-100"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Nossos Parceiros</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8"> | |
| <div class="bg-white p-4 rounded-lg shadow-sm text-center"> | |
| <div class="text-2xl mb-2">🏛️</div> | |
| <h3 class="font-medium">FAPDF</h3> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm text-center"> | |
| <div class="text-2xl mb-2">🔬</div> | |
| <h3 class="font-medium">FAPESP</h3> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm text-center"> | |
| <div class="text-2xl mb-2">🏢</div> | |
| <h3 class="font-medium">IPT</h3> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm text-center"> | |
| <div class="text-2xl mb-2">🎓</div> | |
| <h3 class="font-medium">USP</h3> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm text-center"> | |
| <div class="text-2xl mb-2">📚</div> | |
| <h3 class="font-medium">FESPSP</h3> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm text-center"> | |
| <div class="text-2xl mb-2">🔬</div> | |
| <h3 class="font-medium">CNPq</h3> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm text-center"> | |
| <div class="text-2xl mb-2">🌱</div> | |
| <h3 class="font-medium">Brasil Carbono</h3> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm text-center"> | |
| <div class="text-2xl mb-2">💻</div> | |
| <h3 class="font-medium">ASSESPRO MG</h3> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm text-center"> | |
| <div class="text-2xl mb-2">🔌</div> | |
| <h3 class="font-medium">RPP Tecnologia</h3> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm text-center"> | |
| <div class="text-2xl mb-2">📡</div> | |
| <h3 class="font-medium">SAICOM</h3> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm text-center"> | |
| <div class="text-2xl mb-2">🛠️</div> | |
| <h3 class="font-medium">Dedallus</h3> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm text-center"> | |
| <div class="text-2xl mb-2">🎓</div> | |
| <h3 class="font-medium">FEUSP</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-[#15292a] text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h4 class="font-bold mb-4">Navegação</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#hero" class="text-gray-400 hover:text-white transition">Início</a></li> | |
| <li><a href="#areas" class="text-gray-400 hover:text-white transition">Áreas</a></li> | |
| <li><a href="#equipe" class="text-gray-400 hover:text-white transition">Equipe</a></li> | |
| <li><a href="#beneficios" class="text-gray-400 hover:text-white transition">Benefícios</a></li> | |
| <li><a href="#contato" class="text-gray-400 hover:text-white transition">Contato</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Entenda</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#calculadoras" class="text-gray-400 hover:text-white transition">Calculadoras</a></li> | |
| <li><a href="https://cepis.tech/manualp&d.html" class="text-gray-400 hover:text-white transition">P&D</a></li> | |
| <li><a href="#nossos-parceiros" class="text-gray-400 hover:text-white transition">Nossos Parceiros</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Contato</h4> | |
| <div class="mt-6"> | |
| <p class="text-gray-400">contato@cepis.org</p> | |
| </div> | |
| <div class="flex space-x-4 mt-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram text-xl"></i></a> | |
| </div> | |
| <div class="mt-6 flex items-center space-x-4"> | |
| <img src="https://cepis.tech/logo.png" alt="CEPIS Logo" class="h-8"> | |
| <img src="https://missao.ibedis.com.br/logo.png" alt="IBEDIS Logo" class="h-8"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2025 CEPIS. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Scripts --> | |
| <script> | |
| // Counter animation for stats | |
| function animateValue(id, start, end, duration, suffix = '') { | |
| const obj = document.getElementById(id); | |
| let startTimestamp = null; | |
| const step = (timestamp) => { | |
| if (!startTimestamp) startTimestamp = timestamp; | |
| const progress = Math.min((timestamp - startTimestamp) / duration, 1); | |
| let value; | |
| if (id === 'inovacao') { | |
| value = Math.floor(progress * (end - start) + start); | |
| obj.innerHTML = value + suffix; | |
| } else { | |
| value = Math.floor(progress * (end - start) + start); | |
| // Add thousand separators for numbers >= 1000 | |
| obj.innerHTML = value >= 1000 ? value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") : value; | |
| } | |
| if (progress < 1) { | |
| window.requestAnimationFrame(step); | |
| } | |
| }; | |
| window.requestAnimationFrame(step); | |
| } | |
| // Start counters when hero section is in view | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| animateValue('pesquisadores', 0, 14, 2000); | |
| animateValue('pesquisadores-indiretos', 0, 56, 2000); | |
| animateValue('areas-pesquisa', 0, 6, 2000); | |
| animateValue('inovacao', 0, 100, 2000, '%'); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, {threshold: 0.5}); | |
| observer.observe(document.querySelector('#hero')); | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| if (menu.classList.contains('hidden')) { | |
| menu.classList.remove('hidden'); | |
| } else { | |
| menu.classList.add('hidden'); | |
| } | |
| }); | |
| // Toggle Entenda menu | |
| function toggleMenu() { | |
| const menu = document.getElementById('entendaMenu'); | |
| if (menu.classList.contains('hidden')) { | |
| menu.classList.remove('hidden'); | |
| } else { | |
| menu.classList.add('hidden'); | |
| } | |
| } | |
| // Close menu when clicking outside | |
| document.addEventListener('click', function(event) { | |
| const menu = document.getElementById('entendaMenu'); | |
| const button = document.querySelector('[onclick="toggleMenu()"]'); | |
| if (!menu.contains(event.target) && event.target !== button) { | |
| menu.classList.add('hidden'); | |
| } | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CEPIS - Centro Latino-Americano de Pesquisa e Inovação</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#15292a', | |
| secondary: '#1d7478', | |
| accent: '#fe7f4c', | |
| highlight: '#b3f433' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #15292a 0%, #1d7478 50%, #fe7f4c 100%); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .stats-item { | |
| transition: all 0.3s ease; | |
| } | |
| .stats-item:hover { | |
| transform: scale(1.05); | |
| } | |
| .team-card:hover .team-overlay { | |
| opacity: 1; | |
| } | |
| .team-overlay { | |
| transition: opacity 0.3s ease; | |
| opacity: 0; | |
| } | |
| .impact-dot { | |
| width: 12px; | |
| height: 12px; | |
| display: inline-block; | |
| border-radius: 50%; | |
| margin-right: 5px; | |
| } | |
| .animate-bounce-slow { | |
| animation: bounce 3s infinite; | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center space-x-2"> | |
| <img src="https://cepis.tech/logo.png" alt="CEPIS Logo" class="h-8"> | |
| </div> | |
| <div class="hidden md:ml-10 md:flex md:space-x-8"> | |
| <a href="#hero" class="text-b3f433 border-b3f433 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Início</a> | |
| <a href="#areas" class="text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Áreas</a> | |
| <a href="#equipe" class="text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Equipe</a> | |
| <a href="#beneficios" class="text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Benefícios</a> | |
| <a href="#contato" class="text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Contato</a> | |
| <a href="#calculadoras" class="text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Calculadoras</a> | |
| <a href="https://cepis.tech/manualp&d.html" class="text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">P&D</a> | |
| <a href="#nossos-parceiros" class="text-gray-500 hover:text-gray-700 hover:border-gray-300 inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium">Nossos Parceiros</a> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button"> | |
| <span class="sr-only">Open main menu</span> | |
| <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> |