{% extends 'base.html.twig' %}
{% block title %}{% endblock %}
{% block body %}
<div class="about py-5">
<div class="container-tierra">
<div id="history-section">
<h1 class="text-center mb-4 mb-xl-5">{{ qi.getTexto('titulo-historia', locale) }}</h1>
<div class="mb-4">
<img loading="lazy" src="{{ product_images~qi.imagen('imagen_historia') }}" alt="" class="w-100 image-section">
</div>
</div>
<div>
{{qi.getTextoBig('texto-historia', locale) | raw }}
</div>
<section id="philosophy-section" class="philosophy-section my-5 scroll-section">
<h2 class="text-center mb-4 mb-xl-5 fw-bold">{{ qi.getTexto('titulo-filosofia', locale) }}</h2>
<div class="row justify-content-md-center">
<div class="col-12 col-md-4 col-xl-5">
<img loading="lazy" src="{{ product_images~qi.imagen('imagen-filosofia') }}" alt="" class="w-100 image-section">
</div>
<div class="col-12 col-md-12 col-xl-7">
{{qi.getTextoBig('texto-filosofia', locale) | raw }}
<ul>
<li><img src="/images/svg/face-happy-black.svg" alt="" class="me-4" />Mi sit faucibus ac sagittis, scelerisque sed netus. Amet, egestas eleifend vivamus tellus mattis ullamcorper urna commodo. Sed mauris at suspendisse nunc, libero penatibus. </li>
<li><img src="/images/svg/star-star-black.svg" alt="" class="me-4" />Semper amet quam molestie tempor mus felis, diam. Lectus mauris senectus nulla elit, leo. Consectetur dui leo sed sed est maecenas. Leo velit amet habitant cursus id vulputate mi. Dui fringilla dictum diam augue.</li>
<li><img src="/images/svg/network-black.svg" alt="" class="me-4" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viverra in diam id velit aliquam aliquam luctus interdum venenatis. Dolor nisl placerat scelerisque senectus risus integer duis convallis nulla. Volutpat dignissim facilisis volutpat quis non. Urna, ut integer in cras sem quis tempus. Id et, non sagittis sodales sollicitudin quis.
</li>
</ul>
</div>
</div>
</section>
<div id="mision-vision-section" class="mision-vision-section my-5 scroll-section">
<div class="row">
<div class="col-12 col-md-6 mb-4 mb-xl-0">
<div class="box-on-page px-3 py-4 px-xl-4 py-xl-5 singular-card-mision-vision">
<h2 class="text-center fw-bold mb-4 mb-xl-5">{{ qi.getTexto('titulo-mision', locale) }}</h2>
{{qi.getTextoBig('texto-mision', locale) | raw }}
</div>
</div>
<div class="col-12 col-md-6 mb-4 mb-xl-0">
<div class="box-on-page px-3 py-4 px-xl-4 py-xl-5 singular-card-mision-vision">
<h2 class="text-center fw-bold mb-4 mb-xl-5">{{ qi.getTexto('titulo-vision', locale) }}</h2>
{{qi.getTextoBig('texto-vision', locale) | raw }}
</div>
</div>
</div>
</div>
<section id="members-section" class="members-section my-5 scroll-section">
<div class="mb-4 mb-xl-5">
<h2 class="text-center fw-bold mb-4 mb-xl-5">{{ qi.getTexto('titulo-organizacion', locale) }}</h2>
{{qi.getTextoBig('texto-organizacion', locale) | raw }}
</div>
<div class="px-xl-5">
<div class="swiper swiper-members-organization">
<div class="swiper-wrapper">
{% for i in 1..3 %}
<div class="swiper-slide">
<div class="member-organization">
<img loading="lazy" src="/images/miembro-{{i}}.jpg" alt="" class="w-100">
<h3 class="departament-team">Equipo administrativo</h3>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</section>
<section id="commitment-section" class="my-5 scroll-section">
<h2 class="fw-bold text-center mb-4 mb-xl-5">{{ qi.getTexto('titulo-compromiso', locale) }}</h2>
<div class="row">
<div class="col-12 col-md-4 col-xl-5">
<img src="{{ product_images~qi.imagen('imagen-compromiso') }}" alt="" class="w-100 image-section">
</div>
<div class="col-12 col-md-8 col-xl-7">
{{qi.getTextoBig('texto-compromiso', locale) | raw }}
</div>
</div>
</section>
<section id="foundation-section" class="my-5 scroll-section">
<h2 class="fw-bold text-center mb-4 mb-xl-5">{{ qi.getTexto('titulo-fundacion', locale) }}</h2>
<div class="mb-4 mb-xl-5">
{{qi.getTextoBig('texto-fundacion', locale) | raw }}
</div>
<div style="background-image: url('{{ product_images~qi.imagen('imagen-fundacion') }}');" class="bg-fundacion">
<div class="row">
<div class="col-12 col-md-6 col-xl-4">
<h3>{{ qi.getTexto('titulo-mundo-conectado-colombia', locale) }}</h3>
</div>
</div>
</div>
</section>
<section id="contact-section" class="contact-section my-5 scroll-section">
<h2 class="fw-bold text-center mb-4 mb-xl-5">{{ qi.getTexto('titulo-contacto', locale) }}</h2>
<div class="mb-4 mb-xl-5">
{{qi.getTextoBig('texto-contacto', locale) | raw }}
</div>
<div class="px-xl-5">
<div class="row justify-content-md-center">
<div class="col-12 col-md-6 col-xl-4 mb-4 mb-xl-5">
<div class="box-on-page px-3 py-4 px-xl-4 py-xl-5 singular-card-contact">
<div class="text-center">
<img src="/images/svg/mail-black.svg" alt="" class="icon" />
<h3>{{ qi.getTexto('titulo-correo-electronico', locale) }}</h3>
</div>
{{qi.getTextoBig('lista-correo-electronico', locale) | raw }}
<div class="text-center mt-4 mt-xl-5">
<a href="mailto:" target="_blank" class="btn-g borde">{{ qi.getTexto('btn-enviar', locale) }}</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-xl-4 mb-4 mb-xl-5">
<div class="box-on-page px-3 py-4 px-xl-4 py-xl-5 singular-card-contact">
<div class="text-center">
<img src="/images/svg/whatsapp-black.svg" alt="" class="icon" />
<h3>{{ qi.getTexto('titulo-whatsapp', locale) }}</h3>
</div>
{{qi.getTextoBig('lista-whatsapp', locale) | raw }}
<div class="text-center mt-4 mt-xl-5">
<a href="" target="_blank" class="btn-g borde">{{ qi.getTexto('btn-contactar', locale) }}</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-xl-4 mb-4 mb-xl-5">
<div class="box-on-page px-3 py-4 px-xl-4 py-xl-5 singular-card-contact">
<div class="text-center">
<img src="/images/svg/chat-black.svg" alt="" class="icon" />
<h3>{{ qi.getTexto('titulo-formulario', locale) }}</h3>
</div>
{{qi.getTextoBig('lista-formulario', locale) | raw }}
<div class="text-center mt-4 mt-xl-5">
<a href="" class="btn-g borde">{{ qi.getTexto('btn-enviar', locale) }}</a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
{% endblock %}