273 lines
20 KiB
PHP
273 lines
20 KiB
PHP
@extends('fo.layout', ['brParam' => $staticPageModel])
|
|
|
|
@section('title', $staticPageModel->seo_title)
|
|
@section('description', $staticPageModel->seo_description)
|
|
@section('breadcrumb', request()->route()->getName())
|
|
@section('bg-offset', true)
|
|
|
|
@section('content')
|
|
{{-- HEADER --}}
|
|
@include('fo.layouts.header-banner')
|
|
{{-- WHO ARE WE --}}
|
|
<x-fo.story.who-we-are :displayButton="true" />
|
|
{{-- KEY NUMBER --}}
|
|
<section class="key-number line-border-large bg-warning pb-3 pt-5">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h2 class="text-uppercase text-center">
|
|
{{ $staticPageModel->data['keynumbers_title']['value'] }}
|
|
</h2>
|
|
</div>
|
|
<div class="col-12">
|
|
<p class="fs-8 text-center">
|
|
{{ $staticPageModel->data['keynumbers_description']['value'] }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-2">
|
|
@foreach ($keyNumberModels as $keyNumberModel)
|
|
<div class="col-6 col-lg-2 mx-auto">
|
|
<figure class="text-center">
|
|
<img src="{{ asset($keyNumberModel->picto) }}" title="{{ $keyNumberModel->picto_title }}"
|
|
alt="{{ $keyNumberModel->picto_alt }}" />
|
|
<figcaption class="f-bourton-base mt-2">{{ __($keyNumberModel->text) }}</figcaption>
|
|
</figure>
|
|
</div>
|
|
@endforeach
|
|
<div class="row">
|
|
<div class="col-lg-6 col-12 ms-auto">
|
|
<p class="fs-10 text-end">
|
|
@foreach ($keyNumberModels as $keyNumberModel)
|
|
{{ __($keyNumberModel->source) }}
|
|
@endforeach
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{{-- STORY --}}
|
|
@if (count($historicalMilestoneModels))
|
|
<section class="line-border-large bg-light pt-5" id="story-historical-milestones">
|
|
{{-- TITLE/DESCRIPTION --}}
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12 text-center">
|
|
<h2 class="text-uppercase text-center">
|
|
{{ $staticPageModel->data['story_title']['value'] }}
|
|
</h2>
|
|
{!! clean($staticPageModel->data['story_description']['value']) !!}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-column flex-xl-column-reverse justify-content-center align-items-center">
|
|
{{-- SLIDER YEARS --}}
|
|
<div class="bg-light w-100 is-sticky my-4 pb-1" id="story-historical-milestones-years">
|
|
<div class="container-fluid">
|
|
<div class="row align-items-center">
|
|
<div class="d-none d-xl-block col-1">
|
|
<button class="swiper-pagination-playpause btn btn-sm btn-secondary"
|
|
title="{{ __('Bouton pour mettre le carrousel en pause/en fonctionnement') }}">
|
|
<i class="fa-solid fa-xl fa-pause"></i>
|
|
<i class="fa-solid fa-xl fa-play d-none"></i>
|
|
</button>
|
|
</div>
|
|
<div class="col-12 col-xl-11 position-relative">
|
|
<button
|
|
class="swiper-button swiper-button-prev-custom swiper-historicalmilestone-years-button-prev rounded-circle z-1 bg-secondary mx-3 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-historicalmilestone-years-button-next rounded-circle z-1 bg-secondary mx-3 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 class="swiper swiper-historicalmilestone-years mx-5" id="swiper-historicalmilestone-years">
|
|
<div class="swiper-wrapper align-items-center w-fit">
|
|
@foreach ($historicalMilestoneModels as $historicalMilestoneModel)
|
|
<div class="swiper-slide">
|
|
<div class="d-flex justify-content-center align-items-center">
|
|
<a class="btn btn-light btn-sm fs-2 px-2 py-1 shadow-none"
|
|
href="#histoire-{{ $historicalMilestoneModel->year }}">
|
|
{{ $historicalMilestoneModel->year }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{-- MOBILE HISTORICAL MILESTONES --}}
|
|
<div class="d-xl-none container pb-5" id="story-mobile">
|
|
<div class="row">
|
|
<div class="col-12 mt-5">
|
|
@foreach ($historicalMilestoneModels as $historicalMilestoneModel)
|
|
<div class="story-mobile-content-wrapper row position-relative text-center"
|
|
id="histoire-{{ $historicalMilestoneModel->year }}">
|
|
<div class="col-12">
|
|
<p
|
|
class="position-relative f-bourton-base fs-1 bg-warning bottom-left-shadow z-1 m-0 mx-auto w-fit px-2 text-white">
|
|
{{ $historicalMilestoneModel->year }}
|
|
</p>
|
|
</div>
|
|
<div class="col-10 col-sm-8 mx-auto mb-3 mt-4 px-4">
|
|
<div @class([
|
|
'bottom-left-shadow',
|
|
$loop->iteration % 2 ? 'rotate-right' : 'rotate-left',
|
|
])>
|
|
@if (isset($historicalMilestoneModel->picto) && $historicalMilestoneModel->picto !== null)
|
|
<img src="{{ asset($historicalMilestoneModel->picto) }}"
|
|
title="{{ $historicalMilestoneModel->picto_title }}"
|
|
alt="{{ $historicalMilestoneModel->picto_alt }}" @class([
|
|
'slider-picto position-absolute w-50 img-fluid z-1',
|
|
$loop->iteration % 2 ? 'slider-picto' : 'slider-picto-reversed',
|
|
])>
|
|
@endif
|
|
<div class="line-border-small bg-white p-2">
|
|
@if (isset($historicalMilestoneModel->picture) && $historicalMilestoneModel->picture !== null)
|
|
<img class="line-border-small img-fluid"
|
|
src="{{ asset($historicalMilestoneModel->picture) }}"
|
|
title="{{ $historicalMilestoneModel->picture_title }}"
|
|
alt="{{ $historicalMilestoneModel->picture_alt }}">
|
|
@endif
|
|
@if (isset($historicalMilestoneModel->video_id) && \App\Rules\IsValidVimeoId::validates($historicalMilestoneModel->video_id))
|
|
<div class="video-inlaid ratio ratio-16x9" type="vimeo"
|
|
href="https://player.vimeo.com/video/{{ $historicalMilestoneModel->video_id }}?autoplay=0&loop=1&badge=0">
|
|
<a class="cn-cookie-link" id="vimeo-warning" href="" rel="nofollow">
|
|
<strong class="text-underline text-bold text-normal text-danger">
|
|
{{ __('cookie-notice.custom.vimeo.warning') }}
|
|
</strong>
|
|
</a>
|
|
</div>
|
|
@endif
|
|
@if (isset($historicalMilestoneModel->video_id) && \App\Rules\IsValidYoutubeId::validates($historicalMilestoneModel->video_id))
|
|
<div class="video-inlaid ratio ratio-16x9" type="youtube"
|
|
href="https://www.youtube.com/embed/{{ $historicalMilestoneModel->video_id }}?autoplay=0&loop=1">
|
|
<a class="cn-cookie-link" id="youtube-warning" href="" rel="nofollow">
|
|
<strong class="text-underline text-bold text-normal text-danger">
|
|
{{ __('cookie-notice.custom.youtube.warning') }}
|
|
</strong>
|
|
</a>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6 mx-auto my-2 pb-2">
|
|
<p class="f-bourton-base display-1">{{ $historicalMilestoneModel->year }}</p>
|
|
<h3>{{ $historicalMilestoneModel->title }}</h3>
|
|
{!! $historicalMilestoneModel->description !!}
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- DESKTOP HISTORICAL MILESTONES --}}
|
|
<div class="d-none d-xl-block container-fluid row" id="story-desktop">
|
|
<div class="col-12 position-relative">
|
|
<div class="swiper swiper-historicalmilestone-desktop mx-5 overflow-visible" id="swiper-historicalmilestone-desktop">
|
|
<div class="swiper-wrapper w-fit py-5">
|
|
@foreach ($historicalMilestoneModels as $historicalMilestoneModel)
|
|
<div class="swiper-slide">
|
|
<img class="line-desktop position-absolute img-fluid"
|
|
src="{{ Vite::asset($loop->iteration % 2 ? 'resources/assets/images/story/line-desktop-up.png' : 'resources/assets/images/story/line-desktop-down.png') }}"
|
|
title="{{ __('test') }}" alt="{{ __('test') }}">
|
|
<div class="row w-100 mx-auto">
|
|
<div @class([
|
|
'col-5 position-relative d-flex flex-column',
|
|
$loop->iteration % 2 ? 'justify-content-start' : 'justify-content-end',
|
|
])>
|
|
<p class="f-bourton-base">{{ $historicalMilestoneModel->year }}</p>
|
|
<h3>{{ $historicalMilestoneModel->title }}</h3>
|
|
{!! $historicalMilestoneModel->description !!}
|
|
<p @class([
|
|
'slide-desktop-year-badge position-absolute start-50 translate-middle-x f-bourton-base fs-2 bg-warning bottom-left-shadow text-white w-fit mx-auto m-0 px-2 z-1',
|
|
$loop->iteration % 2 ? 'bottom-0' : 'top-0',
|
|
])>
|
|
{{ $historicalMilestoneModel->year }}
|
|
</p>
|
|
</div>
|
|
<div class="col-7">
|
|
<div @class([
|
|
'bottom-left-shadow w-100',
|
|
$loop->iteration % 2 ? 'rotate-right' : 'rotate-left',
|
|
])>
|
|
@if (isset($historicalMilestoneModel->picto) && $historicalMilestoneModel->picto !== null)
|
|
<img src="{{ asset($historicalMilestoneModel->picto) }}"
|
|
title="{{ $historicalMilestoneModel->picto_title }}"
|
|
alt="{{ $historicalMilestoneModel->picto_alt }}" @class([
|
|
'slider-picto position-absolute img-fluid z-1',
|
|
$historicalMilestoneModel->picto_placement === 'hg'
|
|
? 'slider-picto'
|
|
: 'slider-picto-reversed',
|
|
])>
|
|
@endif
|
|
@if (
|
|
(isset($historicalMilestoneModel->picture) && $historicalMilestoneModel->picture !== null) ||
|
|
(isset($historicalMilestoneModel->video_id) && $historicalMilestoneModel->video_id !== null))
|
|
<div @class([
|
|
'slider-videos line-border-small bg-white p-2',
|
|
'w-fit' =>
|
|
isset($historicalMilestoneModel->picture) &&
|
|
$historicalMilestoneModel->picture !== null,
|
|
])>
|
|
@if (isset($historicalMilestoneModel->picture) && $historicalMilestoneModel->picture !== null)
|
|
<img class="line-border-small img-fluid"
|
|
src="{{ asset($historicalMilestoneModel->picture) }}"
|
|
title="{{ $historicalMilestoneModel->picture_title }}"
|
|
alt="{{ $historicalMilestoneModel->picture_alt }}">
|
|
@endif
|
|
@if (isset($historicalMilestoneModel->video_id) && \App\Rules\IsValidVimeoId::validates($historicalMilestoneModel->video_id))
|
|
<div class="video-inlaid ratio ratio-16x9" type="vimeo"
|
|
href="https://player.vimeo.com/video/{{ $historicalMilestoneModel->video_id }}?autoplay=0&loop=1&badge=0">
|
|
<a class="cn-cookie-link" id="vimeo-warning" href=""
|
|
rel="nofollow">
|
|
<strong class="text-underline text-bold text-normal text-danger">
|
|
{{ __('cookie-notice.custom.vimeo.warning') }}
|
|
</strong>
|
|
</a>
|
|
</div>
|
|
@endif
|
|
@if (isset($historicalMilestoneModel->video_id) && \App\Rules\IsValidYoutubeId::validates($historicalMilestoneModel->video_id))
|
|
<div class="video-inlaid ratio ratio-16x9" type="youtube"
|
|
href="https://www.youtube.com/embed/{{ $historicalMilestoneModel->video_id }}?autoplay=0&loop=1">
|
|
<a class="cn-cookie-link" id="youtube-warning" href=""
|
|
rel="nofollow">
|
|
<strong class="text-underline text-bold text-normal text-danger">
|
|
{{ __('cookie-notice.custom.youtube.warning') }}
|
|
</strong>
|
|
</a>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="swiper-button swiper-button-prev-custom swiper-historicalmilestone-desktop-button-prev rounded-circle z-1 bg-secondary mx-3 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-historicalmilestone-desktop-button-next rounded-circle z-1 bg-secondary mx-3 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>
|
|
@endif
|
|
@endsection
|