Histórico da Página

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

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

.qa-container{
    -- IMAGEM PRINCIPAL -->
<div style="text-align:center; margin-bottom: 20px;">
  <img 
    src="https://tdn.totvs.com/download/attachments/1025213020/ReformaPaginaInicial.png"
    alt="Reforma Tributária - Construção e Projetos"
    style="width:100%; max-width:1200px;
    marginheight:auto;"
    padding:20px;
}

.qa-title{
    font-size:26px/>
</div>

<!-- CONTAINER DOS 5 BLOCOS -->
<div style="
  display: flex;
  justify-content: center;
  fontalign-weightitems:bold center;
  gap:  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{
16px;
  flex-wrap: nowrap;
">

  <!-- BLOCO 1 -->
  <a href="https://tdn.totvs.com/pages/viewpage.action?pageId=1025239488"
     style="
       width: 190px;
       height: 140px;
       background:#ffffff #e5e5e5;
    border:1px solid #e0e6ed;
    border-radius:10px 20px;
    padding:20px;
    text-align:centerdisplay: flex;
    transition:0.2s;
}

.card:hover{
    boxalign-shadow:0 4px 10px rgba(0,0,0,0.08);
items: center;
       transformjustify-content: translateY(-3px);
}

/* BOTÃO */
.card a{
center;
       text-decoration: none;
    color:#ffffff   outline: none;
      background:#0055a5 flex-shrink: 0;
     padding  overflow:12px 18pxhidden;
    border-radius:6px; ">
    display:inline-block;<img 
    font-weight:bold;
  src="https://tdn.totvs.com/download/attachments/1025213020/Incorporacao.png"
      font-size:14px;
}

.card a:hover{
alt="Incorporação"
      background:#003f7d;
}

/* TITULO SEÇÃO */
.section-title{
style="
        font-size:20pxwidth: 100%;
    font-weight:bold;
    colorheight:#1f2d3d 100%;
      margin:30px 0 15px 0object-fit: contain;
    border-left:5px solid #0055a5;">
  </a>

  padding-left:10px;
}

/* GRAFICO AREA */
.chart-box{<!-- BLOCO 2 -->
    background:#ffffff;
<a href="https://tdn.totvs.com.br/pages/viewpage.action?pageId=1024337501"
     border:1px solid #e0e6ed;
style="
       border-radius:10pxwidth: 190px;
    padding:20px;
    margin-top:20pxheight: 140px;
    text-align:center;
   background: color:#5f6b7a;
}
</style>

</head>

<body>

<div class="qa-container">

#e5e5e5;
      <div class="qa-title">🧪 QA HUB – OPERAÇÃO</div>
border-radius: 20px;
       <div class="qa-subtitle">display: flex;
        Core Vendas | Construção e Projetos<br>
   align-items: center;
       justify-content: center;
     Central operacional de qualidade, testes, controle e indicadores
text-decoration: none;
        </div>
outline: none;
    <!-- ACESSOS RÁPIDOS -->flex-shrink: 0;
    <div class="section-title">🚀 Acessos Operacionais</div>   overflow: hidden;
    <div class="grid">
    <img 
    <div class="card"><a href="#">Iniciar Testes</a></div> src="https://tdn.totvs.com/download/attachments/1025213020/locacaodeimoveis.png"
        <div classalt="card"><a href="#">Abrir Defeito</a></div>Locação de Imóveis"
        <div classstyle="card"><a href="#">Checklist Ativo</a></div>

        width: 100%;
 <div class="card"><a href="#">Documentos QA</a></div>
    height: 100%;
   <div class="card"><a href="#">IA QA</a></div>
  object-fit: contain;
     <div class="card"><a href="#">Indicadores</a></div>">
    </div>a>

    <!-- EXECUÇÃOBLOCO 3 -->
  <a  <div class="section-title">🧪 Execução de Testes</div>
href="https://tdn.totvs.com/pages/viewpage.action?pageId=1025214535"
     style="
       <div class="grid">width: 190px;
       height: <div class="card"><a href="#">Sistêmico</a></div>
140px;
       background: #e5e5e5;
  <div class="card"><a href="#">Integração</a></div>
   border-radius: 20px;
    <div class="card"><a href="#">Regressão</a></div>
   display: flex;
      <div class="card"><a href="#">Release</a></div> align-items: center;
        <div class="card"><a href="#">Exploratório</a></div>
justify-content: center;
       text-decoration: none;
  <div class="card"><a href="#">Automatizado</a></div>
    </div>

outline: none;
     <!-- CHECKLISTS -->
flex-shrink: 0;
     <div class="section-title">📋 Checklists Operacionais</div> overflow: hidden;
    <div class="grid">
    <img 
    <div class="card"><a href="#">Checklist Sistêmico</a></div> src="https://tdn.totvs.com/download/attachments/1025213020/ConstrucaoProjetos.png"
        <div classalt="card"><a href="#">Checklist Regressão</a></div>Construção e Projetos"
        <div classstyle="card"><a href="#">Checklist Release</a></div>

        width: 100%;
 <div class="card"><a href="#">Checklist Validação</a></div>
    height: 100%;
   <div class="card"><a href="#">Checklist Homologação</a></div>
  object-fit: contain;
     <div class="card"><a href="#">Checklist Técnico</a></div>
    </div>">
  </a>

    <!-- DEFEITOSBLOCO 4 -->
  <a  <div class="section-title">🐞 Defeitos</div>href="https://tdn.totvs.com/pages/viewpage.action?pageId=198948854"
    <div classstyle="grid">
        <div class="card"><a href="#">Abertura de Defeito</a></div>
width: 190px;
       height: 140px;
       background: #e5e5e5;
  <div class="card"><a href="#">Templates</a></div>
   border-radius: 20px;
    <div class="card"><a href="#">Evidências</a></div>
   display: flex;
      <div class="card"><a href="#">Padrões</a></div> align-items: center;
        <div class="card"><a href="#">Classificação</a></div>
justify-content: center;
       text-decoration: none;
  <div class="card"><a href="#">Controle</a></div>
    </div>

outline: none;
    <!-- IA QA -->
flex-shrink: 0;
     <div class="section-title">🤖 IA QA</div> overflow: hidden;
    <div class="grid">
    <img 
    <div class="card"><a href="#">Gerar Casos de Teste</a></div> src="https://tdn.totvs.com/download/attachments/918397688/Frame%208.png?version=1&modificationDate=1740594296850&api=v2"
        <div classalt="card"><a href="#">Criar Cenários</a></div>Obras"
        <div class="card"><a href="#">Analisar Requisitos</a></div>style="
        <div class="card"><a href="#">Análise de Impacto</a></div>
width: 100%;
        height: 100%;
  <div class="card"><a href="#">Testes Exploratórios</a></div>
   object-fit: contain;
    <div class="card"><a href="#">Apoio Defeitos</a></div>
  ">
  </div>a>

    <!-- INDICADORESBLOCO 5 -->
  <a  <div class="section-title">📊 Indicadores Operacionais</div>href="https://tdn.totvs.com/pages/viewpage.action?pageId=198948859"
    <div classstyle="grid">
       width: <div class="card"><a href="#">Bugs por Módulo</a></div>
190px;
       height: 140px;
    <div class="card"><a href="#">Bugs por Severidade</a></div> background: #e5e5e5;
        <div class="card"><a href="#">SLA Correção</a></div>
border-radius: 20px;
       display: flex;
   <div class="card"><a href="#">Lead Time</a></div>
   align-items: center;
      <div class="card"><a href="#">Reabertura</a></div> justify-content: center;
        <div class="card"><a href="#">Cobertura Testes</a></div>
text-decoration: none;
        </div>

outline: none;
     <!-- EVOLUÇÃO -->flex-shrink: 0;
    <div class="section-title">📈 Evolução de Casos Específicos</div>overflow: hidden;
    <div class="chart-box">
    <img 
   Área reservada para gráficos de evolução:<br><br> src="https://tdn.totvs.com/download/attachments/918397688/Frame%209.png?version=1&modificationDate=1740594296787&api=v2"
        • Casos críticos<br>alt="Projetos"
        • Bugs reincidentes<br>style="
        • Falhas estruturais<br>width: 100%;
        • Pontos de risco sistêmico<br><br>
height: 100%;
        object-fit: contain;
  <strong>(Gráfico real será integrado aqui futuramente)</strong> ">
    </div>a>

</div>

</body>
</html>
Atalhos

Páginas filhas

Versões comparadas

Versão antiga 3

Nova versão 4

Chave
