<!DOCTYPE html>
<html>
<head>
	<title>Rent for You</title>
	<?php include('../sections/head.php'); ?>

	<style type="text/css">
		
	</style>
	
</head>
<body>

	<?php include('../sections/header.php'); ?>



	<!-- H E R O -->
	<section class="container-fluid hero p-0">
		

		<div class="swiper">
		  <div class="swiper-wrapper">
		    <!-- Slides -->
		    <div class="swiper-slide slide1"></div>
		    <!-- <div class="swiper-slide slide2"></div> -->
		    <!-- <div class="swiper-slide slide3"></div> -->
		  </div>
	  </div>

	  <div class="hero-content container-fluid">
	  	<div class="row h-100">
	  		
		  	<div class="col-lg-8 d-flex align-items-center">
		  		<div class="hero-h1-container">
			  		<h1>
			  			<span>Louez votre voiture</span>
							en toute simplicité
			  		</h1>
			  		<a href="#" class="btn btn-main btn-primary mt-3">En savoir plus</a>
		  		</div>
		  			
		  	</div>
		  	<div class="col-lg-4 d-flex align-items-center">
		  		<div class="form-wrapper me-5">
		  			<div class="row">
		  				<div class="col-lg-12">
		  					<select class="form-control">
		  						<option value="0">Sélectionnez votre Lieu de retrait</option>
		  					</select>
		  					<select class="form-control">
		  						<option value="0">Sélectionnez votre Lieu de retour</option>
		  					</select>
		  				</div>
		  				<div class="col-lg-6">
		  					<select class="form-control">
		  						<option value="0">Date de départ</option>
		  					</select>
		  				</div>
		  				<div class="col-lg-6">
		  					<select class="form-control">
		  						<option value="0">Heure de départ</option>
		  					</select>
		  				</div>
		  				<div class="col-lg-6">
		  					<select class="form-control">
		  						<option value="0">Date de retour</option>
		  					</select>
		  				</div>
		  				<div class="col-lg-6">
		  					<select class="form-control">
		  						<option value="0">Heure de retour</option>
		  					</select>
		  				</div>
		  				<div class="col-lg-12">
		  					<button class="btn btn-main btn-dark w-100 mt-3">Voir nos véhicules</button>
		  				</div>
		  			</div>
		  		</div>
		  	</div>
	  	</div>
	  </div>

	  <script type="text/javascript">
	  	const swiper = new Swiper('.swiper', {
		  // Optional parameters
		  loop: true,
		  autoplay: true,

		});
	  </script>

	</section>


	<!-- S E C T I O N #1 -->
	<section class="section1 container">
		<div class="row my-5">

			<div class="col-lg-5  offset-lg-1">
				<h2>Rent for you <br> Votre agence de location voiture de location à Marrakech</h2>
			</div>

			<div class="col-lg-5">
				<p>Lorem ipsum dolor sit amet consectetur. Purus habitant aliquet dolor lacus. Eget eu commodo tempus pulvinar est amet felis cras. Eu dolor bibendum nulla cursus elementum lacus elit condimentum luctus. Eget sed elementum lacus el nunc diam nulla nit condientum luctus nunc diam nullam. Suscipit ut aenean posuere erat. Faucibus cras proin imperdiet id risus. Cursus semper quis sed amet et ut sed elementum lacus elit condiment.</p>
				<a href="#" class="btn btn-main btn-primary">en savoir plus</a>
			</div>

			<div class="col-lg-1"></div>


			<div class="col-lg-1 mt-5">
				<img src="assets/img/text-circle.png" class="sectioncircle mt-5" width="200px" style="position:absolute; z-index: 10;">
			</div>

			<div class="col-lg-10 mt-5">
				<img src="assets/img/section1.jpg" class="w-100 rounded" style="z-index: 9;">
			</div>

			<div class="stats col-lg-6 offset-lg-3 ">
				<div class="stats-container row text-center bg-dark text-light rounded px-5 py-4" style="">
					<div class="col-lg-4 col-6">
						<h3>213+</h3>
						<p>Barem bulm ipsum</p>
					</div>
					<div class="col-lg-4 col-6">
						<h3>978+</h3>
						<p>Lorem ipsum</p>
					</div>
					<div class="col-lg-4">
						<h3>5300+</h3>
						<p>Lorem ips dolmum</p>
					</div>
				</div>
			</div>
				
		</div>

	</section>


	<!-- C A T A L O G U E -->
	<section class="catalogue container my-5">
		
		<div class="row">
			<div class="col-lg-6 mt-5">
				<h2>
					<span>Découvrez</span>
					Notre parc de voitures de location
				</h2>
			</div>

			<div class="col-lg-6">
				<img src="assets/img/catalogue-text-circle.png" align="right" width="140px">
			</div>
				
			<div class="col-lg-12">
				<hr>
			</div>

			<div class="col-lg-4 mb-5">
				<a href="#" class="btn btn-outline-dark btn-filters">Tous nos véhicules</a>
			</div>
			<div class="col-lg-8 text-end mb-5">
				<select class="btn btn-outline-dark btn-filters">
					<option value="0">Catégories</option>
				</select>
				<select class="btn btn-outline-dark btn-filters ms-2">
					<option value="0">Modèles</option>
				</select>
				<select class="btn btn-outline-dark btn-filters ms-2">
					<option value="0">Prix</option>
				</select>
				<select class="btn btn-outline-dark btn-filters ms-2">
					<option value="0">Types</option>
				</select>
				
			</div>
		</div>


			<script type="text/javascript">
				$.ajax({
				  url: "http://217.65.144.39:1337/api/voitures?populate=*",
				  
				}).done(function(data) {
					console.log(data.data);

					for (var i = 0; i < data.data.length; i++) {
						$(".parc").append(show_car(data.data[i]));
						// $(".parc").append('<div class="col-lg-3 mb-5">'+data.data[i].nom+'</div>');
					}

				  // $(".parc").append('<div class="col-lg-3 mb-5">'+data+'</div>');
				});







				function show_car(car){
					var card = '<div class="col-lg-3 mb-5">';
					card += '<div class="card p-3"><div class="img-container"><img src="';
					// card += 'assets/img/car.png';
					card += 'http://217.65.144.39:1337'+car.image.url;
					card += '" ></div><div class="row hr-orange-container mb-3"><div class="col-3 hr-orange hro1"></div><div class="col-3 hr-orange hro2"></div><div class="col-3 hr-orange hro3"></div><div class="col-3 hr-orange hro4"></div></div><div class="row"><div class="col-12"><h3>';
					card += car.nom;
					card += '</h3>						</div>													<div class="col-lg-5 my-2">							<img src="assets/img/seige-bebe.png" width="16px">							Seige Bébé						</div>						<div class="col-lg-7 my-2">							<img src="assets/img/kilometrage.png" width="16px">							Kilométrage Illimité						</div>						<div class="col-lg-5 my-2">							<img src="assets/img/seige-bebe.png" width="16px">							Seige Bébé						</div><div class="col-lg-7 my-2"><img src="assets/img/kilometrage.png" width="16px">							Kilométrage Illimité						</div>											<div class="col-12"><hr></div><div class="col-lg-5">							<p>À partir de <br>';
					card += car.prix_base_par_jour + '€';

					card += '/ jour</p></div><div class="col-lg-7 text-end"><a href="';

					card += '#';

					card += '" class="btn btn-main btn-primary ">Voir Détails</a></div></div></div></div>';
					card += '';
					return card;
				}


			</script>

		<div class="row parc">

			<?php for ($i=0; $i < 0; $i++) { ?>
			<div class="col-lg-3 mb-5">
				<div class="card p-3">
					<img src="assets/img/car.png">

					<div class="row hr-orange-container mb-3">
						<div class="col-3 hr-orange hro1"></div>
						<div class="col-3 hr-orange hro2"></div>
						<div class="col-3 hr-orange hro3"></div>
						<div class="col-3 hr-orange hro4"></div>
					</div>

					<div class="row">

						<div class="col-12">
							<h3>Dacia-Logan</h3>
						</div>
							
						<div class="col-lg-5 my-2">
							<img src="assets/img/seige-bebe.png" width="16px">
							Seige Bébé
						</div>
						<div class="col-lg-7 my-2">
							<img src="assets/img/kilometrage.png" width="16px">
							Kilométrage Illimité
						</div>
						<div class="col-lg-5 my-2">
							<img src="assets/img/seige-bebe.png" width="16px">
							Seige Bébé
						</div>
						<div class="col-lg-7 my-2">
							<img src="assets/img/kilometrage.png" width="16px">
							Kilométrage Illimité
						</div>
					
						<div class="col-12"><hr></div>

						<div class="col-lg-5">
							<p>
								À partir de <br>
								30.00€ / jour
							</p>
						</div>
						<div class="col-lg-7 text-end">
							<a href="#" class="btn btn-main btn-primary ">Voir Détails</a>
						</div>
					</div>
				</div>
			</div>
			<?php } ?>

		</div>
		
	</section>



	<!-- S E C T I O N #2  P O I N T S  -->
	<section class="container points">
		<div class="row text-center mt-5">

			<div class="col-lg-6 offset-lg-3">
				<h2 class="teko">
					<span>Lorem ipsum</span>
				 	Nos points forts
				</h2>
				<p>Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor sit aconsetur dipiscimet coibero.</p>
			</div>

			<div class="col-lg-3"></div>

			<div class="col-lg-4 px-5 py-3">
				<div class="icon rounded-circle">
					<img src="assets/img/point-icon-1.png">
				</div>
				<h3>Lorem ipsum</h3>
				<p>Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat Lorem ipsum dolor sit amet, consetur.</p>
			</div>

			<div class="col-lg-4 px-5 py-3">
				<div class="icon rounded-circle">
					<img src="assets/img/point-icon-2.png">
				</div>
				<h3>Lorem ipsum</h3>
				<p>Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat Lorem ipsum dolor sit amet, consetur.</p>
			</div>

			<div class="col-lg-4 px-5 py-3">
				<div class="icon rounded-circle">
					<img src="assets/img/point-icon-3.png">
				</div>
				<h3>Lorem ipsum</h3>
				<p>Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat Lorem ipsum dolor sit amet, consetur.</p>
			</div>

			<div class="col-lg-4 px-5 py-3">
				<div class="icon rounded-circle">
					<img src="assets/img/point-icon-1.png">
				</div>
				<h3>Lorem ipsum</h3>
				<p>Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat Lorem ipsum dolor sit amet, consetur.</p>
			</div>

			<div class="col-lg-4 px-5 py-3">
				<div class="icon rounded-circle">
					<img src="assets/img/point-icon-2.png">
				</div>
				<h3>Lorem ipsum</h3>
				<p>Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat Lorem ipsum dolor sit amet, consetur.</p>
			</div>

			<div class="col-lg-4 px-5 py-3">
				<div class="icon rounded-circle">
					<img src="assets/img/point-icon-3.png">
				</div>
				<h3>Lorem ipsum</h3>
				<p>Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat Lorem ipsum dolor sit amet, consetur.</p>
			</div>
		
		</div>
	</section>


	<!-- S E C T I O N #3  I M G  -->
	<section class="section-image container-fluid my-5">
	</section>




	<!-- S E C T I O N #4  S E R V I C E S  -->
	<section class="services container mb-5">
		<div class="row">
			<div class="col-lg-6 offset-lg-3 text-center">
				<h2>Nos services</h2>
				<p>Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor sit aconsetur dipiscimet coibero.</p>
			</div>


			<div class="col-lg-4 my-3">
				<div class="card">
					
					<img src="assets/img/services-1.png" width="100%">

					<div class="backdrop"></div>

					<div class="content">
						<h3>Extra</h3>
						<p>Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor sit aconsetur dipiscimet coibero ulputat eolor sita.</p>
						<a href="services" class="btn btn-main btn-primary">En savoir plus</a>
					</div>

				</div>
			</div>
			<div class="col-lg-4 my-3">
				<div class="card">

					<img src="assets/img/services-2.png" width="100%">

					<div class="backdrop"></div>

					<div class="content">
						<h3>LLD</h3>
						<p>Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor sit aconsetur dipiscimet coibero ulputat eolor sita.</p>
						<a href="services" class="btn btn-main btn-primary">En savoir plus</a>
					</div>
				</div>
			</div>

			<div class="col-lg-4 my-3">
				<div class="card">

					<img src="assets/img/services-3.png" width="100%">
					
					<div class="backdrop"></div>

					<div class="content">
						<h3>Navette et Transfert</h3>
						<p>Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor sit aconsetur dipiscimet coibero ulputat eolor sita.</p>
						<a href="services" class="btn btn-main btn-primary">En savoir plus</a>
					</div>

				</div>
			</div>

		</div>
		
	</section>




	<!-- S E C T I O N #5  M O R E  I N F O  -->
	<section class="container-fluid more-info text-light py-5 mb-5">
		<div class="w-lg-50 mx-auto my-5 text-center">
			<h3>Pour plus d'information</h3>
			<p class="my-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.</p>
			<a href="#" class="btn btn-main btn-primary me-lg-3 mb-3">nous contacter</a>
			<a href="#" class="btn btn-main btn-outline-light mb-3 border"><i class="fa fa-phone"></i> 06 09 52 10 49</a>
		</div>
	</section>



	<!-- S E C T I O N #6  F A Q s  -->
	<section class="container faq">
		<div class="row my-5">
			<div class="col-lg-4 mt-5">
				<h2 class="teko">
					<span class="vibur d-block text-primary">Questions fréquentes</span>
				 	sur nos locations de voitures
				</h2>
				<p>Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor sit aconsetur dipiscimet coibero.</p>
			</div>
			<div class="col-lg-8">

				<div class="accordion" id="accordionFlushExample">
				  <div class="accordion-item">
				    <h2 class="accordion-header">
				      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
				        Lpiscing elitunc orem ipsum dolor sit amet consetur 
				      </button>
				    </h2>
				    <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
				      <div class="accordion-body">Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamLorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamet, consetur donset.et, consetur donset.</div>
				    </div>
				  </div>
				  <div class="accordion-item">
				    <h2 class="accordion-header">
				      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
				        Lorem ipsum dolor sit amet, consetur dipiscing elitunc
				      </button>
				    </h2>
				    <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
				      <div class="accordion-body">Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamLorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamet, consetur donset.et, consetur donset.</div>
				    </div>
				  </div>

				  <div class="accordion-item">
				    <h2 class="accordion-header">
				      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
				        Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siametur donset.
				      </button>
				    </h2>
				    <div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
				      <div class="accordion-body">Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamLorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamet, consetur donset.et, consetur donset.</div>
				    </div>
				  </div>

				  <div class="accordion-item">
				    <h2 class="accordion-header">
				      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse4" aria-expanded="false" aria-controls="flush-collapse4">
				        Consetur dipiscing elitunc vulputat eolor siametur donset.
				      </button>
				    </h2>
				    <div id="flush-collapse4" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
				      <div class="accordion-body">Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamLorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamet, consetur donset.et, consetur donset.</div>
				    </div>
				  </div>

				  <div class="accordion-item">
				    <h2 class="accordion-header">
				      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse5" aria-expanded="false" aria-controls="flush-collapse5">
				        Dipiscing elitunc vulputat eolor siametur donset.
				      </button>
				    </h2>
				    <div id="flush-collapse5" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
				      <div class="accordion-body">Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamLorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamet, consetur donset.et, consetur donset.</div>
				    </div>
				  </div>

				</div>

			</div>
		</div>
		
	</section>


	<!-- S E C T I O N #7  R E V I E W S  -->
	<section class="reviews container my-5">
		<div class="row mb-5">
			<div class="col-lg-8">
					
				<p>
					<i class="fa fa-star text-primary"></i>
					<i class="fa fa-star text-primary"></i>
					<i class="fa fa-star text-primary"></i>
					<i class="fa fa-star text-primary"></i>
					<i class="fa fa-star text-primary"></i>
				</p>

				<h2 class="teko">Nos témoignages</h2>
				<p>“Rent For You” Agence de location de voiture à Marrakech</p>
			</div>
			<div class="col-lg-4 text-end">
					
				<div class="text-center mt-3">
					<p>213 avis Google</p>
					<a href="#" class="btn btn-main btn-primary">donner votre avis</a>
				</div>
				
			</div>

			<?php for ($i=0; $i < 3; $i++) { ?>

			<div class="col-lg-4 mt-5">
				<div class="border rounded p-4">
					<div class="row">
						<div class="col-lg-3 col-3">
							<img src="assets/img/user-profile.png" width="70px">
						</div>
						<div class="col-lg-7 col-7 mt-2">
							<h3 class="h5">Noelle Blanchette</h3>
							<p class="small">Il y a 3 jours</p>
						</div>
						<div class="col-lg-2 col-2 mt-3 text-center">
							<img src="assets/img/google-logo.png" width="22px">
						</div>
						<div class="col-lg-12">
								
							<p class="mt-3">
								<i class="fa fa-star text-primary"></i>
								<i class="fa fa-star text-primary"></i>
								<i class="fa fa-star text-primary"></i>
								<i class="fa fa-star text-primary"></i>
								<i class="fa fa-star text-secondary"></i>
							</p>

							<p>Lorem ipsum dolor sit amet consectetur. Ac volutpat vestibulum morbi sit varius amet facilisis. At leo pellentesque sollicitudin massa odio.</p>
						</div>
					</div>
				</div>
			</div>
			<?php } ?>
		</div>
	</section>

	<div class="car-animation-container">
		<img src="assets/img/footer-car-animation.png" class="car-animation">
		<img src="assets/img/footer-car-light.png" class="car-light">
	</div>


	<!-- F O O T E R -->

	<?php include('../sections/footer.php'); ?>

</body>
</html>




