How to add my offers to the cart with the 'add to cart' button?

Question

"I have a dynamic product offer where I've performed calculations on the offer. The user has the option to select product variants, and now I would like to create an 'add to cart' button that will send the product name with the chosen variants by the user and the offer price

But honestly, I admit that I'm new to Shopify development and I still haven't understood the 'add to cart' functionality.

can someone help me?

Here is my code in main-product.liquid

s>
             {% when 'select_variants' %}
                  {% assign productPrice = product.price %}
                  {% assign priceReduce = 100 | minus: block.settings.percentage_first %}
                  {% assign discountAmount = productPrice | times: priceReduce %}
                  {% assign baseprice = discountAmount | divided_by: 100 %}
                  {% assign secondOffer = baseprice | times: 2 %}
                  {% assign secondBase = secondOffer | times: priceReduce %}
                  {% assign secondOfferAmount = secondBase | divided_by: 100 %}
                  {% assign lastOffer = baseprice | times: 3 %}
                  {% assign lastbase = lastOffer | times: priceReduce %}
                  {% assign lastOfferAmount = lastbase | divided_by: 100 %}

                  <div class="card" style="background-color: {{ block.settings.background_color }};" data-title="{{ block.settings.title_offer_first }}" data-price="{{ baseprice }} {{ shop.currency }}">
                    <div class="accordion">
                      <div class="offerText">
                        <p class="title" style="color: {{ block.settings.title_color }}; background: {{ block.settings.background_color }};"> {{ block.settings.title_offer_first }}</p>
                        <p class="rightplace">
                          <span class="oldprice"><del> {{ product.price }} {{ shop.currency }} </del></span>
                          <span class="newprice" style="color: {{ block.settings.colorprice }};">{{ baseprice }}  {{ shop.currency }}</span>
                        </p>
                      </div>
                      <p class="resume" style="color: {{ block.settings.phrase_color }};"> {{ block.settings.phrase1 }} </p>
                    </div>
                    <!-- Contenu de l'accordéon -->
                    <div class="panel">
                      <div class="selecteds">
                        {%- for option in product.options_with_values -%}
                          {%- assign option_name = 'option' | append: forloop.index -%}
                          {%- if product.variants[0][option_name] -%}
                            <div class="select-pair">
                              <label for="{{ option_name }}">{{ option.name }}</label>
                              <select name="{{ option_name }}" id="{{ option_name }}">
                                {%- assign unique_option_values = product.variants | map: option_name | uniq -%}
                                {%- for option_value in unique_option_values -%}
                                  <option value="{{ option_value }}">{{ option_value }}</option>
                                {%- endfor -%}
                              </select>
                            </div>
                          {%- endif -%}
                        {%- endfor -%}
                      </div>
                    </div>
                  </div>

And here is my schema block

{
  "type": "select_variants",
  "name": "variant bundle",
  "settings": [
    {
      "type": "text",
      "label": "titre offre",
      "id": "title_offer_first",
      "default": "STANDARD OFFER",
      "info": "taille de l'offre."
    },
    {
      "type": "text",
      "label": "phrase_offer1",
      "id": "phrase1",
      "default": "Box of surgical masks (x1)",
      "info": "texte attirant pour offre"
    },
    {
      "type": "text",
      "label": "taux offre",
      "id": "percentage_first",
      "default": "10",
      "info": "donne le pourcentage de l'offre 1"
    },
    {
      "type": "text",
      "label": "titre offre 1",
      "id": "title_offer_second",
      "default": "MOST POPULAR OFFER",
      "info": "second offer title."
    },
    {
      "type": "text",
      "label": "phrase offer2",
      "id": "phrase2",
      "default": "Box of surgical masks (x2)",
      "info": "texte attirant pour offre"
    },
    {
      "type": "text",
      "label": "taux offre 2",
      "id": "percentage_second",
      "default": "15",
      "info": "donne le pourcentage de l'offre 2"
    },
    {
      "type": "text",
      "label": "titre offre 3",
      "id": "title_offer_last",
      "default": "BEST DEAL  : UP TO 28% OFF",
      "info": "first offer title."
    }

And here is my js code

<script>
  var cards = document.getElementsByClassName('card');
  var i;

  for (i = 0; i < cards.length; i++) {
    cards[i].addEventListener('click', function () {
      // Fermer tous les cards avant d'ouvrir le clic actuel
      for (var j = 0; j < cards.length; j++) {
        var panel = cards[j].querySelector('.panel');
        if (cards[j] !== this) {
          cards[j].classList.remove('active-card');
          panel.style.maxHeight = null;
        }
      }
      this.classList.toggle('active-card');
      var panel = this.querySelector('.panel');
      if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + 'px';
      }
    });

    var selects = cards[i].querySelectorAll('select');
    var j;

    for (j = 0; j < selects.length; j++) {
      selects[j].addEventListener('click', function (event) {
        event.stopPropagation(); // Empêche la propagation du clic au card parent
      });
    }
  }
</script>