Landing pages

Maquetação e stack

• HTML5 / CSS3 / JS puro, sem frameworks nem bundlers.
• Layout responsivo; fundos decorativos das seções via background-size: cover.
• Todas as imagens em WebP com dimensões explícitas → CLS = 0.
• Textos construídos em torno da confiança: para iniciantes, para quem teve uma experiência ruim na autoescola e para retomar a prática após uma pausa.

Formulário de contato

Um formulário de contato com processamento no servidor em PHP — enviado por AJAX sem recarregar a página.

• Um campo honeypot para barrar bots (um campo oculto, invisível para pessoas).
• Validação no cliente e no servidor.
• Os pedidos são encaminhados para o messenger do proprietário.

Performance (PageSpeed 100 / 100)

A página atinge 100 de Performance tanto no desktop quanto no mobile.

• O CSS crítico está embutido no head — a requisição render-blocking de estilo foi eliminada.
• A fonte Inter é self-hosted: um subset woff2 apenas com cirílico, font-display: optional — zero requisições ao Google Fonts e nenhuma repintura tardia dos títulos.
• O retrato do hero é WebP, recomprimido e marcado com fetchpriority=high (é o elemento de LCP).
• Os fundos decorativos das seções foram comprimidos (um fundo pesado caiu de 579 KB para 92 KB), além de preconnect e defer nos scripts.

SEO e dados estruturados

• Schema.org / JSON-LD: LocalBusiness com endereço (PostalAddress).
• Title keyword-first, hierarquia de headings correta, Open Graph e canonical.
• Textos alt significativos e landmarks semânticos.

Acessibilidade (nota 100)

• Contraste elevado a WCAG AA em todos os elementos: botões, links, rótulos dos campos do formulário e rodapé.
• Landmark main, labels corretos nos campos do formulário e rótulos aria.
• Áreas de toque adequadas e navegação por foco.

Por que o projeto é interessante

• Uma referência de landing page totalmente otimizada: 100 nas três métricas do Lighthouse ao mesmo tempo — algo que não se vê com frequência.
• Fontes self-hosted e CSS inline removem dependências de terceiros do caminho crítico de renderização.
• Ciclo completo: estrutura e textos → maquetação → formulário em PHP → otimização → SEO.

Maquetação e stack

Um front-end sem dependências. As fontes vêm do stack do sistema, então a página não faz nenhuma requisição a serviços externos de fontes.

• Marcação semântica: landmark main, seções significativas e hierarquia de headings correta.
• Layout responsivo mobile-first em flex/grid, com uma UX mobile bem trabalhada.
• Interatividade (scroll suave, navegação) em JS puro — sem jQuery.
• Compatibilidade entre navegadores e responsividade em todos os breakpoints.

Performance

A velocidade está no projeto da página, não foi acoplada depois.

• O CSS crítico está embutido diretamente no head — não há requisição render-blocking por folha de estilo externa.
• O fundo do hero carrega com prioridade via preload + fetchpriority=high — é o elemento de LCP.
• Todas as imagens foram convertidas para WebP, cada uma com width/height explícitos → deslocamento de layout CLS = 0.
• O script usa defer para não bloquear o parsing do documento.

SEO e dados estruturados

• Schema.org / JSON-LD: HomeAndConstructionBusiness com a lista de serviços (Service), ofertas (Offer) e a área de atendimento.
• Title keyword-first, hierarquia H1–H3 correta e textos alt significativos.
• Open Graph, canonical e meta tags bem cuidadas.
• Landmarks semânticos para acessibilidade e indexação.

Acessibilidade

• Contraste WCAG AA — texto escuro nos botões de destaque.
• Landmarks semânticos e âncoras de navegação funcionais.
• Textos alt significativos e links de contato acessíveis (telefone, messengers).

Por que o projeto é interessante

• Uma demonstração de que dá para construir uma landing page rápida, acessível e pronta para SEO em stack cru, sem nenhuma dependência.
• Performance como prioridade: CSS crítico inline e priorização do LCP entregam 100 / 95 no PageSpeed.
• Ciclo completo por uma única pessoa: mockup → maquetação → otimização → SEO.

Maquetação e stack

Maquetação responsiva a partir de um mockup pronto sobre o grid do Bootstrap 4.

• Grid responsivo container / row / col em todos os breakpoints.
• Navbar fixa com menu hambúrguer no mobile.
• A fonte decorativa personalizada BERNIER nos títulos — woff2 self-hosted (subset apenas com o cirílico maiúsculo: 2,19 MB OTF → 123 KB).
• Colagens em aquarela e imagens de fundo via background-size: cover.

Interatividade (jQuery)

• Um acordeão no bloco de perguntas frequentes.
• Um seletor de moeda ₽ / $ nos cards de planos.
• Uma lista suspensa de tintas (dropdown).
• Scroll suave até as âncoras de navegação.

Performance e imagens

Cerca de 530 KB de peso desnecessário foram removidos da página.

• Todas as imagens foram convertidas para WebP: colagem do hero, planos, ícones e logotipo.
• Hero responsivo via srcset — o mobile recebe uma versão mais leve.
• A fonte decorativa foi refeita em subset apenas com os glifos realmente usados (2,19 MB → 123 KB).
• width/height explícitos, fetchpriority no hero e preconnect ao CDN.
• PageSpeed: 97 no desktop, 82 no mobile — o teto do mobile é limitado pelo Bootstrap + jQuery de terceiros, um compromisso consciente para uma demo de maquetação a partir de mockup.

Acessibilidade

• Landmark main e rótulos aria no botão hambúrguer.
• O laranja e o azul da marca foram ajustados para o contraste WCAG AA.
• Hierarquia de headings correta e textos alt.
• Acessibilidade 95 no Lighthouse.

Por que o projeto é interessante

• Mostra o trabalho não só em stack cru, mas também com framework: maquetação a partir do mockup de outra pessoa, em Bootstrap + jQuery.
• Um visual atmosférico com uma fonte personalizada cuidadosamente otimizada em peso.
• Elementos interativos “vivos” sem um framework JS pesado.