|
|
<!DOCTYPE html> |
|
|
<html lang="pt-br"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Calculadora de ROI para IA Jurídica</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> |
|
|
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script> |
|
|
<style> |
|
|
.custom-shadow { |
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); |
|
|
} |
|
|
.result-positive { |
|
|
color: #10B981; |
|
|
font-weight: 600; |
|
|
} |
|
|
.result-negative { |
|
|
color: #EF4444; |
|
|
font-weight: 600; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
<div class="container mx-auto px-4 py-12 max-w-4xl"> |
|
|
|
|
|
<header class="text-center mb-12" data-aos="fade-down"> |
|
|
<h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4"> |
|
|
<i data-feather="calculator" class="inline mr-3"></i> |
|
|
Calculadora Simplificada de ROI para IA Jurídica |
|
|
</h1> |
|
|
<p class="text-gray-600 max-w-3xl mx-auto"> |
|
|
Ferramenta para quantificar os ganhos financeiros obtidos com a adoção de Inteligência Artificial no setor jurídico |
|
|
</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl p-6 md:p-8 custom-shadow mb-12" data-aos="fade-up"> |
|
|
<p class="text-gray-700 mb-6"> |
|
|
Esta calculadora ajuda a mensurar o Retorno sobre Investimento em IA Jurídica, transformando benefícios mensuráveis em indicadores precisos. |
|
|
</p> |
|
|
|
|
|
<form id="roi-form" class="space-y-6"> |
|
|
|
|
|
<div class="space-y-2"> |
|
|
<label for="investmentCost" class="block text-sm font-medium text-gray-700"> |
|
|
Custo Total do Investimento em IA |
|
|
</label> |
|
|
<div class="relative"> |
|
|
<span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500"> |
|
|
R$ |
|
|
</span> |
|
|
<input type="number" id="investmentCost" name="investmentCost" step="0.01" required |
|
|
class="pl-8 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-4 border"> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500">(Ex: Licenças, treinamento, implementação)</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-2"> |
|
|
<label for="hoursSaved" class="block text-sm font-medium text-gray-700"> |
|
|
Total de Horas Economizadas pela IA |
|
|
</label> |
|
|
<div class="relative"> |
|
|
<input type="number" id="hoursSaved" name="hoursSaved" required |
|
|
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-4 border"> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500">(Mensal/Anual)</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-2"> |
|
|
<label for="billableRate" class="block text-sm font-medium text-gray-700"> |
|
|
Taxa Horária Média Faturável |
|
|
</label> |
|
|
<div class="relative"> |
|
|
<span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500"> |
|
|
R$ |
|
|
</span> |
|
|
<input type="number" id="billableRate" name="billableRate" step="0.01" required |
|
|
class="pl-8 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-4 border"> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500">(Valor médio cobrado por hora de serviço)</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-2"> |
|
|
<label for="directCostSavings" class="block text-sm font-medium text-gray-700"> |
|
|
Economia de Custos Direta |
|
|
</label> |
|
|
<div class="relative"> |
|
|
<span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500"> |
|
|
R$ |
|
|
</span> |
|
|
<input type="number" id="directCostSavings" name="directCostSavings" step="0.01" required |
|
|
class="pl-8 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-4 border"> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500">(Redução de despesas com fornecedores, erros de faturamento)</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-2"> |
|
|
<label for="revenueIncrease" class="block text-sm font-medium text-gray-700"> |
|
|
Aumento de Receita |
|
|
</label> |
|
|
<div class="relative"> |
|
|
<span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500"> |
|
|
R$ |
|
|
</span> |
|
|
<input type="number" id="revenueIncrease" name="revenueIncrease" step="0.01" required |
|
|
class="pl-8 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-4 border"> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500">(Maior capacidade de casos, novos negócios)</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<button type="button" onclick="calculateROI()" |
|
|
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition duration-200 flex items-center justify-center"> |
|
|
<i data-feather="refresh-cw" class="mr-2"></i> |
|
|
Calcular ROI |
|
|
</button> |
|
|
</form> |
|
|
|
|
|
|
|
|
<div id="result" class="hidden mt-6 p-4 rounded-md bg-gray-50 border border-gray-200 text-center text-xl" data-aos="fade-up"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl p-6 md:p-8 custom-shadow" data-aos="fade-up"> |
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> |
|
|
<i data-feather="info" class="mr-3"></i> |
|
|
Como Esta Calculadora Funciona |
|
|
</h2> |
|
|
|
|
|
<p class="text-gray-700 mb-4"> |
|
|
Esta calculadora utiliza a fórmula fundamental do ROI: |
|
|
<code class="bg-gray-100 px-2 py-1 rounded">ROI = ((Benefícios Totais - Custo do Investimento) / Custo do Investimento) * 100</code> |
|
|
</p> |
|
|
|
|
|
<div class="space-y-4 text-gray-700"> |
|
|
<div> |
|
|
<h3 class="font-semibold text-gray-800 mb-2">Componentes da Cálculo:</h3> |
|
|
<ul class="list-disc pl-5 space-y-2"> |
|
|
<li> |
|
|
<span class="font-medium">Custo Total do Investimento em IA:</span> |
|
|
Valor total gasto na aquisição e implementação da tecnologia. |
|
|
</li> |
|
|
<li> |
|
|
<span class="font-medium">Benefícios Totais (soma de):</span> |
|
|
<ul class="list-disc pl-5 mt-1 space-y-1"> |
|
|
<li> |
|
|
<span class="font-medium">Valor das Horas Economizadas:</span> |
|
|
Horas economizadas × taxa horária faturável. |
|
|
</li> |
|
|
<li> |
|
|
<span class="font-medium">Economia de Custos Direta:</span> |
|
|
Redução em despesas operacionais. |
|
|
</li> |
|
|
<li> |
|
|
<span class="font-medium">Aumento de Receita:</span> |
|
|
Crescimento financeiro derivado da maior eficiência. |
|
|
</li> |
|
|
</ul> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="font-semibold text-gray-800 mb-2">Interpretação dos Resultados:</h3> |
|
|
<p> |
|
|
O resultado em porcentagem indica o retorno financeiro do investimento em IA jurídica: |
|
|
</p> |
|
|
<ul class="list-disc pl-5 mt-1 space-y-1"> |
|
|
<li><span class="font-medium">ROI positivo:</span> Benefícios superam os custos</li> |
|
|
<li><span class="font-medium">ROI negativo:</span> Investimento ainda não se pagou</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4"> |
|
|
<h3 class="font-semibold text-gray-800 mb-1"> |
|
|
<i data-feather="alert-triangle" class="inline mr-2"></i> |
|
|
Considerações Importantes: |
|
|
</h3> |
|
|
<p> |
|
|
Esta ferramenta fornece uma estimativa simplificada. Lembre-se de considerar também benefícios intangíveis como maior precisão, redução de riscos e melhoria da experiência do cliente. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl p-6 md:p-8 custom-shadow mt-8" data-aos="fade-up"> |
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> |
|
|
<i data-feather="book-open" class="mr-3"></i> |
|
|
Glossário de Termos |
|
|
</h2> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="space-y-3"> |
|
|
<h3 class="font-semibold text-gray-800">A</h3> |
|
|
<div class="pl-4"> |
|
|
<p class="font-medium">Automação Jurídica:</p> |
|
|
<p class="text-gray-600 text-sm">Uso de tecnologia para realizar tarefas jurídicas repetitivas que antes exigiam intervenção humana.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-3"> |
|
|
<h3 class="font-semibold text-gray-800">C</h3> |
|
|
<div class="pl-4"> |
|
|
<p class="font-medium">Chatbots Jurídicos:</p> |
|
|
<p class="text-gray-600 text-sm">Assistentes virtuais baseados em IA que interagem com clientes para responder perguntas jurídicas básicas.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-3"> |
|
|
<h3 class="font-semibold text-gray-800">E</h3> |
|
|
<div class="pl-4"> |
|
|
<p class="font-medium">Eficiência Processual:</p> |
|
|
<p class="text-gray-600 text-sm">Ganho de produtividade na análise e processamento de documentos e processos jurídicos.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-3"> |
|
|
<h3 class="font-semibold text-gray-800">I</h3> |
|
|
<div class="pl-4"> |
|
|
<p class="font-medium">IA Generativa:</p> |
|
|
<p class="text-gray-600 text-sm">Tecnologia capaz de gerar documentos jurídicos, contratos e peças processuais com base em parâmetros definidos.</p> |
|
|
</div> |
|
|
<div class="pl-4"> |
|
|
<p class="font-medium">Inteligência Artificial Jurídica:</p> |
|
|
<p class="text-gray-600 text-sm">Aplicação de algoritmos de machine learning e processamento de linguagem natural em tarefas do domínio do Direito.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-3"> |
|
|
<h3 class="font-semibold text-gray-800">R</h3> |
|
|
<div class="pl-4"> |
|
|
<p class="font-medium">ROI (Retorno sobre Investimento):</p> |
|
|
<p class="text-gray-600 text-sm">Métrica financeira que avalia a eficiência de um investimento comparando seus benefícios líquidos com seu custo.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-3"> |
|
|
<h3 class="font-semibold text-gray-800">T</h3> |
|
|
<div class="pl-4"> |
|
|
<p class="font-medium">Taxa Horária Faturável:</p> |
|
|
<p class="text-gray-600 text-sm">Valor cobrado por hora de trabalho jurídico que pode ser diretamente atribuído a um cliente.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
AOS.init({ |
|
|
duration: 800, |
|
|
once: true |
|
|
}); |
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
function calculateROI() { |
|
|
|
|
|
const investmentCost = parseFloat(document.getElementById('investmentCost').value); |
|
|
const hoursSaved = parseFloat(document.getElementById('hoursSaved').value); |
|
|
const billableRate = parseFloat(document.getElementById('billableRate').value); |
|
|
const directCostSavings = parseFloat(document.getElementById('directCostSavings').value); |
|
|
const revenueIncrease = parseFloat(document.getElementById('revenueIncrease').value); |
|
|
|
|
|
|
|
|
const inputs = document.querySelectorAll('input[required]'); |
|
|
let isValid = true; |
|
|
|
|
|
inputs.forEach(input => { |
|
|
if (!input.value || isNaN(parseFloat(input.value)) || parseFloat(input.value) < 0) { |
|
|
input.classList.add('border-red-500'); |
|
|
isValid = false; |
|
|
} else { |
|
|
input.classList.remove('border-red-500'); |
|
|
} |
|
|
}); |
|
|
|
|
|
if (!isValid || investmentCost <= 0) { |
|
|
alert('Por favor, preencha todos os campos corretamente com valores válidos e positivos.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const valueFromHoursSaved = hoursSaved * billableRate; |
|
|
const totalBenefits = valueFromHoursSaved + directCostSavings + revenueIncrease; |
|
|
const roi = ((totalBenefits - investmentCost) / investmentCost) * 100; |
|
|
|
|
|
|
|
|
const resultDiv = document.getElementById('result'); |
|
|
resultDiv.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
resultDiv.innerHTML = ''; |
|
|
const roiFormatted = roi.toFixed(2); |
|
|
const resultText = document.createElement('div'); |
|
|
|
|
|
if (roi >= 0) { |
|
|
resultDiv.classList.remove('result-negative'); |
|
|
resultDiv.classList.add('result-positive'); |
|
|
resultText.innerHTML = ` |
|
|
<i data-feather="trending-up" class="text-green-500 mr-2 inline"></i> |
|
|
<strong class="text-xl">ROI Positivo:</strong> ${roiFormatted}% |
|
|
`; |
|
|
} else { |
|
|
resultDiv.classList.remove('result-positive'); |
|
|
resultDiv.classList.add('result-negative'); |
|
|
resultText.innerHTML = ` |
|
|
<i data-feather="trending-down" class="text-red-500 mr-2 inline"></i> |
|
|
<strong class="text-xl">ROI Negativo:</strong> ${roiFormatted}% |
|
|
`; |
|
|
} |
|
|
|
|
|
resultDiv.appendChild(resultText); |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
const details = document.createElement('div'); |
|
|
details.className = 'mt-4 text-sm text-gray-600 border-t pt-3'; |
|
|
details.innerHTML = ` |
|
|
<p class="mb-1"><span class="font-medium">Custo do Investimento:</span> R$${investmentCost.toFixed(2)}</p> |
|
|
<p class="mb-1"><span class="font-medium">Total de Benefícios:</span> R$${totalBenefits.toFixed(2)}</p> |
|
|
<p><span class="font-medium">Valor Líquido:</span> R$${(totalBenefits - investmentCost).toFixed(2)}</p> |
|
|
`; |
|
|
resultDiv.appendChild(details); |
|
|
|
|
|
|
|
|
resultDiv.scrollIntoView({ behavior: 'smooth' }); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
