← Trabalhos
Betoferro
Landing page para uma construtora no Porto. Mistura de dois mundos, o dia editorial em papel branco com "Betão" gigante e "Ferro" na vertical, e a noite de obra em preto com um único laranja da marca.
- Segmento
- Construção e estruturas
- Entrega
- Landing page
- Origem
- Projeto conceito
- Ano
- 2026
- Tecnologia
- Astro, Tailwind CSS, GSAP
Projeto conceito: o negócio é fictício, criado para explorar o segmento. O design e o código são reais.
O desafio
Construtoras costumam ter sites cheios de fotos de capacete e azul corporativo. A Betoferro queria parecer uma empresa de engenharia séria e contemporânea, com a força do betão e do aço, e que levasse direto ao pedido de orçamento.
A solução
- Dia e noite. Duas referências misturadas: o topo e as obras vivem em papel branco e cinza de jornal, editorial e calmo; serviços, números e contacto vivem no preto de estaleiro à noite.
- Betão e Ferro. O nome partido em duas palavras gigantes: “Betão” na horizontal e “Ferro” rodado 90° em laranja, com as fotografias da obra encaixadas na tipografia.
- Um só laranja. O laranja da marca é a única cor de ação, nos botões, nos números e numa faixa a toda a largura com o manifesto.
- Cantos retos. Botões, campos e cartões sem raio, linhas finas e etiquetas em letra mono, como um painel de obra.
- Logótipo em vetor. O monograma B com as barras de prédio e a escora redesenhado em SVG, em versão clara e escura.
- Experiência de obra (GSAP). Uma barra laranja no topo mostra o avanço da “obra” com o scroll; “Betão” sobe letra a letra, as fotos são “betonadas” de baixo para cima e o manifesto acende palavra a palavra.
- Orçamento pelo WhatsApp. Tipo de obra, concelho e descrição numa mensagem pronta. Contactos genéricos do Porto.
O que uma construtora real ganharia
- Pedidos de orçamento com o tipo de obra e o local já indicados.
- Uma imagem de engenharia que pesa nos concursos e nos clientes particulares.
- Obras recentes apresentadas como um portfólio, não como uma galeria de telemóvel.
A estrutura
A landing numa folha
Role dentro da moldura: é o site real, a correr dentro da Babrand.



