178 lines
12 KiB
PHP
178 lines
12 KiB
PHP
@php
|
||
$slides = [
|
||
[
|
||
'name' => 'Nicolas',
|
||
'alias' => 'Pimpom',
|
||
'sign' => 'L\'ambianceur',
|
||
'anecdote' =>
|
||
'Nous cherchions un cri de guerre pour se motiver pour les étapes. Après avoir trouvé celui-ci, je ne sais pas pourquoi j’ai conclu par un cri de coq ! Résultat : il est resté jusqu\'à la fin du tour et même plus, il est passé au JT 19/20 sur France 3 Rhône-Alpes Auvergne.',
|
||
'adventure' =>
|
||
'Cette année 2023, je l’avoue, ce fût le meilleur de tous, grâce à une équipe hyper soudée, bosseuse et jamais fatiguée.',
|
||
'img_url' => Vite::asset(
|
||
'resources/assets/images/page-tdf/testimonials/Nicolas-Joly-caravanier-Le-Gaulois-Etienne-Coudret.jpg',
|
||
),
|
||
'img_alt' => 'Photo de Nicolas en tenue de caravanier Le Gaulois',
|
||
'img_title' => 'Nicolas Joly caravanier Le Gaulois',
|
||
'advice' =>
|
||
'Etre à 200% du matin au soir, avoir le sourire en permanence et surtout ne pas avoir peur d’aller vers les autres !',
|
||
'credit' => 'Crédit photo - Etienne Coudret',
|
||
],
|
||
[
|
||
'name' => 'Mylène',
|
||
'alias' => null,
|
||
'sign' => 'Le boute-en-train',
|
||
'anecdote' => "
|
||
Dans mes meilleurs moments de cette année, il y a le moment de convivialité entre nous sur le parking de l’hôtel après avoir terminé le rechargement des cadeaux pour l’étape du lendemain. Nous avons mis la musique sur une enceinte et nous avons fait la chenille sur le parking. Tout le monde s’est pris au jeu et c’était vraiment un bon moment de rigolade. Il faut savoir que la chenille était notre danse de l’année avec les caravaniers Le Gaulois, on a lancé des chenilles un peu partout et même à une fête de village.",
|
||
'adventure' =>
|
||
'Faire partie de la caravane du Tour de France est avant tout une aventure humaine inoubliable. On y fait la rencontre de personnes toutes différentes mais avec la même envie de travailler dans la bonne humeur pendant 3 semaines de folie ! Le retour à la réalité a d’ailleurs été assez compliqué quand j’ai quitté les copains de la caravane Le Gaulois pour rentrer chez moi.',
|
||
'img_url' => Vite::asset('resources/assets/images/page-tdf/testimonials/Mylène-Cornillet-caravaniere-Le-Gaulois.jpeg'),
|
||
'img_alt' => 'Photo de Mylène sur un char Cocotte Le Gaulois',
|
||
'img_title' => 'Mylène Cornillet caravanière Le Gaulois',
|
||
'advice' =>
|
||
'Je dirais que si c’est vraiment une expérience que l’on a envie de vivre, il faut persévérer et ne pas s’arrêter au premier refus. Il faut aussi se démarquer des autres candidats qui sont souvent très nombreux avec un CV qui attire le regard ou une lettre de motivation qui sort du lot. Mais le plus important, c’est surtout d’être authentique et de montrer sa véritable personnalité !',
|
||
'credit' => 'Crédit photo - ASO Aurélien Vialatte',
|
||
],
|
||
[
|
||
'name' => 'Thierry',
|
||
'alias' => 'Titi',
|
||
'sign' => 'Le sage',
|
||
'anecdote' => "
|
||
Sur une étape du Tour féminin, ma coéquipière est photographiée à proximité de Marion ROUSSE et elle ne la reconnait pas !! A l'arrivée du Tour féminin, je m'aperçois que j'ai fait tout le Tour avec mon accréditation du Tour de France masculin (signé Titi).",
|
||
'adventure' =>
|
||
'C\'est une chance de pouvoir vivre cet événement exceptionnel de l\'intérieur avec une équipe conviviale, soudée et sympathique.',
|
||
'img_url' => Vite::asset(
|
||
'resources/assets/images/page-tdf/testimonials/Thierry-Gilles-caravanier-Le-Gaulois-Etienne-Coudret.jpg',
|
||
),
|
||
'img_alt' => 'Photo de Thierry sur le parking des chars Le Gaulois',
|
||
'img_title' => 'Thierry Gilles caravanier Le Gaulois',
|
||
'advice' =>
|
||
'Même si vous n\'y participez qu\'une seule fois, profitez de vivre ce moment exceptionnel tout en suivant attentivement les directives de l\'encadrement.',
|
||
'credit' => 'Crédit photo - Etienne Coudret',
|
||
],
|
||
[
|
||
'name' => 'Justine',
|
||
'alias' => 'Ça percute !',
|
||
'sign' => 'La floflo de Florence Foresti',
|
||
'anecdote' => "
|
||
Comme scène marquante, je dirais le nombre de spectateurs sur la route nous regardant comme des « stars ». Je n'ai pas de scène drôle en particulier dans ma tête, mais tous les soirs au « cul du camion » comme nous le disons, un débrief avec rigolade et humour est organisé avec toute l'équipe.",
|
||
'adventure' => 'Une expérience INOUBLIABLE, INCROYABLE, MAGIQUE, MAGNIFIQUE',
|
||
'img_url' => Vite::asset(
|
||
'resources/assets/images/page-tdf/testimonials/Justine-Le-Guillou-caravanière-Le-Gaulois-A.S.O-Aurélien-Vialatte.jpg',
|
||
),
|
||
'img_alt' => 'Photo de Justine entourée de l\'équipe des caravaniers Le Gaulois',
|
||
'img_title' => 'Justine Le Guillou caravanière Le Gaulois',
|
||
'advice' => 'D’être soi-même, profiter pleinement de son aventure, d’être dynamique et avoir l’esprit d’équipe.',
|
||
'credit' => 'Crédit photo - ASO Aurélien Vialatte',
|
||
],
|
||
];
|
||
@endphp
|
||
<section class="position-relative bg-white-wood-big-reverse py-5" id="testimonial-section">
|
||
<div class="container-fluid">
|
||
<h2 class="fw-bold text-uppercase mb-5 text-center">Les témoignages des caravaniers</h2>
|
||
<div class="d-flex justify-content-center mb-5 flex-wrap gap-4" id="swiper-anecdote-tdf-badges">
|
||
@foreach ($slides as $index => $slide)
|
||
<button class="btn text-uppercase fs-5 fw-medium text-secondary px-4 py-1 shadow-none" data-slide-index="{{ $index }}">
|
||
{{ $slide['name'] }}
|
||
</button>
|
||
@endforeach
|
||
</div>
|
||
|
||
<div class="d-flex justify-content-center mt-3">
|
||
<div class="col-12 col-xxl-10 position-relative mb-5 overflow-hidden p-0">
|
||
<div class="swiper swiper-anecdote-tdf container" id="swiper-anecdote-tdf">
|
||
<div class="swiper-wrapper w-fit">
|
||
@foreach ($slides as $slide)
|
||
<div class="swiper-slide px-md-0 px-4">
|
||
<div class="row align-items-center mb-4">
|
||
<div class="col-md-5">
|
||
<div class="position-relative line-border-small bg-white p-2">
|
||
<img class="img-fluid position-relative line-border-small w-100" src="{{ $slide['img_url'] }}"
|
||
title="{{ $slide['img_title'] }}" alt="{{ $slide['img_alt'] }}">
|
||
</div>
|
||
<div class="ms-md-5 mt-4">
|
||
<small>{{ $slide['credit'] }}</small>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-7">
|
||
<div class="d-flex align-items-end gap-2">
|
||
<h5 class="fs-2 text-uppercase fw-semibold">{{ $slide['name'] }}</h5>
|
||
@if (!empty($slide['alias']))
|
||
<div class="fs-3 text-muted f-bakerie-rough mb-2">alias {{ $slide['alias'] }}</div>
|
||
@endif
|
||
</div>
|
||
<div class="fs-5">
|
||
<p><span class="text-uppercase"><b>Son signe distinctif</b></span> : {{ $slide['sign'] }}</p>
|
||
|
||
<div>
|
||
<p class="text-uppercase"><b>Son anecdote du Tour de France</b> :</p>
|
||
<p>{{ $slide['anecdote'] }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="text-uppercase fs-5 fw-bold">{{ _('Son aventure Le Gaulois') }}</p>
|
||
<p class="fs-5">{{ $slide['adventure'] }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="rounded-3 position-relative line-border-large bg-white p-5">
|
||
<div>
|
||
<p class="text-uppercase">
|
||
<strong>Le conseil de <span class="mb-0 bg-secondary px-3 py-1 text-white">
|
||
{{ $slide['name'] }}</span></strong>
|
||
<br />
|
||
<br />
|
||
</p>
|
||
{{ $slide['advice'] }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
<button
|
||
class="swiper-button swiper-button-prev-custom swiper-anecdote-tdf-button-prev rounded-circle z-1 bg-secondary border-0">
|
||
<img src="{{ Vite::asset('resources/assets/images/common/arrow-white.svg') }}"
|
||
title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}">
|
||
</button>
|
||
<button
|
||
class="swiper-button swiper-button-next-custom swiper-anecdote-tdf-button-next rounded-circle z-1 bg-secondary border-0">
|
||
<img src="{{ Vite::asset('resources/assets/images/common/arrow-white.svg') }}"
|
||
title="{{ __('Navigation du slider (droite)') }}" alt="{{ __('flèche vers la droite') }}">
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<script nonce="{{ $nonce ?? '' }}">
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const interval = setInterval(() => {
|
||
const swiperInstance = document.querySelector('#swiper-anecdote-tdf')?.swiper;
|
||
if (swiperInstance) {
|
||
clearInterval(interval);
|
||
|
||
const badgeButtons = document.querySelectorAll('#swiper-anecdote-tdf-badges button');
|
||
badgeButtons.forEach(button => {
|
||
button.addEventListener('click', function() {
|
||
const index = parseInt(this.getAttribute('data-slide-index'));
|
||
swiperInstance.slideTo(index);
|
||
});
|
||
});
|
||
swiperInstance.on('slideChange', function() {
|
||
updateActiveBadge(swiperInstance.activeIndex);
|
||
});
|
||
|
||
function updateActiveBadge(activeIndex) {
|
||
badgeButtons.forEach((button, index) => {
|
||
if (index === activeIndex) {
|
||
button.classList.remove('text-secondary');
|
||
button.classList.add('btn-primary', 'text-white');
|
||
} else {
|
||
button.classList.add('text-secondary');
|
||
button.classList.remove('btn-primary', 'text-white');
|
||
}
|
||
});
|
||
}
|
||
updateActiveBadge(swiperInstance.activeIndex);
|
||
}
|
||
}, 100);
|
||
});
|
||
</script>
|