@extends('layouts.app')

@section('title', 'Accueil')

@section('content')

	<!-- =======================
		Main Banner START -->
	<section class="py-0">
		<div class="card overflow-hidden min-vh-100 rounded-0"
			style="background:url({{asset('img/home/justine_piluso_home_compressed.png')}}) no-repeat; background-size:cover; background-position:center;">
			<!-- Bg overlay -->
			<div class="bg-overlay bg-linear-overlay"></div>

			<!-- Card image overlay -->
			<div class="position-relative z-index-2 d-flex flex-column m-auto h-100 py-9">
				<div class="container">
					<div class="row">
						<div class="col-sm-11 col-lg-8 col-xl-7 text-left ms-1 mt-5 ">
							<!-- Title -->
							<h1 class="text-white display-4 my-4 w-50">JUSTINE PILUSO</h1>
							<p class="text-white mb-5">Cheffe lumineuse et bouillonnante, son crédo est simple : rassembler
								autour de bons produits cuisinés avec amour.
								Justine cuisine, et quand elle ne cuisine pas, elle se démène pour pousser tout le monde à
								le faire.
							</p>
							<p class="text-white"><i>
									« Presque tous les problèmes peuvent se régler par la cuisine. Et les autres ? Peut-être
									par le sourire. »
								</i></p>
							<p class="text-white ms-3" style="font-style: italic;">Justine Piluso</p>
												<div class="">
						<a href="https://www.facebook.com/ChefJustinePiluso/?locale=fr_FR" target="_blank"><img src="{{asset('img/logos/facebook_blanc.png')}}" class="text-start" alt="Facebook" style="height:60px"></a>
						<a href="https://www.instagram.com/justine_piluso/" target="_blank"><img src="{{asset('img/logos/insta_blanc.png')}}" class="" alt="Instagram" style="height:80px"></a>
					</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- =======================
		Main Banner END -->

	<!-- =======================
		About START -->
@include('shared.btns15')

	<!-- =======================
		About END -->
	<div class="container">
		<h4 class="my-4 text-primary">Ce que je fais</h4>
	</div>

	<section
		style="background:url({{asset('img/home/bghome.svg')}}) no-repeat; background-size:cover; background-position:center; ">
		<div class="container">
			<div class="row">
				<div class="col-md-4 d-flex justify-content-center">
					<a href="{{ route('service') }}#consultante" class="text-decoration-none">
						<div class="card card-hover-shadow border-round-md shadow mb-5"
							style="width: 280px; min-height: 350px">
							<!-- Card body -->
							<div class="card-body p-3 text-center">
								<img class="mb-2" src="{{ asset('img/home/animatrice_culinaire.svg')}}" alt="Cheffe nomade">
								<!-- Content -->
								<h5 class="mb-4">Cheffe consultante</h5>
								<p class="small-exerge">Conception, mise en place, et amélioration continue de nouvelles
									offres de restauration.</p>
							</div>
						</div>
					</a>
				</div>


				<div class="col-md-4 d-flex justify-content-center">
					<a href="{{ route('service') }}#nomade" class="text-decoration-none">
						<div class="card card-hover-shadow border-round-md shadow mb-5"
							style="width: 280px; min-height: 350px">
							<!-- Card body -->
							<div class="card-body p-3 text-center">
								<img class="mt-2 mb-3" src="{{ asset('img/home/cheffe_nomade.svg')}}"
									alt="Animatrice culinaire">
								<!-- Content -->
								<h5 class="mb-5">Cheffe nomade</h5>
								<p class="small-exerge">Parfois Justine prend ses valises, ses casseroles, et s’installe de
									façon éphémère là où ne l’attend pas.</p>
							</div>
						</div>
					</a>
				</div>

				<div class="col-md-4 d-flex justify-content-center">
					<a href="{{ route('service') }}#tous" class="text-decoration-none">
						<div class="card card-hover-shadow border-round-md shadow mb-5"
							style="width: 280px; min-height: 350px">
							<!-- Card body -->
							<div class="card-body p-3 text-center">
								<img class="mt-2 mb-4" src="{{ asset('img/home/creation_contenu.svg')}}"
									alt="Cheffe nomade">
								<!-- Content -->
								<h5 class="mb-5">Cheffe pour tous</h5>
								<p class="small-exerge">
									Partage de ses recettes et conseils dans un but ultime : vous faire cuisiner toujours
									plus !
								</p>
							</div>
						</div>
					</a>
				</div>
			</div>
		</div>
	</section>


	<!-- =======================
		Blog START -->
	{{-- <section class="py-0">
		<div class="container">
			<h4 class="my-4 text-primary me-4">Mon blog</h4>

		</div>
		@include('layouts.slider', [
			'id' => 'unique-slider-id-1',
			'items' => $recipes,
			'card' => 'layouts.card_blog',
			'btn' => 'btn-secondary'
		])
			<div class="container mt-5 text-center">
				<a href="{{route('blog')}}" class="btn btn-secondary btn-lg">Découvrir le blog</a>
			</div>
	</section> --}}
	<!-- =======================
		Blog END -->


			<!-- =======================
	Actus START -->
	<div class="position-relative">
			<div class="position-absolute start-50 d-none d-md-block ms-md-9 mt-n7 mt-sm-n9 mt-md-n6 mt-xl-n7 z-index-2" style="transform: translateX(2.52222px) translateY(4.7px);">
			<img src="{{asset('img/home/oignon.svg')}}" alt="Actualités illustration">
		</div>
	</div>
	<section class="py-5 mt-5 bg-antique-white">
		<div class="container">
				<h4 class="my-4 text-primary">Les actualités de <i><strong>Justine</strong></i></h4>
		</div>
		@include('layouts.slider', [
			'id' => 'unique-slider-id-2',
			'items' => $actus,
			'card' => 'layouts.card_actu_home',
			'btn' => 'btn-primary'
		])
			<div class="container text-center py-5">
				<a href="{{route('press')}}" class="btn btn-primary">Voir toutes les actualités</a>
			</div>
	</section>
	<!-- =======================
		Actus END -->




	<!-- =======================
	Livres START -->
	<section class="pb-0 mb-0">@include('layouts.livres')</section>
	<!-- =======================
		Livres END -->

		<!-- =======================
		Footer START -->
		<section class="pb-0">
			<div class="container-fluid text-center">
				<img class="text-center" src="{{ asset('img/footer.svg')}}" alt="">
			</div>
		</section>
		<!-- =======================
		Footer END -->



@endsection