448 lines
15 KiB
HTML
448 lines
15 KiB
HTML
<style>
|
|
.back0 {
|
|
background-image: url(img/bg06.jpg);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
height: 100%;
|
|
}
|
|
|
|
.back1 {
|
|
background-image: url(img/bg06.jpg);
|
|
background-repeat: no-repeat;
|
|
background-position: 100% 0;
|
|
background-size: cover;
|
|
}
|
|
|
|
.anim0,
|
|
.anim1 {
|
|
display: none;
|
|
}
|
|
|
|
.shadow-vx {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.cid1 .swiper-wrapper {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.btn-arrow {
|
|
max-width: 85px;
|
|
}
|
|
|
|
@media(min-width: 991px) {
|
|
.img-mx-w img {
|
|
max-width: 71%;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 768px) {
|
|
.shadow-vx {
|
|
max-width: 76%;
|
|
}
|
|
|
|
.btn-arrow {
|
|
max-width: 75px;
|
|
}
|
|
}
|
|
|
|
.versus {
|
|
background-color: #FFF;
|
|
border-radius: 15px;
|
|
border-left: solid 3px var(--bs-secondary);
|
|
text-align: center;
|
|
}
|
|
|
|
.card-competencia {
|
|
padding-top: 70px !important;
|
|
margin-top: -50px !important;
|
|
}
|
|
</style>
|
|
<div
|
|
id="sec0"
|
|
class='page-sco py-2 pt-md-3 back0'
|
|
>
|
|
<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 mb-3"
|
|
data-sal="slide-right"
|
|
>
|
|
<h2 class="text-secondary fw-bold">Competidores</h2>
|
|
<p class="mb-0 animate__animated animate__lightSpeedInLeft animate__delay-1s">En el mercado de
|
|
suplementos para maternidad existen varias marcas con características y formulaciones distintas.
|
|
Aunque cada una ofrece beneficios, <strong>ninguna presenta la combinación tan completa de 19
|
|
nutrientes que ofrece OGestan<sup>®</sup> Plus.</strong></p>
|
|
</div>
|
|
<div class="col-12 mb-3">
|
|
<div class="row justify-content-center">
|
|
<div
|
|
class="col-5 col-md-4 img-mx-w text-center mb-3"
|
|
data-sal="zoom-in"
|
|
data-sal-delay="100"
|
|
>
|
|
<img
|
|
src="img/06.0.png"
|
|
class="img-fluid"
|
|
>
|
|
</div>
|
|
<div
|
|
class="col-5 col-md-4 img-mx-w text-center mb-3"
|
|
data-sal="zoom-in"
|
|
data-sal-delay="300"
|
|
>
|
|
<img
|
|
src="img/06.1.png"
|
|
class="img-fluid"
|
|
>
|
|
</div>
|
|
<div
|
|
class="col-5 col-md-4 img-mx-w text-center mb-3"
|
|
data-sal="zoom-in"
|
|
data-sal-delay="500"
|
|
>
|
|
<img
|
|
src="img/06.2.png"
|
|
class="img-fluid"
|
|
>
|
|
</div>
|
|
<div
|
|
class="col-5 col-md-4 img-mx-w text-center mb-3 mb-md-0"
|
|
data-sal="zoom-in"
|
|
data-sal-delay="600"
|
|
>
|
|
<img
|
|
src="img/06.3.png"
|
|
class="img-fluid"
|
|
>
|
|
</div>
|
|
<div
|
|
class="col-5 col-md-4 img-mx-w text-center"
|
|
data-sal="zoom-in"
|
|
data-sal-delay="800"
|
|
>
|
|
<img
|
|
src="img/06.4.png"
|
|
class="img-fluid"
|
|
>
|
|
</div>
|
|
<div
|
|
class="col-5 col-md-4 img-mx-w text-center"
|
|
data-sal="zoom-in"
|
|
data-sal-delay="1000"
|
|
>
|
|
<img
|
|
src="img/06.5.png"
|
|
class="img-fluid"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col-12 text-center ins0"
|
|
style="display: none;"
|
|
>
|
|
<div
|
|
class="btn-next-section d-inline-block animate__animated animate__pulse animate__infinite"
|
|
data-sec="sec1"
|
|
data-audio="audiom14"
|
|
>
|
|
<img
|
|
src="img/nSec.png"
|
|
class="img-fluid"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
id="sec1"
|
|
class="page-sco back1"
|
|
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 text-center mb-3"
|
|
data-sal="slide-left"
|
|
>
|
|
<h2 class="text-orange-2 fw-bold">No olvidemos reforzar...</h2>
|
|
</div>
|
|
<div
|
|
class="col-12 col-lg-9"
|
|
data-sal="flip-down"
|
|
>
|
|
<div class="d-flex flex-wrap flex-md-row justify-content-center align-items-center gap-2">
|
|
<div class="btn-prev btn-arrow d-inline-block order-2 order-md-1">
|
|
<img
|
|
src="img/06.6.png"
|
|
class="img-fluid"
|
|
>
|
|
</div>
|
|
<div class="position-relative shadow-vx flex-fill order-1 order-md-2 rounded-3">
|
|
<div
|
|
class="card bg-green-2 border-0 rounded-3 shadow-none p-3 position-relative z-3"
|
|
style="border-bottom-right-radius: 0 !important; border-bottom-left-radius: 0 !important;"
|
|
>
|
|
<div class="row justify-content-center align-items-center">
|
|
<div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
|
|
<h1 class="fw-bold text-primary">OGestan<sup>®</sup> Plus</h1>
|
|
<ol>
|
|
<li><strong>Número</strong> de componentes <span
|
|
class="fw-bold text-primary h3">19</span>.</li>
|
|
<li>Cantidad de <strong>Omega 3</strong> (DHA 250 mg, EPA 50 mg).</li>
|
|
<li>Contenido de <strong>Vitamina D</strong> (10 mcg)</li>
|
|
<li>Diferenciación del hierro (hierro <strong>bisglicinato</strong>).</li>
|
|
</ol>
|
|
</div>
|
|
<div class="col-7 col-md-4 text-center">
|
|
<img
|
|
src="img/06.8.png"
|
|
class="img-fluid"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="swiper cid1 position-relative z-1"
|
|
style="display:none;"
|
|
>
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<div class="card bg-var-2 card-competencia border-0 rounded-3 shadow-none p-3">
|
|
<div class="row justify-content-center align-items-center">
|
|
<div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
|
|
<h4 class="fw-bold text-primary">Regenesis Max</h4>
|
|
<p class="mb-0">Destacar que <strong>Regenesis</strong><strong> Max (RM) no
|
|
contiene hierro </strong><strong>bisglicinato</strong>
|
|
(solo sulfato ferroso), y un <strong>mínimo de Vitamina D.</strong></p>
|
|
<div class="versus p-2 my-3">
|
|
OGestan Plus <b>10 mg de vitamina D</b> <br> <em>vs</em> <br> Regenesis Max
|
|
<span class="text-muted">INFORMACIÓN PENDIENTE</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-7 col-md-4 text-center">
|
|
<img
|
|
src="img/06.9.png"
|
|
class="img-fluid"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="card bg-var-2 card-competencia border-0 rounded-3 shadow-none p-3">
|
|
<div class="row justify-content-center align-items-center">
|
|
<div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
|
|
<h4 class="fw-bold text-primary">Previta mom</h4>
|
|
<p class="mb-0">Destacar la <strong>menor cantidad de Omega 3 en
|
|
</strong><strong>Previta</strong> <strong>Mom</strong><strong>.</strong></p>
|
|
<div class="versus p-2 my-3">
|
|
OGestan Plus <b>DHA 250 mg, EPA 50 mg</b> <br> <em>vs</em> <br> Previta mom
|
|
<span class="text-muted">DHA 146 mg, EPA 50 mg</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-7 col-md-4 text-center">
|
|
<img
|
|
src="img/06.10.png"
|
|
class="img-fluid"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="card bg-var-2 card-competencia border-0 rounded-3 shadow-none p-3">
|
|
<div class="row justify-content-center align-items-center">
|
|
<div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
|
|
<h4 class="fw-bold text-primary">Elevit 2 Omegas</h4>
|
|
<p class="mb-0">Elevit 2 Omegas <strong>no cumple con las cantidades requeridas de
|
|
ácido fólico</strong>.</p>
|
|
<div class="versus p-2 my-3">
|
|
OGestan Plus <b>ácido fólico 400 mcg</b> <br> <em>vs</em> <br> Elevit 2 Omegas
|
|
<span class="text-muted">ácido fólico 360 mcg</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-7 col-md-4 text-center">
|
|
<img
|
|
src="img/06.11.png"
|
|
class="img-fluid"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="card bg-var-2 card-competencia border-0 rounded-3 shadow-none p-3">
|
|
<div class="row justify-content-center align-items-center">
|
|
<div class="col-12 col-md-7 col-xl-7 mb-3 mb-md-0">
|
|
<h4 class="fw-bold text-primary">Materplus</h4>
|
|
<p class="mb-0">Materplus tiene <strong>una fórmula con menos
|
|
elementos.</strong></p>
|
|
<div class="versus p-2 my-3">
|
|
OGestan Plus <b>19 componentes</b> <br> <em>vs</em> <br> Materplus <span
|
|
class="text-muted"
|
|
>16 componentes</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-7 col-md-4 text-center">
|
|
<img
|
|
src="img/06.12.png"
|
|
class="img-fluid"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="btn-next btn-arrow rounded-circle d-inline-block order-2 order-md-3 animate__animated animate__pulse animate__infinite"
|
|
>
|
|
<img
|
|
src="img/06.7.png"
|
|
class="img-fluid"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
$(function () {
|
|
"use strict";
|
|
|
|
const audiom13 = CourseNav.createSound('audio/audiom13.mp3');
|
|
const audiom14 = CourseNav.createSound('audio/audiom14.mp3');
|
|
|
|
CourseNav.audioController.stopAllSoundsAndPlay(audiom13);
|
|
|
|
audiom13.on('play', function () {
|
|
$('.anim0').show();
|
|
});
|
|
|
|
audiom13.on('end', function () {
|
|
$('.ins0').show();
|
|
});
|
|
|
|
const paths = [
|
|
"audio/audiom15.mp3",
|
|
"audio/audiom16.mp3",
|
|
"audio/audiom17.mp3",
|
|
"audio/audiom18.mp3"
|
|
];
|
|
let audios = [];
|
|
paths.forEach(function (element) {
|
|
audios.push(CourseNav.createSound(element));
|
|
});
|
|
|
|
let sec1Shown = false;
|
|
|
|
// Asegurar que sec0 esté visible al inicio
|
|
$('#sec0').show();
|
|
$('#sec1').hide();
|
|
|
|
let isScrolling = false;
|
|
|
|
$('.btn-next-section').click(function () {
|
|
if (isScrolling) return;
|
|
|
|
$(this).removeClass('animate__animated animate__pulse animate__infinite');
|
|
sec1Shown = true;
|
|
$('.ins0').hide();
|
|
|
|
const currentScroll = $(window).scrollTop();
|
|
const windowHeight = $(window).height();
|
|
const documentHeight = $(document).height();
|
|
const scrollNeeded = documentHeight - windowHeight;
|
|
|
|
if (currentScroll < scrollNeeded && scrollNeeded > 0) {
|
|
isScrolling = true;
|
|
$('html, body').animate({
|
|
scrollTop: scrollNeeded
|
|
}, 600, () => {
|
|
isScrolling = false;
|
|
setTimeout(() => {
|
|
gotoSection($(this).data('sec'));
|
|
}, 200);
|
|
});
|
|
} else {
|
|
gotoSection($(this).data('sec'));
|
|
}
|
|
|
|
const audioName = $(this).data('audio');
|
|
if (audioName) {
|
|
setTimeout(() => {
|
|
CourseNav.audioController.stopAllSoundsAndPlay(eval(audioName));
|
|
}, isScrolling ? 800 : 500);
|
|
} else {
|
|
CourseNav.soundClick();
|
|
}
|
|
});
|
|
|
|
const mySwiper = new Swiper(".cid1", {
|
|
effect: "slide",
|
|
autoHeight: true,
|
|
slidesPerView: 1, // Mobile: 1 slide a la vez
|
|
spaceBetween: 20,
|
|
navigation: {
|
|
nextEl: '.btn-next',
|
|
prevEl: '.btn-prev',
|
|
},
|
|
on: {
|
|
init: function () {
|
|
// Ocultar prev en el primer slide
|
|
$('.btn-prev').css('opacity', '.5').addClass('disabled');
|
|
},
|
|
slideChange: function () {
|
|
const activeIndex = this.activeIndex;
|
|
const slides = this.slides;
|
|
const totalSlides = this.slides.length;
|
|
|
|
// Controlar opacidad y clase disabled de botones
|
|
if (activeIndex === 0) {
|
|
$('.btn-prev').css('opacity', '.5').addClass('disabled');
|
|
} else {
|
|
$('.btn-prev').css('opacity', '1').removeClass('disabled');
|
|
}
|
|
|
|
if (activeIndex === totalSlides - 1) {
|
|
$('.btn-next').css('opacity', '.5').addClass('disabled');
|
|
} else {
|
|
$('.btn-next').css('opacity', '1').removeClass('disabled');
|
|
}
|
|
|
|
if (slides[activeIndex]) slides[activeIndex].classList.add("visited", "completed");
|
|
|
|
const completedSlides = $(".cid1 .swiper-slide.completed").length;
|
|
|
|
if (completedSlides == totalSlides) {
|
|
$('.btn-next').removeClass('animate__animated animate__pulse animate__infinite');
|
|
CourseNav.setSlideVisited();
|
|
}
|
|
|
|
CourseNav.audioController.stopAllSoundsAndPlay(audios[activeIndex]);
|
|
}
|
|
}
|
|
});
|
|
|
|
audiom14.on('end', function () {
|
|
$('.cid1').show();
|
|
mySwiper.update();
|
|
CourseNav.audioController.stopAllSoundsAndPlay(audios[0]);
|
|
});
|
|
});
|
|
</script>
|