Spaces:

xlorfx
/

ai-security-auditor

Running

App Files Files Community

ai-security-auditor / index.html

xlorfx

Add 1 files

d89ce23 verified about 1 month ago

raw

history blame contribute delete

77.9 kB

	<!DOCTYPE html>
	<html lang="pt-BR">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AI App Inspector \| Análise Profissional de Aplicações IA</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>
	.gradient-bg {
	background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
	}
	.dashboard-bg {
	background-color: #f8fafc;
	}
	.sidebar-bg {
	background-color: #1e293b;
	}
	.integration-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);
	}
	.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); }
	}
	.code-block {
	font-family: 'Courier New', Courier, monospace;
	background-color: #1e293b;
	color: #f8fafc;
	border-radius: 0.5rem;
	}
	.plan-card:hover {
	transform: scale(1.03);
	}
	.tier-pro {
	border: 2px solid #8b5cf6;
	}
	.tier-enterprise {
	border: 2px solid #10b981;
	}
	.app-score {
	position: relative;
	height: 120px;
	width: 120px;
	}
	.app-score-circle {
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	}
	.integration-badge {
	position: absolute;
	top: -8px;
	right: -8px;
	background: white;
	border-radius: 50%;
	padding: 4px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	}
	</style>
	</head>
	<body class="bg-gray-50 min-h-screen">
	<!-- Public Landing Page -->
	<div id="landingPage">
	<!-- Header -->
	<header class="gradient-bg text-white shadow-lg">
	<div class="container mx-auto px-4 py-4">
	<div class="flex justify-between items-center">
	<div class="flex items-center space-x-2">
	<i class="fas fa-search-chart text-3xl"></i>
	<h1 class="text-2xl font-bold">AI App Inspector</h1>
	</div>
	<nav class="hidden md:flex space-x-6 items-center">
	<a href="#features" class="hover:text-blue-200 transition">Recursos</a>
	<a href="#integrations" class="hover:text-blue-200 transition">Integrações</a>
	<a href="#pricing" class="hover:text-blue-200 transition">Planos</a>
	<a href="#contact" class="hover:text-blue-200 transition">Contato</a>
	<a href="#" id="loginBtn" class="hover:text-blue-200 transition">Login</a>
	<a href="#" id="signupBtn" class="bg-white text-blue-800 hover:bg-blue-100 px-4 py-2 rounded-lg font-medium transition">Comece Agora</a>
	</nav>
	<button class="md:hidden text-2xl">
	<i class="fas fa-bars"></i>
	</button>
	</div>
	</div>
	</header>

	<!-- Hero Section -->
	<section class="gradient-bg text-white py-20">
	<div class="container mx-auto px-4 text-center">
	<h2 class="text-4xl md:text-5xl font-bold mb-6">Análise Profissional para suas Aplicações IA</h2>
	<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">
	Plataforma completa para monitorar, analisar e otimizar aplicações desenvolvidas em plataformas de IA como Lovable, Base44, Studio Firebase e Vercel AI.
	</p>
	<div class="flex flex-col md:flex-row justify-center gap-4">
	<button id="startFreeTrial" class="bg-white text-blue-800 hover:bg-blue-100 font-bold py-3 px-8 rounded-full text-lg transition-all transform hover:scale-105 pulse-animation">
	<i class="fas fa-rocket mr-2"></i> Teste Grátis por 14 dias
	</button>
	<button class="border-2 border-white hover:bg-white hover:text-blue-800 font-bold py-3 px-8 rounded-full text-lg transition">
	<i class="fas fa-play-circle mr-2"></i> Ver Demonstração
	</button>
	</div>
	<div class="mt-10 flex justify-center">
	<div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 max-w-4xl">
	<div class="flex items-center justify-center space-x-4">
	<img src="https://via.placeholder.com/40" alt="Company Logo" class="h-10 rounded-full">
	<p class="text-sm md:text-base">"O AI App Inspector nos ajudou a reduzir custos em 35% e melhorar o desempenho em 60% em nossas aplicações IA"</p>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Trusted By Section -->
	<section class="py-12 bg-white">
	<div class="container mx-auto px-4">
	<p class="text-center text-gray-500 mb-8">INTEGRAÇÃO COM AS PRINCIPAIS PLATAFORMAS DE IA</p>
	<div class="grid grid-cols-2 md:grid-cols-5 gap-8 items-center justify-center">
	<img src="https://via.placeholder.com/150x50?text=Lovable" alt="Lovable" class="h-10 opacity-80 mx-auto">
	<img src="https://via.placeholder.com/150x50?text=Base44" alt="Base44" class="h-10 opacity-80 mx-auto">
	<img src="https://via.placeholder.com/150x50?text=Firebase" alt="Studio Firebase" class="h-10 opacity-80 mx-auto">
	<img src="https://via.placeholder.com/150x50?text=Vercel+AI" alt="Vercel AI" class="h-10 opacity-80 mx-auto">
	<img src="https://via.placeholder.com/150x50?text=More" alt="E mais..." class="h-8 opacity-80 mx-auto">
	</div>
	</div>
	</section>

	<!-- Features Section -->
	<section id="features" class="py-16 bg-gray-50">
	<div class="container mx-auto px-4">
	<h2 class="text-3xl font-bold text-center mb-4">Análises Completa de Aplicações IA</h2>
	<p class="text-xl text-center text-gray-600 mb-12 max-w-3xl mx-auto">Tudo que você precisa para monitorar e otimizar suas aplicações desenvolvidas em plataformas de IA</p>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
	<!-- Feature 1 -->
	<div class="integration-card bg-white p-8 rounded-xl shadow-md transition duration-300">
	<div class="text-blue-600 mb-4">
	<i class="fas fa-tachometer-alt text-4xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-3">Monitoramento em Tempo Real</h3>
	<p class="text-gray-600 mb-4">
	Acompanhe o desempenho, latência e custos de suas aplicações IA 24/7 com alertas personalizados.
	</p>
	<ul class="text-gray-600 space-y-2">
	<li class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-2"></i>
	Métricas de desempenho em tempo real
	</li>
	<li class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-2"></i>
	Alertas por email/SMS/Webhook
	</li>
	<li class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-2"></i>
	Histórico completo de métricas
	</li>
	</ul>
	</div>

	<!-- Feature 2 -->
	<div class="integration-card bg-white p-8 rounded-xl shadow-md transition duration-300">
	<div class="text-purple-600 mb-4">
	<i class="fas fa-chart-line text-4xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-3">Otimização de Custos</h3>
	<p class="text-gray-600 mb-4">
	Identifique oportunidades para reduzir custos em suas aplicações IA sem sacrificar desempenho.
	</p>
	<ul class="text-gray-600 space-y-2">
	<li class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-2"></i>
	Análise de custo por requisição
	</li>
	<li class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-2"></i>
	Recomendações de otimização
	</li>
	<li class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-2"></i>
	Previsão de custos futuros
	</li>
	</ul>
	</div>

	<!-- Feature 3 -->
	<div class="integration-card bg-white p-8 rounded-xl shadow-md transition duration-300">
	<div class="text-green-600 mb-4">
	<i class="fas fa-brain text-4xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-3">Qualidade de Respostas</h3>
	<p class="text-gray-600 mb-4">
	Avalie a qualidade, relevância e consistência das respostas geradas por suas aplicações IA.
	</p>
	<ul class="text-gray-600 space-y-2">
	<li class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-2"></i>
	Análise semântica de respostas
	</li>
	<li class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-2"></i>
	Detecção de viés e toxicidade
	</li>
	<li class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-2"></i>
	Benchmarking contra concorrentes
	</li>
	</ul>
	</div>

	<!-- Feature 4 -->
	<div class="integration-card bg-white p-8 rounded-xl shadow-md transition duration-300">
	<div class="text-red-600 mb-4">
	<i class="fas fa-project-diagram text-4xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-3">Integração Contínua</h3>
	<p class="text-gray-600 mb-4">
	Conecte-se facilmente com Lovable, Base44, Studio Firebase, Vercel AI e outras plataformas.
	</p>
	<ul class="text-gray-600 space-y-2">
	<li class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-2"></i>
	Configuração em poucos minutos
	</li>
	<li class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-2"></i>
	Suporte a API e Webhooks
	</li>
	<li class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-2"></i>
	Sincronização automática
	</li>
	</ul>
	</div>

	<!-- Feature 5 -->
	<div class="integration-card bg-white p-8 rounded-xl shadow-md transition duration-300">
	<div class="text-yellow-600 mb-4">
	<i class="fas fa-users text-4xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-3">Análise de Usuários</h3>
	<p class="text-gray-600 mb-4">
	Entenda como os usuários interagem com suas aplicações IA e identifique pontos de melhoria.
	</p>
	<ul class="text-gray-600 space-y-2">
	<li class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-2"></i>
	Padrões de uso e comportamento
	</li>
	<li class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-2"></i>
	Taxa de satisfação do usuário
	</li>
	<li class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-2"></i>
	Segmentação de usuários
	</li>
	</ul>
	</div>

	<!-- Feature 6 -->
	<div class="integration-card bg-white p-8 rounded-xl shadow-md transition duration-300">
	<div class="text-indigo-600 mb-4">
	<i class="fas fa-file-alt text-4xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-3">Relatórios Profissionais</h3>
	<p class="text-gray-600 mb-4">
	Gere relatórios completos para compartilhar com stakeholders e equipes de desenvolvimento.
	</p>
	<ul class="text-gray-600 space-y-2">
	<li class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-2"></i>
	Exportação em PDF/CSV
	</li>
	<li class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-2"></i>
	Dashboards personalizáveis
	</li>
	<li class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-2"></i>
	Agendamento automático
	</li>
	</ul>
	</div>
	</div>
	</div>
	</section>

	<!-- Integrations Section -->
	<section id="integrations" class="py-16 bg-white">
	<div class="container mx-auto px-4">
	<h2 class="text-3xl font-bold text-center mb-4">Integrações com Plataformas de IA</h2>
	<p class="text-xl text-center text-gray-600 mb-12 max-w-3xl mx-auto">Conecte-se facilmente com as principais plataformas de desenvolvimento de aplicações IA</p>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
	<!-- Lovable -->
	<div class="integration-card bg-white p-6 rounded-xl shadow-md border border-gray-100 transition duration-300 relative">
	<div class="integration-badge">
	<img src="https://via.placeholder.com/24?text=L" alt="Lovable" class="h-6 w-6 rounded-full">
	</div>
	<div class="flex items-center mb-4">
	<img src="https://via.placeholder.com/40?text=L" alt="Lovable" class="h-10 w-10 rounded-full mr-3">
	<h3 class="text-lg font-bold">Lovable</h3>
	</div>
	<p class="text-gray-600 mb-4 text-sm">
	Análise completa de aplicações desenvolvidas na plataforma Lovable AI.
	</p>
	<div class="flex flex-wrap gap-2 mb-4">
	<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Desempenho</span>
	<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Custos</span>
	<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Qualidade</span>
	</div>
	<button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 text-sm font-medium py-2 px-4 rounded transition">
	Conectar Conta
	</button>
	</div>

	<!-- Base44 -->
	<div class="integration-card bg-white p-6 rounded-xl shadow-md border border-gray-100 transition duration-300 relative">
	<div class="integration-badge">
	<img src="https://via.placeholder.com/24?text=B" alt="Base44" class="h-6 w-6 rounded-full">
	</div>
	<div class="flex items-center mb-4">
	<img src="https://via.placeholder.com/40?text=B" alt="Base44" class="h-10 w-10 rounded-full mr-3">
	<h3 class="text-lg font-bold">Base44</h3>
	</div>
	<p class="text-gray-600 mb-4 text-sm">
	Monitoramento avançado para aplicações construídas com Base44.
	</p>
	<div class="flex flex-wrap gap-2 mb-4">
	<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Latência</span>
	<span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Uso</span>
	<span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Erros</span>
	</div>
	<button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 text-sm font-medium py-2 px-4 rounded transition">
	Conectar Conta
	</button>
	</div>

	<!-- Studio Firebase -->
	<div class="integration-card bg-white p-6 rounded-xl shadow-md border border-gray-100 transition duration-300 relative">
	<div class="integration-badge">
	<img src="https://via.placeholder.com/24?text=F" alt="Firebase" class="h-6 w-6 rounded-full">
	</div>
	<div class="flex items-center mb-4">
	<img src="https://via.placeholder.com/40?text=F" alt="Firebase" class="h-10 w-10 rounded-full mr-3">
	<h3 class="text-lg font-bold">Studio Firebase</h3>
	</div>
	<p class="text-gray-600 mb-4 text-sm">
	Análise detalhada de aplicações IA desenvolvidas no Firebase Studio.
	</p>
	<div class="flex flex-wrap gap-2 mb-4">
	<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Modelos</span>
	<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Dados</span>
	<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Custos</span>
	</div>
	<button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 text-sm font-medium py-2 px-4 rounded transition">
	Conectar Conta
	</button>
	</div>

	<!-- Vercel AI -->
	<div class="integration-card bg-white p-6 rounded-xl shadow-md border border-gray-100 transition duration-300 relative">
	<div class="integration-badge">
	<img src="https://via.placeholder.com/24?text=V" alt="Vercel" class="h-6 w-6 rounded-full">
	</div>
	<div class="flex items-center mb-4">
	<img src="https://via.placeholder.com/40?text=V" alt="Vercel" class="h-10 w-10 rounded-full mr-3">
	<h3 class="text-lg font-bold">Vercel AI</h3>
	</div>
	<p class="text-gray-600 mb-4 text-sm">
	Monitoramento completo para aplicações implantadas no Vercel AI.
	</p>
	<div class="flex flex-wrap gap-2 mb-4">
	<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Edge</span>
	<span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Performance</span>
	<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Scale</span>
	</div>
	<button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 text-sm font-medium py-2 px-4 rounded transition">
	Conectar Conta
	</button>
	</div>
	</div>

	<div class="mt-12 text-center">
	<button class="bg-white border-2 border-blue-600 text-blue-600 hover:bg-blue-50 font-bold py-3 px-8 rounded-lg transition">
	<i class="fas fa-plus mr-2"></i> Ver Todas as Integrações
	</button>
	</div>
	</div>
	</section>

	<!-- Demo Video Section -->
	<section class="py-16 bg-gray-50">
	<div class="container mx-auto px-4">
	<div class="bg-gray-900 rounded-xl overflow-hidden">
	<div class="flex flex-col md:flex-row">
	<div class="md:w-1/2 p-8 md:p-12 text-white">
	<h2 class="text-3xl font-bold mb-4">Veja o AI App Inspector em Ação</h2>
	<p class="text-xl text-gray-300 mb-6">
	Analisando uma aplicação real desenvolvida no Lovable com recomendações de otimização.
	</p>
	<ul class="space-y-3 text-gray-300">
	<li class="flex items-center">
	<i class="fas fa-play-circle text-blue-400 mr-3"></i>
	Análise de desempenho em tempo real
	</li>
	<li class="flex items-center">
	<i class="fas fa-play-circle text-blue-400 mr-3"></i>
	Detecção de gargalos de custo
	</li>
	<li class="flex items-center">
	<i class="fas fa-play-circle text-blue-400 mr-3"></i>
	Comparativo entre plataformas
	</li>
	</ul>
	<button class="mt-8 bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition flex items-center">
	<i class="fas fa-play mr-2"></i> Assistir Demonstração Completa
	</button>
	</div>
	<div class="md:w-1/2 bg-gray-800 flex items-center justify-center p-8">
	<div class="relative w-full h-64 md:h-full">
	<div class="absolute inset-0 bg-gray-700 rounded-lg flex items-center justify-center">
	<i class="fas fa-play-circle text-5xl text-blue-400"></i>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Pricing Section -->
	<section id="pricing" class="py-16 bg-white">
	<div class="container mx-auto px-4">
	<h2 class="text-3xl font-bold text-center mb-4">Planos para Todos os Tamanhos</h2>
	<p class="text-xl text-center text-gray-600 mb-12 max-w-3xl mx-auto">Escolha o plano que melhor atende sua equipe e escala conforme suas necessidades</p>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
	<!-- Basic Plan -->
	<div class="plan-card bg-white p-8 rounded-xl shadow-md border border-gray-200 transition duration-300">
	<h3 class="text-xl font-bold mb-2">Starter</h3>
	<p class="text-gray-600 mb-6">Ideal para desenvolvedores individuais e pequenos projetos</p>
	<div class="mb-6">
	<span class="text-4xl font-bold">R$149</span>
	<span class="text-gray-600">/mês</span>
	</div>
	<ul class="space-y-3 mb-8">
	<li class="flex items-center">
	<i class="fas fa-check text-green-500 mr-2"></i>
	Até 3 aplicações
	</li>
	<li class="flex items-center">
	<i class="fas fa-check text-green-500 mr-2"></i>
	10.000 análises/mês
	</li>
	<li class="flex items-center">
	<i class="fas fa-check text-green-500 mr-2"></i>
	1 plataforma de IA
	</li>
	<li class="flex items-center">
	<i class="fas fa-check text-green-500 mr-2"></i>
	Relatórios básicos
	</li>
	<li class="flex items-center text-gray-400">
	<i class="fas fa-times text-red-400 mr-2"></i>
	Suporte prioritário
	</li>
	</ul>
	<button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold py-3 px-4 rounded-lg transition">
	Começar Agora
	</button>
	</div>

	<!-- Pro Plan -->
	<div class="plan-card bg-white p-8 rounded-xl shadow-md tier-pro relative transition duration-300">
	<div class="absolute top-0 right-0 bg-blue-600 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">
	POPULAR
	</div>
	<h3 class="text-xl font-bold mb-2">Profissional</h3>
	<p class="text-gray-600 mb-6">Para equipes e projetos profissionais de IA</p>
	<div class="mb-6">
	<span class="text-4xl font-bold">R$599</span>
	<span class="text-gray-600">/mês</span>
	</div>
	<ul class="space-y-3 mb-8">
	<li class="flex items-center">
	<i class="fas fa-check text-green-500 mr-2"></i>
	Até 15 aplicações
	</li>
	<li class="flex items-center">
	<i class="fas fa-check text-green-500 mr-2"></i>
	50.000 análises/mês
	</li>
	<li class="flex items-center">
	<i class="fas fa-check text-green-500 mr-2"></i>
	3 plataformas de IA
	</li>
	<li class="flex items-center">
	<i class="fas fa-check text-green-500 mr-2"></i>
	API completa
	</li>
	<li class="flex items-center">
	<i class="fas fa-check text-green-500 mr-2"></i>
	Suporte por email 24/7
	</li>
	</ul>
	<button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition">
	Teste Grátis por 14 dias
	</button>
	</div>

	<!-- Enterprise Plan -->
	<div class="plan-card bg-white p-8 rounded-xl shadow-md tier-enterprise transition duration-300">
	<h3 class="text-xl font-bold mb-2">Empresarial</h3>
	<p class="text-gray-600 mb-6">Solução completa para grandes organizações</p>
	<div class="mb-6">
	<span class="text-4xl font-bold">Sob Consulta</span>
	</div>
	<ul class="space-y-3 mb-8">
	<li class="flex items-center">
	<i class="fas fa-check text-green-500 mr-2"></i>
	Aplicações ilimitadas
	</li>
	<li class="flex items-center">
	<i class="fas fa-check text-green-500 mr-2"></i>
	Análises ilimitadas
	</li>
	<li class="flex items-center">
	<i class="fas fa-check text-green-500 mr-2"></i>
	Plataformas ilimitadas
	</li>
	<li class="flex items-center">
	<i class="fas fa-check text-green-500 mr-2"></i>
	On-premise disponível
	</li>
	<li class="flex items-center">
	<i class="fas fa-check text-green-500 mr-2"></i>
	Suporte dedicado 24/7
	</li>
	</ul>
	<button class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg transition">
	Fale com Nossa Equipe
	</button>
	</div>
	</div>

	<div class="mt-12 bg-white rounded-xl shadow-md p-8 max-w-4xl mx-auto border border-gray-200">
	<h3 class="text-xl font-bold mb-6 text-center">Todos os planos incluem:</h3>
	<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
	<div class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-3 text-xl"></i>
	<span>Monitoramento em tempo real</span>
	</div>
	<div class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-3 text-xl"></i>
	<span>Alertas personalizáveis</span>
	</div>
	<div class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-3 text-xl"></i>
	<span>Dashboard básico</span>
	</div>
	<div class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-3 text-xl"></i>
	<span>7 dias de retenção de dados</span>
	</div>
	<div class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-3 text-xl"></i>
	<span>Suporte via chat</span>
	</div>
	<div class="flex items-center">
	<i class="fas fa-check-circle text-green-500 mr-3 text-xl"></i>
	<span>Atualizações regulares</span>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Testimonials Section -->
	<section class="py-16 bg-gray-50">
	<div class="container mx-auto px-4">
	<h2 class="text-3xl font-bold text-center mb-12">O que nossos clientes dizem</h2>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
	<!-- Testimonial 1 -->
	<div class="bg-white p-8 rounded-xl shadow-md">
	<div class="flex items-center mb-4">
	<img src="https://via.placeholder.com/50" alt="Client" class="h-12 w-12 rounded-full mr-4">
	<div>
	<h4 class="font-bold">Mariana Costa</h4>
	<p class="text-gray-600 text-sm">Engenheira de IA na TechSolutions</p>
	</div>
	</div>
	<div class="text-yellow-400 mb-4">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	</div>
	<p class="text-gray-700 mb-4">
	"O AI App Inspector nos ajudou a reduzir custos em 40% em nossas aplicações Lovable, identificando modelos subutilizados e otimizando chamadas à API."
	</p>
	<div class="flex items-center">
	<img src="https://via.placeholder.com/24?text=L" alt="Lovable" class="h-5 mr-2">
	<span class="text-sm text-gray-500">Integração com Lovable</span>
	</div>
	</div>

	<!-- Testimonial 2 -->
	<div class="bg-white p-8 rounded-xl shadow-md">
	<div class="flex items-center mb-4">
	<img src="https://via.placeholder.com/50" alt="Client" class="h-12 w-12 rounded-full mr-4">
	<div>
	<h4 class="font-bold">Ricardo Almeida</h4>
	<p class="text-gray-600 text-sm">CTO na DataMind AI</p>
	</div>
	</div>
	<div class="text-yellow-400 mb-4">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	</div>
	<p class="text-gray-700 mb-4">
	"Com a análise de qualidade do AI App Inspector, melhoramos a satisfação dos usuários em 65% em nosso chatbot desenvolvido no Base44."
	</p>
	<div class="flex items-center">
	<img src="https://via.placeholder.com/24?text=B" alt="Base44" class="h-5 mr-2">
	<span class="text-sm text-gray-500">Integração com Base44</span>
	</div>
	</div>

	<!-- Testimonial 3 -->
	<div class="bg-white p-8 rounded-xl shadow-md">
	<div class="flex items-center mb-4">
	<img src="https://via.placeholder.com/50" alt="Client" class="h-12 w-12 rounded-full mr-4">
	<div>
	<h4 class="font-bold">Fernanda Oliveira</h4>
	<p class="text-gray-600 text-sm">Líder de Produto na NeuralTech</p>
	</div>
	</div>
	<div class="text-yellow-400 mb-4">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star-half-alt"></i>
	</div>
	<p class="text-gray-700 mb-4">
	"O comparativo entre Vercel AI e Firebase nos ajudou a escolher a melhor plataforma para nosso caso de uso, economizando tempo e recursos."
	</p>
	<div class="flex items-center space-x-2">
	<img src="https://via.placeholder.com/24?text=V" alt="Vercel" class="h-5">
	<img src="https://via.placeholder.com/24?text=F" alt="Firebase" class="h-5">
	<span class="text-sm text-gray-500">Comparativo entre plataformas</span>
	</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 md:text-4xl font-bold mb-6">Pronto para otimizar suas aplicações IA?</h2>
	<p class="text-xl mb-8 max-w-3xl mx-auto">
	Comece hoje mesmo e obtenha insights valiosos sobre desempenho, custos e qualidade de suas aplicações desenvolvidas em plataformas de IA.
	</p>
	<div class="flex flex-col md:flex-row justify-center gap-4">
	<button id="startFreeTrialBottom" class="bg-white text-blue-800 hover:bg-blue-100 font-bold py-3 px-8 rounded-full text-lg transition-all transform hover:scale-105">
	<i class="fas fa-rocket mr-2"></i> Teste Grátis por 14 dias
	</button>
	<button class="border-2 border-white hover:bg-white hover:text-blue-800 font-bold py-3 px-8 rounded-full text-lg transition">
	<i class="fas fa-phone-alt mr-2"></i> Fale com um Especialista
	</button>
	</div>
	</div>
	</section>

	<!-- Contact Section -->
	<section id="contact" class="py-16 bg-white">
	<div class="container mx-auto px-4">
	<h2 class="text-3xl font-bold text-center mb-12">Entre em Contato</h2>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-5xl mx-auto">
	<div>
	<h3 class="text-xl font-bold mb-4">Informações de Contato</h3>
	<p class="text-gray-600 mb-6">
	Tem dúvidas sobre nossos produtos ou precisa de ajuda? Nossa equipe está pronta para ajudar.
	</p>

	<div class="space-y-4">
	<div class="flex items-start">
	<i class="fas fa-map-marker-alt text-blue-600 mt-1 mr-4"></i>
	<div>
	<h4 class="font-bold">Endereço</h4>
	<p class="text-gray-600">Av. Paulista, 1000 - São Paulo, SP</p>
	</div>
	</div>

	<div class="flex items-start">
	<i class="fas fa-envelope text-blue-600 mt-1 mr-4"></i>
	<div>
	<h4 class="font-bold">Email</h4>
	<p class="text-gray-600">[email protected]</p>
	</div>
	</div>

	<div class="flex items-start">
	<i class="fas fa-phone-alt text-blue-600 mt-1 mr-4"></i>
	<div>
	<h4 class="font-bold">Telefone</h4>
	<p class="text-gray-600">(11) 1234-5678</p>
	</div>
	</div>

	<div class="flex items-start">
	<i class="fas fa-clock text-blue-600 mt-1 mr-4"></i>
	<div>
	<h4 class="font-bold">Horário Comercial</h4>
	<p class="text-gray-600">Seg-Sex: 9h às 18h</p>
	</div>
	</div>
	</div>
	</div>

	<div>
	<h3 class="text-xl font-bold mb-4">Envie uma Mensagem</h3>
	<form class="space-y-4">
	<div>
	<label class="block text-gray-700 mb-2">Nome</label>
	<input type="text" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
	</div>

	<div>
	<label class="block text-gray-700 mb-2">Email</label>
	<input type="email" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
	</div>

	<div>
	<label class="block text-gray-700 mb-2">Assunto</label>
	<select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
	<option>Suporte Técnico</option>
	<option>Vendas</option>
	<option>Parcerias</option>
	<option>Outro</option>
	</select>
	</div>

	<div>
	<label class="block text-gray-700 mb-2">Mensagem</label>
	<textarea rows="4" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
	</div>

	<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition">
	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 grid-cols-1 md:grid-cols-4 gap-8">
	<div>
	<h3 class="text-xl font-bold mb-4 flex items-center">
	<i class="fas fa-search-chart mr-2"></i> AI App Inspector
	</h3>
	<p class="text-gray-400">
	A plataforma líder em análise e otimização de aplicações desenvolvidas em plataformas de IA.
	</p>
	<div class="flex space-x-4 mt-4">
	<a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-twitter"></i></a>
	<a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-linkedin"></i></a>
	<a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-github"></i></a>
	</div>
	</div>

	<div>
	<h4 class="text-lg font-semibold mb-4">Produto</h4>
	<ul class="space-y-2 text-gray-400">
	<li><a href="#" class="hover:text-white transition">Recursos</a></li>
	<li><a href="#" class="hover:text-white transition">Planos</a></li>
	<li><a href="#" class="hover:text-white transition">Demonstração</a></li>
	<li><a href="#" class="hover:text-white transition">API</a></li>
	</ul>
	</div>

	<div>
	<h4 class="text-lg font-semibold mb-4">Integrações</h4>
	<ul class="space-y-2 text-gray-400">
	<li><a href="#" class="hover:text-white transition">Lovable</a></li>
	<li><a href="#" class="hover:text-white transition">Base44</a></li>
	<li><a href="#" class="hover:text-white transition">Studio Firebase</a></li>
	<li><a href="#" class="hover:text-white transition">Vercel AI</a></li>
	</ul>
	</div>

	<div>
	<h4 class="text-lg font-semibold mb-4">Legal</h4>
	<ul class="space-y-2 text-gray-400">
	<li><a href="#" class="hover:text-white transition">Termos de Serviço</a></li>
	<li><a href="#" class="hover:text-white transition">Política de Privacidade</a></li>
	<li><a href="#" class="hover:text-white transition">Segurança</a></li>
	<li><a href="#" class="hover:text-white transition">Compliance</a></li>
	</ul>
	</div>
	</div>

	<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
	<p class="text-gray-400">
	© 2023 AI App Inspector. Todos os direitos reservados.
	</p>
	<div class="flex space-x-6 mt-4 md:mt-0">
	<a href="#" class="text-gray-400 hover:text-white transition">Termos</a>
	<a href="#" class="text-gray-400 hover:text-white transition">Privacidade</a>
	<a href="#" class="text-gray-400 hover:text-white transition">Cookies</a>
	</div>
	</div>
	</div>
	</footer>
	</div>

	<!-- Dashboard (initially hidden) -->
	<div id="dashboard" class="hidden min-h-screen">
	<!-- Sidebar -->
	<div class="sidebar-bg text-white fixed inset-y-0 left-0 w-64 overflow-y-auto">
	<div class="flex items-center justify-center h-16 px-4 border-b border-gray-700">
	<div class="flex items-center space-x-2">
	<i class="fas fa-search-chart text-2xl"></i>
	<h1 class="text-xl font-bold">AI App Inspector</h1>
	</div>
	</div>
	<div class="px-4 py-6">
	<div class="flex items-center space-x-3 bg-white/10 p-3 rounded-lg">
	<img src="https://via.placeholder.com/40" alt="User" class="h-10 rounded-full">
	<div>
	<p class="font-medium">João Silva</p>
	<p class="text-xs text-gray-400">Admin</p>
	</div>
	</div>

	<nav class="mt-8">
	<h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-4">GERAL</h3>
	<div class="space-y-1">
	<a href="#" class="dashboard-nav-item active">
	<i class="fas fa-tachometer-alt mr-3"></i>
	Dashboard
	</a>
	<a href="#" class="dashboard-nav-item">
	<i class="fas fa-robot mr-3"></i>
	Aplicações
	</a>
	<a href="#" class="dashboard-nav-item">
	<i class="fas fa-plug mr-3"></i>
	Integrações
	</a>
	<a href="#" class="dashboard-nav-item">
	<i class="fas fa-chart-bar mr-3"></i>
	Análises
	</a>
	<a href="#" class="dashboard-nav-item">
	<i class="fas fa-file-alt mr-3"></i>
	Relatórios
	</a>
	</div>

	<h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mt-8 mb-4">PLATAFORMAS</h3>
	<div class="space-y-1">
	<a href="#" class="dashboard-nav-item">
	<i class="fas fa-heart mr-3"></i>
	Lovable
	</a>
	<a href="#" class="dashboard-nav-item">
	<i class="fas fa-cube mr-3"></i>
	Base44
	</a>
	<a href="#" class="dashboard-nav-item">
	<i class="fas fa-fire mr-3"></i>
	Firebase
	</a>
	<a href="#" class="dashboard-nav-item">
	<i class="fas fa-cloud mr-3"></i>
	Vercel AI
	</a>
	</div>

	<h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mt-8 mb-4">SUPORTE</h3>
	<div class="space-y-1">
	<a href="#" class="dashboard-nav-item">
	<i class="fas fa-question-circle mr-3"></i>
	Ajuda
	</a>
	<a href="#" class="dashboard-nav-item">
	<i class="fas fa-book mr-3"></i>
	Documentação
	</a>
	<a href="#" class="dashboard-nav-item">
	<i class="fas fa-headset mr-3"></i>
	Suporte
	</a>
	</div>
	</nav>
	</div>
	</div>

	<!-- Main Content -->
	<div class="dashboard-bg ml-64 min-h-screen">
	<!-- Top Navigation -->
	<header class="bg-white shadow-sm">
	<div class="flex justify-between items-center h-16 px-6">
	<div class="flex items-center">
	<h2 class="text-lg font-medium text-gray-900">Dashboard</h2>
	</div>
	<div class="flex items-center space-x-4">
	<button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
	<i class="fas fa-bell"></i>
	</button>
	<button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
	<i class="fas fa-question-circle"></i>
	</button>
	<div class="relative">
	<button id="userMenuButton" class="flex items-center space-x-2 focus:outline-none">
	<img src="https://via.placeholder.com/32" alt="User" class="h-8 rounded-full">
	<i class="fas fa-chevron-down text-xs"></i>
	</button>
	<div id="userMenu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10">
	<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Seu Perfil</a>
	<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Configurações</a>
	<a href="#" id="logoutBtn" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sair</a>
	</div>
	</div>
	</div>
	</div>
	</header>

	<!-- Dashboard Content -->
	<main class="p-6">
	<div class="mb-6">
	<h3 class="text-lg font-medium text-gray-900">Visão Geral das Aplicações</h3>
	<p class="text-sm text-gray-500">Resumo do status de suas aplicações IA conectadas</p>
	</div>

	<!-- Stats Cards -->
	<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
	<div class="bg-white p-6 rounded-lg shadow">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-sm font-medium text-gray-500">Aplicações Conectadas</p>
	<p class="text-2xl font-semibold text-gray-900">5</p>
	</div>
	<div class="p-3 rounded-full bg-blue-100 text-blue-600">
	<i class="fas fa-plug"></i>
	</div>
	</div>
	<div class="mt-4">
	<div class="flex items-center justify-between text-sm">
	<span class="text-green-600 font-medium">+2</span>
	<span>desde o último mês</span>
	</div>
	</div>
	</div>

	<div class="bg-white p-6 rounded-lg shadow">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-sm font-medium text-gray-500">Plataformas</p>
	<p class="text-2xl font-semibold text-gray-900">3</p>
	</div>
	<div class="p-3 rounded-full bg-purple-100 text-purple-600">
	<i class="fas fa-cloud"></i>
	</div>
	</div>
	<div class="mt-4">
	<div class="flex items-center justify-between text-sm">
	<span class="text-green-600 font-medium">+1</span>
	<span>desde a semana passada</span>
	</div>
	</div>
	</div>

	<div class="bg-white p-6 rounded-lg shadow">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-sm font-medium text-gray-500">Custo Médio</p>
	<p class="text-2xl font-semibold text-gray-900">R$ 1.245</p>
	</div>
	<div class="p-3 rounded-full bg-green-100 text-green-600">
	<i class="fas fa-dollar-sign"></i>
	</div>
	</div>
	<div class="mt-4">
	<div class="flex items-center justify-between text-sm">
	<span class="text-red-600 font-medium">-12%</span>
	<span>vs último mês</span>
	</div>
	</div>
	</div>

	<div class="bg-white p-6 rounded-lg shadow">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-sm font-medium text-gray-500">Satisfação</p>
	<p class="text-2xl font-semibold text-gray-900">84/100</p>
	</div>
	<div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
	<i class="fas fa-smile"></i>
	</div>
	</div>
	<div class="mt-4">
	<div class="flex items-center justify-between text-sm">
	<span class="text-green-600 font-medium">+8</span>
	<span>pontos desde ontem</span>
	</div>
	</div>
	</div>
	</div>

	<!-- Connected Apps -->
	<div class="bg-white p-6 rounded-lg shadow mb-8">
	<div class="flex items-center justify-between mb-6">
	<div>
	<h4 class="text-lg font-medium text-gray-900">Aplicações Conectadas</h4>
	<p class="text-sm text-gray-500">Suas aplicações IA monitoradas em diferentes plataformas</p>
	</div>
	<button class="text-sm text-blue-600 hover:text-blue-800 font-medium">
	Conectar Nova Aplicação
	</button>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
	<!-- App 1 -->
	<div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
	<div class="flex items-center mb-3">
	<img src="https://via.placeholder.com/40?text=L" alt="Lovable" class="h-8 w-8 rounded-full mr-2">
	<h5 class="font-medium">Chatbot de Vendas</h5>
	</div>
	<div class="flex justify-center my-4">
	<div class="app-score">
	<svg viewBox="0 0 36 36" class="app-score-circle">
	<path
	d="M18 2.0845
	a 15.9155 15.9155 0 0 1 0 31.831
	a 15.9155 15.9155 0 0 1 0 -31.831"
	fill="none"
	stroke="#e6e6e6"
	stroke-width="3"
	/>
	<path
	d="M18 2.0845
	a 15.9155 15.9155 0 0 1 0 31.831
	a 15.9155 15.9155 0 0 1 0 -31.831"
	fill="none"
	stroke="#3b82f6"
	stroke-width="3"
	stroke-dasharray="82, 100"
	/>
	</svg>
	<div class="absolute inset-0 flex items-center justify-center flex-col">
	<span class="text-2xl font-bold">82</span>
	<span class="text-xs text-gray-500">pontos</span>
	</div>
	</div>
	</div>
	<div class="grid grid-cols-2 gap-2 text-center text-xs">
	<div>
	<p class="text-gray-500">Custo</p>
	<p class="font-medium">R$ 320/mês</p>
	</div>
	<div>
	<p class="text-gray-500">Requisições</p>
	<p class="font-medium">12.5k</p>
	</div>
	</div>
	<button class="w-full mt-3 bg-blue-50 hover:bg-blue-100 text-blue-600 text-sm font-medium py-1 px-4 rounded transition">
	Ver Detalhes
	</button>
	</div>

	<!-- App 2 -->
	<div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
	<div class="flex items-center mb-3">
	<img src="https://via.placeholder.com/40?text=B" alt="Base44" class="h-8 w-8 rounded-full mr-2">
	<h5 class="font-medium">Assistente Virtual</h5>
	</div>
	<div class="flex justify-center my-4">
	<div class="app-score">
	<svg viewBox="0 0 36 36" class="app-score-circle">
	<path
	d="M18 2.0845
	a 15.9155 15.9155 0 0 1 0 31.831
	a 15.9155 15.9155 0 0 1 0 -31.831"
	fill="none"
	stroke="#e6e6e6"
	stroke-width="3"
	/>
	<path
	d="M18 2.0845
	a 15.9155 15.9155 0 0 1 0 31.831
	a 15.9155 15.9155 0 0 1 0 -31.831"
	fill="none"
	stroke="#8b5cf6"
	stroke-width="3"
	stroke-dasharray="75, 100"
	/>
	</svg>
	<div class="absolute inset-0 flex items-center justify-center flex-col">
	<span class="text-2xl font-bold">75</span>
	<span class="text-xs text-gray-500">pontos</span>
	</div>
	</div>
	</div>
	<div class="grid grid-cols-2 gap-2 text-center text-xs">
	<div>
	<p class="text-gray-500">Custo</p>
	<p class="font-medium">R$ 480/mês</p>
	</div>
	<div>
	<p class="text-gray-500">Requisições</p>
	<p class="font-medium">8.2k</p>
	</div>
	</div>
	<button class="w-full mt-3 bg-purple-50 hover:bg-purple-100 text-purple-600 text-sm font-medium py-1 px-4 rounded transition">
	Ver Detalhes
	</button>
	</div>

	<!-- App 3 -->
	<div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
	<div class="flex items-center mb-3">
	<img src="https://via.placeholder.com/40?text=F" alt="Firebase" class="h-8 w-8 rounded-full mr-2">
	<h5 class="font-medium">Gerador de Conteúdo</h5>
	</div>
	<div class="flex justify-center my-4">
	<div class="app-score">
	<svg viewBox="0 0 36 36" class="app-score-circle">
	<path
	d="M18 2.0845
	a 15.9155 15.9155 0 0 1 0 31.831
	a 15.9155 15.9155 0 0 1 0 -31.831"
	fill="none"
	stroke="#e6e6e6"
	stroke-width="3"
	/>
	<path
	d="M18 2.0845
	a 15.9155 15.9155 0 0 1 0 31.831
	a 15.9155 15.9155 0 0 1 0 -31.831"
	fill="none"
	stroke="#10b981"
	stroke-width="3"
	stroke-dasharray="91, 100"
	/>
	</svg>
	<div class="absolute inset-0 flex items-center justify-center flex-col">
	<span class="text-2xl font-bold">91</span>
	<span class="text-xs text-gray-500">pontos</span>
	</div>
	</div>
	</div>
	<div class="grid grid-cols-2 gap-2 text-center text-xs">
	<div>
	<p class="text-gray-500">Custo</p>
	<p class="font-medium">R$ 185/mês</p>
	</div>
	<div>
	<p class="text-gray-500">Requisições</p>
	<p class="font-medium">5.7k</p>
	</div>
	</div>
	<button class="w-full mt-3 bg-green-50 hover:bg-green-100 text-green-600 text-sm font-medium py-1 px-4 rounded transition">
	Ver Detalhes
	</button>
	</div>
	</div>
	</div>

	<!-- Platform Comparison -->
	<div class="bg-white p-6 rounded-lg shadow mb-8">
	<div class="flex items-center justify-between mb-6">
	<div>
	<h4 class="text-lg font-medium text-gray-900">Comparativo entre Plataformas</h4>
	<p class="text-sm text-gray-500">Desempenho e custo médio por requisição nas diferentes plataformas</p>
	</div>
	<select class="border border-gray-300 rounded-md px-3 py-1 text-sm">
	<option>Últimos 30 dias</option>
	<option>Últimos 90 dias</option>
	<option>Este ano</option>
	</select>
	</div>
	<div class="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
	<p class="text-gray-500">Gráfico comparativo entre plataformas</p>
	</div>
	</div>

	<!-- Recent Recommendations -->
	<div class="bg-white p-6 rounded-lg shadow">
	<div class="flex items-center justify-between mb-6">
	<div>
	<h4 class="text-lg font-medium text-gray-900">Recomendações Recentes</h4>
	<p class="text-sm text-gray-500">Oportunidades identificadas para otimizar suas aplicações</p>
	</div>
	<button class="text-sm text-blue-600 hover:text-blue-800 font-medium">
	Ver Todas
	</button>
	</div>

	<div class="space-y-4">
	<!-- Recommendation 1 -->
	<div class="flex items-start p-3 border border-gray-100 rounded-lg hover:bg-gray-50 transition">
	<div class="bg-blue-100 text-blue-600 p-2 rounded-full mr-3 mt-1">
	<i class="fas fa-dollar-sign"></i>
	</div>
	<div class="flex-1">
	<h5 class="font-medium">Redução de custos no Lovable</h5>
	<p class="text-sm text-gray-600">Identificamos que 23% das requisições ao seu chatbot de vendas poderiam ser cacheadas, reduzindo custos em até R$ 85/mês.</p>
	<div class="flex items-center mt-2 text-xs text-gray-500">
	<span class="mr-3">2 dias atrás</span>
	<span class="flex items-center">
	<img src="https://via.placeholder.com/16?text=L" alt="Lovable" class="h-3 mr-1">
	Chatbot de Vendas
	</span>
	</div>
	</div>
	<button class="text-blue-600 hover:text-blue-800 text-sm font-medium ml-4">
	Aplicar
	</button>
	</div>

	<!-- Recommendation 2 -->
	<div class="flex items-start p-3 border border-gray-100 rounded-lg hover:bg-gray-50 transition">
	<div class="bg-purple-100 text-purple-600 p-2 rounded-full mr-3 mt-1">
	<i class="fas fa-tachometer-alt"></i>
	</div>
	<div class="flex-1">
	<h5 class="font-medium">Otimização de desempenho no Base44</h5>
	<p class="text-sm text-gray-600">Sua aplicação no Base44 tem latência 40% acima da média. Recomendamos ajustar os parâmetros do modelo para melhorar o tempo de resposta.</p>
	<div class="flex items-center mt-2 text-xs text-gray-500">
	<span class="mr-3">5 dias atrás</span>
	<span class="flex items-center">
	<img src="https://via.placeholder.com/16?text=B" alt="Base44" class="h-3 mr-1">
	Assistente Virtual
	</span>
	</div>
	</div>
	<button class="text-blue-600 hover:text-blue-800 text-sm font-medium ml-4">
	Aplicar
	</button>
	</div>

	<!-- Recommendation 3 -->
	<div class="flex items-start p-3 border border-gray-100 rounded-lg hover:bg-gray-50 transition">
	<div class="bg-green-100 text-green-600 p-2 rounded-full mr-3 mt-1">
	<i class="fas fa-users"></i>
	</div>
	<div class="flex-1">
	<h5 class="font-medium">Melhoria na satisfação do usuário</h5>
	<p class="text-sm text-gray-600">Análise mostra que 15% dos usuários abandonam após a 3ª interação. Sugerimos ajustar o fluxo de conversação para melhorar a experiência.</p>
	<div class="flex items-center mt-2 text-xs text-gray-500">
	<span class="mr-3">1 semana atrás</span>
	<span class="flex items-center">
	<img src="https://via.placeholder.com/16?text=F" alt="Firebase" class="h-3 mr-1">
	Gerador de Conteúdo
	</span>
	</div>
	</div>
	<button class="text-blue-600 hover:text-blue-800 text-sm font-medium ml-4">
	Aplicar
	</button>
	</div>
	</div>
	</div>
	</main>
	</div>
	</div>

	<!-- Login Modal (hidden by default) -->
	<div id="loginModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50">
	<div class="bg-white rounded-lg shadow-xl max-w-md w-full">
	<div class="p-6">
	<div class="flex justify-between items-center mb-4">
	<h3 class="text-2xl font-bold text-gray-900">Acesse sua conta</h3>
	<button id="closeLoginModal" class="text-gray-400 hover:text-gray-500">
	<i class="fas fa-times"></i>
	</button>
	</div>

	<form class="space-y-4">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
	<input type="email" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Senha</label>
	<input type="password" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
	</div>

	<div class="flex items-center justify-between">
	<label class="flex items-center">
	<input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
	<span class="ml-2 text-sm text-gray-600">Lembrar de mim</span>
	</label>
	<a href="#" class="text-sm text-blue-600 hover:text-blue-500">Esqueceu sua senha?</a>
	</div>

	<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition">
	Entrar
	</button>
	</form>

	<div class="mt-6">
	<div class="relative">
	<div class="absolute inset-0 flex items-center">
	<div class="w-full border-t border-gray-300"></div>
	</div>

	</html>