103 lines
6.3 KiB
PHP
103 lines
6.3 KiB
PHP
@extends('fo.layout')
|
|
|
|
@section('title', $rangeModel->seo_title ?? __('Gamme'))
|
|
@section('description', $rangeModel->seo_description ?? __('La gamme à savourer !'))
|
|
@section('breadcrumb',
|
|
request()->route()->getName())
|
|
|
|
@section('content')
|
|
<section class="ranges range position-relative">
|
|
<div class="container">
|
|
<div class="row w-100 mx-auto">
|
|
<div class="col-12">
|
|
<h1 class="f-sheldon text-uppercase lh-sm my-3 w-fit text-center">
|
|
<span class="divide d-block w-100 mt-xl-3 my-2"></span>
|
|
{{ $rangeModel->title }}
|
|
<span class="divide d-block w-100 mt-xl-3 my-2"></span>
|
|
</h1>
|
|
</div>
|
|
<div class="col-12 col-xl-6">
|
|
<p class="fw-bold m-0 mb-4 text-center">
|
|
{{ Str::of($rangeModel->subtitle)->ucFirst() }}
|
|
</p>
|
|
<p class="highlight black f-readex-pro m-0 mb-2 px-3 text-white">
|
|
{{ Str::of($rangeModel->tagline)->ucFirst() }}
|
|
</p>
|
|
{!! clean($rangeModel->description) !!}
|
|
</div>
|
|
<div class="col-12 col-xl-6 m-xl-0 my-4">
|
|
<div class="d-flex justify-content-center">
|
|
<img src="{{ asset($rangeModel->picture) }}" title="{{ Str::of($rangeModel->picture_alt)->ucFirst() }}"
|
|
alt="{{ Str::of($rangeModel->picture_title)->ucFirst() }}">
|
|
</div>
|
|
</div>
|
|
<div class="col-12 my-xl-5">
|
|
<p class="highlight black f-readex-pro mx-xl-auto m-0 px-3 text-white">
|
|
{{ Str::of(__('Quelques-unes de nos recettes...'))->ucFirst() }}
|
|
</p>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="ranges-swiper position-relative d-xl-none">
|
|
<div class="swiper swiper-ranges overflow-hidden py-4" id="swiper-ranges">
|
|
<img class="position-absolute top-50 start-50 translate-middle w-100 h-100 z-n1 d-xl-none"
|
|
src="{{ Vite::asset('resources/assets/images/global/bg-white-desktop.png') }}"
|
|
title="{{ __('Visuel servant de fond') }}" alt="{{ __('fond blanc') }}">
|
|
<div class="swiper-wrapper">
|
|
@foreach ($productModels as $productModel)
|
|
<div class="swiper-slide">
|
|
<div class="swiper-slide-range m-xl-0 mx-auto">
|
|
<img src="{{ asset($productModel->picture_thumbnail) }}"
|
|
title="{{ $productModel->picture_thumbnail_title }}"
|
|
alt="{{ $productModel->picture_thumbnail_alt }}">
|
|
<p class="text-dark fw-bold m-0 mt-2">
|
|
{{ $productModel->title }}
|
|
</p>
|
|
<p class="text-dark m-0">
|
|
{{ $productModel->subtitle }}
|
|
</p>
|
|
<div class="w-100 d-xl-none">
|
|
<a class="fw-bold text-dark w-fit" href="#">{{ __('> En savoir +') }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
<div
|
|
class="navigation d-flex justify-content-evenly justify-content-xl-between align-items-center p-xl-4 mb-2 mt-3 flex-row p-0">
|
|
<div class="swiper-button-prev rounded-circle" role="button">
|
|
<img src="{{ Vite::asset('resources/assets/images/global/btn-arrow.png') }}"
|
|
title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}">
|
|
</div>
|
|
<div class="swiper-button-next rounded-circle" role="button">
|
|
<img src="{{ Vite::asset('resources/assets/images/global/btn-arrow.png') }}"
|
|
title="{{ __('Navigation du slider (droite)') }}" alt="{{ __('flèche vers la droite') }}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="d-none d-xl-flex row gx-5 justify-content-start align-items-start flex-row flex-wrap">
|
|
@foreach ($productModels as $productModel)
|
|
<div class="col-4 mb-5">
|
|
<div class="card mx-auto border-0">
|
|
<a class="text-decoration-none stretched-link" href="{{ route('fo.products.show', $productModel) }}">
|
|
<img class="card-img-top rounded-0" src="{{ asset($productModel->picture_thumbnail) }}"
|
|
title="{{ $productModel->picture_thumbnail_title }}"
|
|
alt="{{ $productModel->picture_thumbnail_alt }}">
|
|
<div class="card-body p-0">
|
|
<p class="text-dark card-title fw-bold my-2">{{ $productModel->title }}</p>
|
|
<p class="text-dark card-text m-0">
|
|
{{ $productModel->subtitle }}
|
|
</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endsection
|