Landings
Landing é composição, não configuração — cada uma responde a uma campanha. Por isso não existe um componente LandingPage: existem peças, e estes exemplos mostram como combiná-las.
Aqui vale a exceção de cor: por serem superfície de marketing, o roxo pode ser tipografia display. Em UI de aplicação ele volta a ser só ponto de estado.
Hero institucional
Tipografia display empilhada, régua pontilhada, coluna marcada por hairline e bloco de grid sangrando pela borda.
Connected
Innovation
Center
Vitrine de números
A página feita inteira de StatBlock. O EU usa numeric={false} porque é sigla, não número — e Chivo é fonte de número.
00million units sold
320million purchased
EUfastest growing market
$3bon exports
Localidade
Headline em bounding box tracejado, com a coordenada em mono rotacionada ao lado.
New York
London
Landing completa
As peças juntas numa página só: hero com o grid dissolvendo, vitrine de números, manifesto e rodapé. É o exemplo para usar como ponto de partida.
São Paulo
Connected Innovation Center
24visitas por mês
320visitantes no ano
12espaços
92%taxa de presença
O que acontece aqui
- Workshops de cocriação.
- Demonstrações de tecnologia.
- Tours guiados.
- Hackathons.
Manifesto
Painel de marca encostado numa coluna de lista com traços. A divisa é hairline de 1px.
Innovation
Center
- Transportation.
- The future of mobility.
- Aerospace.
- Outer space.
- Decarbonization.
- A roadmap to net-zero.