<style>
  :root {
    --color-bg-page: #FFFFFF;
    
    --fill-primary-enabled: #1666DB;
    --fill-primary-hover: #1252AF;
    --fill-primary-pressed: #003D97;
    
    --fill-layer-01: #EBECEE;
    --fill-layer-01--inverse: #111B2F;
    --fill-layer-02: #FFFFFF;
    
    --content-primary: #111B2F;
    --content-primary--inverse: #FFFFFF;
    
    --border-focus: #111B2F;
  }
  
  [data-color-mode='dark'] {
     --color-bg-page: #3E4656;
    
  	--fill-primary-enabled: #C0D6F6;
   	--fill-primary-hover: #A2C2F1;
    --fill-primary-pressed: #73A3E9;
  
    --fill-layer-01: #273042;
    --fill-layer-01--inverse: #C0C3C8;
    --fill-layer-02: #111B2F;
    
    --content-primary: #FFFFFF;
    --content-primary--inverse: #111B2F; 
    
    --border-focus: #C0C3C8;
  }
  
  #section-shortcuts {margin-bottom:32px;}
  #section-shortcuts h2, #section-api-references h2 {margin: 0px 0px 16px 0px; color: var(--content-primary);}
  #section-shortcuts h4 {margin: 0px; color: var(--content-primary);}

  #section-shortcuts-content-container {display: flex; flex-wrap: wrap; background-color:var(--fill-layer-01); padding: 16px; border-radius: 24px;}
  
  #section-shortcuts-content-container a {margin: 8px; flex: 30%; text-decoration: none; box-shadow:2px 8px 24px rgb(0,0,0, 0.16); border-radius: 24px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
  #section-shortcuts-content-container a:hover {box-shadow:8px 16px 24px rgb(0,0,0, 0.16); transition-duration: 200ms;}
  #section-shortcuts-content-container a:nth-child(-n+3) {margin-right: 16px;}
  #section-shortcuts-content-container a:hover #section-shortcuts-content-item {box-shadow: inset 0px 0px 0px 2px var(--border-focus);}  

  #section-shortcuts-content-item--tab {position: relative; background-color: var(--fill-layer-01--inverse); border-radius: 12px 12px 16px 16px; padding-top: 8px; display: inline-flex; flex-direction: column; align-items: flex-start; width: 100%; height: 100%;}
  #section-shortcuts-content-item--tab #product-tag {color: var(--content-primary--inverse); padding: 0 8px 4px 8px; font-weight: 700; font-size: 12px;}

  #section-shortcuts-content-item {position: relative; background-color: var(--fill-layer-02); text-align: center; border-radius: 16px;padding: 16px; width:100%; height: 100%; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;}

  #section-api-references {margin-top: 40px;}

  #section-api-references-content {display: flex; flex-wrap: wrap;}
  #section-api-references-content a:nth-child(-n+2) {margin-right: 16px;} 
  #section-api-references-content a {flex: 30%; text-decoration: none; width: 100%; box-shadow:2px 8px 24px rgb(0,0,0, 0.16); border-radius: 24px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
  #section-api-references-content a:hover {box-shadow:8px 16px 40px rgb(0,0,0, 0.16); transition-duration: 200ms;}
  #section-api-references-content a:hover #section-api-references-card {box-shadow: inset 0px 0px 0px 2px var(--border-focus);}  
  

  #section-api-references-card {height: 100%; border-radius: 24px; padding: 24px; text-align:center; background-color: var(--fill-layer-02);}

  #section-api-references-card h3 {color: var(--content-primary); margin: 8px 0px; font-size: 16px; font-weight: 800;}
  #section-api-references-card p {color: var(--content-primary);}
</style>


