@include('_partials_frontend.head')
<!--Header-->
@include('_partials_frontend.navbar')
<section class="page-about">
	<div class="container">
		<div class="about-image">
			<img src="/frontend/assets/images/home-image.png" alt="">
		</div>
		@foreach($identitas as $identity)
		<div class="welcome-about-us mobile-show text-center">
			<p class="desc font-medium">
				 
					{!! $identity->deskripsi !!}
							</p>
		</div>
		@endforeach
		<div class="about-us-content">
			<div class="row">
				<div class="col-md-5 ml-auto">
					@foreach($about as $ab)
					<h4 class="subtitle-section mobile-hide font-large">
						About Us					</h4>
					<font class="font-medium">
						<p class="desc"><span class="mobile-text-big" >
													</p>

						@endforeach

						<p>
							Until today, we have made available the following programs:						</p>
						
						<ul class="about-list-check">

							@foreach($program as $prog)
							<li>
								<div class="about-list-item">
									<i class="mdi mdi-checkbox-marked"></i>
									<div class="text">
										{{ $prog->judul_page }}
									</div>
								</div>
							</li>
							@endforeach

						</ul>
					</font>
				</div>
			</div>

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

<section class="p-5 bg-gray">
	<h2 class="text-center p-4" >
		This option, leads to some significant benefits, which includes:
	</h2>
	<div class="container">
		<div class="row">
			@foreach($benefits as $benefit)
			<div class="col-md-4">
									<div class="benefit-list"><img src="/upload/page/{{ $benefit->foto }}" class="mx-auto d-block img-benefits"></div>
							</div>
			@endforeach
		</div>
	</div>
</section>
@include('_partials_frontend.footer')