<!-- Semanticamente é um <h2> (respeita a hierarquia do documento), mas possui o tamanho visual de um <h5> -->
<h2 class="h5 text-primary fw-semibold">Subseção Técnica com Tamanho Compacto</h2>
 
<!-- Um parágrafo <p> comum estilizado visualmente como um cabeçalho secundário -->
<p class="h3 fw-bold text-dark">Chamada em Destaque sem Impacto na Árvore de Headings</p>

<!-- Seção Hero com Tipografia Moderna em Bootstrap 5 -->
<div class="container py-5">
  <div class="row align-items-center g-5">
    <!-- Coluna de Conteúdo Editorial -->
    <div class="col-lg-7">
      <div class="badge bg-primary-subtle text-primary border border-primary-subtle px-3 py-2 rounded-pill mb-3">
        Web Academy • Aula 06
      </div>
      
      <!-- Título com Display Responsivo e Peso Customizado -->
      <h1 class="display-4 fw-bold text-dark lh-sm mb-3">
        Domine a Tipografia <span class="text-primary">Moderna</span> no Front-End
      </h1>
      
      <!-- Parágrafo Lead de Abertura -->
      <p class="lead text-muted mb-4">
        Estruture páginas elegantes com hierarquia visual impecável, combinando classes display de alto impacto, headings semânticos para SEO e parágrafos de alta legibilidade.
      </p>
      
      <!-- Bloco de Citação Editorial (Blockquote) -->
      <figure class="p-3 border-start border-3 border-primary bg-light rounded-end-3 mb-4">
        <blockquote class="blockquote mb-2">
          <p class="fs-6 fst-italic mb-0 text-secondary">
            "O bom design tipográfico não apenas embeleza a tela: ele reduz a carga cognitiva e acelera a absorção da mensagem."
          </p>
        </blockquote>
        <figcaption class="blockquote-footer mb-0 small text-muted">
          Diretrizes de UX da <cite title="Web-ZoneWare Academy">Web-ZoneWare</cite>
        </figcaption>
      </figure>
 
      <div class="d-flex gap-3">
        <button class="btn btn-primary btn-lg px-4 shadow-sm">Começar Agora</button>
        <button class="btn btn-outline-secondary btn-lg px-4">Explorar Guia</button>
      </div>
    </div>
 
    <!-- Coluna de Demonstração de Utilitários de Texto -->
    <div class="col-lg-5">
      <div class="card border-0 shadow-sm rounded-4 p-4 bg-white">
        <h2 class="h5 fw-bold text-dark border-bottom pb-2 mb-3">Utilitários de Texto Rápidos</h2>
        
        <p class="text-uppercase fw-bold text-primary small mb-1">1. text-uppercase (Caixa Alta)</p>
        <p class="text-muted small mb-3">Ideal para rótulos curtos, badges e itens de navegação.</p>
 
        <p class="text-capitalize fw-semibold text-dark small mb-1">2. text-capitalize (Primeira Letra Maiúscula)</p>
        <p class="text-muted small mb-3">Formatação automática de nomes próprios e títulos de cartões.</p>
 
        <p class="fw-semibold text-danger small mb-1">3. text-truncate (Truncamento com Reticências)</p>
        <div class="text-truncate p-2 bg-light rounded border text-muted small" style="max-width: 280px;">
          Este texto longo será cortado automaticamente sem quebrar a largura do card container.
        </div>
      </div>
    </div>
  </div>
</div>