|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Meus Formulários | Dashboard</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
:root { |
|
|
--primary: #4F46E5; |
|
|
--primary-light: #6366F1; |
|
|
--primary-dark: #4338CA; |
|
|
--secondary: #10B981; |
|
|
--dark: #1F2937; |
|
|
--light: #F9FAFB; |
|
|
--gray: #6B7280; |
|
|
--gray-light: #E5E7EB; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #F9FAFB; |
|
|
color: #1F2937; |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
width: 280px; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.sidebar-collapsed { |
|
|
width: 80px; |
|
|
} |
|
|
|
|
|
.main-content { |
|
|
margin-left: 280px; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.main-content-expanded { |
|
|
margin-left: 80px; |
|
|
} |
|
|
|
|
|
.nav-item.active { |
|
|
background-color: #EEF2FF; |
|
|
color: var(--primary); |
|
|
border-left: 4px solid var(--primary); |
|
|
} |
|
|
|
|
|
.nav-item.active svg { |
|
|
color: var(--primary); |
|
|
} |
|
|
|
|
|
.card-hover:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025); |
|
|
} |
|
|
|
|
|
.form-card { |
|
|
transition: all 0.2s ease; |
|
|
border-radius: 12px; |
|
|
} |
|
|
|
|
|
.form-card:hover { |
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.status-badge { |
|
|
font-size: 12px; |
|
|
padding: 4px 10px; |
|
|
border-radius: 20px; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.avatar-group .avatar { |
|
|
margin-right: -10px; |
|
|
border: 2px solid white; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.avatar-group .avatar:hover { |
|
|
transform: scale(1.1); |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.dropdown-menu { |
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); |
|
|
border-radius: 8px; |
|
|
border: 1px solid #E5E7EB; |
|
|
} |
|
|
|
|
|
.search-input:focus { |
|
|
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2); |
|
|
} |
|
|
|
|
|
.create-btn { |
|
|
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.create-btn:hover { |
|
|
transform: translateY(-1px); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.fade-in { |
|
|
animation: fadeIn 0.2s ease-in-out; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(-5px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
height: 6px; |
|
|
border-radius: 3px; |
|
|
background-color: #E5E7EB; |
|
|
} |
|
|
|
|
|
.progress-fill { |
|
|
height: 100%; |
|
|
border-radius: 3px; |
|
|
background-color: var(--primary); |
|
|
} |
|
|
|
|
|
|
|
|
.tooltip { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.tooltip .tooltip-text { |
|
|
visibility: hidden; |
|
|
width: max-content; |
|
|
background-color: #1F2937; |
|
|
color: #fff; |
|
|
text-align: center; |
|
|
border-radius: 6px; |
|
|
padding: 6px 12px; |
|
|
position: absolute; |
|
|
z-index: 30; |
|
|
left: 100%; |
|
|
margin-left: 12px; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
font-size: 13px; |
|
|
font-weight: 500; |
|
|
white-space: nowrap; |
|
|
} |
|
|
|
|
|
.tooltip .tooltip-text::after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
right: 100%; |
|
|
margin-top: -5px; |
|
|
border-width: 5px; |
|
|
border-style: solid; |
|
|
border-color: transparent #1F2937 transparent transparent; |
|
|
} |
|
|
|
|
|
.tooltip:hover .tooltip-text { |
|
|
visibility: visible; |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
|
|
|
.sidebar-collapsed .tooltip .tooltip-text { |
|
|
left: 50%; |
|
|
top: 100%; |
|
|
margin-left: 0; |
|
|
transform: translateX(-50%); |
|
|
} |
|
|
|
|
|
.sidebar-collapsed .tooltip .tooltip-text::after { |
|
|
top: -5px; |
|
|
left: 50%; |
|
|
right: auto; |
|
|
margin-left: -5px; |
|
|
border-color: transparent transparent #1F2937 transparent; |
|
|
} |
|
|
|
|
|
|
|
|
.sidebar-collapsed .nav-item { |
|
|
justify-content: center; |
|
|
padding-left: 0; |
|
|
padding-right: 0; |
|
|
} |
|
|
|
|
|
.sidebar-collapsed .nav-item span { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.sidebar-collapsed .nav-item .badge-count { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.sidebar-collapsed .team-section { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.sidebar-collapsed .user-info .user-details { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.sidebar-collapsed .user-info svg { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.sidebar-collapsed .logo-text { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.sidebar-collapsed .logo-icon { |
|
|
margin-right: 0; |
|
|
} |
|
|
|
|
|
|
|
|
.toggle-sidebar-tooltip { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.toggle-sidebar-tooltip .tooltip-text { |
|
|
visibility: hidden; |
|
|
width: max-content; |
|
|
background-color: #1F2937; |
|
|
color: #fff; |
|
|
text-align: center; |
|
|
border-radius: 6px; |
|
|
padding: 6px 12px; |
|
|
position: absolute; |
|
|
z-index: 30; |
|
|
left: 50%; |
|
|
top: 100%; |
|
|
transform: translateX(-50%); |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
font-size: 13px; |
|
|
font-weight: 500; |
|
|
white-space: nowrap; |
|
|
} |
|
|
|
|
|
.toggle-sidebar-tooltip .tooltip-text::after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: -5px; |
|
|
left: 50%; |
|
|
margin-left: -5px; |
|
|
border-width: 5px; |
|
|
border-style: solid; |
|
|
border-color: transparent transparent #1F2937 transparent; |
|
|
} |
|
|
|
|
|
.toggle-sidebar-tooltip:hover .tooltip-text { |
|
|
visibility: visible; |
|
|
opacity: 1; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="sidebar bg-white shadow-sm flex flex-col fixed h-full z-20"> |
|
|
<div class="p-6 flex items-center justify-between border-b border-gray-100"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-lg bg-indigo-100 flex items-center justify-center logo-icon"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /> |
|
|
</svg> |
|
|
</div> |
|
|
<span class="ml-3 text-lg font-semibold text-gray-800 logo-text">FormsPro</span> |
|
|
</div> |
|
|
<button class="text-gray-400 hover:text-gray-600 toggle-sidebar toggle-sidebar-tooltip"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /> |
|
|
</svg> |
|
|
<span class="tooltip-text">Recolher menu</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex-1 overflow-y-auto py-4 px-2"> |
|
|
<div class="space-y-1"> |
|
|
<a href="#" class="nav-item active flex items-center px-4 py-3 text-sm font-medium text-gray-700 rounded-lg tooltip"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /> |
|
|
</svg> |
|
|
<span class="ml-3">Dashboard</span> |
|
|
<span class="tooltip-text">Dashboard</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg tooltip"> |
|
|
<svg xmlns="http://www.w3.org/200极/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /> |
|
|
</svg> |
|
|
<span class="ml-3">Formulários</span> |
|
|
<span class="ml-auto px-2 py-0.5 text-xs font-medium bg-indigo-100 text-indigo-800 rounded-full badge-count">12</span> |
|
|
<span class="tooltip-text">Formulários</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg tooltip"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> |
|
|
</svg> |
|
|
<span class="ml-3">Respostas</span> |
|
|
<span class="tooltip-text">Respostas</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg tooltip"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /> |
|
|
</svg> |
|
|
<span class="ml-3">Relatórios</span> |
|
|
<span class="tooltip-text">Relatórios</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg tooltip"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> |
|
|
</svg> |
|
|
<span class="ml-3">Configurações</span> |
|
|
<span class="tooltip-text">Configurações</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 px-4 team-section"> |
|
|
<h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Equipe</h3> |
|
|
<div class="mt-3 space-y-1"> |
|
|
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg"> |
|
|
<div class="relative"> |
|
|
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> |
|
|
<span class="absolute bottom-0 right-0 block h-2 w-2 rounded-full ring-2 ring-white bg-green-400"></span> |
|
|
</div> |
|
|
<span class="ml-3">Ana Silva</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg"> |
|
|
<div class="relative"> |
|
|
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> |
|
|
<span class="absolute bottom-0 right-0 block h-2 w-2 rounded-full ring-2 ring-white bg-gray-400"></span> |
|
|
</div> |
|
|
<span class="ml-3">Carlos Souza</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg"> |
|
|
<div class="relative"> |
|
|
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt=""> |
|
|
<span class="absolute bottom-0 right-0 block h-2 w-2 rounded-full ring-2 ring-white bg-green-400"></span> |
|
|
</div> |
|
|
<span class="ml-3">Maria Oliveira</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border-t border-gray-100"> |
|
|
<div class="relative dropdown"> |
|
|
<button class="flex items-center w-full px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg user-info tooltip"> |
|
|
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> |
|
|
<div class="ml-3 text-left user-details"> |
|
|
<div class="font-medium">Ana Silva</div> |
|
|
<div class="text-xs text-gray-500">ana@example.com</div> |
|
|
</div> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="ml-auto h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> |
|
|
</svg> |
|
|
<span class="tooltip-text">Minha conta</span> |
|
|
</button> |
|
|
<div class="dropdown-menu absolute bottom-full left-0 mb-2 w-full hidden bg-white rounded-lg shadow-lg z-10 fade-in"> |
|
|
<div class="py-1"> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"> |
|
|
<i class="fas fa-cog mr-2 text-gray-500"></i> Configurações |
|
|
</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"> |
|
|
<i class="fas fa-exchange-alt mr-2 text-gray-500"></i> Trocar organização |
|
|
</a> |
|
|
<div class="border-t border-gray-200 my-1"></div> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"> |
|
|
<i class="fas fa-sign-out-alt mr-2 text-gray-500"></i> Sair |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="main-content flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<header class="bg-white border-b border-gray-200"> |
|
|
<div class="flex items-center justify-between px-6 py-4"> |
|
|
<div class="flex items-center"> |
|
|
<h1 class="text-xl font-semibold text-gray-900">Meus Formulários</h1> |
|
|
<div class="ml-4 flex items-center"> |
|
|
<div class="relative dropdown"> |
|
|
<button class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-900"> |
|
|
<span>Acme Inc.</span> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="ml-1 h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round, stroke-width="2" d="M19 9l-7 7-7-7" /> |
|
|
</svg> |
|
|
</button> |
|
|
<div class="dropdown-menu absolute hidden mt-2 w-48 bg-white rounded-lg shadow-lg z-10 fade-in"> |
|
|
<div class="py-1"> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-5 h-5 rounded-full mr-2" alt=""> |
|
|
Acme Inc. |
|
|
</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-5 h-5 rounded-full mr-2" alt=""> |
|
|
Startup XYZ |
|
|
</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center"> |
|
|
<img src="https极randomuser.me/api/portraits/women/68.jpg" class="w-5 h-5 rounded-full mr-2" alt=""> |
|
|
Freelance |
|
|
</a> |
|
|
<div class="border-t border-gray-200 my-1"></div> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"> |
|
|
<i class="fas fa-cog mr-2 text-gray-500"></i> Gerenciar organizações |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<span class="ml-2 px-2 py-1 text-xs font-medium bg-indigo-100 text-indigo-800 rounded-full">Admin</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="flex items-center px-4 py-2.5 create-btn text-white font-medium rounded-lg transition-all duration-200 shadow-md"> |
|
|
<i class="fas fa-plus mr-2"></i> |
|
|
Criar novo |
|
|
</button> |
|
|
|
|
|
<button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full"> |
|
|
<i class="fas fa-bell"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 overflow-y-auto p-6 bg-gray-50"> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6"> |
|
|
<div class="bg-white rounded-xl shadow-sm p极"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Total de Formulários</p> |
|
|
<p class="mt-1 text-2xl font-semibold text-gray-900">12</p> |
|
|
</div> |
|
|
<div class="p-3 rounded-lg bg-indigo-100 text-indigo-600"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex items-center justify-between text-sm text-gray-500"> |
|
|
<span>+2 desde o mês passado</span> |
|
|
<span class="text-green-500 font-medium">+20%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Respostas Totais</p> |
|
|
<p class="mt-1 text-2xl font-semibold text-gray-900">501</p> |
|
|
</div> |
|
|
<div class="p-3 rounded-lg bg-green-100 text-green-600"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none, viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex items-center justify-between text-sm text-gray-500"> |
|
|
<span>+124 desde o mês passado</span> |
|
|
<span class="text-green-500 font-medium">+33%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Taxa de Resposta</p> |
|
|
<p class="mt-1 text-2xl font-semibold text-gray-900">68%</p> |
|
|
</div> |
|
|
<div class="p-3 rounded-lg bg-blue-100 text-blue-600"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<div class="flex items-center justify-between text-sm text-gray-500"> |
|
|
<span>+8% desde o mês passado</span> |
|
|
<span class="text-green-500 font-medium">+13%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-500">Colaboradores</p> |
|
|
<p class="mt-1 text-2xl font-semibold text-gray-900">5</p> |
|
|
</div> |
|
|
<div |
|
|
</html> |
