103 lines
5.7 KiB
PHP
103 lines
5.7 KiB
PHP
<section id="commitments-paragraph-with-visual" @class([
|
|
"position-relative line-border-large bg-{$background_color} pb-5",
|
|
'bg-white-wood-big-reverse' =>
|
|
!isset($reversed) && $background_color !== 'transparent',
|
|
'bg-white-wood-big' =>
|
|
isset($reversed) && $reversed && $background_color !== 'transparent',
|
|
])>
|
|
<div class="container">
|
|
<div @class([
|
|
'row w-100 mx-auto py-5',
|
|
'flex-column-reverse flex-lg-row-reverse' => isset($reversed) && $reversed,
|
|
'flex-column-reverse flex-lg-row' =>
|
|
isset($reversedMobile) && $reversedMobile,
|
|
])>
|
|
<div class="col-12 col-lg-6">
|
|
<div @class([
|
|
'd-flex flex-column justify-content-center align-items-start h-100',
|
|
'mt-4 mt-lg-0' =>
|
|
(isset($reversed) && $reversed) ||
|
|
(isset($reversedMobile) && $reversedMobile),
|
|
])>
|
|
<h3>{{ $title }}</h3>
|
|
<p class="mt-3">{!! $text !!}</p>
|
|
@if (isset($subtext) && !empty($subtext))
|
|
<p>{{ $subtext }}</p>
|
|
@endif
|
|
@if (isset($newsModel))
|
|
@include('fo.partials.news-card-tiny', [
|
|
'newsModel' => $newsModel,
|
|
])
|
|
@endif
|
|
@if (isset($btnLabel) && !empty($btnLabel))
|
|
<a class="btn btn-{{ $btn_color }}" href="{{ $btnLink }}" title="{{ __('Accéder à la page') }}"
|
|
aria-label="{{ __('Accéder à la page') }}">{{ $btnLabel }}</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<div @class([
|
|
'col-12 col-lg-6',
|
|
isset($picto) && !empty($picto) ? 'px-5 pt-5' : 'p-5',
|
|
])>
|
|
<div @class([
|
|
'position-relative mx-auto',
|
|
'ratio ratio-16x9' => isset($video_id),
|
|
])>
|
|
@if (isset($picto) && !empty($picto))
|
|
<img src="{{ $picto }}" title="{{ $picto_title }}" alt="{{ $picto_alt }}" @class([
|
|
'img-fluid position-absolute z-1',
|
|
isset($reversed) && $reversed ? 'pictogram-reversed' : 'pictogram',
|
|
])>
|
|
@endif
|
|
<div class="bottom-left-shadow">
|
|
<div @class([
|
|
'bg-white line-border-small w-100 h-fit mx-auto m-lg-0 p-2',
|
|
'rotate-left' => isset($reversed) && $reversed,
|
|
'rotate-right' => !isset($reversed),
|
|
'h-100' => isset($video_id),
|
|
'h-fit' => !isset($video_id),
|
|
])>
|
|
@if (isset($video_id) && \App\Rules\IsValidVimeoId::validates($video_id))
|
|
<div class="video-inlaid w-100 h-100" type="vimeo"
|
|
href="https://player.vimeo.com/video/{{ $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($video_id) && \App\Rules\IsValidYoutubeId::validates($video_id))
|
|
<div class="video-inlaid w-100 h-100" type="youtube"
|
|
href="https://www.youtube.com/embed/{{ $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
|
|
@if (!isset($video_id))
|
|
<img class="img-fluid line-border-small w-100" src="{{ $picture }}" title="{{ $picture_title }}"
|
|
alt="{{ $picture_alt }}">
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@if (isset($card_title) && !empty($card_title))
|
|
<div class="custom-card bottom-left-shadow mt-md-0 z-1 mx-auto mt-5 w-fit">
|
|
<img class="position-absolute z-2" src="{{ $card_picto }}" title="{{ $card_picto_title }}"
|
|
alt="{{ $card_picto_alt }}">
|
|
<p class="position-absolute text-light bg-secondary rotate-left h6 z-1 start-0 m-0 p-2 ps-5">
|
|
{{ $card_sustitle }}</p>
|
|
<div class="bg-tertiary line-border-small p-4 text-center">
|
|
<h2>{{ $card_title }}</h2>
|
|
<p class="h6 m-0">{{ $card_subtitle }}</p>
|
|
<p class="m-0">{{ $card_text }}</p>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|