@extends('layout.member_app')

@section('content')

<!-- Inner Banner -->

<section class="container-fluid">

	

	<div class="row w-100">

		<div class="container text-center mt-30">

			<h2 class="font-roboto">Happy Stories</h2>
			<span class="lite-gray-color">See our success stories.</span>

		</div>

	</div>

</section>

  <!-- Inner Banner End -->

<div class="row breadcrumb-holder">

	<div class="container">

		<nav aria-label="breadcrumb">

			<ol class="breadcrumb m-0">

				<li class="breadcrumb-item"><a href="#">Pellichupulu</a></li>

				<li class="breadcrumb-item"><a href="#">Happy stories</a></li>

			</ol>

		</nav>

	</div>

</div>

<div class="row mt-40">

<section class="happy-story container-fluid">

	<div class="container">

		<div class="row">

			@foreach($happyStories as $happyStory)

			<div class="col-md-6 mb-30 d-flex align-items-stretch happy-story-item">

				<div class="card card-lite p-15">

					<div class="card-body p-0">

						<img src="{{Storage::disk('public')->url('/'.$happyStory->photo_url)}}" alt="Happy Story" class="img-fluid"/>

						<h5 class="mt-20 mb-10">{{$happyStory->title}}</h5><span class="lite-gray-color"></span>

						<p>{{$happyStory->description}}</p>

					<!-- 	<div class="d-flex justify-content-end">

							<button class="btn btn-normal">More</button>

						</div> -->

					</div>

				</div>

			</div>

			@endforeach

		</div>
		<div class="row pull-right">
			{{$happyStories->links()}}
		</div>

	</div>

</section>

</div>



@endsection

@section('js_assets')

@endsection