{% 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" />
{{ qi.getTexto('texto-filosofia-uno', locale) }}
</li>
<li>
<img src="/images/svg/star-star-black.svg" alt="" class="me-4" />
{{ qi.getTexto('texto-filosofia-dos', locale) }}
</li>
<li>
<img src="/images/svg/network-black.svg" alt="" class="me-4" />
{{ qi.getTexto('texto-filosofia-tres', locale) }}
</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">{{ qi.getTexto('titulo-equipo-administrativo', locale) }}</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="https://wa.me/{{ qi.getSetting('numero_whatsapp') }}" 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="{{ path('nosotros-contacto', {'_locale': locale}) }}" class="btn-g borde">{{ qi.getTexto('btn-enviar', locale) }}</a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
{% endblock %}