Created
May 20, 2025 01:32
-
-
Save fernandojunior/f03b599f8cebfd4ab817e05b7f48c4a4 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!-- saved from url=(0060)file:///C:/Users/fernandofelix/Downloads/juriscx-slides.html --> | |
| <html lang="pt-BR"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>JurisCX - Transformando o Acesso à Justiça no Brasil</title> | |
| <script src="./JurisCX - Transformando o Acesso à Justiça no Brasil - v9_files/tailwind.min.js.download"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --primary: #1a365d; | |
| --primary-light: #2a4a7f; | |
| --secondary: #3c82f6; | |
| --accent: #f97316; | |
| --text: #1e293b; | |
| --light: #f8fafc; | |
| --dark: #0f172a; | |
| --success: #10b981; | |
| --warning: #f59e0b; | |
| --danger: #ef4444; | |
| } | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| color: var(--text); | |
| background-color: var(--light); | |
| line-height: 1.6; | |
| } | |
| .slide-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| background-color: white; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| border-radius: 8px; | |
| margin-bottom: 3rem; | |
| page-break-after: always; | |
| min-height: 600px; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .slide-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| margin-bottom: 2rem; | |
| border-bottom: 3px solid var(--primary); | |
| padding-bottom: 1rem; | |
| } | |
| .slide-title { | |
| color: var(--primary); | |
| font-weight: 700; | |
| font-size: 2rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .slide-subtitle { | |
| color: var(--primary-light); | |
| font-size: 1.25rem; | |
| font-weight: 500; | |
| margin-bottom: 1rem; | |
| } | |
| .slide-content { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-start; | |
| } | |
| .slide-footer { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-top: 2rem; | |
| font-size: 0.875rem; | |
| color: var(--primary-light); | |
| border-top: 1px solid #e2e8f0; | |
| padding-top: 1rem; | |
| } | |
| .logo { | |
| height: 60px; | |
| margin-left: auto; | |
| } | |
| .mockup { | |
| border: 1px solid #e2e8f0; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| margin: 1rem 0; | |
| max-width: 100%; | |
| } | |
| .mockup-header { | |
| background-color: var(--primary); | |
| color: white; | |
| padding: 0.75rem 1rem; | |
| font-weight: 500; | |
| } | |
| .mockup-content { | |
| padding: 1rem; | |
| background-color: white; | |
| } | |
| .mockup-footer { | |
| background-color: #f8fafc; | |
| padding: 0.75rem 1rem; | |
| border-top: 1px solid #e2e8f0; | |
| font-size: 0.875rem; | |
| } | |
| .comparison-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin: 1.5rem 0; | |
| } | |
| .comparison-table th, | |
| .comparison-table td { | |
| padding: 0.75rem 1rem; | |
| text-align: left; | |
| border-bottom: 1px solid #e2e8f0; | |
| } | |
| .comparison-table th { | |
| font-weight: 600; | |
| background-color: #f8fafc; | |
| } | |
| .comparison-table tr:last-child td { | |
| border-bottom: none; | |
| } | |
| .stat-box { | |
| background-color: #f8fafc; | |
| border-radius: 8px; | |
| padding: 1.25rem; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); | |
| margin-bottom: 1rem; | |
| border-left: 4px solid var(--primary); | |
| } | |
| .stat-value { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: var(--primary); | |
| line-height: 1.2; | |
| } | |
| .stat-label { | |
| font-size: 0.875rem; | |
| color: var(--text); | |
| font-weight: 500; | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 300px; | |
| width: 100%; | |
| margin: 1.5rem 0; | |
| } | |
| .mockup-phone { | |
| max-width: 300px; | |
| border-radius: 2rem; | |
| border: 8px solid #374151; | |
| overflow: hidden; | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| margin: 0 auto; | |
| } | |
| .mockup-phone-header { | |
| background-color: #374151; | |
| color: white; | |
| padding: 0.5rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-size: 0.75rem; | |
| } | |
| .mockup-phone-content { | |
| background-color: #f8fafc; | |
| height: 500px; | |
| overflow-y: auto; | |
| padding: 0.75rem; | |
| } | |
| .chat-bubble { | |
| max-width: 80%; | |
| padding: 0.75rem; | |
| border-radius: 1rem; | |
| margin-bottom: 0.75rem; | |
| position: relative; | |
| } | |
| .chat-bubble-user { | |
| background-color: #e2e8f0; | |
| margin-left: auto; | |
| border-bottom-right-radius: 0.25rem; | |
| } | |
| .chat-bubble-assistant { | |
| background-color: var(--primary-light); | |
| color: white; | |
| margin-right: auto; | |
| border-bottom-left-radius: 0.25rem; | |
| } | |
| .chat-time { | |
| font-size: 0.625rem; | |
| color: #64748b; | |
| text-align: right; | |
| margin-top: 0.25rem; | |
| } | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 9999px; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| margin-right: 0.5rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .badge-primary { | |
| background-color: #dbeafe; | |
| color: var(--primary); | |
| } | |
| .badge-secondary { | |
| background-color: #e0f2fe; | |
| color: #0369a1; | |
| } | |
| .badge-success { | |
| background-color: #dcfce7; | |
| color: #166534; | |
| } | |
| .badge-warning { | |
| background-color: #fef3c7; | |
| color: #92400e; | |
| } | |
| .timeline { | |
| position: relative; | |
| margin: 1.5rem 0; | |
| padding-left: 2rem; | |
| } | |
| .timeline:before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background-color: var(--primary-light); | |
| } | |
| .timeline-item { | |
| position: relative; | |
| margin-bottom: 1.5rem; | |
| } | |
| .timeline-item:before { | |
| content: ''; | |
| position: absolute; | |
| left: -2rem; | |
| top: 0.25rem; | |
| width: 1rem; | |
| height: 1rem; | |
| border-radius: 50%; | |
| background-color: var(--primary); | |
| } | |
| .timeline-header { | |
| font-weight: 600; | |
| color: var(--primary); | |
| margin-bottom: 0.25rem; | |
| } | |
| .timeline-content { | |
| background-color: #f8fafc; | |
| padding: 1rem; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); | |
| } | |
| .timeline-item:last-child { | |
| margin-bottom: 0; | |
| } | |
| .dashboard-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 1rem; | |
| margin: 1.5rem 0; | |
| } | |
| .dashboard-panel { | |
| background-color: white; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); | |
| overflow: hidden; | |
| } | |
| .dashboard-header { | |
| background-color: var(--primary); | |
| color: white; | |
| padding: 0.75rem 1rem; | |
| font-weight: 500; | |
| } | |
| .dashboard-content { | |
| padding: 1rem; | |
| } | |
| .kpi-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 1rem; | |
| } | |
| .kpi-card { | |
| background-color: #f8fafc; | |
| border-radius: 0.5rem; | |
| padding: 1rem; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| } | |
| .kpi-value { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: var(--primary); | |
| line-height: 1.2; | |
| } | |
| .kpi-label { | |
| font-size: 0.75rem; | |
| color: var(--text); | |
| font-weight: 500; | |
| } | |
| .kpi-trend { | |
| display: flex; | |
| align-items: center; | |
| font-size: 0.75rem; | |
| margin-top: 0.5rem; | |
| } | |
| .kpi-trend-up { | |
| color: var(--success); | |
| } | |
| .kpi-trend-down { | |
| color: var(--danger); | |
| } | |
| .kpi-icon { | |
| margin-right: 0.25rem; | |
| } | |
| @media print { | |
| .slide-container { | |
| box-shadow: none; | |
| border: none; | |
| page-break-after: always; | |
| } | |
| body { | |
| background-color: white; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Slide 1: Introdução --> | |
| <div class="slide-container"> | |
| <div class="slide-header"> | |
| <div> | |
| <h1 class="slide-title">JurisCX</h1> | |
| <p class="slide-subtitle">Transformando o Acesso à Justiça no Brasil</p> | |
| </div> | |
| <div class="logo"> | |
| <!-- Placeholder for logo --> | |
| </div> | |
| </div> | |
| <div class="slide-content"> | |
| <div class="bg-blue-50 p-6 rounded-lg shadow-sm"> | |
| <p class="text-lg"> | |
| Uma solução inovadora desenvolvida para transformar radicalmente o acesso à justiça no Brasil | |
| através do Portal de Serviços do Poder Judiciário (Jus.br). Nossa proposta combina tecnologias | |
| avançadas de inteligência artificial e design centrado no usuário para democratizar o acesso | |
| ao sistema judiciário. | |
| </p> | |
| </div> | |
| <div class="mt-8 flex justify-center"> | |
| <img src="./JurisCX - Transformando o Acesso à Justiça no Brasil - v9_files/88717f25-319a-41d9-a91d-78b3ce0ec55b.png" alt="JurisCX Plataforma" class="rounded-lg shadow-md" width="30% alt=" juriscx=""> | |
| <div class="absolute bg-white bg-opacity-90 p-3 rounded shadow-sm text-sm border border-blue-200 max-w-md"> | |
| <strong>Visão conceitual da plataforma JurisCX</strong><br> | |
| Ilustração de um cidadão ao centro conectado a diversos serviços do judiciário através de | |
| diferentes dispositivos (computador, tablet, smartphone). Use elementos visuais que representem | |
| a transformação digital do acesso à justiça e a simplificação de processos complexos. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slide-footer"> | |
| <div>JurisCX - Apresentação</div> | |
| <div>Slide 1 de 10</div> | |
| </div> | |
| </div> | |
| <!-- Slide 2: O Desafio do Acesso à Justiça --> | |
| <div class="slide-container"> | |
| <div class="slide-header"> | |
| <div> | |
| <h1 class="slide-title">O Desafio do Acesso à Justiça</h1> | |
| <p class="slide-subtitle">Barreiras Atuais e Consequências</p> | |
| </div> | |
| <div class="logo"> | |
| <!-- Placeholder for logo --> | |
| </div> | |
| </div> | |
| <div class="slide-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-primary mb-4">Desafios Sistêmicos</h3> | |
| <div class="stat-box"> | |
| <div class="stat-value">60,76%</div> | |
| <div class="stat-label">Taxa de congestionamento</div> | |
| <div class="text-sm text-gray-500">Fonte: <a href="https://www.cnj.jus.br/tribunais-medem-eficiencia-com-meta-de-reduzir-congestionamento-processual-em-2024/" class="text-blue-600 hover:underline">CNJ, 2025</a></div> | |
| </div> | |
| <div class="stat-box"> | |
| <div class="stat-value">3+ anos</div> | |
| <div class="stat-label">Tempo médio de tramitação</div> | |
| <div class="text-sm text-gray-500">Excluindo execuções fiscais</div> | |
| </div> | |
| <div class="stat-box"> | |
| <div class="stat-value">12%</div> | |
| <div class="stat-label">População plenamente alfabetizada</div> | |
| <div class="text-sm text-gray-500">Fonte: <a href="https://alfabetismofuncional.org.br/" class="text-blue-600 hover:underline">Inaf 2025</a></div> | |
| </div> | |
| <div class="stat-box"> | |
| <div class="stat-value">65%</div> | |
| <div class="stat-label">Pessoas com dificuldade no vocabulário jurídico</div> | |
| <div class="text-sm text-gray-500">Fonte: <a href="https://www.trt4.jus.br/portais/trt4/modulos/noticias/564042" class="text-blue-600 hover:underline">CNJ 2023</a></div> | |
| </div> | |
| <div class="stat-box"> | |
| <div class="stat-value">40%</div> | |
| <div class="stat-label">das pessoas com conflitos sequer recorrem ao Judiciário</div> | |
| <div class="text-sm text-gray-500">Fonte: <a href="https://www.scielo.br/j/rdgv/a/RvqncfcBvkKNhpdZYVRX93x/" class="text-blue-600 hover:underline">Revista de Direito GV (2020)</a></div> | |
| </div></div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-primary mb-4">O caso da Maria</h3> | |
| <div class="mockup"> | |
| <div class="mockup-header">Experiência Atual</div> | |
| <div class="mockup-content"> | |
| <div class="timeline"> | |
| <div class="timeline-item"> | |
| <div class="timeline-header">Recebimento de notificação judicial</div> | |
| <div class="timeline-content"> | |
| Maria, comerciante do interior, recebe uma notificação judicial com termos que não compreende. | |
| <div class="bg-white bg-opacity-90 p-2 rounded shadow-sm text-xs border border-blue-200 mt-2"> | |
| <img src="./JurisCX - Transformando o Acesso à Justiça no Brasil - v9_files/9de69731-6d1f-4c63-8c92-31f1a5e154c3.png" width="25%">IMAGEM 4: Notificação complexa</img><br><strong>Interface confusa</strong><br> | |
| Documento oficial com formatação intimidadora, fonte pequena e termos técnicos destacados como | |
| "Intimação", "Petição inicial", "Prazo peremptório", etc. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-header">Tentativa de acesso ao Portal Jus.br</div> | |
| <div class="timeline-content"> | |
| Gasta 1 hora navegando entre termos jurídicos complexos e erros frequentes do sistema. | |
| <div class="bg-white bg-opacity-90 p-2 rounded shadow-sm text-xs border border-blue-200 mt-2"> | |
| <img src="./JurisCX - Transformando o Acesso à Justiça no Brasil - v9_files/a1923aaa-5ff7-4781-96be-be0a8d175bec.png" width="25%">IMAGEM 4: Notificação complexa</img><br><strong>Interface confusa</strong><br> | |
| Screenshot de uma página do portal com design ultrapassado, muitos campos de formulário, | |
| terminologia técnica e mensagem de erro do sistema destacada em vermelho. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-header">Sem suporte acessível</div> | |
| <div class="timeline-content"> | |
| Não encontra opções de atendimento adequadas às suas necessidades. | |
| <div class="bg-white bg-opacity-90 p-2 rounded shadow-sm text-xs border border-blue-200 mt-2"> | |
| <img src="./JurisCX - Transformando o Acesso à Justiça no Brasil - v9_files/e2e2ec91-200c-4a5d-ae00-4fdd59db1859.png" width="25%">IMAGEM 4: Notificação complexa</img><br><strong>Suporte limitado</strong><br> | |
| Captura de tela de uma página de "Contato" com apenas um número de telefone com horário | |
| restrito, sem opções de chat ou atendimento digital. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-header">Abandono e frustração</div> | |
| <div class="timeline-content"> | |
| Desiste sem conseguir resolver sua questão, frustrada e com sensação de exclusão. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slide-footer"> | |
| <div>JurisCX - Apresentação</div> | |
| <div>Slide 2 de 10</div> | |
| </div> | |
| </div> | |
| <!-- Slide 3: Nossa Solução --> | |
| <div class="slide-container"> | |
| <div class="slide-header"> | |
| <div> | |
| <h1 class="slide-title">Nossa Solução</h1> | |
| <p class="slide-subtitle">JurisCX - Plataforma Integrada</p> | |
| </div> | |
| <div class="logo"> | |
| <!-- Placeholder for logo --> | |
| </div> | |
| </div> | |
| <div class="slide-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-primary mb-4">Abordagem Baseada em Evidências</h3> | |
| <div class="mb-4"> | |
| <p class="mb-2">Nossa experiência em projetos similares demonstra resultados expressivos:</p> | |
| <a class="mb-2" href="https://www.linkedin.com/posts/renanmoreiradeoliveira_finai-artificialintelligence-ai-activity-7261840880389525506-83cA?utm_source=share&utm_medium=member_desktop&rcm=ACoAABDsCI4Bh6FuDyOfghkWEK5BOy_Vy2TkrYk">Case Chat Finanças</a><br class="mb-2"></br><a class="mb-2" href="https://www.figma.com/design/B2GQgTU5zSmcII7WvTP24p/Busca-por-prompt?node-id=13054-5655&p=f&t=0C9iTpHFJu8jwjrl-0">Case Chat Transportes</a><br class="mb-2"></br><br class="mb-2"></br><div class="flex flex-wrap"> | |
| <div class="badge badge-success">Redução de 35% no tempo médio de resolução</div> | |
| <div class="badge badge-success">Aumento do índice de satisfação de 3,2 para 4,7</div> | |
| <div class="badge badge-success">ROI positivo em apenas 4 meses</div> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-semibold text-primary mb-4 mt-6">Tecnologias Avançadas</h3> | |
| <div class="flex flex-wrap mb-4"> | |
| <div class="badge badge-primary">IA generativa especializada</div> | |
| <div class="badge badge-primary">Análise multimodal de documentos</div> | |
| <div class="badge badge-primary">Arquitetura multi-agente</div> | |
| <div class="badge badge-primary">Motores de simplificação linguística</div> | |
| <div class="badge badge-primary">Análise preditiva de tendências</div> | |
| </div> | |
| <h3 class="text-xl font-semibold text-primary mb-4 mt-6">Benefícios Quantificáveis</h3> | |
| <div class="stat-box"> | |
| <div class="stat-value">R$ 2,5 milhões</div> | |
| <div class="stat-label">Economia mensurável no primeiro ano</div> | |
| </div> | |
| <div class="stat-box"> | |
| <div class="stat-value">30%</div> | |
| <div class="stat-label">Atendimentos automatizados sem intervenção humana</div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h3 class="text-xl font-semibold text-primary mb-4">Design Centrado no Ser Humano</h3> | |
| <p class="text-sm mb-4"> | |
| Nossa solução foi projetada com base em princípios consolidados de experiência do usuário (UX) | |
| e design centrado no ser humano, introduzidos por Don Norman durante seu período na Apple Computer. | |
| </p> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="p-3 bg-blue-50 rounded"> | |
| <div class="font-bold mb-1">1. Foco nas pessoas</div> | |
| <div class="text-sm">Considerar todos os contextos de interação</div> | |
| </div> | |
| <div class="p-3 bg-blue-50 rounded"> | |
| <div class="font-bold mb-1">2. Identificação do problema</div> | |
| <div class="text-sm">Buscar a raiz, não apenas os sintomas</div> | |
| </div> | |
| <div class="p-3 bg-blue-50 rounded"> | |
| <div class="font-bold mb-1">3. Visão sistêmica</div> | |
| <div class="text-sm">Considerar o panorama geral</div> | |
| </div> | |
| <div class="p-3 bg-blue-50 rounded"> | |
| <div class="font-bold mb-1">4. Iteração contínua</div> | |
| <div class="text-sm">Prototipar, testar e evoluir</div> | |
| </div> | |
| </div> | |
| <div class="text-xs mt-4"> | |
| Fontes: <a href="https://thenextweb.com/news/a-brief-history-of-ux-design-and-its-evolution" class="text-blue-600 hover:underline">TNW</a>, | |
| <a href="https://careerfoundry.com/en/blog/ux-design/the-fascinating-history-of-ux-design-a-definitive-timeline/" class="text-blue-600 hover:underline">CareerFoundry, 2020</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slide-footer"> | |
| <div>JurisCX - Apresentação</div> | |
| <div>Slide 3 de 10</div> | |
| </div> | |
| </div> | |
| <!-- Slide 4: Módulos da Plataforma --> | |
| <div class="slide-container"> | |
| <div class="slide-header"> | |
| <div> | |
| <h1 class="slide-title">Módulos da Plataforma</h1> | |
| <p class="slide-subtitle">Solução Integrada e Complementar</p> | |
| </div> | |
| <div class="logo"> | |
| <!-- Placeholder for logo --> | |
| </div> | |
| </div> | |
| <div class="slide-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-white rounded-lg shadow-md p-4 border-l-4 border-blue-700"> | |
| <div class="text-xl font-bold mb-2 text-blue-700">JurisConnect</div> | |
| <p class="mb-4 text-sm">Centro de interação multicanal com atendimento automatizado em primeiro nível e transição inteligente para atendimento humano quando necessário.</p> | |
| <div class="flex flex-wrap"> | |
| <div class="badge badge-primary">Atendimento personalizado</div> | |
| <div class="badge badge-primary">Triagem inteligente</div> | |
| <div class="badge badge-primary">Multicanal integrado</div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md p-4 border-l-4 border-green-600"> | |
| <div class="text-xl font-bold mb-2 text-green-600">JurisMetrics</div> | |
| <p class="mb-4 text-sm">Inteligência analítica com KPIs padronizados, detecção proativa de anomalias e recomendações baseadas em IA.</p> | |
| <div class="flex flex-wrap"> | |
| <div class="badge badge-secondary">Métricas em tempo real</div> | |
| <div class="badge badge-secondary">Alertas preventivos</div> | |
| <div class="badge badge-secondary">Dashboards gerenciais</div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md p-4 border-l-4 border-yellow-500"> | |
| <div class="text-xl font-bold mb-2 text-yellow-500">JurisLiteracy</div> | |
| <p class="mb-4 text-sm">Democratização do conhecimento jurídico, traduzindo o "juridiquês" para linguagem cidadã e oferecendo conteúdo personalizado por perfil.</p> | |
| <div class="flex flex-wrap"> | |
| <div class="badge badge-warning">Tradução automática</div> | |
| <div class="badge badge-warning">Glossário interativo</div> | |
| <div class="badge badge-warning">Conteúdo personalizado</div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md p-4 border-l-4 border-purple-600"> | |
| <div class="text-xl font-bold mb-2 text-purple-600">JurisQuality</div> | |
| <p class="mb-4 text-sm">Excelência operacional com auditoria automática de 100% dos atendimentos e feedback em tempo real.</p> | |
| <div class="flex flex-wrap"> | |
| <div class="badge badge-primary">Auditoria automática</div> | |
| <div class="badge badge-primary">Análise de conformidade</div> | |
| <div class="badge badge-primary">Feedback em tempo real</div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md p-4 border-l-4 border-red-600"> | |
| <div class="text-xl font-bold mb-2 text-red-600">JurisAccess</div> | |
| <p class="mb-4 text-sm">Inclusão digital com adaptação automática para acessibilidade e suporte multimodal integrado.</p> | |
| <div class="flex flex-wrap"> | |
| <div class="badge badge-secondary">Adaptação automática</div> | |
| <div class="badge badge-secondary">Multimodalidade</div> | |
| <div class="badge badge-secondary">Inclusão digital</div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md p-4 border-l-4 border-indigo-600 flex items-center"> | |
| <div> | |
| <div class="text-xl font-bold mb-2 text-indigo-600">Arquitetura Integrada</div> | |
| <p class="text-sm">Uma estrutura complementar e modular que atende as necessidades específicas de cidadãos e gestores do sistema judiciário.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slide-footer"> | |
| <div>JurisCX - Apresentação</div> | |
| <div>Slide 4 de 10</div> | |
| </div> | |
| </div> | |
| <!-- Slide 5: Jornada da Maria --> | |
| <div class="slide-container"> | |
| <div class="slide-header"> | |
| <div> | |
| <h1 class="slide-title">Jornada da Maria</h1> | |
| <p class="slide-subtitle">Antes e Depois do JurisCX</p> | |
| </div> | |
| <div class="logo"> | |
| <!-- Placeholder for logo --> | |
| </div> | |
| </div> | |
| <div class="slide-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-red-600 mb-4">Antes: Experiência Frustrante (1 hora)</h3> | |
| <div class="mockup"> | |
| <div class="mockup-header bg-red-600">Portal Jus.br - Experiência Atual</div> | |
| <div class="mockup-content p-4"> | |
| <div class="mb-4 p-3 bg-red-50 rounded border-l-4 border-red-600"> | |
| <div class="font-bold mb-1">Suporte inacessível</div> | |
| <div class="text-sm">"Para suporte, ligue para o número (XX) XXXX-XXXX, disponível apenas em dias úteis, das 12h às 16h."</div> | |
| </div> | |
| <div class="p-3 bg-red-50 rounded border-l-4 border-red-600"> | |
| <div class="font-bold mb-1">Resultado: Abandono</div> | |
| <div class="text-sm">Após 1 hora de tentativas frustradas, Maria desiste sem conseguir resolver sua questão.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-green-600 mb-4">Depois: Experiência Transformada (5 minutos)</h3> | |
| <div class="mockup-phone"> | |
| <div class="mockup-phone-header"> | |
| <div>9:41</div> | |
| <div>WhatsApp</div> | |
| </div> | |
| <div class="mockup-phone-content"> | |
| <div class="chat-bubble chat-bubble-assistant"> | |
| Olá, Maria! Sou o assistente virtual do Portal de Serviços do Poder Judiciário. Como posso ajudar você hoje? | |
| <div class="chat-time">9:32</div> | |
| </div> | |
| <div class="chat-bubble chat-bubble-user"> | |
| Recebi uma notificação judicial e não entendi o que devo fazer. | |
| <div class="chat-time">9:33</div> | |
| </div> | |
| <div class="chat-bubble chat-bubble-assistant"> | |
| Entendi, Maria. Você poderia enviar uma foto dessa notificação? Assim posso analisar e explicar com uma linguagem simples o que está acontecendo. | |
| <div class="chat-time">9:33</div> | |
| </div> | |
| <div class="chat-bubble chat-bubble-user"> | |
| [Foto enviada] | |
| <div class="chat-time">9:34</div> | |
| <div class="bg-white bg-opacity-90 p-2 rounded shadow-sm text-xs border border-blue-200 mt-2"> | |
| <strong>IMAGEM 7: Notificação digitalizada</strong><br> | |
| Mostrar a mesma notificação da IMAGEM 4, porém como uma foto tirada por celular sobre uma mesa. | |
| </div> | |
| </div> | |
| <div class="chat-bubble chat-bubble-assistant"> | |
| Obrigado, Maria! Identifiquei que você recebeu uma "Intimação para apresentação de contrarrazões" no processo nº 0001234-56.2024.8.26.0001. | |
| Traduzindo: a outra parte do seu processo apresentou um recurso, e agora você tem a oportunidade de responder a esse recurso. | |
| Você tem 15 dias para apresentar essa resposta, contados a partir do dia 15/05/2025. | |
| <div class="chat-time">9:35</div> | |
| </div> | |
| <div class="chat-bubble chat-bubble-user"> | |
| E como faço para responder? Preciso de um advogado? | |
| <div class="chat-time">9:36</div> | |
| </div> | |
| <div class="chat-bubble chat-bubble-assistant"> | |
| Como seu processo tramita no Juizado Especial Cível (valor da causa abaixo de 20 salários mínimos), você pode: | |
| 1️⃣ Responder sem advogado, através do nosso portal | |
| 2️⃣ Buscar assistência jurídica gratuita na Defensoria Pública | |
| 3️⃣ Contratar um advogado particular | |
| Posso te guiar sobre como fazer a resposta pelo portal, se preferir. | |
| <div class="chat-time">9:37</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <br> | |
| <br> | |
| <br> | |
| <h3 class="text-xl font-semibold text-green-600 mb-4">Transição fluída entre canais</h3><img src="./JurisCX - Transformando o Acesso à Justiça no Brasil - v9_files/unnamed.png" alt="JurisCX Arquitetura" class="rounded-lg shadow-md w-full"> | |
| </div></div> | |
| <div class="slide-footer"> | |
| <div>JurisCX - Apresentação</div> | |
| <div>Slide 5 de 10</div> | |
| </div> | |
| </div> | |
| <!-- Slide 6: Jornada do Gestor --> | |
| <div class="slide-container"> | |
| <div class="slide-header"> | |
| <div> | |
| <h1 class="slide-title">Jornada do Gestor</h1> | |
| <p class="slide-subtitle">Painel JurisMetrics Mobile</p> | |
| </div> | |
| <div class="logo"> | |
| <!-- Placeholder for logo --> | |
| </div> | |
| </div> | |
| <div class="slide-content flex items-center justify-center"> | |
| <!-- Mockup de celular mais elegante --> | |
| <div class="mockup-phone" style="max-width: 375px; border-radius: 36px; border: 12px solid #333; overflow: hidden; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); position: relative;"> | |
| <!-- Barra de Status --> | |
| <div style="background-color: #1a365d; color: white; padding: 6px 16px; display: flex; justify-content: space-between; align-items: center; font-size: 12px;"> | |
| <div>9:41</div> | |
| <div>100%</div> | |
| </div> | |
| <!-- Conteúdo do App --> | |
| <div style="background-color: #f5f7fa; height: 640px; overflow-y: auto; padding: 12px; padding-bottom: 60px;"> | |
| <!-- Cabeçalho do App --> | |
| <div style="padding: 12px 0;"> | |
| <div style="font-size: 22px; font-weight: 700; color: #1a365d;">JurisMetrics</div> | |
| <div style="font-size: 14px; color: #64748b;">Dashboard Executivo • Maio 2025</div> | |
| </div> | |
| <!-- Métricas Principais --> | |
| <div style="background-color: white; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 16px; padding: 20px;"> | |
| <div style="margin-bottom: 16px; font-size: 16px; font-weight: 600; color: #1a365d;">Visão Geral de Desempenho</div> | |
| <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;"> | |
| <!-- Taxa de Resolução --> | |
| <div style="text-align: center;"> | |
| <div style="font-size: 32px; font-weight: 700; color: #1a365d;">76%</div> | |
| <div style="font-size: 13px; color: #64748b;">Taxa de Resolução</div> | |
| <div style="font-size: 12px; color: #22c55e; margin-top: 4px;">▲ 12% vs. abril</div> | |
| </div> | |
| <!-- Tempo Médio --> | |
| <div style="text-align: center;"> | |
| <div style="font-size: 32px; font-weight: 700; color: #1a365d;">2,4 min</div> | |
| <div style="font-size: 13px; color: #64748b;">Tempo Médio</div> | |
| <div style="font-size: 12px; color: #ef4444; margin-top: 4px;">▼ 35% mais rápido</div> | |
| </div> | |
| <!-- Satisfação --> | |
| <div style="text-align: center;"> | |
| <div style="font-size: 32px; font-weight: 700; color: #1a365d;">4,7/5</div> | |
| <div style="font-size: 13px; color: #64748b;">Satisfação</div> | |
| <div style="font-size: 12px; color: #22c55e; margin-top: 4px;">▲ 0,3 vs. abril</div> | |
| </div> | |
| <!-- Economia --> | |
| <div style="text-align: center;"> | |
| <div style="font-size: 32px; font-weight: 700; color: #1a365d;">R$ 850 mil</div> | |
| <div style="font-size: 13px; color: #64748b;">Economia</div> | |
| <div style="font-size: 12px; color: #22c55e; margin-top: 4px;">▲ 34% da meta</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Volume de Atendimentos --> | |
| <div style="background-color: white; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 16px; padding: 20px;"> | |
| <div style="margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center;"> | |
| <div style="font-size: 16px; font-weight: 600; color: #1a365d;">Volume de Atendimentos</div> | |
| </div> | |
| <div style="display: flex; align-items: center; margin-bottom: 20px;"> | |
| <div style="width: 120px; text-align: center;"> | |
| <div style="font-size: 28px; font-weight: 700; color: #1a365d;">27,6K</div> | |
| <div style="font-size: 13px; color: #64748b;">Total</div> | |
| </div> | |
| <div style="flex-grow: 1;"> | |
| <!-- Resolvidos em 1º Contato --> | |
| <div style="margin-bottom: 12px;"> | |
| <div style="display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px;"> | |
| <span style="color: #64748b;">Resolvidos em 1º contato</span> | |
| <span style="font-weight: 600; color: #1a365d;">76%</span> | |
| </div> | |
| <div style="width: 100%; background-color: #e2e8f0; height: 6px; border-radius: 3px;"> | |
| <div style="background-color: #22c55e; height: 6px; border-radius: 3px; width: 76%;"></div> | |
| </div> | |
| </div> | |
| <!-- Encaminhados --> | |
| <div> | |
| <div style="display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px;"> | |
| <span style="color: #64748b;">Encaminhados para N2</span> | |
| <span style="font-weight: 600; color: #1a365d;">24%</span> | |
| </div> | |
| <div style="width: 100%; background-color: #e2e8f0; height: 6px; border-radius: 3px;"> | |
| <div style="background-color: #3b82f6; height: 6px; border-radius: 3px; width: 24%;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Canais de Atendimento --> | |
| <div style="background-color: white; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 16px; padding: 20px;"> | |
| <div style="margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center;"> | |
| <div style="font-size: 16px; font-weight: 600; color: #1a365d;">Canais de Atendimento</div> | |
| <div style="font-size: 13px; color: #3b82f6;">Digital: 95%</div> | |
| </div> | |
| <!-- WhatsApp --> | |
| <div style="display: flex; align-items: center; margin-bottom: 12px;"> | |
| <div style="width: 80px; font-size: 13px; color: #64748b;">WhatsApp</div> | |
| <div style="flex-grow: 1;"> | |
| <div style="width: 100%; background-color: #e2e8f0; height: 6px; border-radius: 3px;"> | |
| <div style="background-color: #1e3a8a; height: 6px; border-radius: 3px; width: 42%;"></div> | |
| </div> | |
| </div> | |
| <div style="width: 80px; text-align: right;"> | |
| <span style="font-size: 13px; font-weight: 600; color: #1a365d;">42%</span> | |
| <span style="font-size: 11px; color: #22c55e; margin-left: 4px;">▲5%</span> | |
| </div> | |
| </div> | |
| <!-- Portal --> | |
| <div style="display: flex; align-items: center; margin-bottom: 12px;"> | |
| <div style="width: 80px; font-size: 13px; color: #64748b;">Portal</div> | |
| <div style="flex-grow: 1;"> | |
| <div style="width: 100%; background-color: #e2e8f0; height: 6px; border-radius: 3px;"> | |
| <div style="background-color: #2563eb; height: 6px; border-radius: 3px; width: 28%;"></div> | |
| </div> | |
| </div> | |
| <div style="width: 80px; text-align: right;"> | |
| <span style="font-size: 13px; font-weight: 600; color: #1a365d;">28%</span> | |
| <span style="font-size: 11px; color: #ef4444; margin-left: 4px;">▼2%</span> | |
| </div> | |
| </div> | |
| <!-- Aplicativo --> | |
| <div style="display: flex; align-items: center; margin-bottom: 12px;"> | |
| <div style="width: 80px; font-size: 13px; color: #64748b;">Aplicativo</div> | |
| <div style="flex-grow: 1;"> | |
| <div style="width: 100%; background-color: #e2e8f0; height: 6px; border-radius: 3px;"> | |
| <div style="background-color: #10b981; height: 6px; border-radius: 3px; width: 15%;"></div> | |
| </div> | |
| </div> | |
| <div style="width: 80px; text-align: right;"> | |
| <span style="font-size: 13px; font-weight: 600; color: #1a365d;">15%</span> | |
| <span style="font-size: 11px; color: #22c55e; margin-left: 4px;">▲3%</span> | |
| </div> | |
| </div> | |
| <!-- Email --> | |
| <div style="display: flex; align-items: center; margin-bottom: 12px;"> | |
| <div style="width: 80px; font-size: 13px; color: #64748b;">E-mail</div> | |
| <div style="flex-grow: 1;"> | |
| <div style="width: 100%; background-color: #e2e8f0; height: 6px; border-radius: 3px;"> | |
| <div style="background-color: #f97316; height: 6px; border-radius: 3px; width: 10%;"></div> | |
| </div> | |
| </div> | |
| <div style="width: 80px; text-align: right;"> | |
| <span style="font-size: 13px; font-weight: 600; color: #1a365d;">10%</span> | |
| <span style="font-size: 11px; color: #64748b; margin-left: 4px;">=</span> | |
| </div> | |
| </div> | |
| <!-- Presencial --> | |
| <div style="display: flex; align-items: center;"> | |
| <div style="width: 80px; font-size: 13px; color: #64748b;">Presencial</div> | |
| <div style="flex-grow: 1;"> | |
| <div style="width: 100%; background-color: #e2e8f0; height: 6px; border-radius: 3px;"> | |
| <div style="background-color: #8b5cf6; height: 6px; border-radius: 3px; width: 5%;"></div> | |
| </div> | |
| </div> | |
| <div style="width: 80px; text-align: right;"> | |
| <span style="font-size: 13px; font-weight: 600; color: #1a365d;">5%</span> | |
| <span style="font-size: 11px; color: #ef4444; margin-left: 4px;">▼6%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Alerta --> | |
| <div style="background-color: #fffbeb; border-left: 4px solid #f59e0b; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 16px; padding: 16px;"> | |
| <div style="font-size: 16px; font-weight: 600; color: #1a365d; margin-bottom: 8px;">⚠️ Anomalia Detectada</div> | |
| <div style="font-size: 13px; color: #64748b; margin-bottom: 12px;"> | |
| Aumento de 18% em consultas sobre certidões no TJSP. Detectado padrão anormal com início em 15/05/2025. | |
| </div> | |
| <div style="background-color: white; border-radius: 12px; padding: 12px; margin-bottom: 12px;"> | |
| <div style="font-size: 13px; font-weight: 600; color: #1a365d; margin-bottom: 4px;">Recomendação da IA:</div> | |
| <div style="font-size: 13px; color: #64748b;">Implementar banner informativo na página inicial do TJSP. Estimativa de redução de 65% nas consultas.</div> | |
| </div> | |
| <div style="display: flex; justify-content: flex-end;"> | |
| <button style="background-color: #1a365d; color: white; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 6px; margin-right: 8px;">Aprovar</button> | |
| <button style="background-color: white; color: #64748b; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 6px; border: 1px solid #e2e8f0;">Ignorar</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Barra de navegação inferior --> | |
| <div style="position: absolute; bottom: 0; left: 0; right: 0; background-color: white; border-top: 1px solid #e2e8f0; display: flex; justify-content: space-around; padding: 12px;"> | |
| <div style="text-align: center; color: #1a365d; font-size: 12px; font-weight: 500;">Dashboard</div> | |
| <div style="text-align: center; color: #94a3b8; font-size: 12px;">Relatórios</div> | |
| <div style="text-align: center; color: #94a3b8; font-size: 12px;">Alertas</div> | |
| <div style="text-align: center; color: #94a3b8; font-size: 12px;">Perfil</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slide-footer"> | |
| <div>JurisCX - Apresentação</div> | |
| <div>Slide 6 de 10</div> | |
| </div> | |
| </div> | |
| <!-- Barra de navegação inferior --> | |
| <!-- Slide 7: Componentes Open Source --> | |
| <div class="slide-container"> | |
| <div class="slide-header"> | |
| <div> | |
| <h1 class="slide-title">Componentes Open Source</h1> | |
| <p class="slide-subtitle">Fortalecendo o Ecossistema de Justiça Digital</p> | |
| </div> | |
| <div class="logo"> | |
| <!-- Placeholder for logo --> | |
| </div> | |
| </div> | |
| <div class="slide-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="bg-primary p-4 text-white"> | |
| <h3 class="text-xl font-bold">JurisConnect-OSS</h3> | |
| </div> | |
| <div class="p-4"> | |
| <p class="mb-4">Conectores padronizados para integração entre diferentes órgãos do judiciário.</p> | |
| <div class="mb-4"> | |
| <div class="text-sm font-semibold mb-1">Benefícios:</div> | |
| <ul class="list-disc pl-5 text-sm"> | |
| <li>Facilita integração entre tribunais</li> | |
| <li>Promove interoperabilidade</li> | |
| <li>Reduz custos de implementação</li> | |
| <li>Fomenta inovação em legaltech</li> | |
| </ul> | |
| </div> | |
| <div class="mt-auto"> | |
| <div class="text-xs text-gray-500"> | |
| Alinhado com a Política Nacional de Dados Abertos (Decreto nº 8.777/2016) | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="bg-primary p-4 text-white"> | |
| <h3 class="text-xl font-bold">JurisMetrics-OSS</h3> | |
| </div> | |
| <div class="p-4"> | |
| <p class="mb-4">Componentes de visualização de dados e painéis analíticos para métricas judiciais.</p> | |
| <div class="mb-4"> | |
| <div class="text-sm font-semibold mb-1">Benefícios:</div> | |
| <ul class="list-disc pl-5 text-sm"> | |
| <li>Visualizações consistentes e padronizadas</li> | |
| <li>Unificação de indicadores de desempenho</li> | |
| <li>Transparência de estatísticas judiciais</li> | |
| <li>Ferramenta para pesquisadores</li> | |
| </ul> | |
| </div> | |
| <div class="mt-auto"> | |
| <div class="text-xs text-gray-500"> | |
| Compatível com Resolução CNJ nº 335/2020 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="bg-primary p-4 text-white"> | |
| <h3 class="text-xl font-bold">JurisQuality-OSS</h3> | |
| </div> | |
| <div class="p-4"> | |
| <p class="mb-4">Framework de avaliação de qualidade para serviços judiciários digitais.</p> | |
| <div class="mb-4"> | |
| <div class="text-sm font-semibold mb-1">Benefícios:</div> | |
| <ul class="list-disc pl-5 text-sm"> | |
| <li>Padrões comuns de qualidade</li> | |
| <li>Facilita auditorias e certificações</li> | |
| <li>Melhoria contínua dos serviços</li> | |
| <li>Avaliação comparativa de serviços</li> | |
| </ul> | |
| </div> | |
| <div class="mt-auto"> | |
| <div class="text-xs text-gray-500"> | |
| Alinhado com ODS 16 da Agenda 2030 da ONU (Paz, Justiça e Instituições Eficazes) | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 p-4 bg-blue-50 rounded-lg"> | |
| <h3 class="font-semibold text-primary mb-2">Estratégia de Código Aberto</h3> | |
| <p class="text-sm"> | |
| Todos os componentes são disponibilizados sob licença MIT, possibilitando ampla adoção, | |
| colaboração e aprimoramento contínuo pela comunidade de desenvolvedores. A gestão desses | |
| repositórios será realizada por meio de uma governança transparente, com processos claros | |
| para contribuições e integração de melhorias. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="slide-footer"> | |
| <div>JurisCX - Apresentação</div> | |
| <div>Slide 7 de 10</div> | |
| </div> | |
| </div> | |
| <!-- Slide 8: OKRs --> | |
| <div class="slide-container"> | |
| <div class="slide-header"> | |
| <div> | |
| <h1 class="slide-title">OKRs</h1> | |
| <p class="slide-subtitle">Objetivos e Resultados-Chave</p> | |
| </div> | |
| <div class="logo"> | |
| <!-- Placeholder for logo --> | |
| </div> | |
| </div> | |
| <div class="slide-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="bg-primary p-4 text-white"> | |
| <h3 class="text-lg font-bold">Objetivo 1: Transformar a Eficiência Operacional</h3> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-3"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <div class="text-sm font-semibold">Reduzir tempo médio de resolução em 35%</div> | |
| <div class="text-xs text-gray-500">KR1</div> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-600 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <div class="text-sm font-semibold">Automatizar 30% dos atendimentos</div> | |
| <div class="text-xs text-gray-500">KR2</div> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-600 h-2 rounded-full" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <div class="text-sm font-semibold">Implementar auditoria automática de 100% das interações</div> | |
| <div class="text-xs text-gray-500">KR3</div> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-600 h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="bg-primary p-4 text-white"> | |
| <h3 class="text-lg font-bold">Objetivo 2: Elevar a Experiência do Cidadão</h3> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-3"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <div class="text-sm font-semibold">Reduzir em 42% pedidos de esclarecimento sobre termos jurídicos</div> | |
| <div class="text-xs text-gray-500">KR1</div> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-600 h-2 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <div class="text-sm font-semibold">Alcançar taxa de resolução no primeiro contato de 60%</div> | |
| <div class="text-xs text-gray-500">KR2</div> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-600 h-2 rounded-full" style="width: 70%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="bg-primary p-4 text-white"> | |
| <h3 class="text-lg font-bold">Objetivo 3: Maximizar a Entrega de Valor</h3> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-3"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <div class="text-sm font-semibold">Gerar economia mensurável de R$ 2,5 milhões no primeiro ano</div> | |
| <div class="text-xs text-gray-500">KR1</div> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-600 h-2 rounded-full" style="width: 60%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <div class="text-sm font-semibold">Reduzir o custo operacional em 30%</div> | |
| <div class="text-xs text-gray-500">KR2</div> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-600 h-2 rounded-full" style="width: 55%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="bg-primary p-4 text-white"> | |
| <h3 class="text-lg font-bold">Objetivo 4: Estabelecer Novo Padrão de Inclusão Digital</h3> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-3"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <div class="text-sm font-semibold">Conformidade total com WCAG 2.1 AAA</div> | |
| <div class="text-xs text-gray-500">KR1</div> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-600 h-2 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-3"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <div class="text-sm font-semibold">Reduzir tempo médio de busca de informações em 70%</div> | |
| <div class="text-xs text-gray-500">KR2</div> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-600 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slide-footer"> | |
| <div>JurisCX - Apresentação</div> | |
| <div>Slide 8 de 10</div> | |
| </div> | |
| </div> | |
| <!-- Slide 9: Tecnologias --> | |
| <div class="slide-container"> | |
| <div class="slide-header"> | |
| <div> | |
| <h1 class="slide-title">Tecnologias</h1> | |
| <p class="slide-subtitle">Arquitetura Robusta e Escalável</p> | |
| </div> | |
| <div class="logo"> | |
| <!-- Placeholder for logo --> | |
| </div> | |
| </div> | |
| <div class="slide-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-primary mb-4">Infraestrutura</h3> | |
| <div class="flex flex-wrap mb-6"> | |
| <div class="badge badge-primary">AWS Cloud</div> | |
| <div class="badge badge-primary">Microsserviços com APIs RESTful</div> | |
| <div class="badge badge-primary">Data Warehouse Federado</div> | |
| <div class="badge badge-primary">Sistemas de Cache</div> | |
| <div class="badge badge-primary">CDN otimizada</div> | |
| </div> | |
| <h3 class="text-xl font-semibold text-primary mb-4">Inteligência Artificial</h3> | |
| <div class="flex flex-wrap mb-6"> | |
| <div class="badge badge-secondary">IA Generativa via AWS Bedrock</div> | |
| <div class="badge badge-secondary">LLMs via Hugging Face</div> | |
| <div class="badge badge-secondary">Arquitetura Multi-Agente</div> | |
| <div class="badge badge-secondary">MCP (Model Context Protocol)</div> | |
| <div class="badge badge-secondary">RAG (Retrieval-Augmented Generation)</div> | |
| </div> | |
| <h3 class="text-xl font-semibold text-primary mb-4">MLOps</h3> | |
| <div class="flex flex-wrap"> | |
| <div class="badge badge-warning">Apache Airflow</div> | |
| <div class="badge badge-warning">MLFlow</div> | |
| <div class="badge badge-warning">CI/CD com GitHub Actions</div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="mb-4"> | |
| <h3 class="text-xl font-semibold text-primary mb-4">Segurança</h3> | |
| <div class="p-4 bg-blue-50 rounded-lg"> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li><span class="font-semibold">Criptografia ponta a ponta</span> para proteção de dados em trânsito</li> | |
| <li><span class="font-semibold">Autenticação multifator</span> para todos os níveis de acesso</li> | |
| <li><span class="font-semibold">Conformidade LGPD</span> com mascaramento de dados sensíveis</li> | |
| <li><span class="font-semibold">Monitoramento contínuo</span> com alertas proativos</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-primary mb-4">Arquitetura</h3> | |
| <img src="./JurisCX - Transformando o Acesso à Justiça no Brasil - v9_files/unnamed(1).png" alt="Arquitetura JurisCX" class="rounded-lg shadow-md w-full" width="50%"> | |
| <div class="bg-white bg-opacity-90 p-3 rounded shadow-sm text-sm border border-blue-200 mt-2"> | |
| <strong>Diagrama técnico da arquitetura</strong><br> | |
| Diagrama técnico que ilustra a infraestrutura completa da plataforma JurisCX: | |
| <ul class="list-disc pl-4 mt-1"> | |
| <li>Infraestrutura em nuvem (AWS) com serviços como ECS, S3, RDS, Lambda, Bedrock</li> | |
| <li>Microsserviços com APIs RESTful organizados por módulos da plataforma</li> | |
| <li>Data Warehouse federado com camadas (Bronze, Prata, Ouro)</li> | |
| <li>Componentes de IA/ML com arquitetura multi-agente e MCP</li> | |
| <li>Elementos de segurança: criptografia, autenticação, compliance LGPD</li> | |
| </ul></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slide-footer"> | |
| <div>JurisCX - Apresentação</div> | |
| <div>Slide 9 de 10</div> | |
| </div> | |
| </div> | |
| <!-- Slide 10: Conclusão --> | |
| <div class="slide-container"> | |
| <div class="slide-header"> | |
| <div> | |
| <h1 class="slide-title">Conclusão</h1> | |
| <p class="slide-subtitle">Prontos para Transformar</p> | |
| </div> | |
| <div class="logo"> | |
| <!-- Placeholder for logo --> | |
| </div> | |
| </div> | |
| <div class="slide-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="text-xl font-semibold text-primary mb-4">Impacto Imediato</h3> | |
| <div class="p-4 bg-blue-50 rounded-lg mb-6"> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li>Redução no tempo de atendimento</li> | |
| <li>Democratização do conhecimento jurídico</li> | |
| <li>Economia de recursos públicos</li> | |
| <li>Melhoria na experiência do cidadão</li> | |
| </ul> | |
| </div> | |
| <h3 class="text-xl font-semibold text-primary mb-4">Valores Norteadores</h3> | |
| <div class="flex flex-wrap mb-6"> | |
| <div class="badge badge-primary">Inovação</div> | |
| <div class="badge badge-primary">Democratização</div> | |
| <div class="badge badge-primary">Inclusão</div> | |
| <div class="badge badge-primary">Eficiência</div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-primary mb-4">Próximos Passos</h3> | |
| <div class="timeline"> | |
| <div class="timeline-item"> | |
| <div class="timeline-header">Workshop Detalhado</div> | |
| <div class="timeline-content"> | |
| Sessão de trabalho com a equipe do CNJ para alinhamento e detalhamento do plano de implementação. | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-header">Piloto em Escala Controlada</div> | |
| <div class="timeline-content"> | |
| Implementação inicial em escopo reduzido para validação e ajustes. | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-header">Expansão Faseada</div> | |
| <div class="timeline-content"> | |
| Ampliação gradual com base nos resultados e aprendizados do piloto. | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-header">Ecossistema de Inovação</div> | |
| <div class="timeline-content"> | |
| Desenvolvimento da comunidade open source e integração com parceiros. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 p-6 bg-primary bg-opacity-10 rounded-lg text-center"> | |
| <p class="text-lg font-semibold text-primary"> | |
| Estamos prontos para construir juntos um judiciário mais acessível, eficiente e humano. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="slide-footer"> | |
| <div>JurisCX - Apresentação</div> | |
| <div>Slide 10 de 10</div> | |
| </div> | |
| </div> | |
| <script> | |
| // Chart.js scripts | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Volume Chart | |
| const volumeCtx = document.getElementById('volumeChart').getContext('2d'); | |
| const volumeChart = new Chart(volumeCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai'], | |
| datasets: [{ | |
| label: 'Total de Atendimentos', | |
| data: [18500, 19200, 22800, 25400, 27600], | |
| borderColor: '#1a365d', | |
| backgroundColor: 'rgba(26, 54, 93, 0.1)', | |
| tension: 0.4, | |
| fill: true | |
| }, { | |
| label: 'Resolvidos em 1º Contato', | |
| data: [9250, 10560, 13680, 17780, 20976], | |
| borderColor: '#10b981', | |
| backgroundColor: 'rgba(16, 185, 129, 0.1)', | |
| tension: 0.4, | |
| fill: true | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| }, | |
| tooltip: { | |
| mode: 'index', | |
| intersect: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true | |
| } | |
| } | |
| } | |
| }); | |
| // Channels Chart | |
| const channelsCtx = document.getElementById('channelsChart').getContext('2d'); | |
| const channelsChart = new Chart(channelsCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['WhatsApp', 'Portal', 'Aplicativo', 'E-mail', 'Presencial'], | |
| datasets: [{ | |
| label: 'Distribuição por Canal', | |
| data: [42, 28, 15, 10, 5], | |
| backgroundColor: [ | |
| '#1a365d', | |
| '#3c82f6', | |
| '#10b981', | |
| '#f97316', | |
| '#8b5cf6' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| -l-4 border-red-600"> | |
| <div class="font-bold mb-1">Termos incompreensíveis</div> | |
| <div class="text-sm">"Para interpor recurso contra a decisão interlocutória, o peticionante deverá observar o prazo de 15 dias previsto no art. 1.003, § 5º do CPC."</div> | |
| </div> | |
| <div class="mb-4 p-3 bg-red-50 rounded border-l-4 border-red-600"> | |
| <div class="font-bold mb-1">Erros frequentes</div> | |
| <div class="text-sm"> | |
| <img src="/api/placeholder/400/100" alt="Erro do sistema" class="rounded w-full mb-2" /> | |
| "Serviço temporariamente indisponível. Por favor, tente novamente mais tarde." | |
| </div> | |
| </div> | |
| <div class="mb-4 p-3 bg-red-50 rounded border</script></body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment