@extends('layouts.frontendTemplate')

{{-- @extends('uc.header') --}}

@section('main')


    <section class="wow animate__fadeIn p-0 parallax sm-background-image-center" data-parallax-background-ratio="0.5"
        style="background-image: url('images/banner/01banner.jpg')">
        <div class="opacity-extra-medium bg-black"></div>
        <div class="container-fluid position-relative full-screen">
            <div class="row h-100 justify-content-end align-items-end">
                <div
                    class="col-12 col-xl-7 col-xxl-6 col-lg-8 text-center text-md-start position-relative bg-deep-pink-opacity padding-six-lr lg-padding-seven-lr padding-five-tb sm-padding-30px-all last-paragraph-no-margin">
                    <div class="box-separator-line w-180px bg-white lg-w-120px md-w-90px d-none d-lg-block"></div>
                    <h1 class="font-weight-600 alt-font text-white-2 w-95 md-w-100">GREATER CHIANG MAI</h1>
                    <p class="text-large font-weight-300 text-white-2 w-75 lg-w-85 md-w-95 sm-w-100 d-none d-md-block">Lorem
                        Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                        industry's standard dummy text ever since the 1500s.</p>
                    <a href="{{ url('category/chiangmai') }}"
                        class="btn btn-medium btn-white margin-40px-top text-link-deep-pink sm-margin-10px-top">CHIANG MAI
                        AND NOWHERE ELSE</a>
                    <a href="{{ url('category/where-else') }}"
                        class="btn btn-medium btn-white margin-40px-top text-link-deep-pink sm-margin-10px-top">WHERE
                        ELSE</a>
                </div>
            </div>
        </div>
    </section>

    <section class="wow animate__fadeIn">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-xl-8 col-lg-9 col-md-11 text-center margin-six-bottom sm-margin-30px-bottom">
                    <img src="{{ url('images/logo_greatercm_red.png') }}" width="240" class="logo-dark margin-80px-bottom"
                        alt="GREATER CHIANG MAI">
                    <div class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">About Greater
                        Chiang Mai</div>
                    <h6 class="font-weight-300 text-extra-dark-gray mb-0">Greater Chiang Mai emphasizes the reviving Chiang Mai Spirituality through the concept of connecting the roots, curating issues and creating projects. To connect threads of tradition to contemporary people, such that culture is an unbroken chain.<br><br>
                        We work closely and efficiently with all sectors in Chiang Mai in reviving, preserving, continuing and expanding valuable Lanna cultural and natural heritage to contemporary way of life and driving creative economy in Chiang Mai, Northern Region, Thailand and other countries.</h6>
                </div>
            </div>
        </div>
    </section>

    <section class="parallax one-second-screen parallax-feature-box md-h-auto" data-parallax-background-ratio="0.3"
        style="background-image:url('images/banner/image_1.jpg');">
        <div class="opacity-medium bg-extra-dark-gray"></div>
        <div class="container position-relative">
            <div class="row justify-content-center">
                <div class="col-12 col-xl-6 col-lg-7 col-sm-8 text-center md-margin-60px-bottom sm-margin-40px-bottom">
                    <!-- <a class="popup-youtube" href="#">
                                                            <img src="images/icon-play.png" class="w-130px" alt="" /></a> -->
                    <h4 class="alt-font text-white-2">Culture and Heritage Think tank</h4>
                    <p class="text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dicta quos
                        laboriosam, cupiditate repellat voluptates illo, libero ex dolore doloribus corrupti veritatis,
                        suscipit quod deserunt sunt? Odit dolore expedita veniam?</p>
                </div>
            </div>
        </div>
    </section>

    <section class="wow animate__fadeIn border-bottom border-color-extra-light-gray no-padding-bottom">
        <div class="container-fluid" style="margin-bottom: 100px;">
            <div class="row margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
                <div class="col-12 text-center">
                    <p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">Selected latest Story
                    </p>
                    <h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
                        Articles</h5>
                    <span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
                </div>
            </div>

            {{-- Chiangmai --}}
            <h6 class="text-center alt-font font-weight-400 letter-spacing-minus-1 text-extra-dark-gray">
                CHIANG MAI AND NOWHERE ELSE
            </h6>
            <div class="row">
                <div class="col-12 filter-content overflow-hidden">
                    <ul
                        class="hover-option6 lightbox-portfolio portfolio-wrapper grid grid-loading grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-medium">
                        <li class="grid-sizer"></li>

                        @foreach ($itemView as $item)
                            <li class="grid-item last-paragraph-no-margin wow animate__fadeInUp">
                                <figure>
                                    <div class="portfolio-img bg-deep-pink position-relative text-center overflow-hidden">
                                        <img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
                                            alt="" />
                                        <div class="portfolio-icon">
                                            <a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}"><i
                                                    class="fas fa-link text-extra-dark-gray" aria-hidden="true"></i></a>
                                            <a class="gallery-link" title="image title..."
                                                href="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"><i
                                                    class="fas fa-search text-extra-dark-gray" aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <figcaption class="bg-white">
                                        <div class="portfolio-hover-main text-center">
                                            <div class="portfolio-hover-box align-middle">
                                                <div class="portfolio-hover-content position-relative">
                                                    <a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}"><span
                                                            class="line-height-normal font-weight-600 text-small alt-font margin-5px-bottom text-extra-dark-gray text-uppercase d-block">
                                                            {{ $item->name_en }}
                                                        </span></a>
                                                </div>
                                            </div>
                                        </div>
                                    </figcaption>
                                </figure>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>


            {{-- Where Else --}}
            <h6 class="text-center alt-font font-weight-400 letter-spacing-minus-1 text-extra-dark-gray">
                WHERE ELSE
            </h6>
            <div class="row">
                <div class="col-12 filter-content overflow-hidden">
                    <ul
                        class="hover-option6 lightbox-portfolio portfolio-wrapper grid grid-loading grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-medium">
                        <li class="grid-sizer"></li>

                        @foreach ($itemViewWhereElse as $item)
                            <li class="grid-item last-paragraph-no-margin wow animate__fadeInUp">
                                <figure>
                                    <div class="portfolio-img bg-deep-pink position-relative text-center overflow-hidden">
                                        <img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
                                            alt="" />
                                        <div class="portfolio-icon">
                                            <a href="{{ url('category/where-else/article-detail/' . $item->id) }}"><i
                                                    class="fas fa-link text-extra-dark-gray" aria-hidden="true"></i></a>
                                            <a class="gallery-link" title="image title..."
                                                href="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"><i
                                                    class="fas fa-search text-extra-dark-gray" aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <figcaption class="bg-white">
                                        <div class="portfolio-hover-main text-center">
                                            <div class="portfolio-hover-box align-middle">
                                                <div class="portfolio-hover-content position-relative">
                                                    <a
                                                        href="{{ url('category/where-else/article-detail/' . $item->id) }}"><span
                                                            class="line-height-normal font-weight-600 text-small alt-font margin-5px-bottom text-extra-dark-gray text-uppercase d-block">
                                                            {{ $item->name }}
                                                        </span></a>
                                                </div>
                                            </div>
                                        </div>
                                    </figcaption>
                                </figure>
                            </li>
                        @endforeach

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


@stop

@section('js')

@endsection