ldc-doux/resources/views/front/a-propos.blade.php
2022-02-01 12:54:39 +01:00

198 lines
10 KiB
PHP

@extends('layouts.frontend')
@section('title', __('Accueil'))
@section('description', __("Découvrez DOUX, des produits de volailles françaises."))
@section('content')
<section class="jumbotron">
<p class="maintitle ttu animate__animated fadeIn animate__slow">{{ __('Qui sommes-nous')}} ?</p>
<img class="img-zoom" src="{{ asset('assets/images/a-propos.jpg') }}" alt="A propos de nous">
<div class="banner">
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1919.76 59.99">
<defs>
<style>
.cls-1 {
fill: #ffffff;
}
.cls-2 {
fill: transparent;
}
</style>
</defs>
<path class="cls-1" d="M1919.67,58c-.42.62,1,2.12-1,2-1.17-.07-2.34,0-3.5,0H0V55c3-.06,6,.08,9-.22,28.32-2.84,56.61-6,85-8.6q59.19-5.38,118.44-10c46.65-3.58,93.32-7,140-9.88,49.7-3.05,99.43-5.85,149.18-7.9,68.4-2.81,136.83-5,205.26-7.06,38.63-1.14,77.28-1.58,115.92-1.94,78.47-.74,156.93-.9,235.39.32,37.81.59,75.62,1.2,113.42,2.09q64.44,1.5,128.85,4,76.89,2.85,153.71,6.91,63.36,3.32,126.66,7.44,43.86,2.85,87.7,6,33.13,2.4,66.22,5.17,38.82,3.23,77.61,6.72c20.06,1.79,40.11,3.73,60.16,5.6Z" />
<path class="cls-2" d="M1919.67,58l-47.21-4.36c-20-1.87-40.1-3.81-60.16-5.6q-38.79-3.47-77.61-6.72-33.09-2.74-66.22-5.17-43.83-3.18-87.7-6-63.3-4.11-126.66-7.44-76.83-4-153.71-6.91-64.41-2.4-128.85-4c-37.8-.89-75.61-1.5-113.42-2.09-78.46-1.22-156.92-1.06-235.39-.32-38.64.36-77.29.8-115.92,1.94-68.43,2-136.86,4.25-205.26,7.06-49.75,2-99.48,4.85-149.18,7.9-46.7,2.87-93.37,6.3-140,9.88q-59.27,4.54-118.44,10c-28.35,2.58-56.64,5.76-85,8.6-3,.3-6,.16-9,.22V0H1919.67Z" />
</svg>
</div>
</section>
{{-- BLOC 1 - ENCART DE PRESENTATION --}}
<section class="container">
<div class="wrapper">
<div class="header-title align-center animate__animated fadeInUp animate__slow">
<h1 class="align-center"><i class="mascotte"></i>{{ $encart_marqueHeader->title}}</h1>
</div>
<h2 class="align-center">{{ $encart_marqueHeader->subtitle}}</h2>
<span class="align-center">{!! $encart_marqueHeader->text !!}</span>
</div>
</section>
<section id="reassurances">
<div class="wrapper reassurances-content align-center">
<ul>
@foreach ($pictobrands_marque as $picto)
<li class="reassurance-item animate__animated fadeInLeft animate__slow">
<p class="is-flex vertical-center">
<img src="{{ asset($picto->picture) }}" alt="{{ $picto->alt_text_picture }}">
<span class="number">{{ $picto->title }}</span>
</p>
<p>{!! clean(nl2br($picto->text)) !!}</p>
</li>
@endforeach
</ul>
</div>
</section>
{{-- BLOC 2 - NOS VALEURS --}}
<section id="values" class="container">
<div class="values-content wrapper align-center">
<h2 class="sectiontitle animate__animated fadeInUp animate__slow">{{ $title_marqueBloc2->title}}</h2>
<p>{{ $title_marqueBloc2->text}}</p>
<ul class="values-list">
@foreach ($pictos_marqueBloc2 as $picto)
<li class="item animate__animated fadeInUp animate__slow">
<img src="{{ asset($picto->picture) }}" alt="{{ $picto->alt_text_picture }}">
<span>{!! clean(nl2br($picto->text)) !!}</span>
</li>
@endforeach
</ul>
</div>
<img src="{{ asset('assets/images/frise.jpg') }}" alt="Frise">
</section>
{{-- BLOC 3 - NOTRE HISTOIRE --}}
<section class="container">
<span id="notre-histoire" class="offset-anchor"></span>
<div class="wrapper">
<h2 class="sectiontitle align-center animate__animated fadeInUp animate__slow">{{ __('Notre Histoire') }}</h2>
<div class="timeline">
<div id="frise-autoscroll">
<div class="img-frise">
<img src="{{ asset('assets/images/story-line.png') }}" alt="Fil de l'histoire">
<img src="{{ asset('assets/images/story-line.png') }}" alt="Fil de l'histoire">
<img src="{{ asset('assets/images/story-line.png') }}" alt="Fil de l'histoire">
<div class="svg-mask"></div>
</div>
</div>
@foreach ($moments as $moment)
@if ($loop->first)
<div class="step is-flex start right p-rel animate__animated fadeInRight animate__slow">
<span class="year">{{$moment->title}}</span>
<div class="step_content">
<h3 class="step_title bold">{{$moment->subtitle}}</h3>
<p class="align-justify">{!! $moment->text !!}</p>
<img src="{{ asset($moment->picture) }}" alt="{{$moment->alt_text_picture}}">
</div>
</div>
@else
@if ($loop->iteration % 2 == 0)
<div class="step left p-rel desk-mt-n95 smrt-order animate__animated fadeInLeft animate__slow">
<img src="{{ asset($moment->picture) }}" alt="{{$moment->alt_text_picture}}">
<span class="year">{{$moment->title}}</span>
<div class="step_content">
<h3 class="step_title bold">{{$moment->subtitle}}</h3>
<p class="align-justify">{!! $moment->text !!}</p>
</div>
</div>
@else
<div class="step special right p-rel desk-ml-150 smrt-order animate__animated fadeInRight animate__slow">
<img src="{{ asset($moment->picture) }}" alt="{{$moment->alt_text_picture}}">
<span class="year">{{$moment->title}}</span>
<div class="step_content">
<h3 class="step_title bold">{{$moment->subtitle}}</h3>
<p class="align-justify">{!! $moment->text !!}</p>
</div>
</div>
@endif
@endif
@endforeach
{{--
<div class="step is-flex start right p-rel animate__animated fadeInRight animate__slow">
<span class="year">1920</span>
<div class="step_content">
<h3 class="step_title bold">Lorem Ipsum dolor sit amet.</h3>
<p class="align-justify">Lorem ip sum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr</p>
<img src="{{ asset('assets/images/blog.jpg') }}" alt="photo">
</div>
</div>
<div class="step left p-rel desk-mt-n95 smrt-order animate__animated fadeInLeft animate__slow">
<img src="{{ asset('assets/images/doux-selection.jpg') }}" alt="photo">
<span class="year">2021</span>
<div class="step_content">
<h3 class="step_title bold">Lorem Ipsum dolor sit amet.</h3>
<p class="align-justify">Lorem ip sum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr</p>
</div>
</div>
<div class="step special right p-rel desk-ml-150 smrt-order animate__animated fadeInRight animate__slow">
<img src="{{ asset('assets/images/doux-nuggets.jpg') }}" alt="photo">
<span class="year">2020</span>
<div class="step_content">
<h3 class="step_title bold">Lorem Ipsum dolor sit amet.</h3>
<p class="align-justify">Lorem ip sum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr</p>
</div>
</div>
--}}
</div>
</div>
</section>
{{-- BLOC 4 - NOS ENGAGEMENTS --}}
<section class="container">
<div class="wrapper">
<h2 class="sectiontitle align-center has-label-bis desk-mb-80 animate__animated fadeInUp animate__slow">{{ $title_marqueBloc4->title}}</h2>
<div class="is-flex">
<div class="w50 smrt-mb-100">
<img src="{{ asset($encart_marqueBloc4l->picture) }}" alt="{{ $encart_marqueBloc4l->alt_text_picture}}" class="animate__animated fadeInLeft animate__slow">
<h3 class="color-yellow">{{ $encart_marqueBloc4l->title}}</h3>
<p class="align-justify">{!! $encart_marqueBloc4l->text !!}</p>
</div>
<div class="w50 smrt-mb-100">
<img src="{{ asset($encart_marqueBloc4r->picture) }}" alt="{{ $encart_marqueBloc4r->alt_text_picture}}" class="animate__animated fadeInLeft animate__slow">
<h3 class="color-yellow">{{ $encart_marqueBloc4r->title}}</h3>
<p class="align-justify">{!! $encart_marqueBloc4r->text !!}</p>
</div>
</div>
<div class="mt50 video-wrapper">
<img src="{{ asset('assets/images/video.jpg') }}" alt="photo">
</div>
</div>
</section>
{{-- BLOC 5 - BAS DE PAGE --}}
<section class="container">
<div class="wrapper">
<h2 class="sectiontitle align-center animate__animated fadeInUp animate__slow">{{ $encart_marqueFooter->title}}</h2>
<div class="is-flex">
<div class="w50 animate__animated fadeInLeft animate__slow">
<h3 class="color-yellow">{{ $encart_marqueFooter->subtitle}}</h3>
<p class="align-justify">{!! $encart_marqueFooter->text !!}</p>
</div>
<div class="w50 animate__animated fadeInRight animate__slow">
<img src="{{ asset($encart_marqueFooter->picture) }}" alt="{{ $encart_marqueFooter->alt_text_picture}}">
</div>
</div>
</div>
</section>
@endsection