Ogestan_Drossagyn_Papilocare/OgestanPre/contenido/03.html

<style>
  .back0 {
    background-image: url(img/bg04.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .back1 {
    background-image: url(img/bg04.jpg);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
  }

  .text-info-p {
    display: none;
  }

  .bg-grp {
    background: #6D2778;
    background: linear-gradient(to left, #6D2778 0%, #CB198E 100%);
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
  }

  .bg-textss {
    background-color: #fff;
    border-radius: 20px;
  }

  .group-class:nth-child(2) {
    width: 100%;
  }

  .group-class:nth-child(1) {
    width: 45%;
  }

  .hand-move {
    display: none;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 10;
    animation: moveLeftRight 2s ease-in-out infinite;
  }

  .apa0, .apa1, .apa2, .apa3 {
    display: none;
  }

  .bg-color {
    background-color: rgba(201, 124, 187, .5);
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
  }

  @keyframes moveLeftRight {
    0% {
      transform: translateX(-20px);
    }
    50% {
      transform: translateX(20px);
    }
    100% {
      transform: translateX(-20px);
    }
  }

  @media(min-width: 768px) {
    .group-class:nth-child(1) {
      width: 30%;
    }
  }

  @media(min-width: 991px) {
    .group-class:nth-child(2) {
      width: 65%;
      padding-right: 2rem;
    }

    .group-class:nth-child(1) {
      max-width: 30%;
    }
  }
</style>
<div class='page-sco py-2 py-md-0 back0'>
  <div class='container'>
    <div class='row justify-content-center align-items-center'>
      <div class='col-12 apa0'>
        <div class='row justify-content-center'>
          <div class="col-12 mb-3 text-center animate__animated animate__bounceInDown">
            <h2 class="text-primary fw-bold mb-0">Componentes y sus beneficios</h2>
          </div>
          <div class="col-12 col-xl-10 apa1 animate__animated animate__zoomIn">
            <div class="content-slides p-2">
              <div class="body-slides p-3">
                <div
                  class="flex-content-swiper d-flex flex-wrap justify-content-center align-items-center gap-2 gap-md-3 gap-lg-2 text-center text-lg-start">
                  <div id="decoImg" class="decoracion-img group-class position-relative text-center disabled">
                    <div class="hand-move position-absolute">
                      <i class="fa-solid fa-hand-back-point-down fa-rotate-180 display-3 fw-bolder text-blue-1"></i>
                    </div>
                    <div class="swiper sw-cards">
                      <div class="swiper-wrapper">
                        <div class="swiper-slide">
                          <img src="img/03.0.png" class="img-fluid">
                        </div>
                        <div class="swiper-slide">
                          <img src="img/03.1.png" class="img-fluid">
                        </div>
                        <div class="swiper-slide">
                          <img src="img/03.2.png" class="img-fluid">
                        </div>
                        <div class="swiper-slide">
                          <img src="img/03.3.png" class="img-fluid">
                        </div>
                        <div class="swiper-slide">
                          <img src="img/03.4.png" class="img-fluid">
                        </div>
                        <div class="swiper-slide">
                          <img src="img/03.5.png" class="img-fluid">
                        </div>
                        <div class="swiper-slide">
                          <img src="img/03.6.png" class="img-fluid">
                        </div>
                        <div class="swiper-slide">
                          <img src="img/03.7.png" class="img-fluid">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="group-class bg-grp mb-2 mb-lg-0 p-2">
                    <div id="texts" class="texts-parent bg-textss px-3 py-5">
                      <div class="text-info-p text-center animate__animated animate__zoomIn">
                        <p class="mb-0">Disminuye potencialmente el <strong class="text-secondary">riesgo de defectos en el tubo
                            neural</strong>.</p>
                      </div>
                      <div class="text-info-p text-center animate__animated animate__zoomIn">
                        <p class="mb-0">Ayuda a desarrollar <strong class="text-secondary">huesos fuertes</strong>. Modula el <strong
                            class="text-secondary">sistema inmune</strong> y
                          la
                          <strong class="text-secondary">secreción de insulina</strong>.
                        </p>
                      </div>
                      <div class="text-info-p text-center animate__animated animate__zoomIn">
                        <p class="mb-0">Actúa sobre el <strong class="text-secondary">metabolismo de aminoácidos</strong>, la <strong
                            class="text-secondary">glucosa</strong> y los
                          <strong class="text-secondary">lípidos</strong>.
                        </p>
                      </div>
                      <div class="text-info-p text-center animate__animated animate__zoomIn">
                        <p class="mb-0">Apoya en la <strong class="text-secondary">formación de glóbulos rojos</strong> y <strong
                            class="text-secondary">previene la anemia</strong>.
                        </p>
                      </div>
                      <div class="text-info-p text-center animate__animated animate__zoomIn">
                        <p class="mb-0">Actúa como <strong class="text-secondary">antioxidante</strong>, ayuda a <strong
                            class="text-secondary">combatir infecciones</strong> y apoya
                          la
                          <strong class="text-secondary">absorción del hierro</strong>.
                        </p>
                      </div>
                      <div class="text-info-p text-center animate__animated animate__zoomIn">
                        <p class="mb-0">Actúa como <strong class="text-secondary">antioxidante</strong> y <strong
                            class="text-secondary">facilita la implantación</strong> del óvulo
                          fecundado.</p>
                      </div>
                      <div class="text-info-p text-center animate__animated animate__zoomIn">
                        <p class="mb-0"><strong class="text-secondary">Madura los ovocitos</strong> y apoya el <strong
                            class="text-secondary">cierre del tubo neural</strong> en las
                          primeras etapas del desarrollo.</p>
                      </div>
                      <div class="text-info-p text-center animate__animated animate__zoomIn">
                        <p class="mb-0">Reduce el <strong class="text-secondary">tiempo de preconcepción</strong>. Tiene efecto <strong
                            class="text-secondary">antiinflamatorio y
                            antioxidante</strong>.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="w-100 py-3 py-md-4 text-center next-action bg-white" style="display: none;">
    <div class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite" data-sec="sec1"
    data-audio="audiom15"
    >
      <img src="img/nSec.png" class="img-fluid">
    </div>
  </div>
</div>
<div id="sec1" class='page-sco py-2 py-md-4 back1' style="display: none;">
  <div class='container'>
    <div class='row justify-content-center align-items-center'>
      <div class='col-12 apa2'>
        <div class='row justify-content-center'>
          <div class="col-12 col-lg-10">
            <div class="card bg-color border-0 rounded-4 p-3">
              <div class="row justify-content-center align-items-center">
                <div class="col-7 col-md-5 text-center order-2 order-md-1 animate__animated animate__flipInY">
                  <img src="img/03.8.png" class="img-fluid">
                </div>
                <div class="col-12 col-md-7 col-lg-6 order-1 order-md-2 mb-3 mb-md-0 animate__animated animate__lightSpeedInRight">
                  <p>Para todas las mujeres en <strong class="text-secondary">edad fértil</strong>, y en el <strong
                      class="text-secondary">1er trimestre del embarazo</strong>, la
                    suplementación con una combinación como la de <strong class="text-secondary">OGestan<sup>®</sup> Pré</strong> aporta:
                  </p>
                  <ul class="apa3">
                    <li class="animate__animated animate__fadeInUp animate__delay-5s">La <strong class="text-secondary">forma activa del ácido fólico</strong>.</li>
                    <li class="animate__animated animate__fadeInUp animate__delay-10s">Un <strong class="text-secondary">aumento en la probabilidad de la concepción</strong>.</li>
                    <li class="animate__animated animate__fadeInUp animate__delay-12s">Una <strong class="text-secondary">mayor probabilidad de embarazo a término</strong>.</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    "use strict";

    const audiom06 = CourseNav.createSound('audio/audiom06.mp3');
    const audiom15 = CourseNav.createSound('audio/audiom15.mp3');
    const audiom16 = CourseNav.createSound('audio/audiom16.mp3');

    const audios = [
      CourseNav.createSound('audio/audiom07.mp3'),
      CourseNav.createSound('audio/audiom08.mp3'),
      CourseNav.createSound('audio/audiom09.mp3'),
      CourseNav.createSound('audio/audiom10.mp3'),
      CourseNav.createSound('audio/audiom11.mp3'),
      CourseNav.createSound('audio/audiom12.mp3'),
      CourseNav.createSound('audio/audiom13.mp3'),
      CourseNav.createSound('audio/audiom14.mp3'),
    ];

    CourseNav.audioController.stopAllSoundsAndPlay(audiom06);

    audiom06.on('play',function(){
      $('.apa0').show();
    });

    audiom15.on('play', function () {
      $('.apa2').show();
    });

    audiom15.on('end', function () {
      CourseNav.audioController.stopAllSoundsAndPlay(audiom16);
      $('.apa3').show();
    });

    audiom16.on('end',function(){
      CourseNav.setSlideVisited();
    });

    let currentIndex = 0;
    const textElements = $('.text-info-p');
    let swiper;

    $('.btn-next-section').click(function () {
      $(this).removeClass('animate__animated animate__pulse animate__infinite');
      gotoSection($(this).data('sec'));
      $(this).parent().hide();

      const audioName = $(this).data('audio');
      if (audioName) {
        setTimeout(() => {
          CourseNav.audioController.stopAllSoundsAndPlay(eval(audioName));
        }, 500);
      } else {
        CourseNav.soundClick();
      }
    });

    // Función para cambiar a un slide específico
    function goToSlide(index) {
      if (index >= 0 && index < audios.length) {
        currentIndex = index;

        // Ocultar todos los textos y mostrar el correspondiente
        textElements.hide();
        $(textElements[currentIndex]).show();

        // Reproducir audio correspondiente
        CourseNav.audioController.stopAllSoundsAndPlay(audios[currentIndex]);
      }
    }

    audiom06.on('end', function () {
      $('.apa1').show();

      // Inicializar Swiper después de mostrar el elemento
      swiper = new Swiper('.sw-cards', {
        effect: 'cards',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 'auto',
        threshold: 5,
        shortSwipes: true,
        longSwipes: true,
        longSwipesRatio: 0.2,
        longSwipesMs: 200,
        followFinger: true,
        allowTouchMove: true,
        touchRatio: 1.5,
        touchAngle: 45,
        cardsEffect: {
          perSlideOffset: 6,
          perSlideRotate: 2,
          rotate: true,
          slideShadows: false,
        },
        on: {
          touchStart: function () {
            $('.hand-move').hide();
          },
          slideChange: function () {
            const newIndex = this.activeIndex;
            if (newIndex < audios.length) {
              goToSlide(newIndex);
              if (newIndex === audios.length - 1) {
                $('.next-action').show();
              }
            }
          }
        }
      });

      // Mostrar primer texto y reproducir primer audio
      $(textElements[0]).show();
      CourseNav.audioController.stopAllSoundsAndPlay(audios[0]);
      $('.decoracion-img').removeClass('disabled');
      $('.hand-move').show();
    });


  });
</script>