Pular para o conteúdo
Menu
← 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.

Ver o site no ar Ver a estrutura ↓

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

  1. Ver o site no ar ↗

Role dentro da moldura: é o site real, a correr dentro da Babrand.

Próximo trabalho

Quer um projeto assim para o seu negócio?

Vamos conversar ↗