@extends('layouts.layout')

@section('content')

<!-- Start Main Banner Area -->
    <div class="home-area home-slides-two owl-carousel owl-theme" style="direction: ltr;">
        <div class="banner-section item-bg5">
            <div class="d-table">
                <div class="d-table-cell">
                    <div class="container">
                        <div class="banner-content">
                            <span class="sub-title">@lang('main.enjoy_your_happiness')</span>
                            <h1>@lang('main.travelling_how')<br> @lang('main.thrilling_it_can_be')</h1>
                            <div class="btn-box">
                                <a href="https://www.youtube.com/watch?v=bk7McNUjWgw" class="video-btn popup-youtube"><span><i class="flaticon-play-button"></i></span> @lang('main.watch_now')</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="banner-section item-bg4">
            <div class="d-table">
                <div class="d-table-cell">
                    <div class="container">
                        <div class="banner-content">
                            <span class="sub-title">Enjoy Your Happiness</span>
                            <h1>Being fit is your right, <br>not a privilege</h1>
                            <div class="btn-box">
                                <a href="https://www.youtube.com/watch?v=bk7McNUjWgw"
                                    class="video-btn popup-youtube"><span><i class="flaticon-play-button"></i></span>
                                    Watch Now</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Main Banner Area -->

    <!-- Start About Area -->
    <section class="about-area ptb-100 bg-f8f8f8">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 col-md-12">
                    <div class="about-image">
                        <img src="{{asset('assets/img/about-image/1.jpg')}}" alt="image">
                        <img src="{{asset('assets/img/about-image/2.jpg')}}" alt="image">
                    </div>
                </div>

                <div class="col-lg-6 col-md-12">
                    <div class="about-content">
                        <span>@lang('main.about_us')</span>
                        <h2>{{setting('about_us_title_'.app()->getLocale())}}</h2>
                        <p>{{setting('about_us_home_text_'.app()->getLocale())}}</p>
                        <a href="{{route('about')}}" class="default-btn">@lang('main.read_more') <span></span></a>
                    </div>
                </div>
            </div>


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

    <!-- Start Videos Area -->
    <section class="case-study-area ptb-100 pb-70 bg-fafafa">
        <div class="container">
            <div class="section-title">
                <span class="sub-title">@lang('main.videos')</span>
                <h2>@lang('main.our_videos')</h2>
                <p>{{setting('our_videos_text_'.app()->getLocale())}}</p>
            </div>
            <div class="row">
                @foreach (\App\Video::latest()->limit(6)->get() as $video)
                    <div class="col-lg-4 col-md-6 col-sm-6">
                    <div class="single-case-study-box">
                        <div class="case-study-image" style="background-image: url('{{$video->imagePath}}')"></div>
                        <a href="{{url($video->url)}}" class="case-study-link">
                            <div class="case-study-img-hover" style="background-image: url('{{$video->imagePath}}')"></div>
                        </a>
                        <div class="case-study-info">
{{--                            <span class="category">Home</span>--}}
                            <h3 class="title"><a href="{{url($video->url)}}">{{$video->title}}</a></h3>
                        </div>
                    </div>
                </div>
                @endforeach

            </div>
        </div>
    </section>
    <!-- End Videos Area -->


    <!-- Start Blog Area -->
    <section class="blog-area ptb-100">
        <div class="container">
            <div class="section-title">
                <span class="sub-title">@lang('main.our_blog')</span>
                <h2>@lang('main.our_blog_title')</h2>
                <p>{{setting('our_blog_content_'.app()->getLocale())}}</p>
            </div>

            <div class="row">
              @foreach (\App\Blog::latest()->limit(3)->get() as $blog)
                <div class="col-lg-4 col-md-6">
                    <div class="single-blog-post">
                        <div class="post-image">
                            <a href="{{route('showBlog',$blog)}}"><img src="{{$blog->imagePath}}" alt="image"></a>

                            <div class="date"><i class="flaticon-timetable"></i> {{$blog->created_at->format('M d, Y')}}</div>
                        </div>

                        <div class="post-content">
                            <h3><a href="{{route('showBlog',$blog)}}">{{$blog->title}}</a></h3>
                            <p>{!! substr($blog->description,0,30) !!}...</p>

                            <a href="{{route('showBlog',$blog)}}" class="default-btn">@lang('main.read_more') <span></span></a>
                        </div>
                    </div>
                </div>
              @endforeach



                <div class="col-lg-12 col-md-12">
                    <div class="blog-notes">
                        <p>@lang('main.read_full_blogs_text') <a href="{{route('blogs')}}">@lang('main.read_full_blog')</a></p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Blog Area -->


@stop