Reconstruir o herói como uma divisão editorial com o rolo como uma abertura

Featurekamo-marketing
Navios
19 de agosto de 2026 às 02:57 UTC
Autor
Kamo
Enviar
e6e05db

O carretel era um retângulo arredondado centrado com uma sombra de gota — um objeto colocado sobre o design em vez de parte dele — e era a ÚNICA coisa no herói: ff04781 apagou o crachá, título, descrição, CTAs e estatísticas quando ele pousou O vídeo, que deixou HeroHeadline. tsx órfão e dez chaves de cópia não utilizadas. Então... a seção não teve nenhuma tese e nenhum apelo à ação, que é a maior parte do por que leu como um quadrado no meio da tela. Agora uma composição de duas colunas: sobrancelha, manchete, lede, CTA e nota livre-para sempre à esquerda; o movimento cambaleante à direita, rodando PAST à direita borda do viewport. Três coisas fazem a integração: - os cantos da moldura são chanfrados a 45°, a mesma geometria que o hexágono campo já por trás dele, em vez do raio-fronteira que cada herói SaaS usa; - um corrimão leve para baixo da sua borda esquerda carrega a azeitona do título Passagem de viagem, ligando as duas metades da divisão; - sangra fora da tela em vez de parar curto, por isso não há quarta borda para o fazer ler como um cartão. A secção está ofuscada. A borda é um gradiente de 1px mostrando através da caixa de enchimento do pai, porque Clip-path corta fronteiras no chamfer. Ambas as caixas repetem o polígono – clip-path não herda, e uma caixa interna quadrada cutuca seus cantos. Trabalhos de detalhe: o controle de som foi movido para a parte inferior esquerda, desde que o quadro a borda direita está deliberadamente fora da tela e um controle ancorado lá seria inatingível. Um trilho de progresso ao longo da parte inferior mostra posição no circuito — a única pista de que o movimento cambaleante é finito em vez de um fundo animado. As estatísticas são uma regra sob a composição, sem contagem: quatro figuras corrida sobre carga competir com o carretel no momento que deve ser Observado. "Assista Demo" é ido como um CTA porque o movimento cambaleante ao lado do botão é a demonstração; o link secundário reutiliza a própria etiqueta "Ver preços" da tira CTA e alvo para que a página nomeie a ação de uma maneira. Nenhuma cópia nova: cada string já existia em en.json. i18n/request.ts já deep-merges cada localidade com Inglês, assim que as etiquetas de estatísticas faltando de 21 locales render em inglês até que o dicionário CI alcança. Código morto removido ao longo do caminho: um div acento-glow keyed fora de um `group-hover` sem antepassado `group', um vídeo não utilizadoContainerRef, e objeto-conteúdo em um Fonte 16:9 dentro de uma moldura 16:9.

Todas as alterações

Como o que vês no transporte?

Cada uma dessas atualizações pousa automaticamente em seu espaço de trabalho. Comece grátis e veja crescer semana após semana.

Começar Livre Para SempreVer Preços