@extends('layouts.frontendTemplate')

@section('main')

<!-- start page title section -->
<section class="wow animate__fadeIn bg-light-gray padding-35px-tb page-title-small top-space">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-xl-8 col-md-6 text-center text-md-start">
                <!-- start page title -->
                <h1 class="alt-font text-extra-dark-gray font-weight-600 mb-0 text-uppercase">About us</h1>
                <!-- end page title -->
            </div>
            <div class="col-xl-4 col-md-6 alt-font breadcrumb justify-content-center justify-content-md-end text-small sm-margin-10px-top">
                <!-- start breadcrumb -->
                <ul>
                    <li><a href="{{url('')}}" class="text-dark-gray">หน้าแรก</a></li>
                    <!-- <li><a href="#" class="text-dark-gray">About</a></li> -->
                    <li class="text-dark-gray">เกี่ยวกับเรา</li>
                </ul>
                <!-- end breadcrumb -->
            </div>
        </div>
    </div>
</section>
<!-- end page title section -->
<!-- start section -->
<section class="wow animate__fadeIn">
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-4 text-center text-lg-start md-margin-30px-bottom md-padding-80px-lr sm-padding-15px-lr wow animate__fadeIn">
            <img src="{{ url('images/logo_greatercm_reg_red.png') }}" width="240" class="logo-dark margin-20px-bottom" alt="GREATER CHIANG MAI">
                <!-- <h5 class="alt-font font-weight-700 text-extra-dark-gray text-uppercase w-80 lg-w-100">THE GREATER CHIANG MAI</h5> -->
                <div class="separator-line-verticle-extra-small bg-extra-dark-gray w-50 md-w-70 mx-auto ms-lg-0 margin-30px-bottom md-margin-20px-bottom"></div>
                <p class="w-95 lg-w-100">เกรทเธอร์ เชียงใหม่ มีจุดมุ่งหมายเพื่อการฟื้นคืนจิตวิญญาณเมืองเชียงใหม่ ผ่านแนวความคิด เชื่อมโยงราก คัดสรรเรื่อง สร้างสรรค์งาน โดยมุ่งเน้นความร่วมมือระหว่างทุกภาคส่วนในจังหวัดเชียงใหม่ในการฟื้น สืบสาน ต่อยอด และขยายผลมรดกภูมิปัญญาทางวัฒนธรรมและธรรมชาติล้านนาอันทรงคุณค่าไปสู่วิถีชีวิตร่วมสมัยที่สร้างการขับเคลื่อนเศรษฐกิจสร้างสรรค์ในพื้นที่จังหวัดเชียงใหม่ โดยขยายผลไปในระดับภูมิภาค ระดับชาติ และนานาชาติ</p>
                <!-- <a class="btn btn-small btn-dark-gray font-weight-700" href="team-simple.html">Meet Out Team</a> -->
            </div>
            <div class="col-12 col-lg-4 col-md-6 sm-margin-15px-bottom wow animate__fadeIn team-style-1" data-wow-delay="0.2s">
                <figure class="mb-0">
                    <div class="team-image">
                        <img src="images/about/dsc_5754.jpg" alt="อรช บุญ-หลง ประธานมูลนิธิ"/>
                        <div class="team-overlay bg-deep-pink opacity-medium"></div>
                        <div class="overlay-content d-flex flex-column justify-content-center text-center text-white padding-30px-lr">
                            <span class="alt-font text-large d-block">อรช บุญ-หลง</span>
                            <span class="alt-font text-large d-block margin-10px-bottom">Aracha Boon-Long</span>
                            <span class="d-block">ประธานมูลนิธิ</span>
                            <span class="d-block margin-15px-bottom">President</span>
                            <span class="d-block text-small">Tel <a class="text-white" href="tel:+66983505444">+66 (0) 98 350 5444</a></span>
                            <span class="d-block text-small">Email <a class="text-white" href="mailto:aracha.b@greaterchiangmai.com">aracha.b@greaterchiangmai.com</a></span>
                        </div>
                    </div>
                </figure>
            </div>
            <div class="col-12 col-lg-4 col-md-6 wow animate__fadeIn team-style-1" data-wow-delay="0.4s">
                <figure class="mb-0">
                    <div class="team-image">
                        <img src="images/about/dsc_5755.jpg" alt="จิตรทิวัส พรประเสริฐ เลขานุการมูลนิธิ"/>
                        <div class="team-overlay bg-deep-pink opacity-medium"></div>
                        <div class="overlay-content d-flex flex-column justify-content-center text-center text-white padding-30px-lr">
                            <span class="alt-font text-large d-block">จิตรทิวัส พรประเสริฐ</span>
                            <span class="alt-font text-large d-block margin-10px-bottom">Chittiwat Pornprasert</span>
                            <span class="d-block">เลขานุการมูลนิธิ</span>
                            <span class="d-block margin-15px-bottom">Secretary</span>
                            <span class="d-block text-small">Tel <a class="text-white" href="tel:+66813786086">+66 (0) 81 378 6086</a></span>
                            <span class="d-block text-small">Email <a class="text-white" href="mailto:chittiwat.p@greaterchiangmai.com">chittiwat.p@greaterchiangmai.com</a></span>
                        </div>
                    </div>
                </figure>
            </div>
        </div>
    </div>
