OctusForge — Octus-Naut
Página de venda de um toyart colecionável de tiragem limitada: a peça, o processo artesanal por trás dela e o fluxo de compra, em desktop e mobile.
- Papel
- Frontend, freelance — a página do produto e o fluxo de compra, num site mantido com o cliente
- Cliente
- Tiragem
- 100 peças numeradas
- Código
- Privado (cliente)
O problema
Um objeto colecionável feito à mão não se vende por especificação. O comprador precisa entender por que aquela peça custa o que custa: quantas existem, quem modelou, quantas etapas manuais separam o modelo 3D do boneco pintado que chega na caixa.
A página tinha então dois trabalhos ao mesmo tempo: contar essa história e vender, sem que a narrativa atrapalhe a compra nem a compra amasse a narrativa.
O que faz
- Página do produto com a peça, a tiragem limitada e o preço em destaque.
- Seção do processo artesanal: planejamento, modelagem 3D e pintura à mão.
- Galeria da peça fotografada em cenários reais, com lightbox.
- Fluxo de compra desenhado de ponta a ponta — entrega, pagamento, revisão e confirmação — com o endereço preenchido a partir do CEP e o pedido enviado à API do cliente.
- Layout pensado dos 320 px do celular pequeno até o monitor largo.
Como foi construído
React com TypeScript sobre Vite, Tailwind para o sistema visual, componentes acessíveis de base (Radix) e animação com Framer Motion. A página do produto é uma rota de um site maior do cliente; o checkout é outra rota, que consulta o ViaCEP e envia o pedido à API própria do cliente. Publicação na Vercel.
A história fica na página; a compra fica numa rota própria
A página tinha dois trabalhos — contar por que a peça custa o que custa, e vender. Misturar os dois na mesma tela faria a compra competir com a narrativa. A escolha foi separar: a página do produto é só peça, tiragem, preço, galeria e processo, com um único botão de compra; o checkout é uma rota à parte, em etapas — entrega, pagamento, revisão — sem nada da narrativa por perto.
O preço é uma navegação a mais entre o impulso e o pedido, e um estado de carrinho que precisa sobreviver à troca de rota. O que se compra é uma página do produto que pode mudar de tom sem tocar no checkout, e um checkout que pode ganhar meio de pagamento sem tocar na página.
Stack
Interface
Compra
Publicação
Telas
Capturas do site em produção (octusforge.com/octus-naut) em 22/09/2026, sem login e sem nada preenchido no checkout.