<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>TheFlashCode | Solu&#231;&#245;es t&#233;cnicas</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Inter:wght@400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="page">
    <header class="topbar container">
      <a class="logo" href="#inicio">
        <div class="logo-mark" aria-hidden="true">
          <svg viewBox="0 0 140 72" class="logo-icon" role="img">
            <path class="bracket-shape" d="M48 12 16 36l32 24v-12L32 36l16-12z" />
            <path class="bolt-shape" d="M78 8 56 38h18l-6 26 28-36H76l6-20z" />
            <path class="bracket-shape" d="M92 12v12l16 12-16 12v12l32-24z" />
          </svg>
        </div>
        <div class="wordmark" aria-label="TheFlashCode">
          <span class="word word-light">The</span>
          <span class="word word-accent">Flash</span>
          <span class="word word-light">Code</span>
        </div>
      </a>
      <nav class="nav">
        <a class="nav-link" href="#solucoes">Solu&#231;&#245;es</a>
        <a class="nav-link" href="#github">GitHub</a>
        <a class="nav-link" href="#contato">Contato</a>
      </nav>
    </header>

    <main class="container">
      <section class="hero" id="inicio">
        <div class="hero-grid">
          <div class="hero-main">
            <p class="kicker">Solu&#231;&#245;es t&#233;cnicas aplicadas &#224; realidade.</p>
            <h1>Solu&#231;&#245;es que resolvem hoje<br>sem te atrasar amanh&#227;.</h1>
            <p class="lead">Vendemos solu&#231;&#245;es, para voc&#234; se dedicar no que voc&#234; &#233; bom.</p>
            <p class="lead">Ser r&#225;pido &#233; entregar uma solu&#231;&#227;o que n&#227;o te atrasa amanh&#227;.</p>
            <div class="actions">
              <a class="button primary" href="#contato">Falar comigo &#8594;</a>
              <a class="button ghost" href="#github">Ver projetos &#8594;</a>
            </div>
          </div>
          <div class="hero-side">
            <div class="hero-card">
              <p class="eyebrow">Ess&#234;ncia</p>
              <h3>Clareza antes da solu&#231;&#227;o</h3>
              <p>Diagn&#243;stico preciso, decis&#227;o r&#225;pida e entrega est&#225;vel — sem ru&#237;do e sem promessas vazias.</p>
              <div class="hero-tags">
                <span class="tag">Sem ru&#237;do</span>
                <span class="tag">Sem retrabalho</span>
                <span class="tag">Sem promessas vazias</span>
              </div>
            </div>
          </div>
        </div>
        <div class="hero-note">Foco em clareza, decis&#227;o e responsabilidade t&#233;cnica — o cliente v&#234; o resultado, n&#227;o a complexidade.</div>
      </section>

      <section class="manifesto">
        <div class="section-header">
          <span class="divider" aria-hidden="true"></span>
          <div>
            <p class="eyebrow">Posicionamento</p>
            <h2>Manifesto</h2>
          </div>
        </div>
        <div class="manifesto-text">
          <p>N&#227;o entregamos c&#243;digo. Entregamos solu&#231;&#245;es.</p>
          <p>C&#243;digo, infraestrutura e arquitetura s&#227;o meios. O objetivo &#233; resolver o problema com clareza e estabilidade.</p>
          <p>Velocidade n&#227;o &#233; pressa. &#201; decidir certo, executar bem e reduzir retrabalho.</p>
          <p>Se a solu&#231;&#227;o funciona hoje e continua funcionando amanh&#227;, ent&#227;o ela foi bem feita.</p>
          <p><strong>Vendemos solu&#231;&#245;es, para voc&#234; se dedicar no que voc&#234; &#233; bom.</strong></p>
        </div>
      </section>

      <section class="solutions" id="solucoes">
        <div class="section-header">
          <span class="divider" aria-hidden="true"></span>
          <div>
            <p class="eyebrow">Utilidade pr&#225;tica</p>
            <h2>O que resolvemos</h2>
          </div>
        </div>
        <div class="card-grid">
          <article class="card">
            <h3>Automa&#231;&#227;o de processos</h3>
            <p>Automatizamos rotinas para eliminar tarefas repetitivas, reduzir erro humano e ganhar tempo de opera&#231;&#227;o.</p>
          </article>
          <article class="card">
            <h3>Dashboards e visibilidade operacional</h3>
            <p>Indicadores e pain&#233;is para acompanhar capacidade de opera&#231;&#227;o, status e decis&#227;o — sem planilhas infinitas.</p>
          </article>
          <article class="card">
            <h3>Integra&#231;&#245;es e APIs</h3>
            <p>Conectamos sistemas, bancos e servi&#231;os (APIs) para a informa&#231;&#227;o circular com seguran&#231;a e rastreabilidade.</p>
          </article>
          <article class="card">
            <h3>Landing pages e portf&#243;lios</h3>
            <p>P&#225;ginas objetivas, r&#225;pidas e prontas para convers&#227;o — com identidade visual, SEO b&#225;sico e integra&#231;&#227;o de contato.</p>
          </article>
          <article class="card">
            <h3>Corre&#231;&#227;o e evolu&#231;&#227;o de sistemas</h3>
            <p>Diagn&#243;stico, corre&#231;&#227;o estrutural e evolu&#231;&#227;o de sistemas legados sem &quot;quebrar&quot; o que est&#225; em produ&#231;&#227;o.</p>
          </article>
          <article class="card">
            <h3>Arquitetura e organiza&#231;&#227;o t&#233;cnica</h3>
            <p>Organiza&#231;&#227;o de projetos com boas pr&#225;ticas (ex.: arquitetura limpa), padr&#245;es e disciplina para reduzir retrabalho.</p>
          </article>
        </div>
      </section>

      <section class="github" id="github">
        <div class="section-header">
          <span class="divider" aria-hidden="true"></span>
          <div>
            <p class="eyebrow">Transpar&#234;ncia</p>
            <h2>GitHub</h2>
          </div>
        </div>
        <div class="github-card">
          <div>
            <h3>Projetos, experi&#234;ncias e provas de trabalho</h3>
            <p>Portf&#243;lio t&#233;cnico com reposit&#243;rios, experi&#234;ncias e exemplos. Se quiser, eu mostro o antes/depois do problema e o racioc&#237;nio da solu&#231;&#227;o.</p>
          </div>
          <div class="github-actions">
            <a class="button primary" href="https://github.com/" target="_blank" rel="noopener">Abrir GitHub &#8594;</a>
          </div>
          <p class="hero-note">Dica: substitua o link pelo seu usu&#225;rio (ex.: https://github.com/seu-usuario).</p>
        </div>
      </section>

      <section class="processo" id="como-trabalhamos">
        <div class="section-header">
          <span class="divider" aria-hidden="true"></span>
          <div>
            <p class="eyebrow">M&#233;todo</p>
            <h2>Como trabalhamos</h2>
          </div>
        </div>
        <ol class="steps">
          <li>
            <h3>Diagn&#243;stico do problema</h3>
            <p>Entendimento direto do cen&#225;rio real, sem suposi&#231;&#245;es e sem solu&#231;&#245;es gen&#233;ricas.</p>
          </li>
          <li>
            <h3>Defini&#231;&#227;o da solu&#231;&#227;o</h3>
            <p>Plano objetivo, com impactos e prazos claros, priorizando estabilidade e baixo risco t&#233;cnico.</p>
          </li>
          <li>
            <h3>Execu&#231;&#227;o controlada</h3>
            <p>Entrega focada em resultado, clareza e facilidade de manuten&#231;&#227;o. O cliente v&#234; o efeito, n&#227;o o caos.</p>
          </li>
          <li>
            <h3>Entrega validada</h3>
            <p>Confer&#234;ncia final para garantir que a solu&#231;&#227;o funciona hoje e n&#227;o cria problemas amanh&#227;.</p>
          </li>
        </ol>
      </section>

      <section class="contato" id="contato">
        <div class="contact-card">
          <div>
            <h2>Contato</h2>
            <p>Converse direto comigo. Sem formul&#225;rios longos, sem rodeios. Voc&#234; traz o contexto, eu entrego a solu&#231;&#227;o.</p>
          </div>
          <div class="contact-actions">
            <a class="button primary" href="https://wa.me/55219" target="_blank" rel="noopener">Falar no WhatsApp</a>
            <a class="button ghost" href="mailto:contato@theflashcode.com">contato@theflashcode.com</a>
            <a class="button ghost" href="https://github.com/" target="_blank" rel="noopener">GitHub</a>
          </div>
        </div>
      </section>

      <footer class="rodape">
        <p>Solu&#231;&#245;es bem feitas n&#227;o chamam aten&#231;&#227;o. Elas simplesmente funcionam.</p>
      </footer>
    </main>
  </div>
</body>
</html>
