LukiBeg
/
OmniBoard
mirror of https://github.com/Lukibeg/OmniBoard.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: LukiBeg:ccbd343127f675432e41dcace17f32b660524de2
Branches Tags
LukiBeg:main
LukiBeg:master
..
compare: LukiBeg:80a4731cd0fdddcf9a08c23eeb1ba9650fbcc8eb
Branches Tags
LukiBeg:main
LukiBeg:master

No commits in common. "ccbd343127f675432e41dcace17f32b660524de2" and "80a4731cd0fdddcf9a08c23eeb1ba9650fbcc8eb" have entirely different histories.
ccbd343127 ... 80a4731cd0

5 changed files with 263 additions and 254 deletions
Show Stats Expand all files Collapse all files

3
.env.example
View File

@ -3,7 +3,6 @@ APP_ENV=local
APP_KEY= APP_KEY=
APP_DEBUG=true APP_DEBUG=true
APP_URL=http://localhost APP_URL=http://localhost
APP_TIMEZONE=America/Sao_Paulo
APP_LOCALE=en APP_LOCALE=en
APP_FALLBACK_LOCALE=en APP_FALLBACK_LOCALE=en
@ -43,7 +42,7 @@ SESSION_DOMAIN=null
BROADCAST_CONNECTION=log BROADCAST_CONNECTION=log
FILESYSTEM_DISK=local FILESYSTEM_DISK=local
QUEUE_CONNECTION=redis QUEUE_CONNECTION=database
CACHE_STORE=database CACHE_STORE=database
# CACHE_PREFIX= # CACHE_PREFIX=

6
database/seeders/DatabaseSeeder.php
View File

@ -23,5 +23,11 @@ public function run(): void
'email' => 'admin@omniboard.com', 'email' => 'admin@omniboard.com',
'password' => bcrypt('password'), // A senha será 'password' 'password' => bcrypt('password'), // A senha será 'password'
]); ]);
User::factory()->create([
'name' => 'Test User',
'email' => 'test@example.com',
]);
$this->call([OmniBoardSeeder::class]);
} }
} }

50
resources/css/app.css
View File

@ -1,53 +1,3 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
/* Animações para a página de welcome */
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-15px);
}
100% {
transform: translateY(0px);
}
}
@keyframes slide-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-slide-up {
animation: slide-up 0.8s ease-out forwards;
opacity: 0;
}
.delay-100 {
animation-delay: 0.1s;
}
.delay-200 {
animation-delay: 0.2s;
}
.delay-300 {
animation-delay: 0.3s;
}
/* Fim das animações */

5
resources/js/Pages/Dashboard.vue
View File

