Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>JurisOSINT - Inteligência de Fontes Abertas para o Direito</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); | |
| } | |
| .tool-card: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); | |
| } | |
| .search-input:focus { | |
| box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); | |
| } | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header/Navigation --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-balance-scale text-2xl"></i> | |
| <h1 class="text-2xl font-bold">JurisOSINT</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#sobre" class="hover:text-blue-200 transition">Sobre</a> | |
| <a href="#ferramentas" class="hover:text-blue-200 transition">Ferramentas</a> | |
| <a href="#metodologia" class="hover:text-blue-200 transition">Metodologia</a> | |
| <a href="#contato" class="hover:text-blue-200 transition">Contato</a> | |
| </nav> | |
| <button class="md:hidden text-xl" id="mobile-menu-button"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden hidden bg-blue-900" id="mobile-menu"> | |
| <div class="container mx-auto px-4 py-4 flex flex-col space-y-4"> | |
| <a href="#sobre" class="hover:text-blue-200 transition">Sobre</a> | |
| <a href="#ferramentas" class="hover:text-blue-200 transition">Ferramentas</a> | |
| <a href="#metodologia" class="hover:text-blue-200 transition">Metodologia</a> | |
| <a href="#contato" class="hover:text-blue-200 transition">Contato</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white py-20"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Inteligência de Fontes Abertas para o Direito Brasileiro</h1> | |
| <p class="text-xl mb-8">Integrando técnicas de OSINT com o Direito para localizar requeridos em plataformas digitais.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-blue-800 font-semibold px-6 py-3 rounded-lg hover:bg-blue-100 transition flex items-center justify-center"> | |
| <i class="fas fa-play mr-2"></i> Demonstração | |
| </button> | |
| <button class="border-2 border-white text-white font-semibold px-6 py-3 rounded-lg hover:bg-white hover:text-blue-800 transition flex items-center justify-center"> | |
| <i class="fas fa-book mr-2"></i> Documentação | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="bg-white rounded-xl shadow-2xl p-6 w-full max-w-md"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-4">Pesquisa de Usuário</h3> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2" for="username">Username</label> | |
| <input type="text" id="username" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500 search-input" placeholder="ex: usuario123"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Plataformas</label> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600" checked> | |
| <span class="ml-2 text-gray-700">Facebook</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600" checked> | |
| <span class="ml-2 text-gray-700">Instagram</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600" checked> | |
| <span class="ml-2 text-gray-700">Twitter</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600"> | |
| <span class="ml-2 text-gray-700">LinkedIn</span> | |
| </label> | |
| </div> | |
| </div> | |
| <button class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition flex items-center justify-center"> | |
| <i class="fas fa-search mr-2"></i> Pesquisar | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="sobre" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Sobre o JurisOSINT</h2> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h3 class="text-2xl font-semibold mb-4 text-gray-800">O que é OSINT?</h3> | |
| <p class="text-gray-600 mb-6"> | |
| A inteligência de código aberto (OSINT) envolve a coleta de dados acessíveis ao público de fontes como notícias, postagens em redes sociais, relatórios governamentais e fóruns online. | |
| </p> | |
| <p class="text-gray-600 mb-6"> | |
| Originalmente desenvolvida para ambientes de inteligência militar, a OSINT expandiu-se significativamente com o crescimento da internet e comunicações digitais. | |
| </p> | |
| <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6"> | |
| <p class="text-blue-800"> | |
| <i class="fas fa-info-circle mr-2"></i> O JurisOSINT adapta essas técnicas para auxiliar profissionais do direito na localização de requeridos em processos judiciais. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-8 shadow-md"> | |
| <div class="flex items-start mb-6"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-bullseye text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg text-gray-800">Objetivo Principal</h4> | |
| <p class="text-gray-600">Criar uma ferramenta para ajudar advogados a localizar requeridos em plataformas digitais, superando dificuldades causadas por ataques cibernéticos e anonimato.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-6"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-project-diagram text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg text-gray-800">Estrutura do Projeto</h4> | |
| <p class="text-gray-600">Seguindo uma abordagem matricial, que permite criar uma equipe específica comprometida com os resultados, mesmo com recursos limitados.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-tools text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg text-gray-800">Integração de Ferramentas</h4> | |
| <p class="text-gray-600">O desenvolvimento começará com a integração da ferramenta Sherlock, que permite buscar usernames em centenas de redes sociais.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tools Section --> | |
| <section id="ferramentas" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-4 text-gray-800">Ferramentas OSINT Integradas</h2> | |
| <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">As ferramentas são organizadas por ordem de complexidade, das mais simples às mais avançadas.</p> | |
| <!-- Tabs Navigation --> | |
| <div class="flex flex-wrap justify-center mb-8"> | |
| <button class="tab-btn px-6 py-3 font-medium rounded-t-lg border-b-2 border-transparent hover:text-blue-600 transition" data-tab="basico">Nível Básico</button> | |
| <button class="tab-btn px-6 py-3 font-medium rounded-t-lg border-b-2 border-transparent hover:text-blue-600 transition" data-tab="intermediario">Nível Intermediário</button> | |
| <button class="tab-btn px-6 py-3 font-medium rounded-t-lg border-b-2 border-transparent hover:text-blue-600 transition" data-tab="avancado">Nível Avançado</button> | |
| </div> | |
| <!-- Tabs Content --> | |
| <div class="tab-content active" id="basico"> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Sherlock Card --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden tool-card transition duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-user-secret text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800">Sherlock</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Ferramenta para buscar usernames em centenas de redes sociais, ajudando a rastrear a presença digital de indivíduos.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Username Search</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Multiplataforma</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Open Source</span> | |
| </div> | |
| <button class="text-blue-600 font-medium flex items-center"> | |
| Ver demonstração <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- theHarvester Card --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden tool-card transition duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-envelope text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800">theHarvester</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Ferramenta para coleta de emails, nomes de domínio, subdomínios, IPs e URLs usando várias fontes públicas.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Email Collection</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Domain Info</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Reconhecimento</span> | |
| </div> | |
| <button class="text-blue-600 font-medium flex items-center"> | |
| Ver demonstração <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Metagoofil Card --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden tool-card transition duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-file-alt text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800">Metagoofil</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Ferramenta para extração de metadados de documentos públicos, revelando informações ocultas em arquivos.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Metadata</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Document Analysis</span> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Forensics</span> | |
| </div> | |
| <button class="text-blue-600 font-medium flex items-center"> | |
| Ver demonstração <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tab-content" id="intermediario"> | |
| <div class="bg-white rounded-xl shadow-md p-8 text-center"> | |
| <i class="fas fa-cogs text-4xl text-gray-400 mb-4"></i> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Ferramentas Intermediárias</h3> | |
| <p class="text-gray-600 mb-4">Em desenvolvimento - novas ferramentas serão adicionadas em breve.</p> | |
| <button class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition"> | |
| Receber atualizações | |
| </button> | |
| </div> | |
| </div> | |
| <div class="tab-content" id="avancado"> | |
| <div class="bg-white rounded-xl shadow-md p-8 text-center"> | |
| <i class="fas fa-lock text-4xl text-gray-400 mb-4"></i> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Ferramentas Avançadas</h3> | |
| <p class="text-gray-600 mb-4">Disponível apenas para usuários autorizados com credenciais específicas.</p> | |
| <button class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition"> | |
| Solicitar acesso | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Methodology Section --> | |
| <section id="metodologia" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Metodologia do Projeto</h2> | |
| <div class="max-w-4xl mx-auto"> | |
| <!-- Timeline --> | |
| <div class="relative"> | |
| <!-- Line --> | |
| <div class="absolute left-4 md:left-1/2 h-full w-0.5 bg-blue-200 transform -translate-x-1/2"></div> | |
| <!-- Item 1 --> | |
| <div class="flex flex-col md:flex-row items-center mb-12"> | |
| <div class="flex-1 md:pr-12 md:text-right mb-4 md:mb-0 order-1 md:order-1"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Definição do Escopo</h3> | |
| <p class="text-gray-600">Estabelecimento dos objetivos, limites e requisitos do projeto JurisOSINT.</p> | |
| </div> | |
| <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center order-2 md:order-3 relative"> | |
| <div class="w-4 h-4 bg-white rounded-full"></div> | |
| <div class="absolute -bottom-6 text-sm font-medium text-gray-500">Fase 1</div> | |
| </div> | |
| <div class="flex-1 md:pl-12 order-3 md:order-2"></div> | |
| </div> | |
| <!-- Item 2 --> | |
| <div class="flex flex-col md:flex-row items-center mb-12"> | |
| <div class="flex-1 md:pr-12 md:text-right order-1 md:order-1"></div> | |
| <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center order-2 md:order-3 relative"> | |
| <div class="w-4 h-4 bg-white rounded-full"></div> | |
| <div class="absolute -bottom-6 text-sm font-medium text-gray-500">Fase 2</div> | |
| </div> | |
| <div class="flex-1 md:pl-12 mb-4 md:mb-0 order-3 md:order-2"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Integração de Ferramentas</h3> | |
| <p class="text-gray-600">Implementação e adaptação das ferramentas OSINT básicas para uso jurídico.</p> | |
| </div> | |
| </div> | |
| <!-- Item 3 --> | |
| <div class="flex flex-col md:flex-row items-center mb-12"> | |
| <div class="flex-1 md:pr-12 md:text-right mb-4 md:mb-0 order-1 md:order-1"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Testes e Validação</h3> | |
| <p class="text-gray-600">Avaliação da eficácia das ferramentas em casos reais e ajustes necessários.</p> | |
| </div> | |
| <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center order-2 md:order-3 relative"> | |
| <div class="w-4 h-4 bg-white rounded-full"></div> | |
| <div class="absolute -bottom-6 text-sm font-medium text-gray-500">Fase 3</div> | |
| </div> | |
| <div class="flex-1 md:pl-12 order-3 md:order-2"></div> | |
| </div> | |
| <!-- Item 4 --> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="flex-1 md:pr-12 md:text-right order-1 md:order-1"></div> | |
| <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center order-2 md:order-3 relative"> | |
| <div class="w-4 h-4 bg-white rounded-full"></div> | |
| <div class="absolute -bottom-6 text-sm font-medium text-gray-500">Fase 4</div> | |
| </div> | |
| <div class="flex-1 md:pl-12 mb-4 md:mb-0 order-3 md:order-2"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Documentação e Treinamento</h3> | |
| <p class="text-gray-600">Criação de manuais e capacitação de profissionais do direito no uso da plataforma.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Key Elements --> | |
| <div class="mt-16 grid md:grid-cols-2 gap-8"> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-sm"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-clipboard-list text-blue-600 mr-3"></i> Elementos Fundamentais | |
| </h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Escopo do projeto</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Duração do projeto</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Recursos disponíveis</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Metodologia de execução</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">SLA (Service Level Agreement)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Rotinas de documentação e monitoramento</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-blue-50 rounded-xl p-6 shadow-sm border border-blue-100"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-sitemap text-blue-600 mr-3"></i> Abordagem Matricial | |
| </h3> | |
| <p class="text-gray-700 mb-4"> | |
| A estrutura do projeto segue uma abordagem matricial, que é o caso mais comum de estruturação de projetos. Esta abordagem permite: | |
| </p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-users text-blue-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Criar uma equipe específica comprometida com os resultados</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-balance-scale text-blue-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Manter o equilíbrio entre recursos limitados e demandas do projeto</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-exchange-alt text-blue-500 mt-1 mr-2"></i> | |
| <span class="text-gray-700">Facilitar a comunicação entre diferentes áreas da organização</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="gradient-bg text-white py-16"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Pronto para experimentar o JurisOSINT?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Transforme a maneira como você localiza requeridos em processos judiciais com o poder da inteligência de fontes abertas.</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-blue-800 font-semibold px-8 py-4 rounded-lg hover:bg-blue-100 transition flex items-center justify-center mx-auto sm:mx-0 pulse-animation"> | |
| <i class="fas fa-rocket mr-3"></i> Começar Agora | |
| </button> | |
| <button class="border-2 border-white text-white font-semibold px-8 py-4 rounded-lg hover:bg-white hover:text-blue-800 transition flex items-center justify-center mx-auto sm:mx-0"> | |
| <i class="fas fa-question-circle mr-3"></i> Fale com um Especialista | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contato" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Entre em Contato</h2> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-6 text-gray-800">Informações de Contato</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-envelope text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Email</h4> | |
| <p class="text-gray-600">[email protected]</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-phone-alt text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Telefone</h4> | |
| <p class="text-gray-600">+55 (11) 1234-5678</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-map-marker-alt text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Endereço</h4> | |
| <p class="text-gray-600">Av. Paulista, 1000 - São Paulo/SP</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-medium text-gray-800 mb-4">Siga-nos</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-gray-100 p-3 rounded-full text-gray-700 hover:bg-blue-100 hover:text-blue-600 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="bg-gray-100 p-3 rounded-full text-gray-700 hover:bg-blue-100 hover:text-blue-600 transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="bg-gray-100 p-3 rounded-full text-gray-700 hover:bg-blue-100 hover:text-blue-600 transition"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-6 text-gray-800">Envie uma Mensagem</h3> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="name" class="block text-gray-700 mb-2">Nome</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-gray-700 mb-2">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-gray-700 mb-2">Assunto</label> | |
| <input type="text" id="subject" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-gray-700 mb-2">Mensagem</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500"></textarea> | |
| </div> | |
| <button type="submit" class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition w-full"> | |
| Enviar Mensagem | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-balance-scale text-2xl"></i> | |
| <h3 class="text-xl font-bold">JurisOSINT</h3> | |
| </div> | |
| <p class="text-gray-400">Inteligência de Fontes Abertas integrada ao Direito Brasileiro para localização de requeridos em plataformas digitais.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Links Rápidos</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#sobre" class="text-gray-400 hover:text-white transition">Sobre</a></li> | |
| <li><a href="#ferramentas" class="text-gray-400 hover:text-white transition">Ferramentas</a></li> | |
| <li><a href="#metodologia" class="text-gray-400 hover:text-white transition">Metodologia</a></li> | |
| < | |
| </html> |