@extends('layouts.master')
@section('title', 'Home')

@section('style')
    {{-- <style>
        .swiper-container.dots-closer .swiper-pagination {
            overflow: hidden;
            /* ซ่อน Scrollbar */
            bottom: 200px;
        }

        .swiper-container {
            overflow: hidden;
            /* ซ่อน Scrollbar */
            height: 200;
        }

        .swiper-slide .swiper-slide-next {
            overflow: hidden;
            /* ซ่อน Scrollbar */
            height: 80%;
        }

        .swiper-slide .swiper-slide-active {
            overflow: hidden;
            /* ซ่อน Scrollbar */
            height: 80%;
        }
    </style> --}}
@endsection

@section('script')
    <script></script>
@endsection


@section('content')
    @include('layouts.header')


    <section class="wrapper image-wrapper bg-cover bg-image bg-xs-none bg-gray"
        data-image-src="./sandbox/img/photos/bg37.jpg">
        <div class="container pt-17 pb-15 py-sm-17 py-xxl-20">
            <div class="row">
                <div class="col-sm-6 col-xxl-5 text-center text-sm-start" data-cues="slideInDown" data-group="page-title"
                    data-interval="-200" data-delay="500">
                    <h2 class="display-1 fs-56 mb-4 mt-0 mt-lg-5 ls-xs pe-xl-5 pe-xxl-0">Online <span
                            class="underline-3 style-3 yellow">Catalog</span>
                        Souvenir</h2>
                    <p class="lead fs-23 lh-sm mb-7 pe-lg-5 pe-xl-5 pe-xxl-0">SIIT Online Catalog System.</p>
                </div>
                <!--/column -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>

    <section class="wrapper bg-light">
        <div class="container py-14 py-md-16">
            <div class="row gy-10 gy-sm-13 gx-md-8 gx-xl-12 align-items-center">
                <div class="col-lg-6">
                    <div class="row gx-md-5 gy-5">
                        <div class="col-12">
                            <figure class="rounded mx-5"><img src="./sandbox/img/photos/g8.jpg"
                                    srcset="./sandbox/img/photos/g8@2x.jpg 2x" alt=""></figure>
                        </div>
                        <!--/column -->
                        <div class="col-md-6">
                            <figure class="rounded"><img src="./sandbox/img/photos/g9.jpg"
                                    srcset="./sandbox/img/photos/g9@2x.jpg 2x" alt=""></figure>
                        </div>
                        <!--/column -->
                        <div class="col-md-6">
                            <figure class="rounded"><img src="./sandbox/img/photos/g10.jpg"
                                    srcset="./sandbox/img/photos/g10@2x.jpg 2x" alt=""></figure>
                        </div>
                        <!--/column -->
                    </div>
                    <!--/.row -->
                </div>
                <!--/column -->
                <div class="col-lg-6">
                    <h2 class="fs-16 text-uppercase text-muted mb-3">What Makes Us Different?</h2>
                    <h3 class="display-3 mb-10">We bring <span class="underline-3 style-2 yellow">solutions</span> to make
                        life easier for our customers.</h3>
                    <div class="row gy-8">
                        <div class="col-md-6">
                            <div class="d-flex flex-row">
                                <div>
                                    <img src="./sandbox/img/icons/solid/lamp.svg"
                                        class="svg-inject icon-svg icon-svg-xs solid-mono text-fuchsia me-4"
                                        alt="" />
                                </div>
                                <div>
                                    <h4 class="mb-1">Creativity</h4>
                                    <p class="mb-0">Curabitur blandit lacus porttitor ridiculus mus.</p>
                                </div>
                            </div>
                        </div>
                        <!--/column -->
                        <div class="col-md-6">
                            <div class="d-flex flex-row">
                                <div>
                                    <img src="./sandbox/img/icons/solid/bulb.svg"
                                        class="svg-inject icon-svg icon-svg-xs solid-mono text-violet me-4"
                                        alt="" />
                                </div>
                                <div>
                                    <h4 class="mb-1">Innovative Thinking</h4>
                                    <p class="mb-0">Curabitur blandit lacus porttitor ridiculus mus.</p>
                                </div>
                            </div>
                        </div>
                        <!--/column -->
                        <div class="col-md-6">
                            <div class="d-flex flex-row">
                                <div>
                                    <img src="./sandbox/img/icons/solid/puzzle.svg"
                                        class="svg-inject icon-svg icon-svg-xs solid-mono text-orange me-4"
                                        alt="" />
                                </div>
                                <div>
                                    <h4 class="mb-1">Rapid Solutions</h4>
                                    <p class="mb-0">Curabitur blandit lacus porttitor ridiculus mus.</p>
                                </div>
                            </div>
                        </div>
                        <!--/column -->
                        <div class="col-md-6">
                            <div class="d-flex flex-row">
                                <div>
                                    <img src="./sandbox/img/icons/solid/headphone.svg"
                                        class="svg-inject icon-svg icon-svg-xs solid-mono text-green me-4" alt="" />
                                </div>
                                <div>
                                    <h4 class="mb-1">Top-Notch Support</h4>
                                    <p class="mb-0">Curabitur blandit lacus porttitor ridiculus mus.</p>
                                </div>
                            </div>
                        </div>
                        <!--/column -->
                    </div>
                    <!--/.row -->
                </div>
                <!--/column -->
            </div>
            <!--/.row -->
        </div>
        <!-- /.container -->
    </section>
    <!-- /section -->

    @include('layouts.footer')
@endsection