{% extends "front/_common/_base.html.twig" %}
{% block linkcanonical %}
<link rel="canonical" href="{{ absolute_url(path('about')) }}">
{% endblock %}
{% block cssadicional %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
{% endblock %}
{% block classbody %}{% endblock %}
{% block content %}
{% if home.mainShow %}
<section class="b6">
<article class="b6__ctn wancho">
<div class="general_breadcrumbs">
<ul>
<li><a href="{{ path('home') }}">INICIO</a></li>
<li><a href="{{ path('about') }}" aria-selected="true">LA EMPRESA</a></li>
</ul>
</div>
<div class="flex jcsb aife b6__title">
<div class="main_title_layout">
{% if home.mainPrefix %}
<h2>{{ home.mainPrefix}}</h2>
{% endif %}
{% if home.mainTitle or home.mainSubtitle %}
<h1 class="general_title">
{{ home.mainTitle}}
{% if home.mainSubtitle %}
<span>{{ home.mainSubtitle}}.</span>
{% endif %}
</h1>
{% endif %}
</div>
<ul class="b6__imgList">
{% if home.mainImg1|image_path %}
<li><img src="{{ asset(home.mainImg1|image_path) }}" alt="{{ home.mainImg1|image_alt }}" /></li>
{% endif %}
{% if home.mainImg2|image_path %}
<li><img src="{{ asset(home.mainImg2|image_path) }}" alt="{{ home.mainImg2|image_alt }}" /></li>
{% endif %}
</ul>
</div>
</article>
</section>
{% endif %}
{% if home.aboutTitle %}
<section class="b7">
<article class="b7__ctn flex jcsb aic wancho">
<div class="b7__text">
<h3>{{ home.aboutTitle|block_tag('span')|raw }}</h3>
<div class="gParrafo">
{{ home.aboutText|raw }}
</div>
</div>
{% if home.aboutItemsActive %}
<div class="swiper b7__swiper">
<div class="swiper-wrapper">
{% for item in home.aboutItemsActive %}
<div class="swiper-slide"><img src="{{ asset(item.img|image_path) }}" alt="{{ item.img|image_alt }}" /></div>
{% endfor %}
<!-- BACKEND: DEJAR ESTE ULTIMO ELEMENTO FUERA DEL BUCLE -->
<div class="swiper-slide"></div>
</div>
<div class="nav-buttons">
<div class="button-prev"></div>
<div class="button-next"></div>
</div>
<div class="swiper-scrollbar"></div>
</div>
{% endif %}
</article>
</section>
{% endif %}
{% if home.selfShow or home.valuesShow %}
<section class="b8">
<article class="b8__ctn wancho">
{% if home.selfShow %}
<div class="b8__top flex jcsb aife">
<h4>
{{ home.selfTextLeft|block_tag('span')|raw }}
</h4>
<div class="gParrafo">
{{ home.selfTextRight|raw }}
</div>
</div>
<picture>
<source media="(max-width:480px)" srcset="{{ asset(home.selfImg|image_path) }}" />
<source media="(max-width:768px)" srcset="{{ asset(home.selfImg|image_path) }}" />
<img src="{{ asset(home.selfImg|image_path) }}" />
</picture>
{% endif %}
{% if home.valuesShow %}
<div class="b8__bottom flex jcsb">
<div class="b8__info">
<h4>
{{home.valuesTitle}}
</h4>
<div class="gParrafo">
{{ home.valuesText|raw }}
</div>
</div>
<ul class="b8__cifras">
{% for item in home.valuesItemsActive %}
<li>
<span>{{ item.num }}</span>
<p>{{ item.title }}</p>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</article>
</section>
{% endif %}
{% if home.historyShow and home.historyItemsActive %}
<section class="b9">
<article class="b9__ctn wancho">
{% if home.historyTitle %}
<h4>{{ home.historyTitle }}</h4>
{% endif %}
<div class="b9__years"></div>
<div class="swiper b9__events">
<ul class="swiper-wrapper">
{% for item in home.historyItemsActive %}
<li class="swiper-slide" data-year="{{ item.year }}">
<img src="{{ asset(item.img|image_path) }}" alt="{{ item.img|image_alt }}" />
<div class="b9__info">
<h5><span>{{ item.prefix }}</span>{{item.title}}</h5>
<p>{{ item.texto }}</p>
</div>
</li>
{% endfor %}
</ul>
</div>
<div class="nav-buttons">
<div class="button-prev"></div>
<div class="button-next"></div>
</div>
</article>
</section>
{% endif %}
{% if home.medalsShow %}
<section class="b10">
<article class="b10__ctn wancho">
{% if home.medalsTitle %}
<h5>{{ home.medalsTitle }}</h5>
{% endif %}
<ul class="b10__list">
{% for item in home.medalsItemsActive %}
<li>
<img src="{{ asset(item.img|image_path) }}" alt="{{ item.img|image_alt }}" />
<p>
{{ item.title }}
</p>
</li>
{% endfor %}
</ul>
</article>
</section>
{% endif %}
{% if home.promiseShow %}
<section class="b47 sostenibilidad">
{% if home.promiseBg|image_path %}
<img class="b47__main-img" src="{{ asset(home.promiseBg|image_path) }}" alt="{{ home.promiseBg|image_alt }}" />
{% endif %}
{% if home.promiseImg %}
<img class="b47__sec-img" src="{{ asset(home.promiseImg|image_path) }}" alt="{{ home.promiseImg|image_alt }}" />
{% endif %}
<article class="wancho">
<div class="b47__info">
{% if home.promiseLogo|image_path %}
<img src="{{ asset(home.promiseLogo|image_path) }}" alt="{{ home.promiseLogo|image_alt }}" />
{% endif %}
{% if home.promisePrefix %}
<small>{{ home.promisePrefix}}</small>
{% endif %}
{% if home.promiseTitle %}
<h5>{{ home.promiseTitle}}</h5>
{% endif %}
{% if home.promiseText %}
<div class="gParrafo">
{{ home.promiseText }}
</div>
{% endif %}
<a href="{{ path('trucks') }}" class="general_button whiteFull">{{ home.promiseBtnText|default('Ver Camiones')}}</a>
</div>
</article>
</section>
{% endif %}
{% endblock %}
{% block jsfinal %}
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script type="text/javascript">
const yearSwiper = new Swiper('.b9__events', {
// Optional parameters
slidesPerView: '1',
speed: 500,
spaceBetween: 0,
slideToClickedSlide: false,
simulateTouch: true,
// If we need pagination
// Navigation arrows
navigation: {
nextEl: '.b9 .button-next',
prevEl: '.b9 .button-prev',
},
pagination: {
el: '.b9__years',
clickable: true,
dynamicBullets: true,
dynamicMainBullets: 8,
},
breakpoints: {
0: {
pagination: {
dynamicBullets: false,
dynamicMainBullets: 4,
},
},
769: {
pagination: {
dynamicBullets: true,
dynamicMainBullets: 8,
},
},
},
});
const years = [];
document.querySelectorAll('.b9__events .swiper-slide').forEach(item => {
years.push(item.dataset.year);
});
years.forEach((year, index) => {
document.querySelectorAll('.swiper-pagination-bullet')[index].innerHTML = year;
});
const swiper = new Swiper('.b7__swiper', {
// Optional parameters
slidesPerView: 'auto',
speed: 500,
spaceBetween: 24,
// If we need pagination
// Navigation arrows
navigation: {
nextEl: '.b7 .button-next',
prevEl: '.b7 .button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
breakpoints: {
0: {
slidesPerView: '1',
},
1025: {
slidesPerView: 'auto',
},
},
});
</script>
{% endblock %}