Entregue a página de produto responsiva e minificada

O projeto final reúne as decisões das aulas anteriores numa página de produto. O resultado não é uma coleção de componentes bonitos isolados: é um percurso semântico que apresenta problema, benefício, prova, preço e ação sem perder orientação em tela pequena ou teclado.

Comece pela estrutura antes das classes:

<header>...</header>
<main>
  <section aria-labelledby="titulo-produto">...</section>
  <section aria-labelledby="titulo-beneficios">...</section>
  <section aria-labelledby="titulo-preco">...</section>
</main>
<footer>...</footer>

Use um único título principal e subtítulos para as seções. Link de navegação continua link; ação que altera estado continua botão. Tailwind não corrige uma tag escolhida pelo visual.

Construa o hero com base mobile e ampliação em md:

<section class="grid gap-8 py-16 md:grid-cols-[1fr_auto] md:items-center">
  <div class="min-w-0">...</div>
  <a class="rounded-lg bg-acao px-4 py-3 font-bold text-white" href="#preco">
    Testar grátis
  </a>
</section>

Depois reaproveite a escala em benefícios e preço. Reaproveitar não é copiar uma string sem pensar. Um cartão informativo e uma ação têm estados e semântica diferentes, embora compartilhem raio e padding.

O tema final deve declarar tokens em @theme, incluindo cor de ação, fonte de destaque e, se necessário, raio. Cores de superfície que mudam em runtime podem usar variáveis semânticas conectadas por @theme inline. Evite valores arbitrários repetidos; deixe cada exceção justificada.

Antes do build, procure classes montadas em partes. Um padrão como bg-${cor}-600 não será detectado. Substitua por mapa de strings completas ou variável CSS validada. Depois confira se arquivos compartilhados estão nas fontes, especialmente em monorepo.

Gere o CSS de produção:

npx @tailwindcss/cli -i src.css -o public/app.css --minify
wc -c public/app.css
gzip -9 -c public/app.css | wc -c

Registre versão, comando e números. O tamanho não precisa igualar o exemplo do artigo: seu conteúdo ativa outra combinação. Ele precisa ser reproduzível e explicado.

Agora faça revisão funcional. Em 320px, nenhum conteúdo pode exigir rolagem horizontal. Em 1440px, limites máximos impedem linhas longas. Com zoom de 200%, texto e controles continuam acessíveis. Com Tab, o foco aparece na ordem da leitura. Nos temas claro, escuro e sistema, texto, borda e ação mantêm contraste.

Teste conteúdo adverso: nome de plano longo, preço com desconto, descrição em duas linhas e mensagem de erro. Componentes que só funcionam com “Plano Pro” não estão prontos. Remova alturas rígidas antes de cortar texto importante.

No laboratório, o CSS é uma saída equivalente já compilada. A missão ali é revisar o mecanismo visual; no projeto local, o CLI continua sendo a fonte da verdade. Redimensione, use teclado e altere o título para uma frase maior.

Feche com uma lista de decisões: por que Grid organiza a página, por que Flex vive dentro de um cartão, qual token controla ação, qual condição ativa dark e como o foco é garantido. Quando outra pessoa consegue manter a página a partir dessa lista e do código, o projeto deixou de ser exercício e virou uma base evolutiva.