</section>
<!-- end section -->
<!-- start feature box section -->
<section class="p-0 wow animate__fadeIn bg-light-gray">
    <div class="container-fluid">
        <div class="row row-cols-1 row-cols-lg-2">
            <div class="col d-flex align-items-center justify-content-center md-h-500px sm-h-350px wow animate__fadeInLeft">
                <img src="{{ url('images/logo_greatercm_reg.png') }}" width="320" class="mw-100" alt="GREATER CHIANG MAI">
            </div>
            <div class="col padding-five-tb padding-five-half-lr lg-padding-50px-tb md-padding-70px-tb md-padding-15px-lr wow animate__fadeInRight">
                <div class="row justify-content-center m-0">
                    <div class="col-12 col-md-12 col-sm-8 margin-four-bottom lg-margin-six-bottom md-margin-40px-bottom sm-margin-30px-bottom sm-no-padding-lr text-center text-md-start">
                        <h5 class="alt-font text-extra-dark-gray text-center text-lg-start text-uppercase font-weight-700 md-w-70 mx-auto mx-lg-0 md-no-margin-bottom sm-w-100">แนวทางการดำเนินงาน</h5>
                    </div>
                </div>
                <div class="row row-cols-1 justify-content-center m-0">
                    <!-- start feature box item-->
                    <div class="col margin-four-bottom md-margin-30px-bottom last-paragraph-no-margin text-center text-md-start">
                        <span class="text-deep-pink alt-font margin-10px-right d-block d-md-inline-block sm-no-margin">01.</span>
                        <p class="d-md-inline">ริเริ่ม สร้างความร่วมมือ และสนับสนุนโครงการมรดกภูมิปัญญาวัฒนธรรมและธรรมชาติของจังหวัดเชียงใหม่ ทั้งงานดั้งเดิมและร่วมสมัย ขยายผลไประดับภูมิภาค ชาติและนานาชาติ</p>
                    </div>
                    <!-- end feature box item-->
                    <!-- start feature box item-->
                    <div class="col margin-four-bottom md-margin-30px-bottom last-paragraph-no-margin text-center text-md-start">
                        <span class="text-deep-pink alt-font margin-10px-right d-block d-md-inline-block sm-no-margin">02.</span>
                        <p class="d-md-inline">ดำเนินการการขับเคลื่อนร่วมกับทุกภาคส่วนในจังหวัดเชียงใหม่และพื้นที่อื่น</p>
                    </div>
                    <!-- end feature box item-->
                    <!-- start feature box item-->
                    <div class="col last-paragraph-no-margin text-center text-md-start">
                        <span class="text-deep-pink alt-font margin-10px-right d-block d-md-inline-block sm-no-margin">03.</span>
                        <p class="d-md-inline">มุ่งเน้นการฟื้นคืนจิตวิญญาณเมืองเชียงใหม่ที่เชื่อมโยงราก คัดสรรเรื่อง สร้างสรรค์งาน เพื่อประโยชน์ของสังคม</p>
                    </div>
                    <!-- end feature box item-->
                </div>
            </div>
        </div>
    </div>
