ldc-legaulois/resources/views/fo/partials/commitments/paragraph-with-visual-complex-flex-items.blade.php
2026-06-04 14:20:18 +02:00

74 lines
4 KiB
PHP

@php
$blockType = $reduction->block_type->value;
$position = $reduction->position->value;
$ctaUrl = $reduction->cta_url->value ?? null;
$ctaLabel = $reduction->cta_label->value ?? null;
$articleId = $reduction->article_id->value ?? null;
$reductionNews = $articleId ? \App\Models\News::find($articleId) : null;
@endphp
<section class="position-relative bg-white-wood-big py-5" id="commitments-paragraph-with-visual-complex-flex-items">
<div class="container">
<div class="row">
<div @class([
'col-12 col-md-6',
isset($picto) && !empty($picto) ? 'px-5 pt-5' : 'p-5',
])>
<div class="position-relative pt-md-0 mx-auto my-5">
@if (isset($picto) && !empty($picto))
<img class="img-fluid position-absolute pictogram-reversed z-1" src="{{ $picto }}"
title="{{ $picto_title }}" alt="{{ $picto_alt }}">
@endif
<div class="d-flex justify-content-start align-items-start bottom-left-shadow">
<div class="line-border-small rotate-right w-100 m-lg-0 mx-auto h-fit bg-white p-2">
<img class="img-fluid line-border-small w-100" src="{{ $picture }}"
title="{{ $picture_title }}" alt="{{ $picture_alt }}">
</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>
<h2>{{ $title }}</h2>
<p class="m-0">{!! $text !!}</p>
</div>
<div class="col-12 col-md-6 d-flex justify-content-center align-items-center">
<div class="row d-flex justify-content-center align-items-start">
@foreach ($collection as $item)
<div
class="col-6 col-md-4 d-flex justify-content-center align-items-center flex-column p-3 text-center">
<div class="pictogram-content d-flex justify-content-center align-items-center">
<img class="img-fluid" src="{{ asset($item->picture) }}"
title="{{ $item->picture_title }}" alt="{{ $item->picture_alt }}">
</div>
@if (isset($item->sustitle) && !empty($item->sustitle))
<p class="m-0">{{ $item->sustitle }}</p>
@endif
<p class="h6 m-0">{{ $item->title }}</p>
@if (isset($item->description) && !empty($item->description))
<p class="m-0">{{ $item->description }}</p>
@endif
</div>
@endforeach
</div>
</div>
</div>
@include('fo.partials.block.reduction-card', [
'news' => $reductionNews,
'ctaUrl' => $ctaUrl ?? null,
'ctaLabel' => $ctaLabel ?? null,
'position' => $position,
'blockType' => $blockType,
])
</div>
</section>