Mídia
A imagem conduz. Foto e vídeo grandes, o texto na área calma e o véu só para a leitura. A prova aparece como a própria loja e o próprio resultado: a captura rolando no navegador, o pedido chegando no celular.
Seção com imagem e respiro
Foto em tela cheia no tema imagem. data-posicao diz onde está a área calma: esquerda, direita, baixo ou topo; o véu vem desse lado. --foco é o ponto da foto que não pode ser cortado. No celular, o texto desce.
Texto à esquerda
.rq-imagem-secao · __midia · __corpo · __texto · data-posicao · --foco
Feito para .
A Chesslab é uma aceleradora de e-commerce: a gente desenvolve o site, acelera as vendas e faz quem já comprou voltar.
Texto no topo
data-posicao="topo"
Três frentes, um objetivo: vender mais.
Vídeo de fundo
<video class="rq-imagem-secao__midia"> · __pausa · data-rq="video-fundo"Sem som, em loop, só toca na tela. A pausa fica sempre visível. Com movimento reduzido não começa sozinho. O vídeo da demo é a foto de peças em movimento lento.
Tráfego sem método vira custo.
Player e figura
Vídeo num diálogo
.rq-video · __tocar · data-rq="video" · data-video · data-video-iframeA capa com o botão; o vídeo (ou o iframe do YouTube) só nasce ao abrir e some ao fechar. Sem JS, o link abre o arquivo.
Figura com legenda
.rq-figura · --sangrada
Galeria e antes e depois
Galeria
.rq-galeria · __grade · __item · --largo · --alto · data-rq="galeria"Grade que se arranja sozinha (grid-auto-flow: dense). Cada foto abre grande, com setas e a contagem lida em voz alta. Sem JS, o link abre a foto.
Antes e depois
.rq-antes-depois · __antes · __depois · __linha · data-rq="antes-depois"Um range nativo move o corte: arraste, ou use as setas. Aqui, a mesma foto sem e com o véu de leitura do Roque.
Prova: a loja e o pedido
Navegador com a loja rolando
.rq-navegador · __janela · __barra · __tela · __longaA capa 16:10 aparece primeiro; no hover ou no foco, a captura longa rola até o fim e volta ao sair. CSS puro: a tela é um container de tamanho. Lojas do portfólio da landing Shopify.
Celular com pedidos chegando
.rq-celular · __ilha · __pedidos · .rq-notificacao · data-rq="celular"O resultado mostrado como interface, ideia da revisão da home. Relógio e data reais; três pedidos chegam quando o celular aparece; tocar simula outro; o nome digitado entra nos pedidos. Os valores são de exemplo.
- Sua lojaagoraPedido confirmado: R$ 486,00