NOG Solutions — Site Institucional

O desafio

Um site institucional que fugisse do padrão genérico de landing page — sem parecer “mais um site feito com template”, mantendo alta performance mesmo com uma identidade visual ambiciosa, e funcionando bem em qualquer dispositivo, de notebooks robustos a hardware mais modesto.

O processo

Seguimos o mesmo Método que aplicamos em qualquer projeto — só que dessa vez o cliente éramos nós mesmos, o que exigiu o mesmo rigor que exigimos de qualquer entrega:

1. Diagnóstico e arquitetura: definição da stack (Astro para performance estática, TypeScript em toda a base, design system próprio) e da identidade visual — paleta, tipografia e motion exclusivos, decididos antes de qualquer linha de código de produção.
2. Desenvolvimento iterativo: cada seção construída, testada isoladamente e revisada antes de seguir para a próxima — hero, diagrama de arquitetura, terminal interativo, blog e cases, formulário de contato com backend próprio.
3. Revisão de segurança dedicada: antes de qualquer publicação, uma varredura completa por dados sensíveis expostos, validação de entrada, e configuração de infraestrutura (rate limiting, CORS, cabeçalhos de segurança) — o mesmo processo que descrevemos no nosso blog.
4. Ajuste fino de performance e compatibilidade: testes reais em múltiplos dispositivos e larguras de tela revelaram pontos de ajuste — responsividade mobile, comportamento do motor gráfico em hardware variado, e uma correção importante na forma como o site era compilado, que garantiu que o visual chegasse intacto em qualquer navegador.
5. Detecção adaptativa de hardware: em vez de depender de configurações do sistema operacional (que nem sempre refletem a intenção real do usuário), o site mede capacidade de processamento real do dispositivo para decidir o nível de efeitos visuais — garantindo fluidez em qualquer máquina, sem abrir mão da experiência completa em hardware capaz.
6. Operação contínua: monitoramento, analytics próprio e o mesmo suporte pós-entrega que oferecemos a qualquer cliente.

O que construímos

• Identidade visual própria: sistema de design com paleta, tipografia e motion exclusivos, sem depender de frameworks de UI genéricos.
• Motor gráfico próprio: hero com shader WebGL escrito do zero, com detecção adaptativa de capacidade do dispositivo para nunca comprometer a fluidez.
• Diagrama de arquitetura interativo: se desenha sozinho conforme o scroll, mostrando visualmente como estruturamos sistemas (borda, API, serviços, dados, observabilidade).
• Terminal interativo real: um shell funcional embutido no site, não uma animação — reflexo direto da nossa cultura técnica.
• Blog e cases via CMS próprio: usando Content Collections, sem depender de CMS externo ou banco de dados adicional.
• Analytics próprio: métricas de visitantes sem cookies, sem terceiros, hospedadas na nossa própria infraestrutura — dado nosso, sob nosso controle.
• Bilíngue (PT/EN) desde a arquitetura, não como tradução colada depois.

Infraestrutura

Hospedado na nossa própria VPS, atrás de Caddy com HTTPS automático, com API própria em Node.js/TypeScript rodando como serviço monitorado. Nenhuma etapa terceirizada — do provisionamento ao deploy, tudo passou pelas mesmas mãos que projetaram o sistema.

Por que isso importa

Não pedimos pra você confiar na nossa engenharia — você está navegando nela agora.