{% extends 'base-home.html.twig' %}
{% block title %}{{qi.getTexto('textox_favicon', locale)|raw}}{% endblock %}
{% block body %}
<div class="home-new">
<div class="container-home">
<section id="cta-principal">
<div class="cta-principal">
<div class="lateral-izquierdo">
<div class="cta-card-singular" style="background-image: image-set(
url('/images/bg-1.webp') type('image/webp'),
url('/images/bg-1.jpg') type('image/jpeg'));">
<div class="content-text">
<h2 class="title-card">{{ qi.getTexto('titulo-mundo-conectado-colombia', locale) }}</h2>
<div class="btn-descubrir">
<a href="#menu-principal" class="btn-g borde">{{ qi.getTexto('btn-descubrir', locale) }}</a>
</div>
</div>
</div>
</div>
<div class="lateral-derecho">
<div class="cta-card-singular"
style="background-image: image-set(
url('/images/bg-2.webp') type('image/webp'),
url('/images/bg-2.jpg') type('image/jpeg')
);">
<div class="content-text">
<h1 class="title-card mb-2" style="line-height:1;">{{ qi.getTexto('titulo-vision-colombia', locale) }}</h1>
{{qi.getTextoBig('texto-vision-colombia', locale) | raw }}
<div class="btn-descubrir">
<a href="#" class="btn-g borde">{{ qi.getTexto('btn-descubrir', locale) }}</a>
</div>
</div>
</div>
<div class="cta-card-singular box-on-page">
<div class="content-text">
<h2 class="title-card text-center ">{{ qi.getTexto('titulo-era-confianza', locale) }}</h2>
<img class="logo" src="/images_v2/sivinm-verificación-3.png" alt="Descubre una nueva era de confianza" class="w-100"/>
<div class="btn-descubrir">
<a href="#" class="btn-g borde">{{ qi.getTexto('btn-descubrir', locale) }}</a>
</div>
</div>
</div>
</div>
</div>
</section>
{# {% block stylesheets %}
{{ parent() }}
{{ encore_entry_link_tags('homeapp') }}
{% endblock %} #}
{# <section class="colombia-tierra-vida section container" id="colombia-tierra-vida">
<div class="row g-0 fila-colombia-tierra-vida">
<div class="col-12 col-md-6 columna-info order-2 order-md-1">
<div class="p-4 d-flex align-items-center h-100">
<div class="swiper swiper-colombia-tierra-vida">
<div class="swiper-wrapper">
{% for i in 0..3 %}
<div class="swiper-slide">
<div>
<h2 class="fw-bold">Colombia la Tierra de la vida</h2>
<p>orem ipsum dolor sit amet, consectetur Adipiscing elit. Libero arcu, tellus faucibus Sollicitudin senectus risus. Nunc, quiserisque in Aliquet dolor eget urna enim feugiat. Sed eu. Lorem ipsum dolor sit amet, consectetur Adipiscing elit. Libero arcu, tellus faucibus Sollicitudin senectus risus. Nunc, quiserisque in Aliquet dolor eget urna enim feugiat. Sed eu.</p>
<div class="mt-4">
<a href="#" class="btn-g">Descubrir</a>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="col-12 col-md-6 columna-img order-1 order-md-2">
<picture>
<source media="(min-width: 768px)" srcset="/images/bg-colombia-tierra-vida.webp" type="image/webp">
<source media="(min-width: 768px)" srcset="/images/bg-colombia-tierra-vida.jpg" type="image/jpeg">
<source media="(max-width: 767px)" srcset="/images/bg-colombia-tierra-vida.webp" type="image/webp">
<source media="(max-width: 767px)" srcset="/images/bg-colombia-tierra-vida.jpg" type="image/jpeg">
<img src="/images/bg-colombia-tierra-vida.jpg" alt="Colombia tierra de la vida" class="w-100" width="630" height="390"/>
</picture>
</div>
</div>
<div class="mt-3">
<div class="swiper swiper-categorias">
<div class="swiper-wrapper">
{% for i in 1..4 %}
<div class="swiper-slide">
<div class="categoria-singular">
<picture>
<source media="(min-width: 320px)" srcset="/images/categoria-{{i}}.webp" type="image/webp">
<source media="(min-width: 320px)" srcset="/images/categoria-{{i}}.jpg" type="image/jpeg">
<source media="(max-width: 767px)" srcset="/images/images/categoria-{{i}}.webp" type="image/webp">
<source media="(max-width: 767px)" srcset="/images/images/categoria-{{i}}.jpg" type="image/jpeg">
<img src="/images/categoria-{{i}}.jpg" alt="Colombia tierra de la vida" class="w-100" width="300" height="140">
</picture>
<a href="#" class="btn-g enlace">Inmuebles</a>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="mt-3">
<picture>
<source media="(min-width: 768px)" srcset="/images/banner-colombia-tierra-vida.webp" type="image/webp">
<source media="(min-width: 768px)" srcset="/images/banner-colombia-tierra-vida.jpg" type="image/jpeg">
<source media="(max-width: 767px)" srcset="/images/banner-colombia-tierra-vida.webp" type="image/webp">
<source media="(max-width: 767px)" srcset="/images/banner-colombia-tierra-vida.jpg" type="image/jpeg">
<img src="/images/banner-colombia-tierra-vida.jpg" alt="Colombia tierra de la vida" class="w-100" width="1265" height="135"/>
</picture>
</div>
</section> #}
<section id="menu-principal">
{{ include ('home/section-menu-principal.html.twig') }}
</section>
<section class="aliados" id="aliados">
<div class="text-center pb-5">
<h2 class="fw-bold">{{ qi.getTexto('titulo-reserva-mundo-conectado', locale) }}</h2>
{{qi.getTextoBig('texto-reserva-mundo-conectado', locale) | raw }}
</div>
{# {{ include ('home/aliados.html.twig') }} #}
<div class="container-reservas">
{# <div class="prev arrow"></div> #}
<div class="swiper-button-prev">
<img src="/images_v2/svg/ico-arrow-tierra.svg" alt=""/>
</div>
<div class="reservas">
<div class="swiper-reservas swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="item box-on-page">
<h4>{{ qi.getTexto('titulo-conectar-destino', locale) }}</h4>
<a href="{{ path('conectar-nosotros', {_locale: locale}) }}" class="btn-g borde">{{ qi.getTexto('btn-reservar', locale) }}</a>
</div>
</div>
<div class="swiper-slide">
<div class="item box-on-page">
<h4>{{ qi.getTexto('titulo-conectar-contacto', locale) }}</h4>
<a href="{{ path('conectar-nosotros', {_locale: locale}) }}" class="btn-g borde">{{ qi.getTexto('btn-reservar', locale) }}</a>
</div>
</div>
<div class="swiper-slide">
<div class="item box-on-page">
<h4>{{ qi.getTexto('titulo-conectar-propiedad', locale) }}</h4>
<a href="{{ path('conectar-nosotros', {_locale: locale}) }}" class="btn-g borde">{{ qi.getTexto('btn-reservar', locale) }}</a>
</div>
</div>
<div class="swiper-slide">
<div class="item box-on-page">
<h4>{{ qi.getTexto('titulo-conectar-proyecto', locale) }}</h4>
<a href="{{ path('conectar-nosotros', {_locale: locale}) }}" class="btn-g borde">{{ qi.getTexto('btn-reservar', locale) }}</a>
</div>
</div>
</div>
</div>
</div>
{# <div class="next arrow"></div> #}
<div class="swiper-button-next">
<img src="/images_v2/svg/ico-arrow-tierra.svg" alt=""/>
</div>
</div>
<div class="d-flex justify-content-center py-5">
<a href="{{ path('conectar', {_locale: locale}) }}" class="btn-g borde">{{ qi.getTexto('btn-saber-mas', locale) }}</a>
</div>
</section>
</div>
<div class="paginator-sections">
<div class="paginator">
<div class="paginator-bullet" data-target="cta-principal" data-name="Inicio">
<span>Inicio</span>
</div>
<div class="paginator-bullet" data-target="menu-principal" data-name="Menu">
<span>Menu</span>
</div>
<div class="paginator-bullet" data-target="aliados" data-name="Reservas">
<span>Reservas</span>
</div>
</div>
</div>
</div>
{% block javascripts_extra %}
<script>
const paginatorBullets = document.querySelectorAll('.paginator-bullet');
const secciones = document.querySelectorAll('section');
paginatorBullets.forEach(paginatorBullet => {
paginatorBullet.addEventListener("click", (event) => {
const targetId = paginatorBullet.getAttribute('data-target');
smoothScrollTo(targetId);
// paginatorBullets.forEach(paginatorBullet => paginatorBullet.classList.remove('active'));
paginatorBullet.classList.add("active");
})
});
function smoothScrollTo(idSection) {
const destino = document.getElementById(idSection);
if (destino) {
const offset = destino.offsetTop;
window.scrollTo({
top: offset - 140,
behavior: "smooth"
});
}
}
function detectarSeccionActual() {
let seccionActual = null;
secciones.forEach(seccion => {
const seccionRect = seccion.getBoundingClientRect();
const offset = 180;
if (seccionRect.top <= offset && seccionRect.bottom > 0) {
seccionActual = seccion.id;
}
});
return seccionActual;
}
function actualizarBotonesActivos() {
const seccionActual = detectarSeccionActual();
paginatorBullets.forEach(paginatorBullet => {
const targetID = paginatorBullet.getAttribute('data-target');
if (targetID === seccionActual) {
paginatorBullet.classList.add('active');
} else {
paginatorBullet.classList.remove('active');
}
});
}
window.addEventListener('scroll', actualizarBotonesActivos);
window.addEventListener('load', actualizarBotonesActivos);
</script>
{% endblock %}
{% endblock %}