@extends('layouts.app')

@section('content')


    <!-- slider start  -->
    <section>
        <div class="container mt-3 d-lg-block d-none">
            <div class="cover-slick">
                <div class="col-12">
                    <a href="#">
                        <img class="col-12" src="{{ asset('images/banners/slider1.png') }}" alt="Banner">
                    </a>
                </div>
                <div class="col-12">
                    <a href="#">
                        <img class="col-12" src="{{ asset('images/banners/slider2.webp') }}" alt="Banner">
                    </a>
                </div>
                <div class="col-12">
                    <a href="#">
                        <img class="col-12" src="{{ asset('images/banners/slider3.webp') }}" alt="Banner">
                    </a>
                </div>
                <div class="col-12">
                    <a href="#">
                        <img class="col-12" src="{{ asset('images/banners/slider4.png') }}" alt="Banner">
                    </a>
                </div>
            </div>
        </div>
    </section>
    <!-- slider end  -->


    <section>
        <div class="container mt-3">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-6 mb-3">
                    <div class="banner">
                        <img src="{{ asset('images/others/banner.webp') }}" alt="" class="img-fluid">
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-6 mb-3">
                    <div class="banner">
                        <img src="{{ asset('images/others/banner.webp') }}" alt="" class="img-fluid">
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-6 mb-3">
                    <div class="banner">
                        <img src="{{ asset('images/others/banner.webp') }}" alt="" class="img-fluid">
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-6 mb-3">
                    <div class="banner">
                        <img src="{{ asset('images/others/banner.webp') }}" alt="" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Product নতুন প্রকাশিত বই Slider Start  -->
    <section>
        <div class="container mt-3">
            <div class="slider-box">
                <div class="card p-4">
                    <h6 class="text-danger mb-0">নতুন প্রকাশিত বই</h6>
                </div>
                <div class="product-slider">
                    @foreach($books as $book)
                        <div class="product px-3 py-3">
                            <a href="{{ route('books.index',$book->id) }}" title="Nill Hati" class="text-decoration-none">
                                <div class="product_label" style="display: block !important;">
                                <span class="onsale text_lebel product_label" style="display: block !important; text-transform: unset; "> 45%
                                    <br>ছাড়
                                </span>
                                </div>
                                <div class="image">
                                    <img src="{{ asset('images/products/product.webp') }}" alt="">
                                </div>
                                <div class="text-area pt-2">
                                    <p class="book-title mb-2 p-0 bold-7 font-12 text-dark">{{ $book->title }}</p>
                                    <p class="book-author mb-2 p-0 font-14 text-secondary">
                                        @foreach($book->writers as $writer)
                                            {{ $writer->name }}
                                        @endforeach</p>
                                    <p class="m-0 p-0 p-price"><del class="text-muted">TK.135 </del><span class="ps-2 text-danger">TK.116</span></p>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="text-center">
                <button class="btn btn-warning">সকল নতুন প্রকাশিত বই</button>
            </div>
        </div>
    </section>
    <!-- Product নতুন প্রকাশিত বই Slider end-->

    <!-- Product প্রি-অর্ডারের বই Slider Start  -->
    <section>
        <div class="container mt-3">
            <div class="slider-box">
                <div class="card p-4">
                    <h6 class="text-danger mb-0">প্রি-অর্ডারের বই</h6>
                </div>
                <div class="product-slider">
                    @foreach($books as $book)
                        <div class="product px-3 py-3">
                            <a href="{{ route('books.index',$book->id) }}" title="Nill Hati" class="text-decoration-none">
                                <div class="product_label" style="display: block !important;">
                                <span class="onsale text_lebel product_label" style="display: block !important; text-transform: unset; "> 45%
                                    <br>ছাড়
                                </span>
                                </div>
                                <div class="image">
                                    <img src="{{ asset('images/products/product.webp') }}" alt="">
                                </div>
                                <div class="text-area pt-2">
                                    <p class="book-title mb-2 p-0 bold-7 font-12 text-dark">{{ $book->title }}</p>
                                    <p class="book-author mb-2 p-0 font-14 text-secondary">
                                        @foreach($book->writers as $writer)
                                            {{ $writer->name }}
                                        @endforeach</p>
                                    <p class="m-0 p-0 p-price"><del class="text-muted">TK.135 </del><span class="ps-2 text-danger">TK.116</span></p>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="text-center">
                <button class="btn btn-warning">সকল প্রি-অর্ডারের বই</button>
            </div>
        </div>
    </section>
    <!-- Product প্রি-অর্ডারের বই Slider end-->
    <section>
        <div class="container mt-3">
            <a href="#">
                <img src="{{ asset('images/category/break-banner_al-quran_desktop.webp') }}" alt="" class="col-12">
            </a>
        </div>
    </section>

    <!-- Product বইমেলা ২০২৪ বেষ্টসেলার বই Slider start-->
    {{--<section>
        <div class="container mt-3">
            <div class="slider-box">
                <div class="card p-4">
                    <h6 class="text-danger mb-0">বইমেলা ২০২৪ বেষ্টসেলার বই</h6>
                </div>
                <div class="row mt-3 best_seller_books">
                    <div class="col-lg-3 col-md-4 mb-3 px-3">
                        <div class="book_item">
                            <div class="image">
                                <a href="">
                                    <img src="{{ asset('images/products/hayater-din-furole-200x300.webp') }}" class="img-fluid" alt="">
                                </a>
                                <span class="badge bg-danger">01</span>
                            </div>
                            <div class="content">
                                <a href="#" class="d-block text-dark text-decoration-none mb-1">হায়াতের দিন ফুরোলে</a>
                                <a href="#" class="d-block text-muted text-decoration-none mb-1">আরিফ আজাদ</a>
                                <a href="#" class="d-block text-muted text-decoration-none mb-1">সত্যায়ন প্রকাশন</a>
                            </div>
                            <i class="fa fa-angle-up"></i>
                        </div>
                    </div>

                </div>
            </div>
            <div class="text-center">
                <button class="btn btn-warning">পুরো লিস্ট দেখুন</button>
            </div>
        </div>
    </section>--}}
    <!-- Product বইমেলা ২০২৪ বেষ্টসেলার বই Slider end-->

    <section>
        <div class="container mt-3">
            <a href="#">
                <img src="{{ asset('images/category/mone-mone-prodhanmontridesktop-break-banner-min-1.webp') }}" alt="" class="col-12">
            </a>
        </div>
    </section>

    <!-- Product সমকালীন প্রকাশন এর সকল বইয়ে 35% ছাড় Slider Start  -->
    {{--<section>
        <div class="container mt-3">
            <div class="slider-box">
                <div class="card p-4">
                    <h6 class="text-danger mb-0">সমকালীন প্রকাশন এর সকল বইয়ে 35% ছাড়</h6>
                </div>
                <div class="product-slider">
                    <div class="product px-3 py-3">
                        <a href="#" title="Nill Hati" class="text-decoration-none">
                            <div class="product_label" style="display: block !important;">
                                <span class="onsale text_lebel product_label" style="display: block !important; text-transform: unset; "> 35%
                                    <br>ছাড়
                                </span>
                            </div>
                            <div class="image">
                                <img src="{{ asset('images/products/JIBONER-BAKE-BAKE-QURANER-PATH-192x254.webp') }}" alt="">
                            </div>
                            <div class="text-area pt-2">
                                <p class="book-title mb-2 p-0 bold-7 font-12 text-dark">জীবনের বাঁকে বাঁকে কুরআনের পাঠ</p>
                                <p class="book-author mb-2 p-0 font-14 text-secondary">শাইখ ইবরাহীম আস সাকরান</p>
                                <p class="m-0 p-0 p-price"><del class="text-muted">TK.230 </del><span class="ps-2 text-danger">TK.149</span></p>
                            </div>
                        </a>
                    </div>

                </div>
            </div>
            <div class="text-center">
                <button class="btn btn-warning">এই প্রকাশনীর সকল বই</button>
            </div>
        </div>
    </section>--}}
    <!-- Product সমকালীন প্রকাশন এর সকল বইয়ে 35% ছাড় Slider end-->

    <!-- Product সিয়াম, রমযান, তারাবীহ ও ঈদ Slider Start  -->
    {{--<section>
        <div class="container mt-3">
            <div class="slider-box">
                <div class="card p-4">
                    <h6 class="text-danger mb-0">সিয়াম, রমযান, তারাবীহ ও ঈদ </h6>
                </div>
                <div class="product-slider">
                    <div class="product px-3 py-3">
                        <a href="#" title="Nill Hati" class="text-decoration-none">
                            <div class="product_label" style="display: block !important;">
                                <span class="onsale text_lebel product_label" style="display: block !important; text-transform: unset; "> 30%
                                    <br>ছাড়
                                </span>
                            </div>
                            <div class="image">
                                <img src="{{ asset('images/products/riayad and siam.webp') }}" alt="">
                            </div>
                            <div class="text-area pt-2">
                                <p class="book-title mb-2 p-0 bold-7 font-12 text-dark">সিয়াম ও রমাদান (তাকওয়া অর্জনের পাথেয়)</p>
                                <p class="book-author mb-2 p-0 font-14 text-secondary"> কামরুল ইসলাম</p>
                                <p class="m-0 p-0 p-price"><del class="text-muted">TK.200 </del><span class="ps-2 text-danger">TK.140</span></p>
                            </div>
                        </a>
                    </div>

                </div>
            </div>
            <div class="text-center">
                <button class="btn btn-warning">এই বিষয়ে সকল বই</button>
            </div>
        </div>
    </section>--}}
    <!-- Product সিয়াম, রমযান, তারাবীহ ও ঈদ Slider end-->

    {{--<section>
        <div class="container mt-3">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-6 mb-3">
                    <div class="banner2">
                        <a href="#">
                            <img src="{{ asset('images/category/popular-publication-min-2.webp') }}" alt="" class="img-fluid" style="border-radius: 20px;">
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-6 mb-3">
                    <div class="banner2">
                        <a href="#">
                            <img src="{{ asset('images/category/favourite-writers-books-min.webp') }}" alt="" class="img-fluid" style="border-radius: 20px;">
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-6 mb-3">
                    <div class="banner2">
                        <a href="#">
                            <img src="{{ asset('images/category/popular-books-min.webp') }}" alt="" class="img-fluid" style="border-radius: 20px;">
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-6 mb-3">
                    <div class="banner2">
                        <a href="#">
                            <img src="{{ asset('images/category/popukar-brand-min.webp') }}" alt="" class="img-fluid" style="border-radius: 20px;">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>--}}

    <!-- Product অন্যান্য পণ্য Slider Start  -->
    {{--<section>
        <div class="container mt-3">
            <div class="slider-box">
                <div class="card p-4">
                    <h6 class="text-danger mb-0">অন্যান্য পণ্য</h6>
                </div>
                <div class="product-slider">
                    <div class="p-2 product">
                        <div class="border p-3">
                            <a href="#" title="Nill Hati" class="text-decoration-none">

                                <div class="image slide_img">
                                    <img src="{{ asset('images/products/perfume-2.webp') }}" alt="">
                                </div>
                                <div class="text-area pt-2">
                                    <p class="book-title mb-2 p-0 bold-7 text-center font-12 text-muted">আতর</p>
                                </div>
                            </a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>--}}
    <!-- Product অন্যান্য পণ্য Slider end  -->

    <!-- Product জনপ্রিয় লেখক Slider Start  -->
    {{--<section>
        <div class="container mt-3">
            <div class="slider-box">
                <div class="card p-4">
                    <h6 class="text-danger mb-0">জনপ্রিয় লেখক</h6>
                </div>
                <div class="product-slider">
                    <div class="p-2 product">
                        <div class="border p-3">
                            <a href="#" title="Nill Hati" class="text-decoration-none">

                                <div class="image slide_img">
                                    <img src="{{ asset('images/products/Amiruzzaman_Muhammad_Shamsul_Arefin.webp') }}" alt="" class="rounded-circle">
                                </div>
                                <div class="text-area pt-2">
                                    <p class="book-title mb-2 p-0 bold-7 text-center font-12 text-muted">ডা. শামসুল আরেফীন</p>
                                </div>
                            </a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>--}}
    <!-- Product জনপ্রিয় লেখক Slider end  -->

    <!-- Product জনপ্রিয় প্রকাশক Slider Start  -->
    {{--<section>
        <div class="container mt-3">
            <div class="slider-box">
                <div class="card p-4">
                    <h6 class="text-danger mb-0">জনপ্রিয় প্রকাশক</h6>
                </div>
                <div class="product-slider">
                    <div class="product px-3 py-3">
                        <a href="#" title="Nill Hati" class="text-decoration-none">

                            <div class="image slide_img" style="margin: 8px auto;width:120px;background: #d5d7db">
                                <img src="{{ asset('images/products/publis/sottayon-prokashon.webp') }}" class="img-fluid" alt="">
                            </div>
                            <div class="text-area pt-2">
                                <p class="book-title mb-2 p-0 bold-7 text-center font-12 text-muted">সমকালীন প্রকাশন</p>
                            </div>
                        </a>
                    </div>
                    <div class="product px-3 py-3">
                        <a href="#" title="Nill Hati" class="text-decoration-none">

                            <div class="image slide_img" style="margin: 8px auto;width:120px;background: #d5d7db">
                                <img src="{{ asset('images/products/publis/sottayon-prokashon (1).webp') }}" class="img-fluid" alt="">
                            </div>
                            <div class="text-area pt-2">
                                <p class="book-title mb-2 p-0 bold-7 text-center font-12 text-muted">সত্যায়ন প্রকাশন</p>
                            </div>
                        </a>
                    </div>
                    <div class="product px-3 py-3">
                        <a href="#" title="Nill Hati" class="text-decoration-none">

                            <div class="image slide_img" style="margin: 8px auto;width:120px;background: #d5d7db">
                                <img src="{{ asset('images/products/publis/sottayon-prokashon.webp') }}" class="img-fluid" alt="">
                            </div>
                            <div class="text-area pt-2">
                                <p class="book-title mb-2 p-0 bold-7 text-center font-12 text-muted">সমকালীন প্রকাশন</p>
                            </div>
                        </a>
                    </div>
                    <div class="product px-3 py-3">
                        <a href="#" title="Nill Hati" class="text-decoration-none">

                            <div class="image slide_img" style="margin: 8px auto;width:120px;background: #d5d7db">
                                <img src="{{ asset('images/products/publis/kendrobindu-publication.webp') }}" class="img-fluid" alt="">
                            </div>
                            <div class="text-area pt-2">
                                <p class="book-title mb-2 p-0 bold-7 text-center font-12 text-muted">কেন্দ্রবিন্দু</p>
                            </div>
                        </a>
                    </div>
                    <div class="product px-3 py-3">
                        <a href="#" title="Nill Hati" class="text-decoration-none">

                            <div class="image slide_img" style="margin: 8px auto;width:120px;background: #d5d7db">
                                <img src="{{ asset('images/products/publis/sottayon-prokashon (1).webp') }}" class="img-fluid" alt="">
                            </div>
                            <div class="text-area pt-2">
                                <p class="book-title mb-2 p-0 bold-7 text-center font-12 text-muted">সত্যায়ন প্রকাশন</p>
                            </div>
                        </a>
                    </div>
                    <div class="product px-3 py-3">
                        <a href="#" title="Nill Hati" class="text-decoration-none">

                            <div class="image slide_img" style="margin: 8px auto;width:120px;background: #d5d7db">
                                <img src="{{ asset('images/products/publis/sondipon-prokashon.webp') }}" class="img-fluid" alt="">
                            </div>
                            <div class="text-area pt-2">
                                <p class="book-title mb-2 p-0 bold-7 text-center font-12 text-muted">সন্দীপন প্রকাশন</p>
                            </div>
                        </a>
                    </div>
                    <div class="product px-3 py-3">
                        <a href="#" title="Nill Hati" class="text-decoration-none">

                            <div class="image slide_img" style="margin: 8px auto;width:120px;background: #d5d7db">
                                <img src="{{ asset('images/products/publis/kendrobindu-publication.webp') }}" class="img-fluid" alt="">
                            </div>
                            <div class="text-area pt-2">
                                <p class="book-title mb-2 p-0 bold-7 text-center font-12 text-muted">কেন্দ্রবিন্দু</p>
                            </div>
                        </a>
                    </div>
                    <div class="product px-3 py-3">
                        <a href="#" title="Nill Hati" class="text-decoration-none">

                            <div class="image slide_img" style="margin: 8px auto;width:120px;background: #d5d7db">
                                <img src="{{ asset('images/products/publis/sottayon-prokashon.webp') }}" class="img-fluid" alt="">
                            </div>
                            <div class="text-area pt-2">
                                <p class="book-title mb-2 p-0 bold-7 text-center font-12 text-muted">সমকালীন প্রকাশন</p>
                            </div>
                        </a>
                    </div>


                </div>
            </div>
        </div>
    </section>--}}
    <!-- Product জনপ্রিয় প্রকাশক Slider end  -->

    {{--<section>
        <div class="container mt-3">
            <a href="#">
                <img src="{{ asset('images/category/break-banner_tumio-hote-parbe-sahabider-moto_desktop.webp') }}" alt="" class="col-12">
            </a>
        </div>
    </section>--}}

    <!-- Product প্যাকেজ সমূহ Slider Start  -->
    {{--<section>
        <div class="container mt-3">
            <div class="slider-box">
                <div class="card p-4">
                    <h6 class="text-danger mb-0">প্যাকেজ সমূহ</h6>
                </div>
                <div class="product-slider">
                    <div class="product px-3 py-3">
                        <a href="#" title="Nill Hati" class="text-decoration-none">
                            <div class="product_label" style="display: block !important;">
                                <span class="onsale text_lebel product_label" style="display: block !important; text-transform: unset; "> 30%
                                    <br>ছাড়
                                </span>
                            </div>
                            <div class="image">
                                <img src="{{ asset('images/products/pakage.webp') }}" class="img-fluid" alt="">
                            </div>
                            <div class="text-area pt-2">
                                <p class="book-title mb-2 p-0 bold-7 font-12 text-dark">জীবনের জাগরণ সিরিজ (১-৩ খণ্ড একত্রে)</p>
                                <p class="book-author mb-2 p-0 font-14 text-secondary">আরিফ আজাদ</p>
                                <p class="m-0 p-0 p-price"><del class="text-muted">TK.1,005 </del><span class="ps-2 text-danger">TK.703</span></p>
                            </div>
                        </a>
                    </div>

                </div>
            </div>
            <div class="text-center">
                <button class="btn btn-warning">সকল প্যাকেজ</button>
            </div>
        </div>
    </section>--}}
    <!-- Product প্যাকেজ সমূহ Slider end-->

    <section>
        <div class="container mt-3" >
            <div class="row">
                <div class="col-lg-2 mb-3">
                    <div class="text-center hover">
                        <button class="btn btn-outline col-12" style="border: 1px solid black; padding: 10px 30px 10px 30px;">আল কুরআন </button>
                    </div>
                </div>
                <div class="col-lg-2 mb-3">
                    <div class="text-center hover">
                        <button class="btn btn-outline col-12" style="border: 1px solid black; padding: 10px 30px 10px 30px;">আল কুরআন </button>
                    </div>
                </div>
                <div class="col-lg-2 mb-3">
                    <div class="text-center hover">
                        <button class="btn btn-outline col-12" style="border: 1px solid black; padding: 10px 30px 10px 30px;">আল কুরআন </button>
                    </div>
                </div>
                <div class="col-lg-2 mb-3">
                    <div class="text-center hover">
                        <button class="btn btn-outline col-12" style="border: 1px solid black; padding: 10px 30px 10px 30px;">আল কুরআন </button>
                    </div>
                </div>
                <div class="col-lg-2 mb-3">
                    <div class="text-center hover">
                        <button class="btn btn-outline col-12" style="border: 1px solid black; padding: 10px 30px 10px 30px;">আল কুরআন </button>
                    </div>
                </div>
                <div class="col-lg-2 mb-3">
                    <div class="text-center hover">
                        <button class="btn btn-outline col-12" style="border: 1px solid black; padding: 10px 30px 10px 30px;">আল কুরআন </button>
                    </div>
                </div>
                <div class="col-lg-2 mb-3">
                    <div class="text-center hover">
                        <button class="btn btn-outline col-12" style="border: 1px solid black; padding: 10px 30px 10px 30px;">আল কুরআন </button>
                    </div>
                </div>
                <div class="col-lg-2 mb-3">
                    <div class="text-center hover">
                        <button class="btn btn-outline col-12" style="border: 1px solid black; padding: 10px 30px 10px 30px;">আল কুরআন </button>
                    </div>
                </div>
                <div class="col-lg-2 mb-3">
                    <div class="text-center hover">
                        <button class="btn btn-outline col-12" style="border: 1px solid black; padding: 10px 30px 10px 30px;">আল কুরআন </button>
                    </div>
                </div>
                <div class="col-lg-2 mb-3">
                    <div class="text-center hover">
                        <button class="btn btn-outline col-12" style="border: 1px solid black; padding: 10px 30px 10px 30px;">আল কুরআন </button>
                    </div>
                </div>
                <div class="col-lg-2 mb-3">
                    <div class="text-center hover">
                        <button class="btn btn-outline col-12" style="border: 1px solid black; padding: 10px 30px 10px 30px;">আল কুরআন </button>
                    </div>
                </div>
                <div class="col-lg-2 mb-3">
                    <div class="text-center hover">
                        <button class="btn btn-outline col-12" style="border: 1px solid black; padding: 10px 30px 10px 30px;">আল কুরআন </button>
                    </div>
                </div>
                <div class="col-lg-2 mb-3">
                    <div class="text-center hover">
                        <button class="btn btn-outline col-12" style="border: 1px solid black; padding: 10px 30px 10px 30px;">আল কুরআন </button>
                    </div>
                </div>
            </div>

        </div>
    </section>

    <!-- Product ইবাদত, আত্মশুদ্ধি ও অনুপ্রেরণা Slider Start  -->
    {{--<section>
        <div class="container mt-3">
            <div class="slider-box">
                <div class="card p-4">
                    <h6 class="text-danger mb-0">ইবাদত, আত্মশুদ্ধি ও অনুপ্রেরণা</h6>
                </div>
                <div class="product-slider">
                    <div class="product px-3 py-3">
                        <a href="#" title="Nill Hati" class="text-decoration-none">
                            <div class="product_label" style="display: block !important;">
                                <span class="onsale text_lebel product_label" style="display: block !important; text-transform: unset; "> 36%
                                    <br>ছাড়
                                </span>
                            </div>
                            <div class="image">
                                <img src="{{ asset('images/products/ibadad/c56fc907-192x254.webp') }}" class="img-fluid" alt="">
                            </div>
                            <div class="text-area pt-2">
                                <p class="book-title mb-2 p-0 bold-7 font-12 text-dark">আলোর মুকুট</p>
                                <p class="book-author mb-2 p-0 font-14 text-secondary">আব্দুল্লাহ আল মামুন</p>
                                <p class="m-0 p-0 p-price"><del class="text-muted">TK.180 </del><span class="ps-2 text-danger">TK.115</span></p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="text-center">
                <button class="btn btn-warning">এই বিষয়ে সকল বই</button>
            </div>
        </div>
    </section>--}}
    <!-- Product ইবাদত, আত্মশুদ্ধি ও অনুপ্রেরণা Slider end-->
    {{--<section>
        <div class="container mt-3">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-6 mb-3">
                    <div class="banner2">
                        <a href="#">
                            <img src="{{ asset('images/category/lifestyle-product-min.webp') }}" alt="" class="img-fluid" style="border-radius: 20px;">
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-6 mb-3">
                    <div class="banner2">
                        <a href="#">
                            <img src="{{ asset('images/category/electronics-products-tiles-min.webp') }}" alt="" class="img-fluid" style="border-radius: 20px;">
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-6 mb-3">
                    <div class="banner2">
                        <a href="#">
                            <img src="{{ asset('images/category/stationary-products-min.webp') }}" alt="" class="img-fluid" style="border-radius: 20px;">
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-6 mb-3">
                    <div class="banner2">
                        <a href="#">
                            <img src="{{ asset('images/category/islamic-accessories-tiles-min.webp') }}" alt="" class="img-fluid" style="border-radius: 20px;">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>--}}

    <!-- Product ঈমান আক্বিদা ও বিশ্বাস Slider Start  -->
    {{--<section>
        <div class="container mt-3">
            <div class="slider-box">
                <div class="card p-4">
                    <h6 class="text-danger mb-0">ঈমান আক্বিদা ও বিশ্বাস </h6>
                </div>
                <div class="product-slider">
                    <div class="product px-3 py-3">
                        <a href="#" title="Nill Hati" class="text-decoration-none">
                            <div class="product_label" style="display: block !important;">
                                <span class="onsale text_lebel product_label" style="display: block !important; text-transform: unset; "> 58%
                                    <br>ছাড়
                                </span>
                            </div>
                            <div class="image">
                                <img src="{{ asset('images/products/ibadad/07809050661598_n-250x390.webp') }}" class="img-fluid" alt="">
                            </div>
                            <div class="text-area pt-2">
                                <p class="book-title mb-2 p-0 bold-7 font-12 text-dark">কুরআন-সুন্নাহর আলোকে ঈমান-আকীদা</p>
                                <p class="book-author mb-2 p-0 font-14 text-secondary">মাওলানা সাঈদ আহমদ</p>
                                <p class="m-0 p-0 p-price"><del class="text-muted">TK.1200 </del><span class="ps-2 text-danger">TK.500</span></p>
                            </div>
                        </a>
                    </div>

                </div>
            </div>
            <div class="text-center">
                <button class="btn btn-warning">এই বিষয়ে সকল বই</button>
            </div>
        </div>
    </section>--}}
    <!-- Product ঈমান আক্বিদা ও বিশ্বাস Slider end-->

    <!-- Product সীরাতে রাসূল (সা.) Slider Start  -->
    {{--<section>
        <div class="container mt-3">
            <div class="slider-box">
                <div class="card p-4">
                    <h6 class="text-danger mb-0">সীরাতে রাসূল (সা.)</h6>
                </div>
                <div class="product-slider">
                    <div class="product px-3 py-3">
                        <a href="#" title="Nill Hati" class="text-decoration-none">
                            <div class="product_label" style="display: block !important;">
                                <span class="onsale text_lebel product_label" style="display: block !important; text-transform: unset; "> 30%
                                    <br>ছাড়
                                </span>
                            </div>
                            <div class="image">
                                <img src="{{ asset('images/products/ibadad/Nobijir-Agoomon-barta-250x389.webp') }}" class="img-fluid" alt="">
                            </div>
                            <div class="text-area pt-2">
                                <p class="book-title mb-2 p-0 bold-7 font-12 text-dark">রাসূলুল্লাহ সা.-র আগমন বার্তা</p>
                                <p class="book-author mb-2 p-0 font-14 text-secondary">আতাউল্লাহ আদনান</p>
                                <p class="m-0 p-0 p-price"><del class="text-muted">TK.220 </del><span class="ps-2 text-danger">TK.154</span></p>
                            </div>
                        </a>
                    </div>

                </div>
            </div>
            <div class="text-center">
                <button class="btn btn-warning">এই বিষয়ে সকল বই</button>
            </div>
        </div>
    </section>--}}
    <!-- Product সীরাতে রাসূল (সা.) Slider end-->

    <!-- Product ইসলামি পণ্য Slider Start  -->
    {{--<section>
        <div class="container mt-3">
            <div class="slider-box mb-3">
                <div class="card p-4">
                    <h6 class="text-danger mb-0">ইসলামি পণ্য</h6>
                </div>
                <div class="product-slider mt-3">
                    <div class="p-2 product">
                        <div class="border p-3">
                            <a href="#" title="Nill Hati" class="text-decoration-none">

                                <div class="image slide_img">
                                    <img src="{{ asset('images/products/perfume-2.webp') }}" alt="">
                                </div>
                                <div class="text-area pt-2">
                                    <p class="book-title mb-2 p-0 bold-7 text-center font-12 text-muted">আতর</p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="p-2 product">
                        <div class="border p-3">
                            <a href="#" title="Nill Hati" class="text-decoration-none">

                                <div class="image slide_img">
                                    <img src="{{ asset('images/products/perfume-2.webp') }}" alt="">
                                </div>
                                <div class="text-area pt-2">
                                    <p class="book-title mb-2 p-0 bold-7 text-center font-12 text-muted">আতর</p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="p-2 product">
                        <div class="border p-3">
                            <a href="#" title="Nill Hati" class="text-decoration-none">

                                <div class="image slide_img">
                                    <img src="{{ asset('images/products/perfume-2.webp') }}" alt="">
                                </div>
                                <div class="text-area pt-2">
                                    <p class="book-title mb-2 p-0 bold-7 text-center font-12 text-muted">আতর</p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="p-2 product">
                        <div class="border p-3">
                            <a href="#" title="Nill Hati" class="text-decoration-none">

                                <div class="image slide_img">
                                    <img src="{{ asset('images/products/perfume-2.webp') }}" alt="">
                                </div>
                                <div class="text-area pt-2">
                                    <p class="book-title mb-2 p-0 bold-7 text-center font-12 text-muted">আতর</p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="p-2 product">
                        <div class="border p-3">
                            <a href="#" title="Nill Hati" class="text-decoration-none">

                                <div class="image slide_img">
                                    <img src="{{ asset('images/products/perfume-2.webp') }}" alt="">
                                </div>
                                <div class="text-area pt-2">
                                    <p class="book-title mb-2 p-0 bold-7 text-center font-12 text-muted">আতর</p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="p-2 product">
                        <div class="border p-3">
                            <a href="#" title="Nill Hati" class="text-decoration-none">

                                <div class="image slide_img">
                                    <img src="{{ asset('images/products/perfume-2.webp') }}" alt="">
                                </div>
                                <div class="text-area pt-2">
                                    <p class="book-title mb-2 p-0 bold-7 text-center font-12 text-muted">আতর</p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="p-2 product">
                        <div class="border p-3">
                            <a href="#" title="Nill Hati" class="text-decoration-none">

                                <div class="image slide_img">
                                    <img src="{{ asset('images/products/perfume-2.webp') }}" alt="">
                                </div>
                                <div class="text-area pt-2">
                                    <p class="book-title mb-2 p-0 bold-7 text-center font-12 text-muted">আতর</p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="p-2 product">
                        <div class="border p-3">
                            <a href="#" title="Nill Hati" class="text-decoration-none">

                                <div class="image slide_img">
                                    <img src="{{ asset('images/products/perfume-2.webp') }}" alt="">
                                </div>
                                <div class="text-area pt-2">
                                    <p class="book-title mb-2 p-0 bold-7 text-center font-12 text-muted">আতর</p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="p-2 product">
                        <div class="border p-3">
                            <a href="#" title="Nill Hati" class="text-decoration-none">

                                <div class="image slide_img">
                                    <img src="{{ asset('images/products/perfume-2.webp') }}" alt="">
                                </div>
                                <div class="text-area pt-2">
                                    <p class="book-title mb-2 p-0 bold-7 text-center font-12 text-muted">আতর</p>
                                </div>
                            </a>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </section>--}}
    <!-- Product ইসলামি পণ্য Slider end  -->

    <section>
        <div class="container mt-3">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-6 mb-3">
                    <div class="banner2">
                        <a href="#">
                            <img src="{{ asset('images/category/ft/over-discount-publication-min.webp') }}" alt="" class="img-fluid" style="border-radius: 20px;">
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-6 mb-3">
                    <div class="banner2">
                        <a href="#">
                            <img src="{{ asset('images/category/ft/discount-books-min.webp') }}" alt="" class="img-fluid" style="border-radius: 20px;">
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-6 mb-3">
                    <div class="banner2">
                        <a href="#">
                            <img src="{{ asset('images/category/ft/book-suggestion-min-1.webp') }}" alt="" class="img-fluid" style="border-radius: 20px;">
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-6 mb-3">
                    <div class="banner2">
                        <a href="#">
                            <img src="{{ asset('images/category/ft/babuder-boiyer-vubon.webp') }}" alt="" class="img-fluid" style="border-radius: 20px;">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
