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

@section('style')
    <style>
    </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">

                <!-- Product Images Section -->
                <div class="col-lg-6">
                    <div class="row gx-md-5 gy-5">
                        <div class="col-12">
                            <figure class="rounded mx-3">
                                <img src="{{ asset('picture/ขวดน้ำ.jpg') }}" alt="Water Bottle" class="img-fluid rounded" />
                            </figure>
                            <h5 class="mt-2 text-center">Limited Edition Water Bottle</h5>
                            <p class="text-center text-muted">Insulated water bottle with exclusive design for our fans.</p>
                        </div>

                        <div class="col-md-6">
                            <figure class="rounded mx-3">
                                <img src="{{ asset('picture/พัดลม.jpg') }}" alt="Portable Fan" class="img-fluid rounded" />
                            </figure>
                            <h6 class="mt-2 text-center">Portable Fan</h6>
                            <p class="text-center text-muted">Compact, stylish fan perfect for everyday use.</p>
                        </div>

                        <div class="col-md-6">
                            <figure class="rounded mx-3">
                                <img src="{{ asset('picture/กระเป๋าผ้า.jpg') }}" alt="Canvas Bag"
                                    class="img-fluid rounded" />
                            </figure>
                            <h6 class="mt-2 text-center">Stylish Canvas Bag</h6>
                            <p class="text-center text-muted">Limited edition canvas bag with cool design.</p>
                        </div>
                    </div>
                </div>

                <!-- Product Description and Highlights -->
                <div class="col-lg-6">
                    <h2 class="fs-16 text-uppercase text-muted mb-3">Our Products</h2>
                    <h3 class="display-3 mb-10">High-quality memorabilia crafted <span
                            class="underline-3 style-2 yellow">just for you</span></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">Top Quality</h4>
                                    <p class="mb-0">Carefully selected materials for lasting durability and performance.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <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">Modern Design</h4>
                                    <p class="mb-0">Created by professionals and true fans for the perfect look.</p>
                                </div>
                            </div>
                        </div>

                        <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">Fast Shipping</h4>
                                    <p class="mb-0">Quick and reliable delivery all across the country.</p>
                                </div>
                            </div>
                        </div>

                        <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">After-Sales Support</h4>
                                    <p class="mb-0">We’re here to assist you even after your purchase.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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



    @include('layouts.footer')
@endsection