Nesta aula eu mostro passo a passo como montar a Hero Section no Framer começando pela estrutura — sem animações. Primeiro eu crio containers e stacks, posiciono frames e imagens, ajusto larguras (92% / max 1216px), e organizo textos e botões como componentes. Exporto imagens em WebP otimizadas para poupar tempo depois e uso cópias provisórias para ocupar espaço enquanto ajusto o layout. Depois faço o refinamento: corrijo clipes para Visible, defino z-index para garantir hierarquia das camadas, ajusto gaps, alinhamentos e paddings (por exemplo padding-top do menu = 72px). Também configuro o ticker de logos, crio máscara para o efeito de fade, ajusto velocidade e limites de largura para responsividade parcial. No fim a sessão fica pronta para receber as animações, que deixo para a etapa final do projeto. Termos (explicação simples): - stack: grupo vertical/horizontal que organiza elementos em fila automaticamente. - absolute: posição que tira o elemento do fluxo normal e fixa em relação ao container. - z-index: controla quem fica na frente ou atrás nas camadas visuais. - mask (máscara): área que revela/esconde partes de um elemento para criar efeitos (ex.: fade). - ticker: componente que faz logos/textos rolarem horizontalmente (marquee). - WebP/PNG: formatos de imagem; WebP é mais leve, PNG é sem perdas. - clip (clipping): define se a imagem fica cortada dentro da caixa; trocar para Visible mostra a parte cortada. - viewport: área visível da tela (janela do navegador).