Relay — Descrição

Relay é uma interface conceitual de produtividade focada em comandos, atalhos de teclado e execução rápida de tarefas.

A proposta é centralizar busca, ações e ferramentas em uma experiência minimalista, rápida e orientada a fluxo, permitindo que o usuário mantenha o ritmo sem depender constantemente do mouse.

Neste desafio, o objetivo é reproduzir com fidelidade a landing page da Relay a partir da referência visual, com foco em tipografia, grid, espaçamento, contraste, responsividade e consistência visual.

A stack é livre. O importante é chegar o mais próximo possível da referência apresentada.

Relay — Briefing do Desafio

Objetivo

Reproduzir a landing page da Relay com o maior nível possível de fidelidade visual a partir das referências fornecidas.

Foco principal

• Hierarquia tipográfica

• Grid e alinhamentos

• Espaçamentos e proporções

• Bordas e divisores

• Contraste

• Responsividade

• Consistência entre seções

Requisitos

A implementação deve:

• Ser responsiva

• Funcionar corretamente em desktop e mobile

• Preservar a estrutura visual da referência

• Possuir navegação superior

• Conter hero com headline, texto de apoio e CTAs

• Reproduzir a interface demonstrativa de comandos

• Conter as principais seções apresentadas na referência

• Possuir CTA final e footer

• Utilizar HTML semântico

• Manter boa acessibilidade

Direção visual

A interface deve seguir uma estética:

• Minimalista

• Monocromática

• Predominantemente preta

• Tipografia branca e cinza

• Bordas e divisores sutis

• Grid rígido

• Grandes áreas de respiro

• Poucos elementos decorativos

Evite adicionar cores, sombras fortes, gradientes ou componentes que não existam na referência.

Interações

Podem ser implementadas interações simples, como:

• Hover em botões e links

• Navegação responsiva

• Tabs da área de demonstração

• Pequenas transições

Não é necessário implementar toda a lógica real do produto exibido nas interfaces simuladas.

Stack

A stack é livre.

React, Next.js, Vue, Svelte ou qualquer outra tecnologia front-end pode ser utilizada.

Critério principal

O principal objetivo deste desafio é reproduzir com precisão uma interface usando apenas referência visual.

Observe cuidadosamente proporções, espaçamentos, tipografia e alinhamentos antes de implementar.