274 lines
13 KiB
HTML
274 lines
13 KiB
HTML
<style>
|
|
.back0 {
|
|
background-image: url(img/bg06.jpg);
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.shadow-vx {
|
|
max-width: 100%;
|
|
box-shadow: 0 0 15px rgba(0,0,0,.5);
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.cid1 .swiper-wrapper {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.bg-adorno {
|
|
background: rgba(255,255,255,.1);
|
|
background: linear-gradient(to right, rgba(255,255,255,.1) 0%, rgba(255,255,255,.4) 100%);
|
|
border: 3px solid #fff;
|
|
}
|
|
|
|
.btn-arrow {
|
|
max-width: 85px;
|
|
}
|
|
|
|
.apa0, .apa1 {
|
|
display: none;
|
|
}
|
|
|
|
@media(min-width: 991px) {
|
|
.shadow-vx {
|
|
max-width: 76%;
|
|
}
|
|
}
|
|
</style>
|
|
<div class='page-sco py-2 py-md-4 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 text-center apa0 animate__animated animate__fadeInDown">
|
|
<h2 class="fw-bold text-blue-1">Competidores</h2>
|
|
</div>
|
|
<div class="col-12 apa1 animate__animated animate__zoomIn">
|
|
<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-lg-1 me-5 me-lg-0">
|
|
<img src="img/05.7.png" class="img-fluid">
|
|
</div>
|
|
<div class="position-relative shadow-vx flex-fill order-1 order-lg-2 rounded-3">
|
|
<div class="swiper cid1">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide visited completed">
|
|
<div class="card bg-adorno px-3 py-4">
|
|
<div class="row justify-content-center align-items-center py-2">
|
|
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
|
|
<h3 class="fw-medium text-purple-1">A.F. Valdecasas - Ácido fólico</h3>
|
|
<ul class="mb-0 bul1">
|
|
<li>Fórmula basada <strong class="text-secondary">solo en ácido fólico</strong>.</li>
|
|
<li>Ofrece un soporte <strong class="text-secondary">muy limitado para la preconcepción</strong>.</li>
|
|
<li><strong class="text-secondary">No incluye antioxidantes ni minerales esenciales</strong>.</li>
|
|
<li><strong class="text-secondary">No cubre</strong> las necesidades nutrimentales del <strong class="text-secondary">primer trimestre</strong>.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
|
|
<img src="img/05.0.png" class="img-fluid">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="card bg-adorno px-3 py-4">
|
|
<div class="row justify-content-center align-items-center py-2">
|
|
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
|
|
<h3 class="fw-medium text-purple-1">Cilocid</h3>
|
|
<ul class="mb-0 bul1">
|
|
<li>Enfocado en <strong class="text-secondary">ácido fólico tradicional</strong>.</li>
|
|
<li>Opción accesible, pero <strong class="text-secondary">con formulación reducida</strong>.</li>
|
|
<li><strong class="text-secondary">Carece de vitaminas antioxidantes y minerales clave</strong>.</li>
|
|
<li>Su soporte es <strong class="text-secondary">insuficiente</strong> para preconcepción y embarazo temprano.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
|
|
<img src="img/05.1.png" class="img-fluid">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="card bg-adorno px-3 py-4">
|
|
<div class="row justify-content-center align-items-center py-2">
|
|
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
|
|
<h3 class="fw-medium text-purple-1">FoliVital</h3>
|
|
<ul class="mb-0 bul1">
|
|
<li>Producto centrado en <strong class="text-secondary">ácido fólico únicamente</strong>.</li>
|
|
<li>Carece de un <strong class="text-secondary">perfil completo de vitaminas y minerales</strong>.</li>
|
|
<li>Proporciona apoyo <strong class="text-secondary">limitado al desarrollo temprano</strong>.</li>
|
|
<li>Menos adecuado para <strong class="text-secondary">las necesidades específicas del embarazo inicial</strong>.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
|
|
<img src="img/05.2.png" class="img-fluid">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="card bg-adorno px-3 py-4">
|
|
<div class="row justify-content-center align-items-center py-2">
|
|
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
|
|
<h3 class="fw-medium text-purple-1">Bebistan</h3>
|
|
<ul class="mb-0 bul1">
|
|
<li>Multivitamínico general con <strong class="text-secondary">composición básica</strong>.</li>
|
|
<li>No está formulado para <strong class="text-secondary">preconcepción ni primer trimestre</strong>.</li>
|
|
<li>Su perfil nutrimental es <strong class="text-secondary">limitado frente a fórmulas completas</strong>.</li>
|
|
<li>No cubre requerimientos <strong class="text-secondary">críticos del desarrollo temprano</strong>.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
|
|
<img src="img/05.3.png" class="img-fluid">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="card bg-adorno px-3 py-4">
|
|
<div class="row justify-content-center align-items-center py-2">
|
|
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
|
|
<h3 class="fw-medium text-purple-1">reGenesis Max</h3>
|
|
<ul class="mb-0 bul1">
|
|
<li>Enfocado en embarazo, pero <strong class="text-secondary">variable en su composición</strong>.</li>
|
|
<li>Puede incluir omegas, aunque <strong class="text-secondary">no de forma consistente</strong>.</li>
|
|
<li><strong class="text-secondary">No integra complejo B completo, antioxidantes ni minerales esenciales</strong>.</li>
|
|
<li>Su aporte es <strong class="text-secondary">menos específico</strong> para el inicio del embarazo.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
|
|
<img src="img/05.4.png" class="img-fluid">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="card bg-adorno px-3 py-4">
|
|
<div class="row justify-content-center align-items-center py-2">
|
|
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
|
|
<h3 class="fw-medium text-purple-1">Previta Mom</h3>
|
|
<ul class="mb-0 bul1">
|
|
<li>Suplemento prenatal con <strong class="text-secondary">perfil general</strong> de vitaminas y minerales.</li>
|
|
<li>Puede tener <strong class="text-secondary">menor diversidad de nutrimentos</strong> frente a opciones más completas.</li>
|
|
<li><strong class="text-secondary">Limitado en antioxidantes</strong> y algunos minerales clave.</li>
|
|
<li>No está optimizado específicamente para <strong class="text-secondary">preconcepción y primer trimestre</strong>.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
|
|
<img src="img/05.5.png" class="img-fluid">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<div class="card bg-adorno px-3 py-4">
|
|
<div class="row justify-content-center align-items-center py-2">
|
|
<div class="col-12 col-md-8 col-lg-7 col-xl-6 mb-3 mb-lg-0">
|
|
<h3 class="fw-medium text-purple-1">Nocele</h3>
|
|
<ul class="mb-0 bul1">
|
|
<li>Basado principalmente en <strong class="text-secondary">ácido fólico y nutrimentos básicos</strong>.</li>
|
|
<li>Su fórmula es <strong class="text-secondary">limitada para cubrir necesidades metabólicas complejas</strong>.</li>
|
|
<li><strong class="text-secondary">No incluye antioxidantes ni complejo B completo</strong>.</li>
|
|
<li>Proporciona un soporte <strong class="text-secondary">menos integral</strong> para el periodo preconcepcional y las primeras semanas.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-7 col-md-4 col-lg-5 col-xl-4 text-center">
|
|
<img src="img/05.6.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-lg-3 animate__animated animate__pulse animate__infinite">
|
|
<img src="img/05.8.png" class="img-fluid">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
$(function () {
|
|
"use strict";
|
|
|
|
const audiom17 = CourseNav.createSound('audio/audiom17.mp3');
|
|
|
|
const paths = [
|
|
"audio/audiom18.mp3",
|
|
"audio/audiom19.mp3",
|
|
"audio/audiom20.mp3",
|
|
"audio/audiom21.mp3",
|
|
"audio/audiom22.mp3",
|
|
"audio/audiom23.mp3",
|
|
"audio/audiom24.mp3"
|
|
];
|
|
let audios = [];
|
|
paths.forEach(function (element) {
|
|
audios.push(CourseNav.createSound(element));
|
|
});
|
|
|
|
CourseNav.audioController.stopAllSoundsAndPlay(audiom17);
|
|
|
|
audiom17.on('play', function () {
|
|
$('.apa0').show();
|
|
});
|
|
|
|
audiom17.on('end', function () {
|
|
$('.apa1').show();
|
|
CourseNav.audioController.stopAllSoundsAndPlay(audios[0]);
|
|
});
|
|
|
|
const mySwiper = new Swiper(".cid1", {
|
|
effect: "slide",
|
|
autoHeight: true,
|
|
slidesPerView: 1, // Mobile: 1 slide a la vez
|
|
spaceBetween: 20,
|
|
allowTouchMove: false,
|
|
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');
|
|
}
|
|
|
|
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]);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|