@ -10,13 +10,17 @@ const props = defineProps({
const page = usePage(); const page = usePage();
const userTenantId = page.props.auth.user.tenant_id; const userTenantId = page.props.auth.user.tenant_id;
// Variável para guardar a inscrição do canal
let channel = null; let channel = null;
onMounted(() => { onMounted(() => {
if (userTenantId) { if (userTenantId) {
// Verifica se o Echo já está carregado
if (window.Echo) { if (window.Echo) {
connectToChannel(); connectToChannel();
} else { } else {
// Se não, espera um pouco e tenta de novo (Fallback simples)
// Ou melhor: escuta o evento de carregamento, mas o setInterval é mais prático aqui
const checkEcho = setInterval(() => { const checkEcho = setInterval(() => {
if (window.Echo) { if (window.Echo) {
clearInterval(checkEcho); clearInterval(checkEcho);
@ -37,6 +41,7 @@ const connectToChannel = () => {
}) })
.error((err) => { .error((err) => {
console.error("❌ Erro de Conexão/Auth:", err); console.error("❌ Erro de Conexão/Auth:", err);
// Dica: Se o erro for detalhado, ele vai aparecer aqui.
}); });
}; };

417
resources/js/Pages/Welcome.vue
View File

@ -1,224 +1,273 @@
<script setup> <script setup>
import { Head, Link } from '@inertiajs/vue3'; import { Head, Link } from '@inertiajs/vue3';
defineProps({ defineProps({
canLogin: { canLogin: {
type: Boolean, type: Boolean,
}, },
canRegister: { canRegister: {
type: Boolean, type: Boolean,
}, },
laravelVersion: { laravelVersion: {
type: String, type: String,
required: true, required: true,
}, },
phpVersion: { phpVersion: {
type: String, type: String,
required: true, required: true,
}, },
}); });
</script> </script>
<template> <style>
/* Animações Suaves */
@keyframes float {
0% {
transform: translateY(0px);
}
<Head title="OmniBoard - Dashboard Inteligente" /> 50% {
transform: translateY(-15px);
}
<div 100% {
class="min-h-screen flex flex-col bg-gray-50 text-slate-800 selection:bg-blue-100 selection:text-blue-900 overflow-hidden relative font-sans"> transform: translateY(0px);
}
}
<div class="absolute top-0 left-0 w-full h-full overflow-hidden z-0 pointer-events-none"> @keyframes slide-up {
<div class="absolute -top-[10%] -right-[5%] w-[40%] h-[40%] bg-blue-200/40 rounded-full blur-[100px]"> from {
</div> opacity: 0;
<div class="absolute top-[30%] -left-[10%] w-[30%] h-[30%] bg-purple-200/40 rounded-full blur-[100px]"> transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.animate-slide-up {
animation: slide-up 0.8s ease-out forwards;
opacity: 0;
}
.delay-100 {
animation-delay: 0.1s;
}
.delay-200 {
animation-delay: 0.2s;
}
.delay-300 {
animation-delay: 0.3s;
}
</style>
<template>
<Head title="OmniBoard - Dashboard Inteligente" />
<div
class="min-h-screen bg-gray-50 text-slate-800 selection:bg-blue-100 selection:text-blue-900 overflow-hidden relative font-sans">
<div class="absolute top-0 left-0 w-full h-full overflow-hidden z-0 pointer-events-none">
<div class="absolute -top-[10%] -right-[5%] w-[40%] h-[40%] bg-blue-200/40 rounded-full blur-[100px]"></div>
<div class="absolute top-[30%] -left-[10%] w-[30%] h-[30%] bg-purple-200/40 rounded-full blur-[100px]">
</div>
</div>
<nav class="relative z-10 w-full px-6 py-6 flex justify-between items-center max-w-7xl mx-auto">
<div class="flex items-center space-x-2">
<div class="flex flex-col">
<span class="text-2xl font-bold tracking-wide">
<span class="text-slate-800">Ing</span><span class="text-blue-600">line</span>
</span>
<span class="text-[10px] uppercase tracking-[0.3em] text-black font-semibold">Systems</span>
</div> </div>
</div> </div>
<nav class="relative z-10 w-full px-6 py-6 flex justify-between items-center max-w-7xl mx-auto"> <div v-if="canLogin" class="flex items-center space-x-4">
<div class="flex items-center space-x-2"> <Link v-if="$page.props.auth.user" :href="route('dashboard')"
<div class="flex flex-col"> class="px-6 py-2 rounded-lg bg-white border border-gray-200 text-blue-600 font-bold shadow-sm hover:shadow-md hover:border-blue-200 transition-all">
<span class="text-2xl font-bold tracking-wide">
<span class="text-slate-800">Ing</span><span class="text-blue-600">line</span>
</span>
<span class="text-[10px] uppercase tracking-[0.3em] text-black font-semibold">Systems</span>
</div>
</div>
<div v-if="canLogin" class="flex items-center space-x-4">
<Link v-if="$page.props.auth.user" :href="route('dashboard')"
class="px-6 py-2 rounded-lg bg-white border border-gray-200 text-blue-600 font-bold shadow-sm hover:shadow-md hover:border-blue-200 transition-all">
Ir para Dashboard Ir para Dashboard
</Link> </Link>
<template v-else> <template v-else>
<Link :href="route('login')" <Link :href="route('login')"
class="text-slate-600 hover:text-blue-600 font-medium transition-colors"> class="text-slate-600 hover:text-blue-600 font-medium transition-colors">
Login Login
</Link> </Link>
</template> </template>
</div>
</nav>
<main
class="relative z-10 flex flex-col lg:flex-row items-center justify-between max-w-7xl mx-auto px-6 mt-12 lg:mt-24 gap-16">
<div class="lg:w-1/2 flex flex-col items-start text-left">
<div
class="inline-flex items-center px-3 py-1 rounded-full border border-blue-100 bg-white shadow-sm text-blue-600 text-xs font-bold uppercase tracking-wider mb-6 animate-slide-up">
<span class="w-2 h-2 rounded-full bg-green-500 mr-2 animate-pulse"></span>
Sistema BETA v0.1
</div> </div>
</nav>
<main <h1
class="relative z-10 flex flex-col lg:flex-row items-center justify-between max-w-7xl mx-auto px-6 mt-12 lg:mt-24 gap-16"> class="text-5xl lg:text-6xl font-extrabold leading-tight mb-6 text-slate-900 animate-slide-up delay-100">
Sua operação de voz <br />
<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">
sob controle total.
</span>
</h1>
<div class="lg:w-1/2 flex flex-col items-start text-left"> <p class="text-lg text-slate-600 mb-8 max-w-lg leading-relaxed animate-slide-up delay-200">
Conecte o Asterisk ao OmniBoard e transforme dados brutos em decisões inteligentes. Filas, agentes e
métricas em tempo real, sem recarregar a página.
</p>
<div <div class="flex flex-col sm:flex-row gap-4 animate-slide-up delay-300">
class="inline-flex items-center px-3 py-1 rounded-full border border-blue-100 bg-white shadow-sm text-blue-600 text-xs font-bold uppercase tracking-wider mb-6 animate-slide-up"> <Link v-if="$page.props.auth.user" :href="route('dashboard')"
<span class="w-2 h-2 rounded-full bg-green-500 mr-2 animate-pulse"></span> class="px-8 py-4 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-bold text-lg shadow-xl shadow-blue-200 transition-all transform hover:-translate-y-1">
Sistema BETA v0.1
</div>
<h1
class="text-5xl lg:text-6xl font-extrabold leading-tight mb-6 text-slate-900 animate-slide-up delay-100">
Sua operação de voz <br />
<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">
sob controle total.
</span>
</h1>
<p class="text-lg text-slate-600 mb-8 max-w-lg leading-relaxed animate-slide-up delay-200">
Conecte o Asterisk ao OmniBoard e transforme dados brutos em decisões inteligentes. Filas, agentes e
métricas em tempo real, sem recarregar a página.
</p>
<div class="flex flex-col sm:flex-row gap-4 animate-slide-up delay-300">
<Link v-if="$page.props.auth.user" :href="route('dashboard')"
class="px-8 py-4 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-bold text-lg shadow-xl shadow-blue-200 transition-all transform hover:-translate-y-1">
Acessar Painel Acessar Painel
</Link> </Link>
<Link v-else :href="route('login')" <Link v-else :href="route('login')"
class="px-8 py-4 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-bold text-lg shadow-xl shadow-slate-200 transition-all transform hover:-translate-y-1"> class="px-8 py-4 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-bold text-lg shadow-xl shadow-slate-200 transition-all transform hover:-translate-y-1">
Entrar no Sistema Entrar no Sistema
</Link> </Link>
</div> </div>
</div>
<div class="lg:w-1/2 relative animate-float delay-200 hidden lg:block">
<div class="absolute -inset-1 bg-gradient-to-r from-blue-100 to-purple-100 rounded-2xl blur opacity-70">
</div> </div>
<div class="lg:w-1/2 relative animate-float delay-200 hidden lg:block"> <div
<div class="absolute -inset-1 bg-gradient-to-r from-blue-100 to-purple-100 rounded-2xl blur opacity-70"> class="relative bg-white rounded-xl shadow-[0_20px_50px_-12px_rgba(0,0,0,0.1)] border border-gray-100 p-6 overflow-hidden">
<div class="flex items-center justify-between mb-8 border-b border-gray-50 pb-4">
<div class="flex flex-col">
<h3 class="text-lg font-bold text-slate-800">Visão Geral</h3>
<span class="text-xs text-slate-400">Atualizado em tempo real</span>
</div>
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
<span class="text-xs font-bold text-green-600 bg-green-50 px-2 py-1 rounded">Online</span>
</div>
</div> </div>
<div <div class="grid grid-cols-2 gap-4 mb-6">
class="relative bg-white rounded-xl shadow-[0_20px_50px_-12px_rgba(0,0,0,0.1)] border border-gray-100 p-6 overflow-hidden"> <div class="bg-blue-50/50 p-4 rounded-lg border border-blue-100">
<div class="text-blue-500 text-xs font-bold uppercase mb-1">Chamadas em Fila</div>
<div class="flex items-center justify-between mb-8 border-b border-gray-50 pb-4"> <div class="text-3xl font-bold text-slate-800">08</div>
<div class="flex flex-col">
<h3 class="text-lg font-bold text-slate-800">Visão Geral</h3>
<span class="text-xs text-slate-400">Atualizado em tempo real</span>
</div>
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
<span class="text-xs font-bold text-green-600 bg-green-50 px-2 py-1 rounded">Online</span>
</div>
</div> </div>
<div class="bg-purple-50/50 p-4 rounded-lg border border-purple-100">
<div class="grid grid-cols-2 gap-4 mb-6"> <div class="text-purple-500 text-xs font-bold uppercase mb-1">Nível de Serviço</div>
<div class="bg-blue-50/50 p-4 rounded-lg border border-blue-100"> <div class="text-3xl font-bold text-slate-800">98%</div>
<div class="text-blue-500 text-xs font-bold uppercase mb-1">Chamadas em Fila</div>
<div class="text-3xl font-bold text-slate-800">08</div>
</div>
<div class="bg-purple-50/50 p-4 rounded-lg border border-purple-100">
<div class="text-purple-500 text-xs font-bold uppercase mb-1">Nível de Serviço</div>
<div class="text-3xl font-bold text-slate-800">98%</div>
</div>
</div> </div>
</div>
<div class="space-y-3"> <div class="space-y-3">
<div <div
class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition-colors border border-transparent hover:border-gray-100"> class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition-colors border border-transparent hover:border-gray-100">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<div <div
class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center"> class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"> d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
</path> </path>
</svg> </svg>
</div>
<div class="text-sm font-medium text-slate-700">Comercial Voz</div>
</div> </div>
<span class="text-xs font-bold text-slate-400">00:45</span> <div class="text-sm font-medium text-slate-700">Comercial Voz</div>
</div> </div>
<span class="text-xs font-bold text-slate-400">00:45</span>
</div>
<div <div
class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition-colors border border-transparent hover:border-gray-100"> class="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg transition-colors border border-transparent hover:border-gray-100">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<div <div
class="w-8 h-8 rounded-full bg-green-100 text-green-600 flex items-center justify-center"> class="w-8 h-8 rounded-full bg-green-100 text-green-600 flex items-center justify-center">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"> d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z">
</path> </path>
</svg> </svg>
</div>
<div class="text-sm font-medium text-slate-700">Suporte WhatsApp</div>
</div> </div>
<span class="text-xs font-bold text-slate-400">02:10</span> <div class="text-sm font-medium text-slate-700">Suporte WhatsApp</div>
</div> </div>
<span class="text-xs font-bold text-slate-400">02:10</span>
</div> </div>
</div>
<div <div
class="absolute bottom-4 right-4 bg-slate-900 text-white text-xs px-3 py-1.5 rounded-lg shadow-lg animate-bounce"> class="absolute bottom-4 right-4 bg-slate-900 text-white text-xs px-3 py-1.5 rounded-lg shadow-lg animate-bounce">
Nova chamada! 📞 Nova chamada! 📞
</div>
</div> </div>
</div> </div>
</div>
</main> </main>
<section class="relative z-10 max-w-7xl mx-auto px-6 mt-24 mb-20"> <section class="relative z-10 max-w-7xl mx-auto px-6 mt-24 mb-20">
<div class="grid md:grid-cols-3 gap-8"> <div class="grid md:grid-cols-3 gap-8">
<div
class="p-6 rounded-2xl bg-white border border-gray-100 shadow-sm hover:shadow-md transition-all group">
<div <div
class="p-6 rounded-2xl bg-white border border-gray-100 shadow-sm hover:shadow-md transition-all group"> class="w-12 h-12 rounded-xl bg-blue-50 flex items-center justify-center mb-4 group-hover:bg-blue-100 transition-colors">
<div <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
class="w-12 h-12 rounded-xl bg-blue-50 flex items-center justify-center mb-4 group-hover:bg-blue-100 transition-colors"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" </svg>
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
</svg>
</div>
<h3 class="text-lg font-bold text-slate-800 mb-2">Dados em Tempo Real</h3>
<p class="text-slate-500 text-sm leading-relaxed">Acompanhe cada segundo da sua operação.
Atualização
instantânea via WebSockets.</p>
</div>
<div
class="p-6 rounded-2xl bg-white border border-gray-100 shadow-sm hover:shadow-md transition-all group">
<div
class="w-12 h-12 rounded-xl bg-purple-50 flex items-center justify-center mb-4 group-hover:bg-purple-100 transition-colors">
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
</path>
</svg>
</div>
<h3 class="text-lg font-bold text-slate-800 mb-2">Segurança Garantida</h3>
<p class="text-slate-500 text-sm leading-relaxed">Ambiente isolado para cada cliente. Seus dados
estão
protegidos e acessíveis apenas para você.</p>
</div>
<div
class="p-6 rounded-2xl bg-white border border-gray-100 shadow-sm hover:shadow-md transition-all group">
<div
class="w-12 h-12 rounded-xl bg-green-50 flex items-center justify-center mb-4 group-hover:bg-green-100 transition-colors">
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z">
</path>
</svg>
</div>
<h3 class="text-lg font-bold text-slate-800 mb-2">KPIs Gerenciais</h3>
<p class="text-slate-500 text-sm leading-relaxed">TME, TMA e Nível de Serviço calculados
automaticamente
para auxiliar sua gestão.</p>
</div> </div>
<h3 class="text-lg font-bold text-slate-800 mb-2">Dados em Tempo Real</h3>
<p class="text-slate-500 text-sm leading-relaxed">Acompanhe cada segundo da sua operação.
Atualização
instantânea via WebSockets.</p>
</div> </div>
</section>
<footer class="relative z-10 mt-auto border-t border-gray-100 py-8 text-center text-slate-400 text-sm bg-white"> <div
<p>Ingline Systems &copy; 2025. Monitoramento Profissional.</p> class="p-6 rounded-2xl bg-white border border-gray-100 shadow-sm hover:shadow-md transition-all group">
</footer> <div
</div> class="w-12 h-12 rounded-xl bg-purple-50 flex items-center justify-center mb-4 group-hover:bg-purple-100 transition-colors">
</template> <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
</path>
</svg>
</div>
<h3 class="text-lg font-bold text-slate-800 mb-2">Segurança Garantida</h3>
<p class="text-slate-500 text-sm leading-relaxed">Ambiente isolado para cada cliente. Seus dados
estão
protegidos e acessíveis apenas para você.</p>
</div>
<div
class="p-6 rounded-2xl bg-white border border-gray-100 shadow-sm hover:shadow-md transition-all group">
<div
class="w-12 h-12 rounded-xl bg-green-50 flex items-center justify-center mb-4 group-hover:bg-green-100 transition-colors">
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z">
</path>
</svg>
</div>
<h3 class="text-lg font-bold text-slate-800 mb-2">KPIs Gerenciais</h3>
<p class="text-slate-500 text-sm leading-relaxed">TME, TMA e Nível de Serviço calculados
automaticamente
para auxiliar sua gestão.</p>
</div>
</div>
</section>
<footer class="relative z-10 border-t border-gray-100 py-8 text-center text-slate-400 text-sm bg-white">
<p>Ingline Systems &copy; 2025. Monitoramento Profissional.</p>
</footer>
</div>
</template>