</section>
<!-- end feature box section -->
<!-- start counter section -->
<section class="wow animate__fadeIn">
    <div class="container">
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-4">
            <!-- start counter item-->
            <div class="col text-center md-margin-30px-bottom xs-margin-15px-bottom wow animate__fadeInUp">
                <div class="counter-feature-box-1 w-100 padding-5px-all">
                    <div class="counter-box bg-white d-flex justify-content-center flex-column h-100">
                        <i class="icon-camera icon-medium text-medium-gray margin-15px-bottom"></i>
                        <h6 class="d-block font-weight-600 text-extra-dark-gray alt-font mb-0 counter" data-to="450" data-speed="2000">450</h6>
                        <span>IMAGES</span>
                    </div>
                </div>
            </div>
            <!-- end counter item-->
            <!-- start counter item-->
            <div class="col text-center md-margin-30px-bottom xs-margin-15px-bottom wow animate__fadeInUp" data-wow-delay="0.2s">
                <div class="counter-feature-box-1 w-100 padding-5px-all">
                    <div class="counter-box bg-white d-flex justify-content-center flex-column h-100">
                        <i class="icon-laptop icon-medium text-medium-gray margin-15px-bottom"></i>
                        <h6 class="d-block font-weight-600 text-extra-dark-gray alt-font mb-0 counter" data-to="390" data-speed="2000">390</h6>
                        <span>VDO</span>
                    </div>
                </div>
            </div>
            <!-- end counter item-->
            <!-- start counter item-->
            <div class="col text-center xs-margin-15px-bottom wow animate__fadeInUp" data-wow-delay="0.4s">
                <div class="counter-feature-box-1 w-100 padding-5px-all">
                    <div class="counter-box bg-white d-flex justify-content-center flex-column h-100">
                        <i class="icon-mic icon-medium text-medium-gray margin-15px-bottom"></i>
                        <h6 class="d-block font-weight-600 text-extra-dark-gray alt-font mb-0 counter" data-to="580" data-speed="2000">580</h6>
                        <span>SOUND</span>
                    </div>
                </div>
            </div>
            <!-- end counter item-->
            <!-- start counter item-->
            <div class="col text-center wow animate__fadeInUp" data-wow-delay="0.6s">
                <div class="counter-feature-box-1 w-100 padding-5px-all">
                    <div class="counter-box bg-white d-flex justify-content-center flex-column h-100">
                        <i class="far fa-file icon-medium text-medium-gray margin-15px-bottom"></i>
                        <h6 class="d-block font-weight-600 text-extra-dark-gray alt-font mb-0 counter" data-to="674" data-speed="2000">674</h6>
                        <span>DOCUMENTS</span>
                    </div>
                </div>
            </div>
            <!-- end counter item-->
        </div>
    </div>
</section>
<!-- end feature box section -->
<!-- start parallax section -->
<section class="wow animate__fadeIn p-0 parallax one-fourth-screen md-h-500px sm-h-350px background-position-x-50" data-parallax-background-ratio="0.5" style="background-image: url('images/logo_greatercm_reg_red.png'); background-size: contain !important; background-repeat: no-repeat"></section>
<!-- end parallax section -->
<!-- start information section -->
<section class="wow animate__fadeIn">
    <div class="container">
        <div class="row justify-content-center">
            <!-- start feature box item -->
            <div class="col-12 col-lg-4 col-md-6 col-sm-8 md-margin-60px-bottom sm-margin-40px-bottom text-center wow animate__fadeInRight">
                <h5 class="text-extra-dark-gray alt-font margin-15px-bottom md-margin-5px-bottom">เชื่อมโยงราก</h5>
                <div class="separator-line-horrizontal-medium-light3 bg-deep-pink w-50px mx-auto"></div>
            </div>
            <!-- end feature box item -->
            <!-- start feature box item -->
            <div class="col-12 col-lg-4 col-md-6 col-sm-8 md-margin-60px-bottom sm-margin-40px-bottom text-center wow animate__fadeInRight" data-wow-delay="0.2s">
                <h5 class="text-extra-dark-gray alt-font margin-15px-bottom md-margin-5px-bottom">คัดสรรเรื่อง</h5>
                <div class="separator-line-horrizontal-medium-light3 bg-deep-pink w-50px mx-auto"></div>
            </div>
            <!-- end feature box item -->
            <!-- start feature box item -->
            <div class="col-12 col-lg-4 col-md-6 col-sm-8 text-center wow animate__fadeInRight" data-wow-delay="0.4s">
                <h5 class="text-extra-dark-gray alt-font margin-15px-bottom md-margin-5px-bottom">สร้างสรรค์งาน</h5>
                <div class="separator-line-horrizontal-medium-light3 bg-deep-pink w-50px mx-auto"></div>
            </div>
            <!-- end feature box item -->
        </div>
    </div>
