dev-audioprocessing/pages/onbording/index.vue

<template>
<div>
  <div class="row">
    <div class="col-12 pt-3">
      <h6 class="text-muted text-center">We are analyzing your background noise...</h6>
    </div>
    <div class="col-12">
      <h4 class="text-center fw-bold pt-5">What headphones do you use?</h4>
      <h6 class="text-center text-muted">Make sure that your headphones are properly connected. </h6>
      <h6 class="text-center text-muted">To use Mindboost, headphones are required. </h6>
    </div>
    <div class=" pt-5 text-center">
      <input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
      <label class="btn btn-outline-warning py-3 px-5" for="success-outlined">
        <img src="~/assets/image/AirPodsPro.png" style="height: 60px">
        <p class="text-white text-center">In-Ear</p>
      </label>

      <input type="radio" class="btn-check " name="options-outlined" id="danger-outlined" autocomplete="off">
      <label class="btn btn-outline-warning ms-3 py-3 px-5" for="danger-outlined">
        <img src="~/assets/image/AirPodsProMax.png" style="height: 60px">
        <p class="text-white text-center">In-Ear</p>
      </label>
    </div>
  </div>

</div>
</template>