Exibir origem

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">

<style>
body{
    font-family: Arial, sans-serif;
    background:#f5f6f8;
}

.qa-container{
    max-width:1200px;
    margin:auto;
    padding:20px;
}

.qa-title{
    font-size:26px;
    font-weight:bold;
    color:#1f2d3d;
}

.qa-subtitle{
    color:#5f6b7a;
    margin-bottom:30px;
}

/* GRID */
.grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap:20px;
    margin-bottom:30px;
}

/* CARD */
.card{
    background:#ffffff;
    border:1px solid #e0e6ed;
    border-radius:10px;
    padding:20px;
    text-align:center;
    transition:0.2s;
}

.card:hover{
    box-shadow:0 4px 10px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}

/* BOTÃO */
.card a{
    text-decoration:none;
    color:#ffffff;
    background:#0055a5;
    padding:12px 18px;
    border-radius:6px;
    display:inline-block;
    font-weight:bold;
    font-size:14px;
}

.card a:hover{
    background:#003f7d;
}

/* TITULO SEÇÃO */
.section-title{
    font-size:20px;
    font-weight:bold;
    color:#1f2d3d;
    margin:30px 0 15px 0;
    border-left:5px solid #0055a5;
    padding-left:10px;
}

/* GRAFICO AREA */
.chart-box{
    background:#ffffff;
    border:1px solid #e0e6ed;
    border-radius:10px;
    padding:20px;
    margin-top:20px;
    text-align:center;
    color:#5f6b7a;
}
</style>

</head>

<body>

<div class="qa-container">

    <div class="qa-title">🧪 QA HUB – OPERAÇÃO</div>
    <div class="qa-subtitle">
        Core Vendas | Construção e Projetos<br>
        Central operacional de qualidade, testes, controle e indicadores
    </div>

    <!-- ACESSOS RÁPIDOS -->
    <div class="section-title">🚀 Acessos Operacionais</div>
    <div class="grid">
        <div class="card"><a href="#">Iniciar Testes</a></div>
        <div class="card"><a href="#">Abrir Defeito</a></div>
        <div class="card"><a href="#">Checklist Ativo</a></div>
        <div class="card"><a href="#">Documentos QA</a></div>
        <div class="card"><a href="#">IA QA</a></div>
        <div class="card"><a href="#">Indicadores</a></div>
    </div>

    <!-- EXECUÇÃO -->
    <div class="section-title">🧪 Execução de Testes</div>
    <div class="grid">
        <div class="card"><a href="#">Sistêmico</a></div>
        <div class="card"><a href="#">Integração</a></div>
        <div class="card"><a href="#">Regressão</a></div>
        <div class="card"><a href="#">Release</a></div>
        <div class="card"><a href="#">Exploratório</a></div>
        <div class="card"><a href="#">Automatizado</a></div>
    </div>

    <!-- CHECKLISTS -->
    <div class="section-title">📋 Checklists Operacionais</div>
    <div class="grid">
        <div class="card"><a href="#">Checklist Sistêmico</a></div>
        <div class="card"><a href="#">Checklist Regressão</a></div>
        <div class="card"><a href="#">Checklist Release</a></div>
        <div class="card"><a href="#">Checklist Validação</a></div>
        <div class="card"><a href="#">Checklist Homologação</a></div>
        <div class="card"><a href="#">Checklist Técnico</a></div>
    </div>

    <!-- DEFEITOS -->
    <div class="section-title">🐞 Defeitos</div>
    <div class="grid">
        <div class="card"><a href="#">Abertura de Defeito</a></div>
        <div class="card"><a href="#">Templates</a></div>
        <div class="card"><a href="#">Evidências</a></div>
        <div class="card"><a href="#">Padrões</a></div>
        <div class="card"><a href="#">Classificação</a></div>
        <div class="card"><a href="#">Controle</a></div>
    </div>

    <!-- IA QA -->
    <div class="section-title">🤖 IA QA</div>
    <div class="grid">
        <div class="card"><a href="#">Gerar Casos de Teste</a></div>
        <div class="card"><a href="#">Criar Cenários</a></div>
        <div class="card"><a href="#">Analisar Requisitos</a></div>
        <div class="card"><a href="#">Análise de Impacto</a></div>
        <div class="card"><a href="#">Testes Exploratórios</a></div>
        <div class="card"><a href="#">Apoio Defeitos</a></div>
    </div>

    <!-- INDICADORES -->
    <div class="section-title">📊 Indicadores Operacionais</div>
    <div class="grid">
        <div class="card"><a href="#">Bugs por Módulo</a></div>
        <div class="card"><a href="#">Bugs por Severidade</a></div>
        <div class="card"><a href="#">SLA Correção</a></div>
        <div class="card"><a href="#">Lead Time</a></div>
        <div class="card"><a href="#">Reabertura</a></div>
        <div class="card"><a href="#">Cobertura Testes</a></div>
    </div>

    <!-- EVOLUÇÃO -->
    <div class="section-title">📈 Evolução de Casos Específicos</div>
    <div class="chart-box">
        Área reservada para gráficos de evolução:<br><br>
        • Casos críticos<br>
        • Bugs reincidentes<br>
        • Falhas estruturais<br>
        • Pontos de risco sistêmico<br><br>
        <strong>(Gráfico real será integrado aqui futuramente)</strong>
    </div>

</div>

</body>
</html>