<section id="section-shortcuts">
	<h2>Acessos rápidos</h2>
	<div id="section-shortcuts-content-container">
      <a href="/docs/autentica%C3%A7%C3%A3o">
        <div id="section-shortcuts-content-item--tab">
          <span id="product-tag">Comece aqui</span>
          <div id="section-shortcuts-content-item">
            <h4>Gerar token para acessar APIs Públicas da Gupy</h4>
          </div>
        </div>
      </a>
			
    	<a href="/docs/configurando-webhooks-e-obtendo-payloads-reais-">
        <div id="section-shortcuts-content-item--tab">
          <span id="product-tag">Comece aqui</span>
          <div id="section-shortcuts-content-item">
            <h4>Configurar, validar e testar o webhook</h4>
          </div>
        </div>
      </a>
    
    	<a href="/docs/fluxo-de-cria%C3%A7%C3%A3o-de-vagas-">
        <div id="section-shortcuts-content-item--tab">
          <span id="product-tag"> Gupy Recrutamento e Seleção </span>
          <div id="section-shortcuts-content-item">
            <h4>Criar vaga via Integração</h4>
          </div>
        </div>
      </a>

      <a href="/docs/fluxo-de-valida%C3%A7%C3%A3o-de-pessoas-candidatas-interno">
        <div id="section-shortcuts-content-item--tab">
          <span id="product-tag"> Gupy Recrutamento e Seleção </span>
          <div id="section-shortcuts-content-item">
            <h4>Verificar elegibilidade de uma candidatura via API</h4>
          </div>
        </div>
      </a>
   
    <a href="/docs/fluxo-de-admissão-da-pessoa-contratada">
        <div id="section-shortcuts-content-item--tab">
          <span id="product-tag"> Gupy Recrutamento e Seleção</span>
          <div id="section-shortcuts-content-item">
            <h4>Enviar dados de candidatura para admissão via Webhook</h4>
          </div>
        </div>
      </a>

      <a href="/docs/fluxo-de-extra%C3%A7%C3%A3o-de-dados-para-fins-de-bi">
        <div id="section-shortcuts-content-item--tab">
          <span id="product-tag"> Gupy Ecossistema</span>
          <div id="section-shortcuts-content-item">
            <h4>Extrair dados para integrar com BI</h4>
          </div>
        </div>
      </a>
    
      <a href="/docs/fluxo-de-admiss%C3%A3o-para-sistema-de-folha-">
        <div id="section-shortcuts-content-item--tab">
          <span id="product-tag"> Gupy Admissão</span>
          <div id="section-shortcuts-content-item">
            <h4>Integrar Gupy com sistema de folha de pagamento</h4>
          </div>
        </div>
      </a>

      <a href="/docs/produto-clima-e-engajamento">
        <div id="section-shortcuts-content-item--tab">
          <span id="product-tag"> Gupy Engajamento</span>
          <div id="section-shortcuts-content-item">
            <h4>Integre seu sistema com Gupy Engajamento</h4>
          </div>
        </div>
      </a>

      <a href="/docs/produto-educação-corporativa">
        <div id="section-shortcuts-content-item--tab">
          <span id="product-tag"> Gupy Treinamento</span>
          <div id="section-shortcuts-content-item">
            <h4>Integre seu sistema com Gupy Treinamento</h4>
          </div>
        </div>
      </a>
	</div>
</section>

<section id="section-api-references">
  <h2>Conteúdos</h2>
  <div id="section-api-references-content">
     <a href="/reference/">
      <div id="section-api-references-card">
      
      	<h3>Referências API</h3>
      	<p>Explore as funcionalidades da nossa API! Aqui você encontrará a <strong>possibilidade de realizar testes de chamada ao nossos endpoints</strong>.</p>
      </div>
     </a>
   
  	 <a href="/docs/">
      <div id="section-api-references-card">
       
      	<h3>Guias práticos para Integrações</h3>
      	<p>Veja nossos <strong>exemplos reais de processos de integração com tutoriais detalhados</strong> sobre os principais fluxos de integração.</p>
      </div>
     </a>
    
  	 <a href="https://docs.google.com/forms/d/e/1FAIpQLSc4Zd_dqac7x9WrnuivOJg_h8mP8oYJcauYXZSdj9XDRtjqDA/viewform">
      <div id="section-api-references-card">
      	<h3>Quer integrar sua solução com a Gupy?</h3>
      	<p>Acesse nosso formulário para te conhecermos melhor</p>
      </div>
     </a>
  </div>
</section>

<section id="section-api-references">
  <h2>Precisa de Ajuda?</h2>
  <div id="section-api-references-content">
     <a href="https://developers.gupy.io/discuss">
      <div id="section-api-references-card">
      	<h3>Fórum</h3>
      	<p>Acesse nosso fórum buscar informações. É bem provável que sua dúvida esteja aqui :)</p>
      </div>
     </a>
   
  	 <a href="https://suporte.gupy.io/s/">
      <div id="section-api-references-card">
       
      	<h3>Central de Ajuda</h3>
      	<p>Acesse nossos artigos sobre as funcionalidades de nossos produtos e tire suas dúvidas.</p>
      </div>
     </a>
    
  	 <a href="https://suporte.gupy.io/s/suporte?language=pt_BR">
      <div id="section-api-references-card">
      	<h3>Entre em contato com o suporte</h3>
      	<p>Abra uma solicitação para ser atendido por nossos analistas</p>
      </div>
     </a>
  </div>
</section>