<div class=”container”>
<h2>Área de Acesso</h2>
<!– Botão Enviar Documentação –>
<button class=”button button-doc”>
<i class=”icon-doc”>📂</i> <!– Ícone representando documento –>
<span>Enviar Documentação</span>
</button>
<p class=”button-description”>Envie toda a documentação necessária para nosso sistema de forma rápida e segura.</p>
<!– Botão Área do Cliente –>
<button class=”button button-client”>
<i class=”icon-client”>👤</i> <!– Ícone representando o cliente –>
<span>Área do Cliente</span>
</button>
<p class=”button-description”>
Acesse as guias de impostos, relatórios financeiros, folha de pagamento, dashboards e assuntos de RH.
</p>
</div>
<style>
/* Estilos para o Popup */
.container {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
max-width: 500px;
padding: 30px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
.container h2 {
font-size: 1.5rem;
color: #333;
margin-bottom: 15px;
}
/* Estilo dos botões */
.button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 15px 20px;
font-size: 1rem;
font-weight: bold;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button i {
font-size: 1.5rem;
margin-right: 10px;
}
/* Botão Enviar Documentação */
.button-doc {
background-color: #4CAF50;
}
.button-doc:hover {
background-color: #45a049;
}
/* Botão Área do Cliente */
.button-client {
background-color: #2196F3;
}
.button-client:hover {
background-color: #1e88e5;
}
/* Descrição dos botões */
.button-description {
font-size: 0.9rem;
color: #666;
margin-top: 5px;
text-align: center;
}
/* Responsividade */
@media (max-width: 768px) {
.container {
max-width: 90%;
padding: 20px;
}
.button {
flex-direction: column;
text-align: center;
}
.button i {
margin: 0 0 10px 0;
}
}
</style>
