Landing page de cafeteria

Página de apresentação de um negócio fictício, responsiva e acessível.

[pessoal]2026pronto

[ver o site]

O Ladeira Café é uma cafeteria fictícia de Belo Horizonte, criada para praticar layout, responsividade e atenção a detalhes visuais. A página está no ar como demonstração em /demos/cafeteria.

O que tem na página

• Abertura com chamada, botões de ação e uma ilustração feita só com SVG e CSS (sem nenhuma imagem externa).
• Cardápio em abas (espressos, coados, gelados e comidas), com preços formatados em reais.
• Grãos da casa, com notas sensoriais e uma escala visual do nível de torra.
• História, endereço e horários, e um formulário de reserva com validação no navegador.

Decisões técnicas

• HTML, CSS e JavaScript puros, gerados de forma estática pelo Astro dentro do próprio portfólio. A página tem layout e estilos próprios, separados do resto do site.
• Acessibilidade: link para pular ao conteúdo, abas no padrão WAI-ARIA (setas, Home e End), menu mobile com aria-expanded e fechamento com Esc, mensagens de erro do formulário ligadas aos campos e anunciadas por leitores de tela, foco sempre visível e animações desligadas para quem prefere movimento reduzido.
• Responsiva do celular ao desktop, com grid e clamp() na tipografia.
• Sem confundir ninguém: uma faixa no topo avisa que o negócio é fictício, o formulário não envia nada e a página tem noindex e fica fora do sitemap, para não aparecer em buscas de cafeterias de verdade.