</section>
<!-- end information sevtion -->
<!-- start section -->
<section class="extra-big-section wow animate__fadeIn" style="background-color: #e23134">
    <div class="container position-relative">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-8 col-md-11 text-center">
                <div class="alt-font text-medium-gray text-uppercase text-small margin-20px-bottom">Greater Chiang Mai</div>
                <h5 class="text-light-gray alt-font margin-40px-bottom sm-margin-30px-bottom">การฟื้นคืนจิตวิญญาณล้านนา</h5>
               <!-- <a href="portfolio-full-width-grid-overlay.html" class="btn btn-medium btn-white btn-rounded">Latest Portfolio</a> -->
            </div>
        </div>
    </div>
</section>
<!-- end section -->
<!-- start clients logo section -->
<section class="wow animate__fadeIn">
    <div class="container">
        <div class="row row-cols-1 row-cols-lg-4 row-cols-md-3 row-cols-sm-2 align-items-center">
            <!-- start client logo item -->
            <div class="col margin-three-bottom text-center wow animate__fadeInDown">
                <a href="#"><img src="images/logo-7.png" alt=""></a>
            </div>
            <!-- end client logo item -->
            <!-- start client logo item -->
            <div class="col margin-three-bottom text-center wow animate__fadeInDown" data-wow-delay="0.2s">
                <a href="#"><img src="images/logo-8.png" alt=""></a>
            </div>
            <!-- end client logo item -->
            <!-- start client logo item -->
            <div class="col margin-three-bottom text-center wow animate__fadeInDown" data-wow-delay="0.4s">
                <a href="#"><img src="images/logo-7.png" alt=""></a>
            </div>
            <!-- end client logo item -->
            <!-- start client logo item -->
            <div class="col margin-three-bottom text-center wow animate__fadeInDown" data-wow-delay="0.6s">
                <a href="#"><img src="images/logo-8.png" alt=""></a>
            </div>
            <!-- end client logo item -->
            <!-- start client logo item -->
            <div class="col md-margin-three-bottom text-center wow animate__fadeInDown">
                <a href="#"><img src="images/logo-7.png" alt=""></a>
            </div>
            <!-- end client logo item -->
            <!-- start client logo item -->
            <div class="col md-margin-three-bottom text-center wow animate__fadeInDown" data-wow-delay="0.2s">
                <a href="#"><img src="images/logo-8.png" alt=""></a>
            </div>
            <!-- end client logo item -->
            <!-- start client logo item -->
            <div class="col xs-margin-three-bottom text-center wow animate__fadeInDown" data-wow-delay="0.4s">
                <a href="#"><img src="images/logo-7.png" alt=""></a>
            </div>
            <!-- end client logo item -->
            <!-- start client logo item -->
            <div class="col text-center wow animate__fadeInDown" data-wow-delay="0.6s">
                <a href="#"><img src="images/logo-8.png" alt=""></a>
            </div>
            <!-- end client logo item -->
        </div>
    </div>
</section>
<!-- end clients logo section -->

@stop

@section('js')

@endsection