Offcanvas lateral. | Bootstrap 5: novos recursos e práticas recomendadas de HTML, CSS e JavaScript

Mesmo colocando os atributos no "a=href" e abaixo depois da tag main, colocando as "divs pro menu lateral" não aparece a barra lateral quando clico em "Quero Detalhes"

Sua pausa para desfrutar a vida.

Boas-vindas ao & Bistrô Serenatto! Um ambiente aconchegante e acolhedor para apreciar um bom café.

<section class="py-5">
  <h2 class="text-center fw-bold pb-1">Nossos serviços</h2>

  <div class="container d-flex justify-content-around flex-wrap">

    <div class="card m-4" style="width: 20rem;">
      <img src="./assets/cafe-card.png" class="card-img-top"
        alt="Balcão de padaria tradicional com alimentos diversos">
      <div class="card-body">
        <h5 class="card-title py-2 fw-bold">Café & Bistrô</h5>
        <p class="card-text">Nosso bistrô oferece uma ampla variedade de cafés, smoothies, deliciosos
          salgados e sobremesas. Uma excelente opção para quem busca um lugar tranquilo e
          aconchegante.</p>
        <a href="#" class="btn botao-padrao w-100 fw-bold" data-bs-toggle="offcanvas" data-bs-target="#canvas-1"
          aria-controls="offcanvasRight">Quero detalhes</a>
      </div>
    </div>

    <div class="card m-4" style="width: 20rem;">
      <img src="imagens/buffet-card.png" class="card-img-top" alt="Mesa de buffet com alimentos diversos">
      <div class="card-body">
        <h5 class="card-title fw-bold">Buffet</h5>
        <p class="card-text">Buffet e catering personalizado para eventos, produções e celebrações. Com
          um menu variado e adaptável às preferências do cliente, atendimento atencioso e
          profissional.</p>
        <a href="#" class="btn botao-padrao w-100 fw-bold mt-3" data-bs-toggle="offcanvas" data-bs-target="canvas-1"
          aria-controls="staticBackdrop">Quero detalhes</a>
      </div>
    </div>

    <div class="card m-4" style="width: 20rem;">
      <img src="imagens/delivery-card.png" class="card-img-top" alt="Caixa aberta armazenando comidas diversas">
      <div class="card-body">
        <h5 class="card-title fw-bold">Delivery</h5>
        <p class="card-text">Para quem deseja desfrutar no conforto de casa, oferecemos delivery dos
          produtos. Com o mesmo cardápio variado de sempre, sem perder nosso sabor e padrão de
          qualidade.</p>
        <a href="#" class="btn botao-padrao w-100 fw-bold mt-3" data-bs-toggle="offcanvas"
          data-bs-target="#canvas-1" aria-controls="offcanvasRight">Quero detalhes</a>
      </div>
    </div>
  </div>
</section>


<section class="banners banner-2 d-flex flex-column justify-content-center text-center">
  <div class="banners-titulo bg-body-secondary py-5">
    <h2 class="fw-bold">Portas abertas para todos os públicos.</h2>
    <p>Nosso espaço é aconchegante, pet friendly, preparado para receber crianças e pessoas com deficiência. Também
      oferecemos ambiente de coworking!</p>
  </div>
</section>

<section class="banners banner-3 d-flex flex-column justify-content-center text-center">
  <div class="banners-titulo bg-body-secondary py-5"></div>
</section>

<!-- código omitido -->




<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N"
  crossorigin="anonymous"></script>

Olá Anderson!

Ao analisar o código, notei que você está usando os atributos corretos no botão para ativar o Off Canvas. No entanto, você omitiu o código do Off Canvas, dessa forma não conseguimos analisar algum possível erro nessa parte do código, verifica então se você passou o id="canvas-1" corretamente para o Off Canvas.

Aqui está como o código da div do Off Canvas deve ser:

<div class="offcanvas offcanvas-end" tabindex="-1" id="canvas-1" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasRightLabel">Café & Bistrô</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <!-- Conteúdo do Off Canvas -->
  </div>
</div>

Espero ter ajudado, qualquer dúvida manda aqui.