@extends('frontend::layouts.master')

@section('content')
    {{-- 1 ad[s] top banner  --}}
    <div class="two-banner-size">
        <img src="{{ Module::asset('frontend:img/top-banner.jpg') }}" class="w-full">
    </div>


    <div class="bg-top-gradient">

        {{-- Mega Menu + Main Banner Carousel  --}}
        <div class="lg:container px-4 pb-4 pt-6">
            <div class="flex flex-wrap -mx-4">
                <x-frontend::navigation.mega-category.template>
                    </x-frontend>
                    <div class="w-full lg:w-auto flex-1 px-4">
                        <x-frontend::plugin.splide-carousel.splide-carousel slideName='splide-main-banner'>
                            <x-slot:slide>
                                <x-frontend::plugin.splide-carousel.splide-image
                                    slideSource='//somconnect.dev-new.nd.co.th/modules/frontend/img/main-slide.jpg'
                                    slideUrl='#' slideDescription='' class=''>
                                    </x-frontend>
                                    <x-frontend::plugin.splide-carousel.splide-video
                                        slideSource='https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4'
                                        slideCover='//somconnect.dev-new.nd.co.th/modules/frontend/img/main-slide.jpg'
                                        slideDescription='' class=''>
                                        </x-frontend>
                                        <x-frontend::plugin.splide-carousel.splide-youtube
                                            slideSource='https://www.youtube.com/watch?v=rA5ld1NHCnI' slideDescription=''
                                            class=''>
                                            </x-frontend>
                            </x-slot>
                            </x-frontend>
                    </div>
            </div>
        </div>
    </div>





    <div class="bg-center-gradient">

        {{-- 3 ad[s] banner --}}
        <div class="container py-2 lg:py-6">
            <div class="flex flex-wrap -mx-3 gap-y-6">
                @for ($i = 1; $i < 4; $i++)
                    <div class="w-full md:w-1/3 px-3">
                        <a href="#" title="" class="block aspect-[41/22]">
                            <img src="{{ Module::asset('frontend:img/at' . $i . '.jpg') }}"
                                class="w-full object-cover h-full object-center rounded-2xl" alt="">
                        </a>
                    </div>
                @endfor
            </div>
        </div>

        {{-- Flash Sale Carousel --}}
        <div class="container pt-4 3xl:pt-12 pb-6">

            <div class="flex flex-wrap -mx-4 gap-y-8">
                <div class="w-full lg:w-[30%] xl:w-[27.5%] 2xl:w-[25.5%] p-4">
                    <div class="relative lg:aspect-[61/91] h-full w-full bg-flashsale flex items-end justify-center">
                        <img src="{{ Module::asset('frontend:img/flash-top.png') }}" class="flash-top">
                        <img src="{{ Module::asset('frontend:img/flash-text.png') }}"  class="flash-text">
                        <div>
                            <p class="text-18 text-center text-primary">End in</p>
                            <div class="flex items-baseline justify-center gap-x-2">
                                <h2 class="flex flex-col items-center text-primary">
                                    <span class="font-bold leading-[1.1]">
                                        00
                                    </span>
                                    <span class="text-18">
                                        Hrs
                                    </span>
                                </h2>
                                <h2 class="font-bold text-primary">
                                    :
                                </h2>
                                <h2 class="flex flex-col items-center text-primary">
                                    <span class="font-bold leading-[1.1]">
                                        00
                                    </span>
                                    <span class="text-18">
                                        Mins
                                    </span>
                                </h2>
                                <h2 class="font-bold text-primary">
                                    :
                                </h2>
                                <h2 class="flex flex-col items-center text-primary">
                                    <span class="font-bold leading-[1.1]">
                                        00
                                    </span>
                                    <span class="text-18">
                                        Secs
                                    </span>
                                </h2>
                            </div>
                            <div class="text-center mt-6 ababab">
                                <a href="flashsale" class="button-primary inline-flex justify-center">
                                    <span>ดูสินค้าทั้งหมด</span>
                                    <svg width="7" height="12" viewBox="0 0 7 12" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path d="M1 11L6 6L1 1" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-full lg:w-[70%] xl:w-[72.5%] 2xl:w-[74.5%] lg:py-4 px-4">
                    <x-frontend::plugin.splide-carousel.splide-carousel slideName='splide-flashsale' class="h-full">
                        <x-slot:slide>
                            @for ($i = 1; $i < 5; $i++)
                                <x-frontend::plugin.splide-carousel.splide-item>
                                    <x-slot:slide>
                                        <x-frontend::card.product-card.template link="product-detail"
                                            productImage="{{ Module::asset('frontend:img/product' . $i . '.jpg') }}"
                                            productName="IMOU Smart IP Camera 3.6mm (REX 2D) GK2DP-3C0W ประกัน 2 ปี"
                                            productSubtitle="Lens : 3.6mm / IR Distance : 10m Audio Communication : Two-Way"
                                            brandImage="{{ Module::asset('frontend:img/brand.png') }}" brandName="EZVIZ"
                                            :badges="[
                                                [
                                                    'name' => 'new',
                                                    'title' => 'New',
                                                ],
                                                [
                                                    'name' => 'Best price',
                                                    'title' => 'New',
                                                ],
                                                [
                                                    'name' => 'flash',
                                                    'title' => 'Flash sale',
                                                ],
                                            ]" tag="Free special gift" price="2,500" discountPrice="2,690"
                                            :flashSale=true progressPercentage="25" progressText="1 sold"
                                            warranty="2 years warranty" addToCartLink="#">
                                            </x-frontend>
                                    </x-slot>
                                    </x-frontend>
                            @endfor
                        </x-slot>
                        </x-frontend>
                    </div>
                </div>
        </div>

        {{-- 2 ad[s] banner --}}
        <div class="container pt-12 lg:pt-12 pb-6">
            <div class="flex flex-wrap -mx-3 gap-y-6">
                <div class="w-full lg:w-2/3 px-3">
                    <a href="#" class="at-container">
                        <img src="{{ Module::asset('frontend:img/banner-17x8.jpg') }}" alt="1x1">
                    </a>
                </div>
                <div class="w-full lg:w-1/3 px-3">
                    <a href="#" class="at-container">
                        <img src="{{ Module::asset('frontend:img/banner-1x1-1.jpg') }}" alt="1x1">
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- brands carousel --}}
    <div class="container py-6 lg:py-12">
        <div class="flex items-center justify-between pb-6">
            <h2 class="text-[#225EC4] font-bold">All brands</h2>
        </div>
        <x-frontend::plugin.splide-carousel.splide-carousel slideName='splide-brand'>
            <x-slot:slide>
                @for ($i = 0; $i < 7; $i++)
                    <x-frontend::plugin.splide-carousel.splide-item>
                        <x-slot:slide>
                            <div class="brand-carousel-item">
                                <img src="{{ Module::asset('frontend:img/brand1.png') }}">
                            </div>
                        </x-slot>
                        </x-frontend>
                        <x-frontend::plugin.splide-carousel.splide-item>
                            <x-slot:slide>
                                <div class="brand-carousel-item">
                                    <img src="{{ Module::asset('frontend:img/brand2.png') }}">
                                </div>
                            </x-slot>
                            </x-frontend>
                @endfor
            </x-slot>
            </x-frontend>
    </div>

    <div class="container pt-12 overflow-hidden sm:overflow-visible">
        <div class="live-bg">
            <div class="flex flex-wrap items-center gap-y-6 md:px-6 relative z-[1]">
                <div class="w-full md:w-3/5 px-3">
                    <div class="text-editor">
                        <img src="{{ Module::asset('frontend:img/live-logo.png') }}" class="mx-auto">
                        <h2 class="font-bold text-42 text-white text-center max-w-md mx-auto">
                            เปิดตัวที่ SOMconnet ที่แรก!รีบจับจองเป็นเจ้าของก่อนใคร สินค้ามีพร้อมส่ง...จัดปายยย
                        </h2>
                    </div>
                </div>
                <div class="w-full md:w-2/5 px-3">
                    <div class="live-iframe-wrapper">
                        <iframe src="https://www.youtube.com/embed/gqkwlw3Jc0I?si=Y355Ia96qY0gClP7"
                            title="YouTube video player" frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                            referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
            <img src="{{ Module::asset('frontend:img/bubble.svg') }}" class="bubble">
        </div>
    </div>

    {{-- 3 ad[s] banner --}}
    <div class="container pt-8 sm:pt-12 lg:pb-6">
        <div class="flex flex-wrap -mx-3 gap-y-6">
            <div class="w-full xs:w-1/2 px-3">
                <a href="#" class="at-container">
                    <img src="{{ Module::asset('frontend:img/banner-1x1-2.jpg') }}" alt="1x1">
                </a>
            </div>
            <div class="w-full xs:w-1/2 px-3">
                <div class="flex flex-col gap-y-6 h-full">
                    <a href="#" class="at-container">
                        <img src="{{ Module::asset('frontend:img/banner-21x10-1.jpg') }}" alt="21x10">
                    </a>
                    <a href="#" class="at-container">
                        <img src="{{ Module::asset('frontend:img/banner-21x10-2.jpg') }}" alt="21x10">
                    </a>
                </div>
            </div>
        </div>
    </div>




    <div>

        {{-- Category 1 --}}
        <div class="container">
            <div class="flex items-center justify-between pt-8 md:pt-12 pb-6">
                <h2 class="text-[#225EC4] font-bold">Category Name</h2>
                <a href="product" class="button-secondary !hidden sm:!flex">
                    <span>ดูสินค้าทั้งหมด</span>
                    <svg width="7" height="12" viewBox="0 0 7 12" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path d="M1 11L6 6L1 1" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </svg>
                </a>
            </div>
            <div class="flex flex-wrap -mx-4">
                <div class="hidden lg:block lg:w-[30%] xl:w-[27.5%] 2xl:w-[25.5%] p-4">
                    <a href="#" class="block aspect-[61/91] h-full w-full">
                        <img src="{{ Module::asset('frontend:img/category-example.jpg') }}"
                            class="w-full h-full object-cover object-center rounded-xl">
                    </a>
                </div>
                <div class="w-full lg:w-[70%] xl:w-[72.5%] 2xl:w-[74.5%] lg:py-4 px-4">
                    <div class="com-carousel-multi splide splide-category">
                        <div class="splide__track carousel-multi-wrapper">
                            <div class="splide__list carousel-multi-list"
                                data-cover-image="{{ Module::asset('frontend:img/category-example.jpg') }}"
                                data-cover-url="#">
                                @for ($i = 1; $i < 5; $i++)
                                    <div class="splide__slide carousel-multi-slide">
                                        <div class="carousel-multi-item">
                                            <x-frontend::card.product-card.template link="product-detail"
                                                productImage="{{ Module::asset('frontend:img/product' . $i . '.jpg') }}"
                                                productName="IMOU Smart IP Camera 3.6mm (REX 2D) GK2DP-3C0W ประกัน 2 ปี"
                                                productSubtitle="Lens : 3.6mm / IR Distance : 10m Audio Communication : Two-Way"
                                                brandImage="{{ Module::asset('frontend:img/brand.png') }}"
                                                brandName="EZVIZ" :badges="[
                                                    [
                                                        'name' => 'new',
                                                        'title' => 'New',
                                                    ],
                                                    [
                                                        'name' => 'Best price',
                                                        'title' => 'New',
                                                    ],
                                                    [
                                                        'name' => 'flash',
                                                        'title' => 'Flash sale',
                                                    ],
                                                ]" tag="Free special gift"
                                                price="2,500" discountPrice="2,690" :flashSale=false
                                                progressPercentage="25" progressText="1 sold" warranty="2 years warranty"
                                                addToCartLink="#">
                                                </x-frontend>
                                        </div>
                                    </div>
                                @endfor
                            </div>
                        </div>
                        <ul class="splide__pagination --prevent-on-load-init" role="tablist">
                        </ul>
                    </div>
                </div>
            </div>
            <a href="product" class="button-secondary relative inline-flex mt-6 sm:hidden justify-center w-[150px] mx-auto">
                <span>ดูสินค้าทั้งหมด</span>
                <svg width="7" height="12" viewBox="0 0 7 12" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 11L6 6L1 1" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" />
                </svg>
            </a>
        </div>
        {{-- Category 2 --}}
        <div class="container">
            <div class="flex items-center justify-between pt-8 md:pt-12 pb-6">
                <h2 class="text-[#225EC4] font-bold">Category Name</h2>
                <a href="product" class="button-secondary !hidden sm:!flex">
                    <span>ดูสินค้าทั้งหมด</span>
                    <svg width="7" height="12" viewBox="0 0 7 12" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path d="M1 11L6 6L1 1" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </svg>
                </a>
            </div>

            <div class="flex flex-wrap -mx-4">
                <div class="hidden lg:block lg:w-[30%] xl:w-[27.5%] 2xl:w-[25.5%] p-4">
                    <a href="#" class="block aspect-[61/91] h-full w-full">
                        <img src="{{ Module::asset('frontend:img/category-example.jpg') }}"
                            class="w-full h-full object-cover object-center rounded-xl">
                    </a>
                </div>
                <div class="w-full lg:w-[70%] xl:w-[72.5%] 2xl:w-[74.5%] lg:py-4 px-4">
                    <div class="com-carousel-multi splide splide-category">
                        <div class="splide__track carousel-multi-wrapper">
                            <div class="splide__list carousel-multi-list"
                                data-cover-image="{{ Module::asset('frontend:img/category-example.jpg') }}"
                                data-cover-url="#">
                                @for ($i = 1; $i < 5; $i++)
                                    <div class="splide__slide carousel-multi-slide">
                                        <div class="carousel-multi-item">
                                            <x-frontend::card.product-card.template link="product-detail"
                                                productImage="{{ Module::asset('frontend:img/product' . $i . '.jpg') }}"
                                                productName="IMOU Smart IP Camera 3.6mm (REX 2D) GK2DP-3C0W ประกัน 2 ปี"
                                                productSubtitle="Lens : 3.6mm / IR Distance : 10m Audio Communication : Two-Way"
                                                brandImage="{{ Module::asset('frontend:img/brand.png') }}"
                                                brandName="EZVIZ" :badges="[
                                                    [
                                                        'name' => 'new',
                                                        'title' => 'New',
                                                    ],
                                                    [
                                                        'name' => 'Best price',
                                                        'title' => 'New',
                                                    ],
                                                    [
                                                        'name' => 'flash',
                                                        'title' => 'Flash sale',
                                                    ],
                                                ]" tag="Free special gift"
                                                price="2,500" discountPrice="2,690" :flashSale=false
                                                progressPercentage="25" progressText="1 sold" warranty="2 years warranty"
                                                addToCartLink="#">
                                                </x-frontend>
                                        </div>
                                    </div>
                                @endfor
                            </div>
                        </div>
                        <ul class="splide__pagination --prevent-on-load-init" role="tablist">
                        </ul>
                    </div>
                </div>
            </div>
            <a href="product" class="button-secondary relative inline-flex mt-6 sm:hidden justify-center w-[150px] mx-auto">
                <span>ดูสินค้าทั้งหมด</span>
                <svg width="7" height="12" viewBox="0 0 7 12" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 11L6 6L1 1" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" />
                </svg>
            </a>
        </div>

        <div class="container mt-8 lg:mt-12 ">
            <a href="#" class="at-container">
                <img src="{{ Module::asset('frontend:img/banner-24x5.jpg') }}" alt="Brand Day">
            </a>
        </div>


        {{-- Category 3 --}}
        <div class="container">
            <div class="flex items-center justify-between pt-8 md:pt-12 pb-6">
                <h2 class="text-[#225EC4] font-bold">Category Name</h2>
                <a href="product" class="button-secondary !hidden sm:!flex">
                    <span>ดูสินค้าทั้งหมด</span>
                    <svg width="7" height="12" viewBox="0 0 7 12" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path d="M1 11L6 6L1 1" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </svg>
                </a>
            </div>

            <div class="flex flex-wrap -mx-4">
                <div class="hidden lg:block lg:w-[30%] xl:w-[27.5%] 2xl:w-[25.5%] p-4">
                    <a href="#" class="block aspect-[61/91] h-full w-full">
                        <img src="{{ Module::asset('frontend:img/category-example.jpg') }}"
                            class="w-full h-full object-cover object-center rounded-xl">
                    </a>
                </div>
                <div class="w-full lg:w-[70%] xl:w-[72.5%] 2xl:w-[74.5%] lg:py-4 px-4">
                    <div class="com-carousel-multi splide splide-category">
                        <div class="splide__track carousel-multi-wrapper">
                            <div class="splide__list carousel-multi-list"
                                data-cover-image="{{ Module::asset('frontend:img/category-example.jpg') }}"
                                data-cover-url="#">
                                @for ($i = 1; $i < 5; $i++)
                                    <div class="splide__slide carousel-multi-slide">
                                        <div class="carousel-multi-item">
                                            <x-frontend::card.product-card.template link="product-detail"
                                                productImage="{{ Module::asset('frontend:img/product' . $i . '.jpg') }}"
                                                productName="IMOU Smart IP Camera 3.6mm (REX 2D) GK2DP-3C0W ประกัน 2 ปี"
                                                productSubtitle="Lens : 3.6mm / IR Distance : 10m Audio Communication : Two-Way"
                                                brandImage="{{ Module::asset('frontend:img/brand.png') }}"
                                                brandName="EZVIZ" :badges="[
                                                    [
                                                        'name' => 'new',
                                                        'title' => 'New',
                                                    ],
                                                    [
                                                        'name' => 'Best price',
                                                        'title' => 'New',
                                                    ],
                                                    [
                                                        'name' => 'flash',
                                                        'title' => 'Flash sale',
                                                    ],
                                                ]" tag="Free special gift"
                                                price="2,500" discountPrice="2,690" :flashSale=false
                                                progressPercentage="25" progressText="1 sold" warranty="2 years warranty"
                                                addToCartLink="#">
                                                </x-frontend>
                                        </div>
                                    </div>
                                @endfor
                            </div>
                        </div>
                        <ul class="splide__pagination --prevent-on-load-init" role="tablist">
                        </ul>
                    </div>
                </div>
            </div>
            <a href="product" class="button-secondary relative inline-flex mt-6 sm:hidden justify-center w-[150px] mx-auto">
                <span>ดูสินค้าทั้งหมด</span>
                <svg width="7" height="12" viewBox="0 0 7 12" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 11L6 6L1 1" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" />
                </svg>
            </a>
        </div>

        {{-- Category 4 --}}
        <div class="container">
            <div class="flex items-center justify-between pt-8 md:pt-12 pb-6">
                <h2 class="text-[#225EC4] font-bold">Category Name</h2>
                <a href="product" class="button-secondary !hidden sm:!flex">
                    <span>ดูสินค้าทั้งหมด</span>
                    <svg width="7" height="12" viewBox="0 0 7 12" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path d="M1 11L6 6L1 1" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </svg>
                </a>
            </div>

            <div class="flex flex-wrap -mx-4">
                <div class="hidden lg:block lg:w-[30%] xl:w-[27.5%] 2xl:w-[25.5%] p-4">
                    <a href="#" class="block aspect-[61/91] h-full w-full">
                        <img src="{{ Module::asset('frontend:img/category-example.jpg') }}"
                            class="w-full h-full object-cover object-center rounded-xl">
                    </a>
                </div>
                <div class="w-full lg:w-[70%] xl:w-[72.5%] 2xl:w-[74.5%] lg:py-4 px-4">
                    <div class="com-carousel-multi splide splide-category">
                        <div class="splide__track carousel-multi-wrapper">
                            <div class="splide__list carousel-multi-list"
                                data-cover-image="{{ Module::asset('frontend:img/category-example.jpg') }}"
                                data-cover-url="#">
                                @for ($i = 1; $i < 5; $i++)
                                    <div class="splide__slide carousel-multi-slide">
                                        <div class="carousel-multi-item">
                                            <x-frontend::card.product-card.template link="product-detail"
                                                productImage="{{ Module::asset('frontend:img/product' . $i . '.jpg') }}"
                                                productName="IMOU Smart IP Camera 3.6mm (REX 2D) GK2DP-3C0W ประกัน 2 ปี"
                                                productSubtitle="Lens : 3.6mm / IR Distance : 10m Audio Communication : Two-Way"
                                                brandImage="{{ Module::asset('frontend:img/brand.png') }}"
                                                brandName="EZVIZ" :badges="[
                                                    [
                                                        'name' => 'new',
                                                        'title' => 'New',
                                                    ],
                                                    [
                                                        'name' => 'Best price',
                                                        'title' => 'New',
                                                    ],
                                                    [
                                                        'name' => 'flash',
                                                        'title' => 'Flash sale',
                                                    ],
                                                ]" tag="Free special gift"
                                                price="2,500" discountPrice="" :flashSale=false progressPercentage="25"
                                                progressText="1 sold" warranty="2 years warranty" addToCartLink="#">
                                                </x-frontend>
                                        </div>
                                    </div>
                                @endfor
                            </div>
                        </div>
                        <ul class="splide__pagination --prevent-on-load-init" role="tablist">
                        </ul>
                    </div>
                </div>
            </div>
            <a href="product" class="button-secondary relative inline-flex mt-6 sm:hidden justify-center w-[150px] mx-auto">
                <span>ดูสินค้าทั้งหมด</span>
                <svg width="7" height="12" viewBox="0 0 7 12" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 11L6 6L1 1" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round" />
                </svg>
            </a>
        </div>

        {{-- 4 ad[s] banner --}}
        <div class="container pt-8 sm:pt-12 lg:pb-6">
            <div class="flex flex-wrap -mx-3 gap-y-6">
                <div class="w-full xs:w-1/2 lg:w-1/3 px-3">
                    <a href="#" class="at-container">
                        <img src="{{ Module::asset('frontend:img/banner-1x1-3.jpg') }}" alt="1x1">
                    </a>
                </div>
                <div class="w-full xs:w-1/2 lg:w-1/3 px-3">
                    <a href="#" class="at-container">
                        <img src="{{ Module::asset('frontend:img/banner-1x1-4.jpg') }}" alt="1x1">
                    </a>
                </div>
                <div class="w-full lg:w-1/3 px-3">
                    <div class="flex flex-col xs:flex-row lg:flex-col gap-y-6 gap-x-6 h-full">
                        <a href="#" class="at-container">
                            <img src="{{ Module::asset('frontend:img/banner-2x1-1.jpg') }}" alt="1x1">
                        </a>
                        <a href="#" class="at-container">
                            <img src="{{ Module::asset('frontend:img/banner-2x1-2.jpg') }}" alt="1x1">
                        </a>
                    </div>
                </div>
            </div>
        </div>

        {{-- Blog 1 --}}
        <div class="bg-bottom-gradient pb-12 lg:pb-12">
            <div class="container">
                <div class="flex items-center justify-between pt-8 md:pt-12 pb-6">
                    <h2 class="text-[#225EC4] font-bold">บทความล่าสุด</h2>
                    <a href="blog" class="button-secondary !hidden sm:!flex">
                        <span>ดูบทความทั้งหมด</span>
                        <svg width="7" height="12" viewBox="0 0 7 12" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path d="M1 11L6 6L1 1" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" />
                        </svg>
                    </a>
                </div>
                <x-frontend::plugin.splide-carousel.splide-carousel slideName='splide-blog'>
                    <x-slot:slide>
                        @for ($i = 1; $i < 5; $i++)
                            <x-frontend::plugin.splide-carousel.splide-item>
                                <x-slot:slide>
                                    <x-frontend::card.blog-card.template
                                        image="{{ Module::asset('frontend:img/blog' . $i . '.jpg') }}"
                                        title="อุปกรณ์ไอทีช่วยให้คนทำงานสามารถ เริ่มทำงานที่ใดก็ได้ไม่จำเป็นต้องอยู่"
                                        date="17 สิงหาคม 2024" url="blog-detail">
                                        </x-frontend>
                                </x-slot>
                                </x-frontend>
                        @endfor
                    </x-slot>
                    </x-frontend>
                    <a href="product"
                        class="button-secondary relative inline-flex mt-6 sm:hidden justify-center w-[150px] mx-auto">
                        <span>ดูบทความทั้งหมด</span>
                        <svg width="7" height="12" viewBox="0 0 7 12" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path d="M1 11L6 6L1 1" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" />
                        </svg>
                    </a>
            </div>
        </div>
    </div>
@endsection