Este site

O site institucional da própria LinieX: sistemas próprios, automação e IA para operações, com hero em Canvas 2D e a marca aplicada à risca.

  • Site institucional
  • Sistemas, automação e IA

Você está navegando neste site.

Setor
Tecnologia para operações: sistemas próprios, automação e inteligência artificial
Escopo
Copy, estrutura, interface, animações e desenvolvimento.
Stack
Next.js 16 · React 19 · TypeScript · Tailwind CSS v4 · Motion · Lenis
Capturas
Atualizado em
Primeira dobra do site da LinieX no desktop: título “Sua empresa não precisa de mais ferramentas. Precisa de uma estrutura capaz de escalar.”, botões “Construir meu sistema” e “Conhecer a LinieX” e linhas finas convergindo para um ponto focal à direita, sobre o símbolo da marca em marca d’água.
Primeira dobra do site da LinieX no celular, com o título em duas frases, o texto de apoio e os botões “Construir meu sistema” e “Conhecer a LinieX” empilhados.

Preview completo

Role dentro de cada janela para percorrer a página como ela está no ar. Capturas de .

Página inicial da LinieX no desktop, do hero até a seção de IA: problema em seis fragmentos, manifesto, seis cards de serviço, metodologia em cinco etapas, diagrama de sistemas e três cases com interfaces codadas.
Desktop · 1440 pxDo topo à seção de IA.
Página inicial da LinieX no celular, do hero até o diagrama “Everything connects”, com as seções em coluna única e a metodologia numa linha do tempo vertical.
Celular · 390 pxDo topo ao diagrama de sistemas.

O site institucional da própria LinieX: uma home longa que apresenta a empresa pela ideia de estrutura antes de ferramenta, com as regras da marca verificadas no código.

Contexto

A LinieX projeta sistemas próprios, automações e inteligência artificial para operações fragmentadas. O site apresenta essa proposta e conduz a uma conversa: abre com “Sua empresa não precisa de mais ferramentas. Precisa de uma estrutura capaz de escalar.” e termina num formulário sobre cenário, objetivo e gargalo. Uma regra valeu para todo o conteúdo: nada inventado. Números, depoimentos, e-mail e redes só aparecem quando confirmados.

Como foi pensado

A marca foi aplicada sem interpretação. Os PNGs oficiais da logo são só recortados e redimensionados, e um script confere proporção, máscara e cor de cada derivado. As pás do símbolo sobem a 30°, então toda diagonal do site usa 30°, 150° ou 90°. O zero itálico tem quatro camadas: CSS global, nenhuma fonte itálica carregada, uma checagem no código e um teste do estilo calculado de cada elemento. Branco sobre o magenta #EB005B fica em 4,48:1 e reprova no AA para texto comum; por isso não há botão magenta com texto, e magenta como texto só aparece a partir de 24px. A home vai do problema ao contato e constrói confiança pelo método exposto; os sites de clientes ficam nesta área de cases, com capturas e o que fizemos em cada um. No hero, em Canvas 2D, cerca de 24 linhas de 1px convergem para um ponto focal que acompanha o ponteiro com atraso; a logo nunca se move. No celular e com movimento reduzido, o canvas fica estático e nenhuma cena prende a rolagem. Sem WebGL e sem GSAP.

Seção Princípio em fundo magenta: “THE X IS WHERE EVERYTHING CONNECTS.”, um X de duas linhas finas e os pares Strategy × Technology, People × Systems, Data × Decisions e Structure × Scale, com a frase final e a logo em grafite.
O Princípio, a única seção magenta do site.

O que foi feito

Desenvolvemos o site em Next.js 16, React 19, Tailwind CSS v4, Motion e Lenis, com as fontes hospedadas no próprio site. Ele reúne a home, com 14 seções ancoradas, esta área de cases, a página /insights, pronta para artigos, e uma página 404. Na home, os três tipos de sistema da seção de cases são interfaces codadas em React, sem números, nomes ou logos. O contato é o front-end de um formulário com seis campos, validação em português e proteção contra spam, e nunca simula sucesso: sem o endpoint de envio configurado, ele avisa e não envia nada. Em 19/09/2026, o Lighthouse rodado sobre o build de produção local marcou Performance 93 no celular (mediana de três execuções) e 98 no computador, e 100 em Acessibilidade, Boas práticas e SEO.

Seção de contato: título “Sua operação já cresceu. Talvez sua estrutura precise acompanhar.”, formulário em vidro com os campos Nome, E-mail, Empresa, WhatsApp, tema e mensagem, e o card “Step 01 · Conversa”.
O contato: formulário em vidro com seis campos e validação em português.

Destaques

  • Hero em Canvas 2D: linhas de 1px convergem para um ponto que segue o ponteiro, e a logo fica parada.
  • Diagonais só a 30°, 150° e 90°, o ângulo das pás do símbolo.
  • Nenhum texto em itálico; magenta como texto só a partir de 24px.
  • Tipos de sistema mostrados como interfaces codadas, sem dados ou logos de clientes.
  • Primeira carga da home sem nenhuma requisição a terceiros.

Desempenho medido

Celular

Performance
93
Acessibilidade
100
Boas práticas
100
SEO
100

Performance entre 89 e 94 nas 3 execuçõesLCP 3,0 s · CLS 0 · TBT 100 ms

Computador

Performance
98
Acessibilidade
100
Boas práticas
100
SEO
100

Performance 98 nas 2 execuções

Fonte: Lighthouse 13.5.0 no build de produção local (Chromium aberto pelo Playwright), mediana de 3 execuções no celular e 2 no computador, . Medido localmente, não no PageSpeed Insights. O número pode mudar no domínio final.

Site não é vitrine.É parte da operação.

Conte o que a empresa precisa comunicar e para onde o visitante deve ir. Começamos pela estrutura, antes da primeira tela.