This commit is contained in:
2025-12-09 14:10:02 -06:00
parent 352fdff6e4
commit f9cdd739e3
58 changed files with 655 additions and 78 deletions
+86 -18
View File
@@ -1,31 +1,80 @@
<style>
.back0 {
background-image: url("img/bg00.jpg");
background-image: url(img/bg00s.jpg);
background-size: cover;
background-position: center;
background-position: top center;
background-repeat: no-repeat;
}
.back1 {
background-image: url(img/bg01.jpg);
background-size: cover;
background-position: 100% 100%;
background-repeat: no-repeat;
}
@media(min-width: 991px) {
.back0 {
background-image: url(img/bg00.jpg);
background-position: center center;
}
}
</style>
<div class="page-sco back0">
<div class="page-sco back0 py-2 py-md-4">
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-12">
<div class="row justify-content-center align-items-center">
<div class="col-7 col-md-5 text-center mb-3">
<img src="img/01.0.png" class="img-fluid floating" />
<div class="row">
<div class="col-12 col-lg-7">
<div class="row justify-content-center">
<div class="col-12 mb-3 text-center" data-sal="zoom-in">
<div class="d-inline-block position-relative">
<hr class="m-0 mb-2 opacity-100 border-top-2 text-white">
<h1 class="text-white fw-bolder">¡Bienvenido a <br> OGestan<sup>®</sup> Plus!</h1>
<hr class="m-0 mt-2 opacity-100 border-top-2 text-white">
</div>
</div>
<div class="col-12 text-center" data-sal="flip-up">
<div class="w-100 position-relative">
<div id="wrap-comenzar"
data-sec="sec1"
class="btn btn-begin text-white fw-bold animate__animated animate__pulse animate__infinite py-1">
Comenzar
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-7 mb-3 text-center">
<h3 class="amor text-gris-1 fw-light">Bienvenido al curso:</h3>
<div class="position-relative w-100 text-center mb-2">
<h1 class="amor fw-bold text-rosa-claro mb-0">Orientación al Cliente</h1>
<img src="img/adorno1.png" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<div id="sec1" class="page-sco back1 py-3 py-md-4" style="display: none;">
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-12 col-md-10 col-lg-9 mb-3" data-sal="slide-right">
<div class="card bg-var-2 border-0 rounded-3 shadow-none px-3 py-2 text-blue-1">
<p>Gracias por iniciar este módulo. Aquí conocerás los puntos clave de <strong>OGestan<sup>®</sup> Plus</strong>, el
suplemento más completo para apoyar la etapa de <strong>fertilidad, embarazo y lactancia</strong>.</p>
</div>
<div class="position-relative w-100 mb-4">
<h1 class="text-primary amor">y Empatía</h1>
</div>
<div class="w-100 position-relative">
<div id="wrap-comenzar" class="btn btn-begin animate__animated animate__pulse animate__infinite py-2">
Comenzar
</div>
<div class="col-12 apa0" style="display: none;">
<div class="row justify-content-center align-items-center">
<div class="col-7 col-md-5 col-xl-4 text-center order-2 order-md-1" data-sal="zoom-in">
<img src="img/01.0.png" class="img-fluid">
</div>
<div class="col-12 col-md-7 col-xl-5 order-1 order-md-2 mb-3 mb-md-0" data-sal="flip-left">
<h2 class="text-secondary fw-medium">¿Qué aprenderás hoy?</h2>
<p class="animate__animated animate__zoomIn animate__delay-2s">Al terminar este módulo podrás:</p>
<ul class="mb-0 bul0">
<li class="animate__animated animate__fadeInUp animate__delay-4s">Comunicar qué es OGestan<sup>®</sup> Plus.</li>
<li class="animate__animated animate__fadeInUp animate__delay-7s">Describir sus beneficios más importantes.</li>
<li class="animate__animated animate__fadeInUp animate__delay-10s">Identificar lo que lo hace único en el mercado.</li>
<li class="animate__animated animate__fadeInUp animate__delay-13s">Responder objeciones comunes de médicos.</li>
</ul>
</div>
</div>
</div>
@@ -38,6 +87,18 @@
$(function () {
"use strict";
const audiom00 = CourseNav.createSound('audio/audiom00.mp3');
const audiom01 = CourseNav.createSound('audio/audiom01.mp3');
audiom00.on('end',function(){
CourseNav.audioController.stopAllSoundsAndPlay(audiom01);
$('.apa0').show();
});
audiom01.on('end',function(){
CourseNav.setSlideVisited();
});
if (!CourseNav.isVisited() || CourseNav.isDebug()) {
tour();
} else {
@@ -46,9 +107,16 @@
function showIntro() {
$("#wrap-comenzar").removeClass("disabled");
$('.personaje').addClass('animate__animated animate__pulse');
}
$("#wrap-comenzar").click(function (e) {
e.preventDefault();
CourseNav.soundClick();
gotoSection($(this).data('sec'));
CourseNav.audioController.stopAllSoundsAndPlay(audiom00);
$(this).removeClass('animate__animated animate__pulse animate__infinite');
});
/**
* Inicia un tour interactivo que guía al usuario a través de las funcionalidades del curso.