Site de apresentação de um gateway de pagamentos para empresas, com métodos de pagamento, vantagens, tabela de taxas, exemplo de integração e perguntas frequentes. É a vitrine comercial do produto; o processamento de pagamentos não faz parte deste código.
Papel
Desenvolvimento do site e da apresentação do produto
Topo do site em linspayments.com. Números da tela são ilustrativos.
01 / Contexto
História e problema
Para quem
Empresas que precisam aceitar Pix, cartão, boleto e cripto e comparam taxas e facilidade de integração antes de contratar um gateway.
Problema
O produto precisava de uma página que explicasse em sequência o que é oferecido, quanto custa e como integrar, e que levasse o visitante ao contato comercial.
Restrições
Prazo curto e escopo de página única, sem backend. A base visual partiu de um modelo de código aberto sob licença MIT, adaptado à marca e ao conteúdo do produto.
25/05/2026
Landing page completa no repositório, com seções de métodos, vantagens, números, taxas, integração e perguntas frequentes.
28/05/2026
Projeto incluído no portfólio da Site Fácil como site de fintech.
2026
Site em linspayments.com.
02 / Papel
Minha responsabilidade
Liderança e direção
Defini a sequência de leitura da página: proposta, métodos de pagamento, vantagens, taxas, integração e dúvidas.
Escolhi partir de um modelo aberto de landing page para concentrar o esforço no conteúdo e na marca.
Execução técnica direta
Adaptei o modelo ao produto: identidade azul e roxa, logotipos, metadados de SEO e Open Graph em português e tema escuro fixo.
Criei as seções de métodos de pagamento, vantagens, taxas, integração e perguntas frequentes com componentes React e primitivas Radix UI.
Organizei a navegação responsiva com menu móvel e animações com Framer Motion e NumberFlow.
03 / Arquitetura
Arquitetura documentada
Aplicação Next.js com App Router em uma única rota. A página é composta por seções independentes em React; os componentes de interface seguem o padrão shadcn sobre primitivas Radix UI. Não há chamadas a APIs, banco de dados ou serviços de pagamento.
Arquitetura do site Lins Payments
Visitante
Navegador
Aplicação
Next.js (App Router)
Página única
Seções
Métodos e vantagens
Taxas e integração
Perguntas frequentes
Interface
Radix UI
Tailwind CSS 4
Framer Motion
Conexões
O navegador recebe a página única gerada pelo Next.js.
A página é montada a partir de seções React independentes.
As seções usam componentes Radix UI estilizados com Tailwind CSS e animados com Framer Motion.
Camadas e tecnologias
Frontend
Next.js 16.1 com App Router, React 19.2 e TypeScript 5.9. Fonte Inter carregada por next/font.
Componentes
Accordion, diálogo, menu de navegação, menu suspenso, separador e tooltip sobre Radix UI, com class-variance-authority, clsx e tailwind-merge. Ícones Lucide e Radix.
Estilo e movimento
Tailwind CSS 4 com tw-animate-css, Framer Motion para entrada das seções e NumberFlow para contadores.
SEO
Título, descrição, palavras-chave e Open Graph definidos nos metadados da aplicação, idioma pt-BR e imagem de compartilhamento.
Qualidade
ESLint com a configuração do Next.js. Sem testes automatizados.
04 / Decisões
Decisões técnicas e compromissos
01
Partir de um modelo aberto
Problema
A página precisava ficar pronta rápido, com aparência de produto de software e componentes acessíveis.
Decisão
Usar como base um modelo de landing page SaaS de código aberto (licença MIT) e substituir seções, textos e marca.
Motivo
O modelo já trazia navegação, tema escuro e componentes Radix testados; o trabalho ficou concentrado na mensagem do produto.
Compromisso
Parte da estrutura e do nome do pacote herdados do modelo, e a obrigação de manter o aviso de licença.
02
Sequência de leitura orientada à decisão
Problema
Quem avalia um gateway quer saber primeiro quais meios aceita, quanto custa e quanto trabalho dá integrar.
Decisão
Ordenar a página em métodos, vantagens, números, taxas, integração e perguntas frequentes, com chamadas para preços e contato no topo.
Motivo
Cada seção responde a uma objeção comum antes da próxima.
Compromisso
Página longa em celular, compensada pelo menu com âncoras.
03
Site de apresentação sem backend
Problema
O processamento de pagamentos exige infraestrutura, contratos e certificações próprias.
Decisão
Manter o site como frontend de apresentação, sem formulários que coletem dados financeiros e com contato por e-mail.
Motivo
Separa a comunicação comercial da plataforma transacional e evita expor dados sensíveis num site de marketing.
Compromisso
Os elementos que lembram painel e API são ilustrativos e precisam ser lidos como tal.
05 / Evidências
Resultados e próximos passos
Resultados e evidências
Site entregue em linspayments.com.
Página única com sete seções e metadados de SEO em português.
Próximos passos
O escopo é a vitrine comercial: o processamento de pagamentos, a API e o painel transacional ficam fora deste código.
Os números de destaque (empresas, volume processado, disponibilidade e transações) e o painel do topo são ilustrativos e não representam operação.
Próximo passo: testes automatizados e medição de desempenho da página.
06 / Telas
Galeria
Seção de integração. O código é um exemplo de apresentação.
