ldc-volena/resources/views/fo/pages/commitments.blade.php
2024-03-13 12:23:09 +01:00

404 lines
23 KiB
PHP

@extends('fo.layout')
@section('title', $staticPageModel->seo_title)
@section('description', $staticPageModel->seo_description)
@section('breadcrumb', request()->route()->getName())
@section('banner')
@include('fo.layouts.banner', [
'h1' => __($staticPageModel->title),
'asset' => Vite::asset('resources/assets/images/banners/home_reworked.jpg'),
'title' => __('Paysage d\'un champs de blé au soleil couchant avec une lisière en fond de tableau'),
'alt' => __('Image de fond'),
'displayArrow' => true,
'buttonLink' => '#breeding',
])
@endsection
@section('content')
<section class="commit">
{{-- AMBITION --}}
<section class="ambition my-4">
<div class="container text-center">
<div class="row">
<div class="col-12">
<h2 class="h2 fw-bold text-primary">{{ $ambitionSection->h2_title }}</h2>
@if ($ambitionSection->text)
<div class="ck-content text-primary">
{!! clean($ambitionSection->text) !!}
</div>
@endif
</div>
</div>
<div class="commit-navigation mt-3">
<div class="commit-navigation-wrapper show row m-0 p-0">
{{-- blade-formatter-disable --}}
@php
$commitNav = [
['label' => __('Élever durablement'), 'link' => '#breeding', 'color' => 'tertiary'],
['label' => __('Mieux vivre'), 'link' => '#life', 'color' => 'quad'],
['label' => __('Respecter la terre'), 'link' => '#earth', 'color' => 'quint'],
['label' => __('Bien nourrir'), 'link' => '#feed', 'color' => 'sixt']];
@endphp
{{-- blade-formatter-enable --}}
@foreach ($commitNav as $key => $value)
<div class="col-12 col-sm-6 col-md-12 px-md-0 py-md-1 p-2">
<div class="rounded-5 bg-{{ $value['color'] }}-light shadow-sm">
<a class="d-flex justify-content-center align-items-center text-primary text-decoration-none p-3"
data-bs-toggle="tooltip" href="{{ $value['link'] }}"
title="{{ __('Accéder à la partie :name de la page', ['name' => $value['label']]) }}">
<span class="badge rounded-pill bg-{{ $value['color'] }} d-block me-2"></span>
<small>{{ $value['label'] }}</small>
</a>
</div>
</div>
@endforeach
</div>
<button class="d-none d-md-block btn btn-primary rounded-pill mt-1 w-fit px-3">
<i class="fa-solid fa-plus d-none"></i>
<i class="fa-solid fa-minus"></i>
</button>
</div>
</div>
</section>
{{-- BREEDING --}}
<section class="breeding border-top-curved-tertiary mt-4" id="breeding">
<div class="text-bg-tertiary">
<div class="breeding-wrapper position-relative container">
<div class="row text-center">
<div class="col-12">
<h2 class="h2 fw-bold">{{ $breedingSection->h2_title }}</h2>
@if ($breedingSection->text)
<div class="ck-content">
{!! clean($breedingSection->text) !!}
</div>
@endif
</div>
</div>
<div class="row mt-4">
<div class="col-12 col-md-6">
@include('fo.partials.key-number', [
'color' => 'tertiary',
'value' => sprintf('%d%%', $breedingSection->data['bloc_key_nombre']['value']),
'text' => clean($breedingSection->data['bloc_text_accompagnant_le_nombre_content']['value']),
'wysiwyg' => true,
'position' => 'right',
])
</div>
<div class="col-12 col-md-6 d-flex flex-column justify-content-center overflow-hidden">
{!! clean($breedingSection->data['bloc_images_content']['value']) !!}
@if ($breedingSection->data['bloc_button_on_temoigne_engagements']['value'])
<a class="btn btn-primary rounded-pill w-fit" href="#CHANGEME">{{ __('On témoigne') }}</a>
@endif
</div>
</div>
<div class="breeding-image row position-absolute start-50 translate-middle-x">
<div class="col-12 mt-4 text-center">
<img src="{{ Vite::asset('resources/assets/images/commitments/breeding.png') }}"
title="{{ __('Illustration de l\'engagement \'Elever durablement\'') }}"
alt="{{ __('Illustration représentant un éleveur tenant une poule, entouré d\'autres volailles') }}">
</div>
</div>
</div>
</div>
<div class="border-bottom-curved-tertiary w-100"></div>
<div class="breeding-light bg-tertiary-light">
<div class="container text-center">
{{-- FIXME: le document synthèse BO prévoyait un WYSIWYG, le doc de fonctionnalité et la créa demandent des images avec légendes ainsi qu'une vidéo ... Ils seraient donc à rentrer dans le WYSIWYG --}}
<div class="ck-content">
{{-- {!! clean($breedingSection->data['bloc_images_content']['value']) !!} --}}
<p class="m-0">ceci est un paragraphe de remplacement</p>
</div>
</div>
</div>
</section>
{{-- LIFE --}}
<section class="life border-top-curved-upper-tertiary-light mb-4" id="life">
<div class="container text-center">
<div class="row">
<div class="col-12 mb-3">
<h2 class="h2 fw-bold text-quad">{{ $lifeSection->h2_title }}</h2>
<img src="{{ Vite::asset('resources/assets/images/commitments/life.png') }}"
title="{{ __('Illustration de l\'engagement \'Mieux vivre\'') }}"
alt="{{ __('Illustration représentant des personnes qui discutent en marchant au milieu d\'un groupe') }}">
</div>
</div>
<div class="row justify-content-md-between align-items-center">
<div class="commit-text-absolute col-12 col-md-4 col-lg-5 py-md-0 pb-3">
@if ($lifeSection->text)
<div class="ck-content text-primary">
{!! clean($lifeSection->text) !!}
</div>
@endif
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
@include('fo.partials.key-number', [
'color' => 'quad',
'value' => sprintf('%d%%', $lifeSection->data['bloc_key_nombre_n1']['value']),
'text' => clean($lifeSection->data['bloc_text_accompagnant_le_nombre_n1_content']['value']),
'wysiwyg' => true,
'position' => 'right',
])
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
@include('fo.partials.key-number', [
'color' => 'quad',
'value' => sprintf('%d%%', $lifeSection->data['bloc_key_nombre_n2']['value']),
'text' => clean($lifeSection->data['bloc_text_accompagnant_le_nombre_n2_content']['value']),
'wysiwyg' => true,
'position' => 'left',
])
</div>
</div>
@if ($lifeSection->data['bloc_button_on_temoigne_engagements']['value'])
<div class="row pt-4">
<div class="col-12">
<a class="btn btn-primary rounded-pill" data-bs-toggle="tooltip" href="#testimonials"
title="{{ __('Accéder à la partie des témoignages') }}">{{ __('On témoigne') }}</a>
</div>
</div>
@endif
{{-- FIXME: partie remerciement à compléter --}}
<div class="row py-4">
<div class="col-12">
<div class="ck-content text-primary">
{!! clean($lifeSection->data['bloc_numero2_content']['value']) !!}
</div>
</div>
</div>
@if ($lifeSection->data['bloc_button_on_bouge']['value'])
<div class="row">
<div class="col-12">
<a class="btn btn-primary rounded-pill" data-bs-toggle="tooltip" href="#CHANGEME: vers page on bouge ensemble"
title="{{ __('Accéder à la page On bouge ensemble') }}">{{ __('On bouge ensemble') }}</a>
</div>
</div>
@endif
</div>
</section>
{{-- EARTH --}}
<section class="earth border-top-curved-quint mt-4" id="earth">
<div class="position-relative text-bg-quint">
<div class="container text-center">
<div class="row">
<div class="col-12">
<h2 class="h2 fw-bold">{{ $earthSection->h2_title }}</h2>
</div>
</div>
<div class="row justify-content-md-between align-items-center">
<div class="commit-text-absolute col-12 col-md-4 col-lg-5 py-md-0 pb-3">
@if ($earthSection->text)
<div class="ck-content">
{!! clean($earthSection->text) !!}
</div>
@endif
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
@include('fo.partials.key-number', [
'color' => 'quint',
'value' => sprintf('%d%%', $earthSection->data['bloc_key_nombre_n1']['value']),
'text' => clean($earthSection->data['bloc_text_accompagnant_le_nombre_n1_content']['value']),
'wysiwyg' => true,
'position' => 'right',
])
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
@include('fo.partials.key-number', [
'color' => 'quint',
'value' => sprintf('%d%%', $earthSection->data['bloc_key_nombre_n2']['value']),
'text' => clean($earthSection->data['bloc_text_accompagnant_le_nombre_n2_content']['value']),
'wysiwyg' => true,
'position' => 'left',
])
</div>
</div>
@if ($earthSection->data['bloc_button_on_temoigne_engagements']['value'])
<div class="row pt-4">
<div class="col-12">
<a class="btn btn-primary rounded-pill" href="#CHANGEME: Anchor on témoigne">{{ __('On témoigne') }}</a>
</div>
</div>
@endif
<div class="earth-image row position-absolute start-50 translate-middle-x pt-4">
<div class="col-12">
<img src="{{ Vite::asset('resources/assets/images/commitments/earth.png') }}"
title="{{ __('Illustration de l\'engagement \'Respecter la terre\'') }}"
alt="{{ __('Illustration représentant la nature avec des arbres et des champs') }}">
</div>
</div>
</div>
</div>
<div class="earth-light border-top-concave-quint bg-quint-light pb-5">
<div class="container mt-5 text-center">
<div class="row justify-content-center">
<div class="col-12 col-md-6">
<div class="card">
<div class="card-body">
<div class="row align-items-center">
<div class="col-3">
<img class="w-100" src="{{ asset($earthSection->data['bloc_image']['value']) }}"
title="{{ $earthSection->data['bloc_image']['title'] }}"
alt="$earthSection->data['bloc_image']['alt']">
</div>
<div class="col-9">
<div class="ck-content text-quint text-start">
{!! clean($earthSection->data['bloc_numero2_content']['value']) !!}
</div>
<div class="text-start">
<a class="btn btn-primary rounded-pill mb-0 mb-3 mt-3 text-inherit"
href="#CHANGEME">{{ __('En savoir plus sur BREEAM') }}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{-- FIXME: sliders (image/text) à compléter ici --}}
</div>
</div>
</section>
{{-- FEED --}}
<section class="feed mb-4" id="feed">
<div class="border-top-curved-white bg-quint-light"></div>
<div class="container text-center">
<div class="row">
<div class="col-12">
<h2 class="h2 fw-bold text-sixt">{{ $feedSection->h2_title }}</h2>
<img class="my-3" src="{{ Vite::asset('resources/assets/images/commitments/feed.png') }}"
title="{{ __('Illustration de l\'engagement \'Bien nourrir\'') }}"
alt="{{ __('Illustration d\'une femme et d\'un enfant mangeant un délicieux repas') }}">
</div>
</div>
<div class="row justify-content-md-between align-items-center">
<div class="commit-text-absolute col-12 col-md-4 col-lg-5 py-md-0 pb-3">
@if ($feedSection->text)
<div class="ck-content text-primary">
{!! clean($feedSection->text) !!}
</div>
@endif
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
@include('fo.partials.key-number', [
'color' => 'sixt',
'value' => sprintf('%d%%', $feedSection->data['bloc_key_nombre_n1']['value']),
'text' => clean($feedSection->data['bloc_text_accompagnant_le_nombre_n1_content']['value']),
'wysiwyg' => true,
'position' => 'right',
])
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
@include('fo.partials.key-number', [
'color' => 'sixt',
'value' => sprintf('%d%%', $feedSection->data['bloc_key_nombre_n2']['value']),
'text' => clean($feedSection->data['bloc_text_accompagnant_le_nombre_n2_content']['value']),
'wysiwyg' => true,
'position' => 'left',
])
</div>
</div>
{{-- @if ($feedSection->data['bloc_button_on_temoigne_engagements']['value']) --}}
<div class="row mb-4">
<div class="col-12">
<a class="btn btn-primary rounded-pill" href="#CHANGEME: Anchor on témoigne">{{ __('On témoigne') }}</a>
</div>
</div>
{{-- @endif --}}
<div class="row">
<div class="col-12">
<div class="ck-content text-primary">
{!! clean($feedSection->data['bloc_numero2_content']['value']) !!}
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="ck-content text-primary">
{!! clean($feedSection->data['bloc_numero3_content']['value']) !!}
</div>
</div>
</div>
<div class="row">
<div class="col-12">
{{-- @if ($feedSection->data['bloc_button_on_produit']['value']) --}}
<div class="row">
<div class="col-12">
<a class="btn btn-primary rounded-pill" href="#CHANGEME">{{ __('On produit') }}</a>
</div>
</div>
{{-- @endif --}}
</div>
</div>
</div>
</section>
{{-- TESTIMONIALS --}}
<section class="border-top-curved-tertiary-light testimonials mt-4" id="testimonials">
<div class="bg-primary-light">
<div class="container text-center">
<div class="row">
<div class="col-12">
<h2 class="h2 fw-bold text-primary">{{ $testimonialsSection->h2_title }}</h2>
<h3 class="fs-5 fw-semibold text-primary mb-3">
{{ $testimonialsSection->data['bloc_string_titre_h3_de_la_section_numero1']['value'] }}
</h3>
</div>
</div>
</div>
{{-- SLIDER TESTIMONIALS --}}
<div class="testimonials-content mask-white overflow-hidden">
<div class="container">
<div class="row align-items-center">
<div class="col-12 position-relative">
<div class="swiper swiper-commitments-testimonials mt-lg-0 mt-5 h-fit overflow-visible"
id="swiper-commitments-testimonials">
<div class="swiper-wrapper h-fit">
{{-- FIXME: Dans le doc fonctionnalité, il est dit que la coulur de fond change en fonction du type de témoignage. Dans la créa, c'est seulement la couleur du job qui change. Qu'est-ce qu'on fait ? --}}
@foreach ($testimonialModels as $testimonial)
<div class="swiper-slide h-auto">
@include('fo.partials.testimonials.card', [
'picture' => [
'path' => $testimonial->picture,
'alt' => $testimonial->picture_alt,
'title' => $testimonial->picture_title,
],
'job' => $testimonial->job,
'name' => $testimonial->name,
'speach' => Str::limit($testimonial->content, 200),
'bgClass' => 'bg-' . $testimonial->type->color(),
'jobClass' => 'text-white',
'nameClass' => 'text-white',
'speachClass' => 'text-white',
])
</div>
@endforeach
</div>
</div>
<div
class="swiper-button swiper-button-prev-custom swiper-commitments-testimonials-button-prev swiper-button-prev-custom d-none d-lg-block mx-3">
<img src="{{ Vite::asset('resources/assets/images/misc/blue-arrow.svg') }}"
title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}"
role="button" tabindex="0">
</div>
</div>
</div>
</div>
</div>
<div class="container text-center">
<div class="row">
<div class="col-12">
<h3 class="fs-5 fw-semibold text-primary my-3">
{{ $testimonialsSection->data['bloc_string_titre_h3_de_la_section_numero2']['value'] }}
</h3>
@if ($testimonialsSection->text)
<div class="ck-content text-primary">
{{-- FIXME: un lien est prévu dans la créa et pas dans le bo, il peut être inséré via le WYSIWYG --}}
{!! clean($testimonialsSection->text) !!}
</div>
@endif
</div>
</div>
</div>
</div>
</section>
</section>
@endsection