@extends('layouts.main_page_website')

@section('content')

			<section class="page_slider">
				<div class="flexslider" data-nav="false" data-slideshow="true">
					<ul class="slides">
						@foreach ($sliders as $index => $item)
						<li class="ds slide-{{ $index + 1 }} cover-image s-overlay text-left  ">
							<img src="{{ $item->backgroundImage }}" alt="no-background-image-found">
							<div class="container">
								<div class="row align-items-center">
									<div class="col-12 text-center text-sm-left">
										<div class="intro_layers_wrapper">
											<div class="intro_layer" data-animation="fadeInLeft" data-delay="150">
												<p class="special-heading color-main sub-title">
													<span class="text-uppercase">
														{{$item->title}}
													</span>
												</p>
												@if($item->description)
													<h2 class="special-heading ">
														<span class="text-capitalize ">
															<span class="color-main"></span>
														</span>
													</h2>
													<p>
														{{$item->description}}
													</p>
												@endif
											</div>

											<div class="intro_layers ">
												<div class="many-buttons intro_layer" data-animation="fadeIn" data-delay="150">
													<!-- <a href="#" class="btn btn-maincolor medium-btn">start now</a> -->
													<a href="{{$item->url}}" target="_blank"  class="btn btn-outline-darkgrey medium-btn" rel="noopener noreferrer">{{$item->linkButtonText}}</a>
												</div>
											</div>
										</div> <!-- eof .intro_layers_wrapper -->
									</div> <!-- eof .col-* -->
								</div><!-- eof .row -->
							</div><!-- eof .container-fluid -->
						</li>
						@endforeach



					</ul>
				</div> <!-- eof flexslider -->
			</section>

			<!-- Start Section About -->
			<section class="about_us ls s-overlay mobile-overlay s-py-xl-270 s-py-lg-130 s-py-md-90 s-py-60 c-gutter-0 container-px-xl-0">
				<div class="container-fluid">
					<div class="row align-items-center">
						<div class="col-lg-6 text-center text-sm-left">
							<div class="special-column-center d-block d-sm-flex">
								<div class="special-class">
									<p class="special-heading text-center big thin color-main">
										<span>01</span>
									</p>
									<p class="special-heading text-center text-uppercase sub-title2 color-darkgrey">
										<span>
											about us
										</span>
									</p>
									<div class="fw-divider-space divider-30 divider-lg-40"></div>
									<a href="/about" class="btn btn-maincolor medium-btn">Know more</a>
									<div class="fw-divider-space divider-30 divider-sm-0"></div>
								</div>

								<div class="text-block with-left-space">
									<p class="excerpt">
									Xiangqi (Chinese: 象棋; pinyin: xiàngqí; Wade–Giles: Hsiang ch'i; English: /ˈʃɑːŋtʃi/), also called Chinese chess or Elephant chess, is a strategy board game for two players.
																	</p>
									<p class="excerpt">
									Xiangqi Association of India is governing organisation of Xiangqi sports.

									</p>
									<p>
									The Asian Chess Federation was initiated by eight chess groups including China, Hong Kong, Macau, Malaysia, East Malaysia, the Philippines, Singapore, and Thailand.
									</p>
								</div>
							</div>
						</div>
						<div class="col-lg-6">

						</div>
					</div>
				</div>
			</section>
			<!-- End Section About -->

			<!-- Start Section Blog -->
			<section class="ds" style="padding: 50px 10px 50px 10px!important;">
				<div class="container-fluid">
					<div class="row">
						<div class="col-lg-4 pr-4" style="padding-right: 50px!important;">

                            <div class="special-class" >
									<p class="special-heading text-center big thin color-main">
										<span>02</span>
									</p>
									<p class="special-heading text-center text-uppercase sub-title2 color-darkgrey">
										<span>
											blog
										</span>
									</p>
									<div class="fw-divider-space divider-30 divider-lg-40"></div>
									<a href="/about" class="btn btn-maincolor medium-btn">Know more</a>
									<div class="fw-divider-space divider-30 divider-sm-0"></div>
								</div>
                                </div>
                         <div class="col-lg-8 ">
                            <div style=" float: left!important;">

							<h2 class="special-heading text-center">
								<span class="text-capitalize ">
									our <span class="color-main">news</span> & blogs
								</span>
							</h2>
							<p class="special-heading text-center color-darkgrey">
								<span>
									We are dedicated to broadening and developing chess as art, recreation, and as a significant element of culture in Northern California.
								</span>
							</p>
							<div class="fw-divider-space divider-30 divider-lg-60"></div>
							<div class="row c-mb-30">
							@forelse ($news as $item)
							<div class="col-lg-6">
									<article class="text-center vertical-item ls content-padding box-shadow post type-post status-publish format-standard has-post-thumbnail">
										<div class="item-media post-thumbnail">
											<a href="blog-single-full.html">
												<img src="{{$item->coverImage}}" alt="img">
											</a>
											<span class="cat-links">
												<a href="blog-right.html" rel="category tag">
													News
												</a>
											</span>
										</div><!-- .post-thumbnail -->
										<div class="item-content">
											<header class="entry-header">
												<h6 class="entry-title">
													<a href="blog-single-full.html" rel="bookmark">
														{{$item->title}}
													</a>
												</h6>
											</header>
											<!-- .entry-header -->
											<div class="entry-content">
												<!-- <p>
													Since the standard of play has significantly been raised in woman’s chest over the last few
												</p> -->
											</div><!-- .entry-content -->
											<footer class="entry-footer">
												<div class="entry-meta">
													<span class="byline">
														<span class="author vcard">
															<i class="far fa-user"></i>
															<a class="url fn n" href="blog-right.html">{{$item->Date}}</a>
														</span>
													</span>
												</div>
												<a href="{{$item->link}}" target="_blank" class="btn btn-darkgrey round">more</a>
											</footer>
										</div><!-- .item-content -->
									</article><!-- #post-## -->
								</div>
								@empty
								<h6 class="special-heading text-center">
									<span class="color-main">
											Exciting News Coming Soon...
									</span>
								</h6>

								@endforelse



								</div>
						</div>
                         </div>
					</div>
				</div>
			</section>
			<!-- Start Section Gallery -->
			<section class="p-4" style="padding: 50px 10px 50px 10px!important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);">
				<div class="container-fluid">
					<div class="row align-items-center">
						<div class="col-lg-6 text-center text-sm-left">
							<div class="special-column-center d-block d-sm-flex">
								<div class="special-class">
									<p class="special-heading text-center big thin color-main">
										<span>03</span>
									</p>
									<p class="special-heading text-center text-uppercase sub-title2 color-darkgrey">
										<span>
											our gallery
										</span>
									</p>
									<div class="fw-divider-space divider-30 divider-lg-40"></div>
									<a href="/media-pg" class="btn btn-maincolor medium-btn">View all</a>
									<div class="fw-divider-space divider-30 divider-sm-0"></div>
								</div>
								<div class="text-block with-left-space">
									<p class="special-heading text-center sub-title2 color-darkgrey">
										Expore our image gallery
									</p>

									<!-- <p>
										Our goal is to teach children in grades K-12 abstract concepts of planning, analysis and
										strategy through the game of chess.
									</p>
									<p>
										Kids will be excited to understand and amazed by the positive experience that chess offers.
									</p> -->
								</div>
							</div>
						</div>
						<div class="col-lg-6">
							<div class="fw-divider-space divider-30 divider-lg-0"></div>
							<div id="parent">
								<div id="propertyThumbnails" class="row shortcode-gallery c-gutter-10 c-mb-10">
								@forelse ($images as $item)
									<div class="col-12 col-sm-6">
										<div class="vertical-item item-gallery content-absolute content-show-hover text-center text-center cs">
											<div class="item-media">
												<img src="{{$item->image_path}}" alt="img">
											</div>
											<div class="item-content ">
												<h6>
													<!-- <a href="gallery-single.html">Elitr sed diam nonumy</a> -->
												</h6>
												<div class="links-wrap">
													<a class="link-zoom photoswipe-link" href="{{ltrim($item->image_path, '/')}}"></a>
													<!-- <a class="link-anchor" href="gallery-single.html"></a> -->
												</div>
											</div>
										</div>
									</div>
								@empty

									<div class="col-12 col-sm-6">
										<div class="text-center cs p-2">

											<div class="item-content ">
												<h6>
														Latest Images Coming Soon...

												</h6>
												<div class="links-wrap">
													<!-- <a class="link-anchor" href="gallery-single.html"></a> -->
												</div>
											</div>
										</div>
									</div>

								@endforelse

									<div class="col-12 col-sm-6" style="display:none">
										<div class="vertical-item item-gallery content-absolute content-show-hover text-center text-center cs">
											<div class="item-media">
												<img src="images/albums/P1030764.JPG" alt="img">
											</div>
											<div class="item-content ">
												<h6>
													<!-- <a href="gallery-single.html">Elitr sed diam nonumy</a> -->
												</h6>
												<div class="links-wrap">
													<a class="link-zoom photoswipe-link" href="images/albums/P1030764.JPG"></a>
													<!-- <a class="link-anchor" href="gallery-single.html"></a> -->
												</div>
											</div>
										</div>
									</div>
									<div class="col-12 col-sm-6" style="display:none">
										<div class="vertical-item item-gallery content-absolute content-show-hover text-center text-center cs">
											<div class="item-media">
												<img src="images/albums/P1030766.JPG" alt="img">
											</div>
											<div class="item-content ">
												<h6>
													<!-- <a href="gallery-single.html">Elitr sed diam nonumy</a> -->
												</h6>
												<div class="links-wrap">
													<a class="link-zoom photoswipe-link" href="images/albums/P1030766.JPG"></a>
													<!-- <a class="link-anchor" href="gallery-single.html"></a> -->
												</div>
											</div>
										</div>
									</div>
									<div class="col-12 col-sm-6" style="display:none">
										<div class="vertical-item item-gallery content-absolute content-show-hover text-center text-center cs">
											<div class="item-media">
												<img src="images/albums/P1030768.JPG" alt="img">
											</div>
											<div class="item-content ">
												<h6>
													<!-- <a href="gallery-single.html">Elitr sed diam nonumy</a> -->
												</h6>
												<div class="links-wrap">
													<a class="link-zoom photoswipe-link" href="images/albums/P1030768.JPG"></a>
													<!-- <a class="link-anchor" href="gallery-single.html"></a> -->
												</div>
											</div>
										</div>
									</div>
									<div class="col-12 col-sm-6" style="display:none">
										<div class="vertical-item item-gallery content-absolute content-show-hover text-center text-center cs">
											<div class="item-media">
												<img src="images/albums/P1030777.JPG" alt="img">
											</div>
											<div class="item-content ">
												<h6>
													<!-- <a href="gallery-single.html">Elitr sed diam nonumy</a> -->
												</h6>
												<div class="links-wrap">
													<a class="link-zoom photoswipe-link" href="images/albums/P1030777.JPG"></a>
													<!-- <a class="link-anchor" href="gallery-single.html"></a> -->
												</div>
											</div>
										</div>
									</div>
									<div class="col-12 col-sm-6" style="display:none">
										<div class="vertical-item item-gallery content-absolute content-show-hover text-center text-center cs">
											<div class="item-media">
												<img src="images/albums/P1030786.JPG" alt="img">
											</div>
											<div class="item-content ">
												<h6>
													<!-- <a href="gallery-single.html">Elitr sed diam nonumy</a> -->
												</h6>
												<div class="links-wrap">
													<a class="link-zoom photoswipe-link" href="images/albums/P1030786.JPG"></a>
													<!-- <a class="link-anchor" href="gallery-single.html"></a> -->
												</div>
											</div>
										</div>
									</div>
									<div class="col-12 col-sm-6" style="display:none">
										<div class="vertical-item item-gallery content-absolute content-show-hover text-center text-center cs">
											<div class="item-media">
												<img src="images/albums/P1030788.JPG" alt="img">
											</div>
											<div class="item-content ">
												<h6>
													<!-- <a href="gallery-single.html">Elitr sed diam nonumy</a> -->
												</h6>
												<div class="links-wrap">
													<a class="link-zoom photoswipe-link" href="images/albums/P1030788.JPG"></a>
													<!-- <a class="link-anchor" href="gallery-single.html"></a> -->
												</div>
											</div>
										</div>
									</div>
									<div class="col-12 col-sm-6" style="display:none">
										<div class="vertical-item item-gallery content-absolute content-show-hover text-center text-center cs">
											<div class="item-media">
												<img src="images/albums/P1030810.JPG" alt="img">
											</div>
											<div class="item-content ">
												<h6>
													<!-- <a href="gallery-single.html">Elitr sed diam nonumy</a> -->
												</h6>
												<div class="links-wrap">
													<a class="link-zoom photoswipe-link" href="images/albums/P1030810.JPG"></a>
													<!-- <a class="link-anchor" href="gallery-single.html"></a> -->
												</div>
											</div>
										</div>
									</div>
									<div class="col-12 col-sm-6" style="display:none">
										<div class="vertical-item item-gallery content-absolute content-show-hover text-center text-center cs">
											<div class="item-media">
												<img src="images/albums/P1030921.JPG" alt="img">
											</div>
											<div class="item-content ">
												<h6>
													<!-- <a href="gallery-single.html">Elitr sed diam nonumy</a> -->
												</h6>
												<div class="links-wrap">
													<a class="link-zoom photoswipe-link" href="images/albums/P1030921.JPG"></a>
													<!-- <a class="link-anchor" href="gallery-single.html"></a> -->
												</div>
											</div>
										</div>
									</div>

								</div>
								<div class="mt--10"></div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!-- End Section Gallery -->


			<!-- Start Section Partners -->
			<section class="ls p-4" style="box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);">
				<div class="container-fluid">
					<div class="row">
						<div class="col-12">
							{{-- <div class="owl-carousel" data-center="false" data-autoplay="true" data-margin="1" data-loop="true" data-responsive-lg="1" data-responsive-md="1" data-responsive-sm="1" data-responsive-xs="1"> --}}
								<a class="text-center d-block" href="#">
									<img src="images/partners/vira_sports.jpg" alt="img">
								</a>

							{{-- </div> --}}
						</div>
					</div>
				</div>
			</section>

@stop