50 lines
3 KiB
PHP
50 lines
3 KiB
PHP
<section id="commitments-tabs-texts" class="line-border-large bg-white py-5">
|
|
<div class="container">
|
|
<div class="row justify-content-between">
|
|
<div class="position-relative col-12 col-xl-6 pe-xl-5">
|
|
<div class="d-flex flex-column justify-content-center align-items-start h-100 pe-xl-5 mb-5 mb-xl-0">
|
|
<h2 class="text-start">{{ $title }}</h2>
|
|
<p class="text-start m-0">{{ $text }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-xl-6">
|
|
<ul class="d-none d-sm-flex nav nav-pills" id="pills-tab" role="tablist">
|
|
@foreach($collection as $key => $item)
|
|
<li class="nav-item" role="presentation">
|
|
<button @class([
|
|
"btn btn-{$item->color} pb-4",
|
|
'active' => $loop->first
|
|
]) id="commitment-eat-{{ $key }}-tab" data-bs-toggle="pill"
|
|
data-bs-target="#commitment-eat-{{ $key }}" type="button" role="tab" aria-controls="commitment-eat-{{ $key }}"
|
|
aria-selected="{{ $loop->first ? 'true' : 'false' }}">{{ $item->label }}</button>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
<div class="tab-content" id="pills-tabContent">
|
|
@foreach($collection as $key => $item)
|
|
<div @class([
|
|
'tab-pane fade mt-5 mt-sm-0',
|
|
'show active' => $loop->first
|
|
]) id="commitment-eat-{{ $key }}" role="tabpanel" aria-labelledby="commitment-eat-{{ $key }}-tab"
|
|
tabindex="0">
|
|
<div class="position-relative bottom-left-shadow">
|
|
<div class="border-0 bg-{{ $item->color }} line-border-small text-{{ $item->text_color }} w-100 h-100 p-3">
|
|
<div class="row justify-content-start align-items-center w-100 mx-auto py-2">
|
|
<div class="col-12 col-xl-8 d-flex align-items-center mb-2">
|
|
<img class="img-fluid" src="{{ Vite::asset($item->picto) }}" alt="{{ $item->picto_alt }}"
|
|
title="{{ $item->picto_title }}">
|
|
<h4 class="f-bourton-base text-{{ $item->text_color }} text-start ps-3 mb-0">{{ $item->title }}</h4>
|
|
</div>
|
|
<div class="col-12">
|
|
{!! $item->text !!}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|