@include('public_area.layouts.header_include')

@include('public_area.layouts.aside_include')


<section>
  <div class="food-delivery-head">
    <div class="food-delivery-back">
		<a href="javascript:history.back()">
			<i class="md-ripples uil uil-angle-left"></i>
		</a>
    </div>
    <div class="food-delivery mt-2">
      <h6>How to get the badge</h6>
    </div>
    <div class="wish-list-food">
     
    </div>
    <div class="wish-list-Cart">
    </div>
  </div>
</section>

<section class="pt-5 pb-5">
	<div class="container pt-5">
	   <div class="row">
		<div class="col-md-12">
			<div class="mt-3 mb-3">
				<p class="pt-3 pb-2">"A Badge is earned when a user completes all
					the Tasks in a Challenge."</p>
			</div> 
			<div class="p-3">
				<ol>
					<li><span class="font-weight-bold">Each challenge will have one assigned
						Badge.</span></li>
					<li><span class="font-weight-bold">The Badges section will only display:
						Earned badges Badges to be earned for active.</span></li>
				</ol>
			</div>
			<p class="pt-3 pb-2">"Once a Challenge expires, a badge will be removed from the Badges list tapping on a Badge will reveal the Badge details".</p>
			<p class="pt-3 pb-2">"Once you complete the challenges according to the term and condition of the badges, you will automatically gain the point which will convert into the reward and you will be able to see the voucher in your My Voucher sections".</p>
			<div class="help-content">
				<h6 class="font-weight-bold w-100 text-center">Was this helpful?</h6>
				<div class="help-btn-div">
					<a href="#" class="helpful-btn">Yes, I got my answer</a>
				</div>
				<div class="help-btn-div">
					<a href="#" class="helpful-btn">No, add more information</a>
				</div>
			</div>
			
		  </div>
	   </div>
	</div>
 </section>

  
@include('public_area.layouts.footer_include')

<script>
	const popup = document.querySelector('.popup');
	const close = document.querySelector('.close');

	window.onload = function() 
	{
		setTimeout(function(){
			popup.style.display = "block";
		},2000)	
	}

	close.addEventListener('click',() => {
		popup.style.display = "none";
	})
</script>