@extends('layouts.app')

@section('head')
<link rel="stylesheet" href="{{ asset('plugins/gliderjs/glider.min.css')}}" />
@endsection

@section('content')
{{-- Hero Section --}}
<section id="hero" class="lg:container mt-8 pt-16 mx-4">
    <div
        class="relative w-full rounded-[3rem] flex flex-col md:flex-row h-[520px] md:h-[550px] lg:h-[670px] 2xl:h-[796px] bg-no-repeat bg-cover bg-left-top bg-[#FFB60D] lg:bg-transparent bg-[url('../images/bg-hero.png')]">
        <div class="2xl:w-6/12 md:w-7/12 w-full">
            <div class="2xl:w-11/12">
                <div class="md:pl-6 lg:pl-14 px-4">
                    <h1
                        class="pt-6 md:pt-11 2xl:pt-28 text-4xl lg:text-[80px] font-display leading-normal font-black lg:leading-[6rem] text-white">
                        Cari Buku yang Ingin Anda Baca! </h1>
                    {{-- <form action="{{ url('list/search/book/') }}" method="GET">
                        @csrf
                        <div class="relative p-6 bg-primary/50 rounded-2xl">
                            <i class="fa fa-search absolute left-12 top-[52px] text-gray-400"></i>
                            <input type="text" alt="search" id="search" name="keyword" value="{{ $keyword ?? ''}}"
                                class="w-full py-6 pl-14 pr-6 bg-white text-black rounded-2xl !outline-none focus:ring-primary focus:border-primary"
                                placeholder="Cari buku..." />
                            <button type="button" id="clear-search2" class="absolute right-4 top-2.5 text-gray-400">
                                <i class="fa fa-times"></i>
                            </button>
                        </div>
                    </form> --}}
                    <form id="search-form" action="{{ url('list/search/book/') }}" method="GET">
                        @csrf
                        <div class="relative p-6 bg-primary/50 rounded-2xl">
                            <button type="submit" id="search-button"
                                class="absolute left-12 top-[48px] text-gray-400"><i class="fa fa-search"></i></button>
                            <input type="text" alt="search" id="search-banner" name="keyword"
                                value="{{ $keyword ?? ''}}"
                                class="w-full py-6 pl-14 pr-6 bg-white text-black rounded-2xl !outline-none focus:ring-primary focus:border-primary"
                                placeholder="Cari buku..." />


                        </div>
                    </form>


                    <p class="pt-4 text-white text-sm md:text-base">Untuk membaca, unduh dan buka aplikasi di bawah
                        ini:
                    </p>
                    <div class="mt-4 gap-2">
                        <a href="https://play.google.com/store/apps/details?id=app.bookubuku.id"
                            class="inline-block mb-3 mr-1.5 py-3 px-4 bg-white text-[#FFB60D] text-sm font-medium rounded-full hover:shadow-md"><i
                                class="fab fa-android mr-2"></i> Android</a>
                        <a href="https://tokobukupintar.com/reader-bookubuku-electron-win32-x64.zip"
                            class="inline-block mb-3 mr-1.5 py-3 px-4 bg-white text-[#FFB60D] text-sm font-medium rounded-full hover:shadow-md"><i
                                class="fab fa-windows mr-2"></i> Windows</a>
                        {{-- <div class="relative inline-block mr-1.5" data-twe-dropdown-ref>
                            <a class="flex items-center bg-white px-6 py-3 text-sm font-medium text-[#FFB60D] rounded-full hover:shadow-md"
                                href="#" type="button" id="dropdownWindows" data-twe-dropdown-toggle-ref
                                aria-expanded="false" data-twe-ripple-init data-twe-ripple-color="light">
                                <i class="fab fa-windows mr-2"></i> Windows
                                <span class="ms-1 w-4 [&>svg]:h-5 [&>svg]:w-5">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd"
                                            d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </span>
                            </a>
                            <ul class="absolute z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-base shadow-lg data-[twe-dropdown-show]:block"
                                aria-labelledby="dropdownWindows" data-twe-dropdown-menu-ref>
                                <li>
                                    <a class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm text-black hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline"
                                        href="https://tokobukupintar.com/reader-bookubuku-electron-win32-x64.zip"
                                        data-twe-dropdown-item-ref>Windows 32 bit</a>
                                </li>
                                <li>
                                    <a class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm text-black hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline"
                                        href="https://tokobukupintar.com/reader-bookubuku-electron-win32-x64.zip"
                                        data-twe-dropdown-item-ref>Windows 64 bit</a>
                                </li>
                                <li>
                                    <a class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm text-black hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline"
                                        href="https://tokobukupintar.com/reader-bookubuku-electron-win32-x64.zip"
                                        data-twe-dropdown-item-ref>Windows 11 arm</a>
                                </li>
                            </ul>
                        </div> --}}
                        {{-- <a href="#"
                            class="inline-block mb-3 mr-1.5 py-3 px-4 bg-white text-[#FFB60D] text-sm font-medium rounded-full hover:shadow-md"><i
                                class="fab fa-apple mr-2"></i> ios</a>
                        <div class="relative inline-block mb-3 mr-1.5" data-twe-dropdown-ref>
                            <a class="flex items-center bg-white px-6 py-3 text-sm font-medium text-[#FFB60D] rounded-full hover:shadow-md"
                                href="#" type="button" id="dropdownMacOS" data-twe-dropdown-toggle-ref
                                aria-expanded="false" data-twe-ripple-init data-twe-ripple-color="light">
                                <i class="fab fa-app-store-ios mr-2"></i> MacOS
                                <span class="ms-1 w-4 [&>svg]:h-5 [&>svg]:w-5">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd"
                                            d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </span>
                            </a>
                            <ul class="absolute z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-base shadow-lg data-[twe-dropdown-show]:block"
                                aria-labelledby="dropdownMacOS" data-twe-dropdown-menu-ref>
                                <li>
                                    <a class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm text-black hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline"
                                        href="#" data-twe-dropdown-item-ref>Macbook</a>
                                </li>
                                <li>
                                    <a class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm text-black hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline"
                                        href="#" data-twe-dropdown-item-ref>Macbook M1/M2</a>
                                </li>
                            </ul>
                        </div> --}}
                        {{-- <div class="relative inline-block mb-3 mr-1.5" data-twe-dropdown-ref>
                            <a class="flex items-center bg-white px-6 py-3 text-sm font-medium text-[#FFB60D] rounded-full hover:shadow-md"
                                href="#" type="button" id="dropdownMacOS" data-twe-dropdown-toggle-ref
                                aria-expanded="false" data-twe-ripple-init data-twe-ripple-color="light">
                                <i class="fab fa-ubuntu mr-2"></i> Linux
                                <span class="ms-1 w-4 [&>svg]:h-5 [&>svg]:w-5">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd"
                                            d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </span>
                            </a>
                            <ul class="absolute z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-base shadow-lg data-[twe-dropdown-show]:block"
                                aria-labelledby="dropdownMacOS" data-twe-dropdown-menu-ref>
                                <li>
                                    <a class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm text-black hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline"
                                        href="#" data-twe-dropdown-item-ref>.deb amd64</a>
                                </li>
                                <li>
                                    <a class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm text-black hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline"
                                        href="#" data-twe-dropdown-item-ref>.deb i386</a>
                                </li>
                                <li>
                                    <a class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm text-black hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline"
                                        href="#" data-twe-dropdown-item-ref>.deb arm base</a>
                                </li>
                            </ul>
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>
        <div class="2xl:w-6/12 md:w-6/12 w-full"><img src="{{ asset('images/hp-mains.png') }}" alt="hp"
                class="hidden md:block mt-12 md:mt-24 lg:mt-12 lg:h-[700px]" /></div>
        {{-- <a href="#how-to-read"
            class="cursor-pointer animate-bounce absolute flex items-center justify-center -bottom-12 lg:bottom-4 left-[22%] md:left-[38%] lg:left-[40%] py-4 px-6 bg-white rounded-full shadow-lg">
            <h3 class="text-black font-semibold">Cara Membaca</h3>
            <i class="ml-3 fa fa-arrow-down text-black"></i>
        </a> --}}
        <a href="#how-to-read"
            class="cursor-pointer animate-bounce absolute flex items-center justify-center -bottom-12 lg:bottom-4 left-[22%] md:left-[38%] lg:left-[40%] py-4 px-6 bg-white rounded-full shadow-lg"
            id="smooth-scroll-link">
            <h3 class="text-black font-semibold">Cara Membaca</h3>
            <i class="ml-3 fa fa-arrow-down text-black"></i>
        </a>
    </div>
</section>
{{-- End Hero Section --}}

{{-- About Section --}}
<section id="about" class="mt-16 relative">
    <img src="images/books.png" alt="buku" class="absolute left-0 top-0 w-44 md:w-72 lg:w-auto" />
    <div class="md:container mx-4 md:mx-auto">
        <div class="flex justify-end">
            <div class="mt-32 md:mt-10 lg:mt-28 md:w-7/12 lg:w-5/12 2xl:w-6/12 lg:pr-10 md:pr-0">
                <div class="flex justify-center">
                    <div class="relative w-8/12 md:w-full">
                        <h3
                            class="ml-3 md:ml-5 pt-2 relative font-display text-center md:text-left text-black font-black text-xl md:text-3xl z-10">
                            Tentang Aplikasi</h3>
                        <div
                            class="absolute w-10 h-10 md:w-12 md:h-12 left-6 md:left-0 top-0 bg-[#FFB60D] rounded-full">
                        </div>
                    </div>
                </div>
                <p class="mt-4 md:mt-8 text-black text-sm md:text-base text-center md:text-left">bacabuku.com
                    memungkinkan Anda membaca buku favorit saat bepergian. Atur buku dalam koleksi atau tag, jaga
                    perpustakaan Anda tetap teratur. Tidak ada yang ekstra, fungsionalitas dasar dengan antarmuka yang
                    segar, animasi, dan kecintaan pada detail.</p>
            </div>
        </div>
    </div>
</section>
{{-- End About Section --}}

{{-- Feature Section --}}
<section id="feature" class="lg:container mx-4">
    <div class="flex justify-center">
        <div class="mt-12 md:mt-10 lg:mt-44 md:w-6/12 lg:w-6/12 2xl:w-6/12 lg:pr-10 md:pr-0 text-center">
            <div class="flex justify-center">
                <div class="relative w-8/12 lg:w-5/12">
                    <h3 class="ml-3 pt-2 relative font-display text-black font-black text-xl md:text-3xl z-10">Fitur
                        Aplikasi</h3>
                    <div class="absolute w-10 h-10 md:w-12 md:h-12 left-10 md:left-2.5 top-0 bg-[#FFB60D] rounded-full">
                    </div>
                </div>
            </div>
            <p class="mt-4 md:mt-8 text-black text-sm md:text-base text-center">bacabuku.com memungkinkan Anda membaca
                buku favorit saat bepergian. Atur buku dalam koleksi atau tag, jaga perpustakaan Anda tetap teratur.</p>
        </div>
    </div>
    <div class="mt-10 flex lg:flex-row flex-col items-center justify-center">
        <div class="md:w-10/12 lg:w-5/12">
            <div class="grid grid-cols-2 gap-4 md:gap-6">
                <div class="p-2.5 md:p-4 flex flex-col items-center justify-center shadow-custom rounded-2xl">
                    <svg class="md:w-20" width="60" height="60" viewBox="0 0 96 96" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M44.9635 81.3089C62.5773 81.3089 76.8561 67.0301 76.8561 49.4162C76.8561 31.8024 62.5773 17.5236 44.9635 17.5236C27.3496 17.5236 13.0708 31.8024 13.0708 49.4162C13.0708 67.0301 27.3496 81.3089 44.9635 81.3089Z"
                            fill="#FFB60D" stroke="#020202" stroke-width="10.5672" stroke-linecap="round"
                            stroke-linejoin="round" />
                        <path d="M80.9284 85.3807L67.5381 71.9904" stroke="#020202" stroke-width="10.5672"
                            stroke-linecap="round" stroke-linejoin="round" />
                        <g filter="url(#filter0_b_3969_168)">
                            <circle cx="67.6667" cy="26" r="20" fill="#EBEBEB" fill-opacity="0.4" />
                        </g>
                        <defs>
                            <filter id="filter0_b_3969_168" x="43.6667" y="2" width="48" height="48"
                                filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                <feFlood flood-opacity="0" result="BackgroundImageFix" />
                                <feGaussianBlur in="BackgroundImageFix" stdDeviation="2" />
                                <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_3969_168" />
                                <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_3969_168"
                                    result="shape" />
                            </filter>
                        </defs>
                    </svg>
                    <h3 class="mt-3 font-display font-bold text-black text-lg md:text-xl text-center">Fitur Pencarian
                    </h3>
                    <p class="mt-3 text-black text-sm md:text-base text-center">bacabuku.com memungkinkan Anda membaca
                        buku favorit saat bepergian.</p>
                </div>
                <div class="p-4 flex flex-col items-center justify-center shadow-custom rounded-2xl">
                    <svg class="md:w-20 h-20" width="60" height="60" viewBox="0 0 96 96" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M7.28937 77.5502C7.86954 82.7426 12.02 86.891 17.2101 87.4915C23.1059 88.1736 29.1986 88.8477 35.4327 88.8477C41.6668 88.8477 47.7595 88.1736 53.6553 87.4915C58.8454 86.891 62.9959 82.7426 63.576 77.5502C64.2317 71.6823 64.8654 65.6189 64.8654 59.415C64.8654 53.2111 64.2317 47.1477 63.576 41.2798C62.9959 36.0874 58.8454 31.939 53.6553 31.3385C47.7595 30.6564 41.6668 29.9823 35.4327 29.9823C29.1986 29.9823 23.1059 30.6564 17.2101 31.3385C12.02 31.939 7.86954 36.0874 7.28937 41.2798C6.63374 47.1477 6 53.2111 6 59.415C6 65.6189 6.63374 71.6823 7.28937 77.5502Z"
                            fill="white" />
                        <path
                            d="M31.1034 30.083C26.3731 30.2961 21.7337 30.8147 17.2102 31.338C12.02 31.9385 7.86954 36.0869 7.28937 41.2794C6.63374 47.1473 6 53.2107 6 59.4145C6 65.6184 6.63374 71.6818 7.28937 77.5497C7.86954 82.7422 12.02 86.8906 17.2101 87.4911C23.1059 88.1732 29.1986 88.8473 35.4327 88.8473C41.6668 88.8473 47.7595 88.1732 53.6553 87.4911C58.8454 86.8906 62.9959 82.7423 63.576 77.5499C64.048 73.3258 64.5086 69.0005 64.7296 64.5944"
                            stroke="#020202" stroke-width="8.11373" stroke-linecap="round" />
                        <path
                            d="M56.7186 24.0717L36.7148 46.7694L33.9743 59.6586C33.5334 61.7325 35.6952 63.6949 37.7197 63.0584L50.5464 59.0261L71.2081 37.2851C74.6397 33.6742 74.041 27.6347 69.8872 23.9605C65.8306 20.3725 59.9349 20.4223 56.7186 24.0717Z"
                            fill="#FFB60D" stroke="#020202" stroke-width="8.11373" stroke-linecap="round"
                            stroke-linejoin="round" />
                        <g filter="url(#filter0_b_3969_170)">
                            <circle cx="70.844" cy="30" r="20" fill="#EBEBEB" fill-opacity="0.4" />
                        </g>
                        <defs>
                            <filter id="filter0_b_3969_170" x="46.844" y="6" width="48" height="48"
                                filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                <feFlood flood-opacity="0" result="BackgroundImageFix" />
                                <feGaussianBlur in="BackgroundImageFix" stdDeviation="2" />
                                <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_3969_170" />
                                <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_3969_170"
                                    result="shape" />
                            </filter>
                        </defs>
                    </svg>
                    <h3 class="mt-3 font-display font-bold text-black text-lg md:text-xl text-center">Fitur Anotasi</h3>
                    <p class="mt-3 text-black text-sm md:text-base text-center">bacabuku.com memungkinkan Anda membaca
                        buku favorit saat bepergian.</p>
                </div>
                <div class="p-4 flex flex-col items-center justify-center shadow-custom rounded-2xl">
                    <svg class="md:w-20 h-20" width="60" height="60" viewBox="0 0 96 96" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M77.1724 70.1696C77.6215 63.0138 77.8576 55.5985 77.8576 48.0001C77.8576 44.9228 77.8189 41.8754 77.743 38.8632C77.6896 36.7471 77.0033 34.6906 75.7508 32.9841C70.9766 26.4801 67.1729 22.4366 60.9047 17.5989C59.1822 16.2695 57.0684 15.5481 54.893 15.5006C52.7117 15.4529 50.4338 15.4287 48.0005 15.4287C40.6342 15.4287 34.6921 15.6506 28.5428 16.0734C23.3117 16.433 19.157 20.5975 18.8285 25.8307C18.3794 32.9865 18.1433 40.4018 18.1433 48.0001C18.1433 55.5985 18.3794 63.0137 18.8285 70.1696C19.157 75.4028 23.3117 79.5672 28.5428 79.9269C34.6921 80.3497 40.6342 80.5716 48.0005 80.5716C55.3668 80.5716 61.3089 80.3497 67.4581 79.9269C72.6893 79.5672 76.8439 75.4028 77.1724 70.1696Z"
                            fill="#FFB60D" stroke="#020202" stroke-width="8.14286" />
                        <path
                            d="M31.7146 15.8726V46.8758C31.7146 49.294 34.6383 50.505 36.3482 48.7951L42.5717 42.5716L48.7953 48.7951C50.5052 50.505 53.4289 49.294 53.4289 46.8758V15.4724C51.6951 15.4434 49.8948 15.4287 48.0003 15.4287C41.9046 15.4287 36.7842 15.5806 31.7146 15.8726Z"
                            fill="white" stroke="#020202" stroke-width="8.14286" stroke-linejoin="round" />
                        <g filter="url(#filter0_b_3969_173)">
                            <circle cx="68.5359" cy="23.5361" r="20" fill="#EBEBEB" fill-opacity="0.4" />
                        </g>
                        <defs>
                            <filter id="filter0_b_3969_173" x="44.5359" y="-0.463867" width="48" height="48"
                                filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                <feFlood flood-opacity="0" result="BackgroundImageFix" />
                                <feGaussianBlur in="BackgroundImageFix" stdDeviation="2" />
                                <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_3969_173" />
                                <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_3969_173"
                                    result="shape" />
                            </filter>
                        </defs>
                    </svg>

                    <h3 class="mt-3 font-display font-bold text-black text-lg md:text-xl text-center">Fitur Bookmark
                    </h3>
                    <p class="mt-3 text-black text-sm md:text-base text-center">bacabuku.com memungkinkan Anda membaca
                        buku favorit saat bepergian.</p>
                </div>
                <div class="p-4 flex flex-col items-center justify-center shadow-custom rounded-2xl">
                    <svg class="md:w-20" width="60" height="60" viewBox="0 0 96 96" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M26.4296 48.0042C26.9126 38.5944 28.7107 26.3211 33.2632 17.3076C33.9598 15.9284 35.2934 15.0062 36.8273 14.8205C39.7655 14.4647 44.7446 14.0714 51.3275 14.0714C56.0927 14.0714 60.2992 14.4262 63.5578 14.8545C66.8424 15.2863 68.5622 18.7069 67.2514 21.7494L62.0838 33.7447C66.6102 33.9125 70.1419 34.27 73.4254 34.9392C76.4408 35.5538 77.9375 38.7724 76.3954 41.4356C70.6431 51.369 57.0663 67.7314 37.442 81.9286C37.442 71.3155 39.3057 64.0114 42.5716 53.4286H31.7145C28.7163 53.4286 26.2759 50.9984 26.4296 48.0042Z"
                            fill="#FFB60D" stroke="#020202" stroke-width="8.14286" stroke-linecap="round"
                            stroke-linejoin="round" />
                        <g filter="url(#filter0_b_3969_174)">
                            <circle cx="68" cy="24" r="20" fill="#EBEBEB" fill-opacity="0.4" />
                        </g>
                        <g filter="url(#filter1_b_3969_174)">
                            <circle cx="68" cy="24" r="20" fill="#EBEBEB" fill-opacity="0.4" />
                        </g>
                        <defs>
                            <filter id="filter0_b_3969_174" x="44" y="0" width="48" height="48"
                                filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                <feFlood flood-opacity="0" result="BackgroundImageFix" />
                                <feGaussianBlur in="BackgroundImageFix" stdDeviation="2" />
                                <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_3969_174" />
                                <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_3969_174"
                                    result="shape" />
                            </filter>
                            <filter id="filter1_b_3969_174" x="44" y="0" width="48" height="48"
                                filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                <feFlood flood-opacity="0" result="BackgroundImageFix" />
                                <feGaussianBlur in="BackgroundImageFix" stdDeviation="2" />
                                <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_3969_174" />
                                <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_3969_174"
                                    result="shape" />
                            </filter>
                        </defs>
                    </svg>
                    <h3 class="mt-3 font-display font-bold text-black text-lg md:text-xl text-center">Kecepatan Akses
                    </h3>
                    <p class="mt-3 text-black text-sm md:text-base text-center">bacabuku.com memungkinkan Anda membaca
                        buku favorit saat bepergian.</p>
                </div>
            </div>
        </div>
        <div class="mt-4 lg:mt-0 w-10/12 md:w-6/12">
            <img src="images/features.png" alt="feature" class="w-full" />
        </div>
    </div>
</section>
<!-- End Feature Section -->

{{-- How to Read Section --}}
<section id="how-to-read" class="lg:container mx-4 mt-10">
    <div class="mt-10 flex flex-col lg:flex-row items-center justify-center">
        <div class="hidden lg:block w-10/12 md:w-6/12">
            <img src="images/how-to-read.png" alt="how to read" class="w-full" />
        </div>
        <div class="md:w-10/12 lg:w-5/12">
            <div class="flex justify-start">
                <div>
                    <div class="flex justify-center md:justify-start">
                        <div class="relative">
                            <h3 class="ml-6 pt-2 relative font-display text-black font-black text-xl md:text-3xl z-10">
                                Cara Membaca</h3>
                            <div class="absolute w-10 h-10 md:w-12 md:h-12 left-2.5 top-0 bg-[#FFB60D] rounded-full">
                            </div>
                        </div>
                    </div>
                    <p class="mt-4 md:mt-8 text-black text-sm md:text-base text-center md:text-left">bacabuku.com
                        memungkinkan Anda membaca buku favorit saat bepergian. Atur buku dalam koleksi atau tag, jaga
                        perpustakaan Anda tetap teratur. Tidak ada yang ekstra, fungsionalitas dasar dengan antarmuka
                        yang segar, animasi, dan kecintaan pada detail.</p>
                </div>
            </div>
            <div class="mt-10 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-x-4 gap-y-10">
                <div class="p-4 md:p-6 items-center shadow-custom rounded-2xl relative">
                    <div
                        class="absolute flex items-center justify-center w-12 h-12 -top-6 left-5 bg-[#FFB60D] shadow-md rounded-full text-2xl text-black font-display font-black">
                        1</div>
                    <h3
                        class="mt-2 md:mt-4 font-display font-bold text-black text-lg md:text-xl text-center md:text-left">
                        Unduh Aplikasi</h3>
                    <p class="text-black text-sm md:text-base text-center md:text-left">Unduh aplikasi bacabuku.com di
                        playsore, app store.</p>
                </div>
                <div class="p-4 md:p-6 items-center shadow-custom rounded-2xl relative">
                    <div
                        class="absolute flex items-center justify-center w-12 h-12 -top-6 left-5 bg-[#FFB60D] shadow-md rounded-full text-2xl text-black font-display font-black">
                        2</div>
                    <h3
                        class="mt-2 md:mt-4 font-display font-bold text-black text-lg md:text-xl text-center md:text-left">
                        Beli Buku</h3>
                    <p class="text-black text-sm md:text-base text-center md:text-left">Beli buku yang ingin anda baca
                        di bacabuku.com.</p>
                </div>
                <div class="p-4 md:p-6 items-center shadow-custom rounded-2xl relative">
                    <div
                        class="absolute flex items-center justify-center w-12 h-12 -top-6 left-5 bg-[#FFB60D] shadow-md rounded-full text-2xl text-black font-display font-black">
                        3</div>
                    <h3
                        class="mt-2 md:mt-4 font-display font-bold text-black text-lg md:text-xl text-center md:text-left">
                        Baca Buku</h3>
                    <p class="text-black text-sm md:text-base text-center md:text-left">bacabuku.com memungkinkan Anda
                        membaca buku favorit saat bepergian.</p>
                </div>
            </div>
        </div>
    </div>
</section>
{{-- End How to Read Section --}}

{{-- Category Section --}}
<section id="category" class="mt-6 md:mt-10 lg:container mx-4">
    <h3 class="text-black font-semibold text-lg md:text-xl mb-4">Kategori</h3>
    <div class="grid lg:grid-cols-6 md:grid-cols-4 grid-cols-2 gap-4 lg:gap-6">
        <a href="{{ url('list/kategori/' . $getKategori[0]->id_kategori . '/' . $slug_kategori0) }}"
            class="relative flex text-sm text-center md:text-base items-center justify-center line-clamp-2 h-16 py-5 px-4 bg-gradient-to-tr from-[#55C9FA] to-[#9BE0FF] rounded-2xl text-white font-medium hover:shadow-custom before:absolute before:w-full before:h-14 before:top-0 before:left-0 before:bg-no-repeat before:bg-center before:bg-cover before:bg-[url('../images/bg-button.png')]"
            data-twe-ripple-init data-twe-ripple-color="light">
            <span class="line-clamp-2">{{ $getKategori[0]->kategori }}</span>
        </a>
        <a href="{{ url('list/kategori/' . $getKategori[1]->id_kategori . '/' . $slug_kategori1) }}"
            class="relative flex text-sm text-center md:text-base items-center justify-center line-clamp-2 h-16 py-5 px-4 bg-gradient-to-tr from-[#47D9AF] to-[#53E6BF] rounded-2xl text-white font-medium hover:shadow-custom before:absolute before:w-full before:h-14 before:top-0 before:left-0 before:bg-no-repeat before:bg-center before:bg-cover before:bg-[url('../images/bg-button.png')]"
            data-twe-ripple-init data-twe-ripple-color="light"><span class="line-clamp-2">{{ $getKategori[1]->kategori
                }}</span></a>
        <a href="{{ url('list/kategori/' . $getKategori[2]->id_kategori . '/' . $slug_kategori2) }}"
            class="relative flex text-sm text-center md:text-base items-center justify-center line-clamp-2 h-16 py-5 px-4 bg-gradient-to-tr from-[#6842FF] to-[#8A6CFF] rounded-2xl text-white font-medium hover:shadow-custom before:absolute before:w-full before:h-14 before:top-0 before:left-0 before:bg-no-repeat before:bg-center before:bg-cover before:bg-[url('../images/bg-button.png')]"
            data-twe-ripple-init data-twe-ripple-color="light"><span class="line-clamp-2">{{ $getKategori[2]->kategori
                }}</span></a>
        <a href="{{ url('list/kategori/' . $getKategori[3]->id_kategori . '/' . $slug_kategori3) }}"
            class="relative flex text-sm text-center md:text-base items-center justify-center line-clamp-2 h-16 py-6 px-4 bg-gradient-to-tr from-[#EB608B] to-[#F76A96] rounded-2xl text-white font-medium hover:shadow-custom before:absolute before:w-full before:h-14 before:top-0 before:left-0 before:bg-no-repeat before:bg-center before:bg-cover before:bg-[url('../images/bg-button.png')]"
            data-twe-ripple-init data-twe-ripple-color="light"><span class="line-clamp-2">{{ $getKategori[3]->kategori
                }}</span></a>
        <a href="{{ url('list/kategori/' . $getKategori[4]->id_kategori . '/' . $slug_kategori4) }}"
            class="relative flex text-sm text-center md:text-base items-center justify-center line-clamp-2 h-16 py-5 px-4 bg-gradient-to-tr from-[#367AFF] to-[#6FA0FF] rounded-2xl text-white font-medium hover:shadow-custom before:absolute before:w-full before:h-14 before:top-0 before:left-0 before:bg-no-repeat before:bg-center before:bg-cover before:bg-[url('../images/bg-button.png')]"
            data-twe-ripple-init data-twe-ripple-color="light"><span class="line-clamp-2">{{ $getKategori[4]->kategori
                }}</span></a>
        <a href="{{ url('list/kategori/' . $getKategori[5]->id_kategori . '/' . $slug_kategori5) }}"
            class="relative flex text-sm text-center md:text-base items-center justify-center line-clamp-2 h-16 py-5 px-4 bg-gradient-to-tr from-[#FFA502] to-[#FFB631] rounded-2xl text-white font-medium hover:shadow-custom before:absolute before:w-full before:h-14 before:top-0 before:left-0 before:bg-no-repeat before:bg-center before:bg-cover before:bg-[url('../images/bg-button.png')]"
            data-twe-ripple-init data-twe-ripple-color="light"><span class="line-clamp-2">{{ $getKategori[5]->kategori
                }}</span></a>
        <a href="{{ url('list/kategori/' . $getKategori[6]->id_kategori . '/' . $slug_kategori6) }}"
            class="relative flex text-sm text-center md:text-base items-center justify-center line-clamp-2 h-16 py-5 px-4 bg-gradient-to-tr from-[#FFBE77] to-[#FFCA91] rounded-2xl text-white font-medium hover:shadow-custom before:absolute before:w-full before:h-14 before:top-0 before:left-0 before:bg-no-repeat before:bg-center before:bg-cover before:bg-[url('../images/bg-button.png')]"
            data-twe-ripple-init data-twe-ripple-color="light"><span class="line-clamp-2">{{ $getKategori[6]->kategori
                }}</span></a>
        <a href="{{ url('list/kategori/' . $getKategori[7]->id_kategori . '/' . $slug_kategori7) }}"
            class="relative flex text-sm text-center md:text-base items-center justify-center line-clamp-2 h-16 py-5 px-4 bg-gradient-to-tr from-[#FF874B] to-[#FF9965] rounded-2xl text-white font-medium hover:shadow-custom before:absolute before:w-full before:h-14 before:top-0 before:left-0 before:bg-no-repeat before:bg-center before:bg-cover before:bg-[url('../images/bg-button.png')]"
            data-twe-ripple-init data-twe-ripple-color="light"><span class="line-clamp-2">{{ $getKategori[7]->kategori
                }}</span></a>
        <a href="{{ url('list/kategori/' . $getKategori[8]->id_kategori . '/' . $slug_kategori8) }}"
            class="relative flex text-sm text-center md:text-base items-center justify-center line-clamp-2 h-16 py-5 px-4 bg-gradient-to-tr from-[#0EC8DB] to-[#12D7E4] rounded-2xl text-white font-medium hover:shadow-custom before:absolute before:w-full before:h-14 before:top-0 before:left-0 before:bg-no-repeat before:bg-center before:bg-cover before:bg-[url('../images/bg-button.png')]"
            data-twe-ripple-init data-twe-ripple-color="light"><span class="line-clamp-2">{{ $getKategori[8]->kategori
                }}</span></a>
        <a href="{{ url('list/kategori/' . $getKategori[9]->id_kategori . '/' . $slug_kategori9) }}"
            class="relative flex text-sm text-center md:text-base items-center justify-center line-clamp-2 h-16 py-5 px-4 bg-gradient-to-tr from-[#20334D] to-[#40587A] rounded-2xl text-white font-medium hover:shadow-custom before:absolute before:w-full before:h-14 before:top-0 before:left-0 before:bg-no-repeat before:bg-center before:bg-cover before:bg-[url('../images/bg-button.png')]"
            data-twe-ripple-init data-twe-ripple-color="light"><span class="line-clamp-2">{{ $getKategori[9]->kategori
                }}</span></a>
        <a href="{{ url('list/kategori/' . $getKategori[10]->id_kategori . '/' . $slug_kategori10) }}"
            class="relative flex text-sm text-center md:text-base items-center justify-center line-clamp-2 h-16 py-5 px-4 bg-gradient-to-tr from-[#5D88D0] to-[#85A5D9] rounded-2xl text-white font-medium hover:shadow-custom before:absolute before:w-full before:h-14 before:top-0 before:left-0 before:bg-no-repeat before:bg-center before:bg-cover before:bg-[url('../images/bg-button.png')]"
            data-twe-ripple-init data-twe-ripple-color="light"><span class="line-clamp-2">{{ $getKategori[10]->kategori
                }}</span></a>
        <a href="{{ route('category') }}"
            class="relative flex text-sm text-center md:text-base items-center justify-center gap-2 line-clamp-2 h-16 py-5 px-4 bg-gradient-to-tr from-[#A3D513] to-[#B3E71D] rounded-2xl text-white font-medium hover:shadow-custom before:absolute before:w-full before:h-14 before:top-0 before:left-0 before:bg-no-repeat before:bg-center before:bg-cover before:bg-[url('../images/bg-button.png')]"
            data-twe-ripple-init data-twe-ripple-color="light">Selengkapnya <i
                class="fa fa-arrow-right text-white"></i></a>
    </div>
</section>
{{-- End Category Section --}}

{{-- Latest Book Section --}}
<section id="latest-books" class="lg:container mt-6 md:mt-10 ms-4">
    <div class="mb-4 me-4 md:me-8 lg:me-0 flex items-center justify-between">
        <h3 class="font-semibold text-black text-lg md:text-xl">Buku Terbaru</h3>
        {{-- <a href="#" class="text-primary text-sm font-medium hover:text-primary-dark">Selengkapnya</a> --}}
    </div>
    <div id="glider-contain-1" class="glider-contain">
        <div class="glider" id="glider-terbaru">
        </div>
        {{-- <button aria-label="Previous"
            class="glider-prev bg-white rounded-full w-10 h-10 leading-[5px] hidden lg:block"><i
                class="fa fa-chevron-left text-sm"></i></button>
        <button aria-label="Next" class="glider-next bg-white rounded-full w-10 h-10 leading-[5px] hidden lg:block"><i
                class="fa fa-chevron-right text-sm"></i></button> --}}
    </div>
</section>
{{-- End Latest Book Section --}}

{{-- Publisher Section --}}
<section id="publisher" class="lg:container mt-6 md:mt-10 mx-4">
    <h3 class="text-black font-semibold text-lg md:text-xl mb-4">Penerbit</h3>
    <div class="grid lg:grid-cols-6 md:grid-cols-4 grid-cols-2 gap-4 md:gap-6">
        <a href="{{ url('list/penerbit/' . $getPenerbit[0]->kode_penerbit . '/' . $slug_penerbit0) }}"
            class="relative flex text-sm text-center capitalize md:text-base items-center justify-center line-clamp-2 h-16 py-5 px-4 bg-gradient-to-tr from-[#FFA502] to-[#FFB631] rounded-2xl text-white font-medium hover:shadow-custom before:absolute before:w-full before:h-14 before:bottom-0 before:left-0 before:bg-no-repeat before:bg-center before:bg-cover before:bg-[url('../images/bg-button-2a.png')] after:absolute after:w-full after:h-14 after:top-0 after:right-0 after:bg-no-repeat after:bg-center after:bg-cover after:bg-[url('../images/bg-button-2b.png')]"
            data-twe-ripple-init data-twe-ripple-color="light"><span class="line-clamp-2">{{
                $getPenerbit[0]->penerbit
                }}</span></a>
        <a href="{{ url('list/penerbit/' . $getPenerbit[1]->kode_penerbit . '/' . $slug_penerbit1) }}"
            class="relative flex text-sm text-center capitalize md:text-base items-center justify-center line-clamp-2 h-16 py-5 px-4 bg-gradient-to-tr from-[#47D9AF] to-[#53E6BF] rounded-2xl text-white font-medium hover:shadow-custom before:absolute before:w-full before:h-14 before:bottom-0 before:left-0 before:bg-no-repeat before:bg-center before:bg-cover before:bg-[url('../images/bg-button-2a.png')] after:absolute after:w-full after:h-14 after:top-0 after:right-0 after:bg-no-repeat after:bg-center after:bg-cover after:bg-[url('../images/bg-button-2b.png')]"
            data-twe-ripple-init data-twe-ripple-color="light"><span class="line-clamp-2">{{
                $getPenerbit[1]->penerbit
                }}</span></a>
        <a href="{{ url('list/penerbit/' . $getPenerbit[2]->kode_penerbit . '/' . $slug_penerbit2) }}"
            class="relative flex text-sm text-center capitalize md:text-base items-center justify-center line-clamp-2 h-16 py-5 px-4 bg-gradient-to-tr from-[#5D88D0] to-[#85A5D9] rounded-2xl text-white font-medium hover:shadow-custom before:absolute before:w-full before:h-14 before:bottom-0 before:left-0 before:bg-no-repeat before:bg-center before:bg-cover before:bg-[url('../images/bg-button-2a.png')] after:absolute after:w-full after:h-14 after:top-0 after:right-0 after:bg-no-repeat after:bg-center after:bg-cover after:bg-[url('../images/bg-button-2b.png')]"
            data-twe-ripple-init data-twe-ripple-color="light"><span class="line-clamp-2">{{
                $getPenerbit[2]->penerbit
                }}</span></a>
        <a href="{{ url('list/penerbit/' . $getPenerbit[3]->kode_penerbit . '/' . $slug_penerbit3) }}"
            class="relative flex text-sm text-center capitalize md:text-base items-center justify-center line-clamp-2 h-16 py-5 px-4 bg-gradient-to-tr from-[#6842FF] to-[#8A6CFF] rounded-2xl text-white font-medium hover:shadow-custom before:absolute before:w-full before:h-14 before:bottom-0 before:left-0 before:bg-no-repeat before:bg-center before:bg-cover before:bg-[url('../images/bg-button-2a.png')] after:absolute after:w-full after:h-14 after:top-0 after:right-0 after:bg-no-repeat after:bg-center after:bg-cover after:bg-[url('../images/bg-button-2b.png')]"
            data-twe-ripple-init data-twe-ripple-color="light"><span class="line-clamp-2">{{
                $getPenerbit[3]->penerbit
                }}</span></a>
        <a href="{{ url('list/penerbit/' . $getPenerbit[4]->kode_penerbit . '/' . $slug_penerbit4) }}"
            class="relative flex text-sm text-center capitalize md:text-base items-center justify-center line-clamp-2 h-16 py-6 px-4 bg-gradient-to-tr from-[#EB608B] to-[#F76A96] rounded-2xl text-white font-medium hover:shadow-custom before:absolute before:w-full before:h-14 before:bottom-0 before:left-0 before:bg-no-repeat before:bg-center before:bg-cover before:bg-[url('../images/bg-button-2a.png')] after:absolute after:w-full after:h-14 after:top-0 after:right-0 after:bg-no-repeat after:bg-center after:bg-cover after:bg-[url('../images/bg-button-2b.png')]"
            data-twe-ripple-init data-twe-ripple-color="light"><span class="line-clamp-2">{{
                $getPenerbit[4]->penerbit
                }}</span></a>
        <a href="{{ url('list/penerbit/' . $getPenerbit[5]->kode_penerbit . '/' . $slug_penerbit5) }}"
            class="relative flex text-sm text-center capitalize md:text-base items-center justify-center line-clamp-2 h-16 py-5 px-4 bg-gradient-to-tr from-[#367AFF] to-[#6FA0FF] rounded-2xl text-white font-medium hover:shadow-custom before:absolute before:w-full before:h-14 before:bottom-0 before:left-0 before:bg-no-repeat before:bg-center before:bg-cover before:bg-[url('../images/bg-button-2a.png')] after:absolute after:w-full after:h-14 after:top-0 after:right-0 after:bg-no-repeat after:bg-center after:bg-cover after:bg-[url('../images/bg-button-2b.png')]"
            data-twe-ripple-init data-twe-ripple-color="light"><span class="line-clamp-2">{{
                $getPenerbit[5]->penerbit
                }}</span></a>
        <a href="{{ url('list/penerbit/' . $getPenerbit[6]->kode_penerbit . '/' . $slug_penerbit6) }}"
            class="relative flex text-sm text-center capitalize md:text-base items-center justify-center line-clamp-2 h-16 py-5 px-4 bg-gradient-to-tr from-[#55C9FA] to-[#9BE0FF] rounded-2xl text-white font-medium hover:shadow-custom before:absolute before:w-full before:h-14 before:bottom-0 before:left-0 before:bg-no-repeat before:bg-center before:bg-cover before:bg-[url('../images/bg-button-2a.png')] after:absolute after:w-full after:h-14 after:top-0 after:right-0 after:bg-no-repeat after:bg-center after:bg-cover after:bg-[url('../images/bg-button-2b.png')]"
            data-twe-ripple-init data-twe-ripple-color="light"><span class="line-clamp-2">{{
                $getPenerbit[6]->penerbit
                }}</span></a>
        <a href="{{ url('list/penerbit/' . $getPenerbit[7]->kode_penerbit . '/' . $slug_penerbit7) }}"
            class="relative flex text-sm text-center capitalize md:text-base items-center justify-center line-clamp-2 h-16 py-5 px-4 bg-gradient-to-tr from-[#20334D] to-[#40587A] rounded-2xl text-white font-medium hover:shadow-custom before:absolute before:w-full before:h-14 before:bottom-0 before:left-0 before:bg-no-repeat before:bg-center before:bg-cover before:bg-[url('../images/bg-button-2a.png')] after:absolute after:w-full after:h-14 after:top-0 after:right-0 after:bg-no-repeat after:bg-center after:bg-cover after:bg-[url('../images/bg-button-2b.png')]"
            data-twe-ripple-init data-twe-ripple-color="light"><span class="line-clamp-2">{{
                $getPenerbit[7]->penerbit
                }}</span></a>
        <a href="{{ url('list/penerbit/' . $getPenerbit[8]->kode_penerbit . '/' . $slug_penerbit8) }}"
            class="relative flex text-sm text-center capitalize md:text-base items-center justify-center line-clamp-2 h-16 py-5 px-4 bg-gradient-to-tr from-[#FFBE77] to-[#FFCA91] rounded-2xl text-white font-medium hover:shadow-custom before:absolute before:w-full before:h-14 before:bottom-0 before:left-0 before:bg-no-repeat before:bg-center before:bg-cover before:bg-[url('../images/bg-button-2a.png')] after:absolute after:w-full after:h-14 after:top-0 after:right-0 after:bg-no-repeat after:bg-center after:bg-cover after:bg-[url('../images/bg-button-2b.png')]"
            data-twe-ripple-init data-twe-ripple-color="light"><span class="line-clamp-2">{{
                $getPenerbit[8]->penerbit
                }}</span></a>
        <a href="{{ url('list/penerbit/' . $getPenerbit[9]->kode_penerbit . '/' . $slug_penerbit9) }}"
            class="relative flex text-sm text-center capitalize md:text-base items-center justify-center line-clamp-2 h-16 py-5 px-4 bg-gradient-to-tr from-[#A3D513] to-[#B3E71D] rounded-2xl text-white font-medium hover:shadow-custom before:absolute before:w-full before:h-14 before:bottom-0 before:left-0 before:bg-no-repeat before:bg-center before:bg-cover before:bg-[url('../images/bg-button-2a.png')] after:absolute after:w-full after:h-14 after:top-0 after:right-0 after:bg-no-repeat after:bg-center after:bg-cover after:bg-[url('../images/bg-button-2b.png')]"
            data-twe-ripple-init data-twe-ripple-color="light"><span class="line-clamp-2">{{
                $getPenerbit[9]->penerbit
                }}</span></a>
        <a href="{{ url('list/penerbit/' . $getPenerbit[10]->kode_penerbit . '/' . $slug_penerbit10) }}"
            class="relative flex text-sm text-center capitalize md:text-base items-center justify-center line-clamp-2 h-16 py-5 px-4 bg-gradient-to-tr from-[#0EC8DB] to-[#12D7E4] rounded-2xl text-white font-medium hover:shadow-custom before:absolute before:w-full before:h-14 before:bottom-0 before:left-0 before:bg-no-repeat before:bg-center before:bg-cover before:bg-[url('../images/bg-button-2a.png')] after:absolute after:w-full after:h-14 after:top-0 after:right-0 after:bg-no-repeat after:bg-center after:bg-cover after:bg-[url('../images/bg-button-2b.png')]"
            data-twe-ripple-init data-twe-ripple-color="light"><span class="line-clamp-2">{{
                $getPenerbit[10]->penerbit
                }}</span></a>
        <a href="{{ route('penerbit') }}"
            class="relative flex text-sm text-center capitalize md:text-base items-center justify-center gap-2 line-clamp-2 h-16 py-5 px-4 bg-gradient-to-tr from-[#FF874B] to-[#FF9965] rounded-2xl text-white font-medium hover:shadow-custom before:absolute before:w-full before:h-14 before:bottom-0 before:left-0 before:bg-no-repeat before:bg-center before:bg-cover before:bg-[url('../images/bg-button-2a.png')] after:absolute after:w-full after:h-14 after:top-0 after:right-0 after:bg-no-repeat after:bg-center after:bg-cover after:bg-[url('../images/bg-button-2b.png')]"
            data-twe-ripple-init data-twe-ripple-color="light">Selengkapnya <i
                class="fa fa-arrow-right text-white"></i></a>
    </div>


</section>
{{-- End Publisher Section --}}

{{-- Popular Books Section --}}
<section id="div-terpopuler" class="lg:container mt-6 md:mt-10 ms-4">
    <div class="mb-4 me-4 md:me-8 lg:me-0 flex items-center justify-between">
        <h3 class="font-semibold text-black text-lg md:text-xl">Buku Terpopuler</h3>
        {{-- <a href="#" class="text-primary text-sm font-medium hover:text-primary-dark">Selengkapnya</a> --}}
    </div>
    <div class="glider-contain">
        <div class="glider" id="glider-terpopuler">
        </div>
        {{-- <button aria-label="Previous"
            class="glider-prev bg-white rounded-full w-10 h-10 leading-[5px] hidden lg:block"><i
                class="fa fa-chevron-left text-sm"></i></button>
        <button aria-label="Next" class="glider-next bg-white rounded-full w-10 h-10 leading-[5px] hidden lg:block"><i
                class="fa fa-chevron-right text-sm"></i></button> --}}
    </div>
</section>
{{-- End Popular Books Section --}}

{{-- Download Section --}}
<section id="download"
    class="mt-8 md:mt-24 lg:container mx-4 mb-4 md:mb-10 md:h-80 relative bg-[#FFB60D] rounded-3xl flex">
    <div class="overflow-hidden relative">
        <div class="p-4 md:p-10 relative z-10">
            <h2 class="md:mt-12 text-3xl font-display font-black text-white">Unduh aplikasi bacabuku.com
                sekarang!</h2>
            <p class="mt-2 text-white text-sm">Jadilah orang pertama yang menjelajahi salah satu aplikasi membaca
                terbaik</p>
            <div class="mt-6 gap-2">
                <a href="https://play.google.com/store/apps/details?id=app.bookubuku.id"
                    class="inline-block mb-3 mr-1.5 py-3 px-4 bg-white text-[#FFB60D] text-sm font-medium rounded-full hover:shadow-md"><i
                        class="fab fa-android mr-2"></i> Android</a>
                <a href="https://tokobukupintar.com/reader-bookubuku-electron-win32-x64.zip"
                    class="inline-block mb-3 mr-1.5 py-3 px-4 bg-white text-[#FFB60D] text-sm font-medium rounded-full hover:shadow-md"><i
                        class="fab fa-windows mr-2"></i> Windows</a>
                {{-- <div class="relative inline-block mr-1.5" data-twe-dropdown-ref>
                    <a class="flex items-center bg-white px-6 py-3 text-sm font-medium text-[#FFB60D] rounded-full hover:shadow-md"
                        href="#" type="button" id="dropdownWindows" data-twe-dropdown-toggle-ref aria-expanded="false"
                        data-twe-ripple-init data-twe-ripple-color="light">
                        <i class="fab fa-windows mr-2"></i> Windows
                        <span class="ms-1 w-4 [&>svg]:h-5 [&>svg]:w-5">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd"
                                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                                    clip-rule="evenodd" />
                            </svg>
                        </span>
                    </a>
                    <ul class="absolute z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-base shadow-lg data-[twe-dropdown-show]:block"
                        aria-labelledby="dropdownWindows" data-twe-dropdown-menu-ref>
                        <li>
                            <a class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm text-black hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline"
                                href="https://tokobukupintar.com/reader-bookubuku-electron-win32-x64.zip"
                                data-twe-dropdown-item-ref>Windows 32 bit</a>
                        </li>
                        <li>
                            <a class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm text-black hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline"
                                href="https://tokobukupintar.com/reader-bookubuku-electron-win32-x64.zip"
                                data-twe-dropdown-item-ref>Windows 64 bit</a>
                        </li>
                        <li>
                            <a class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm text-black hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline"
                                href="https://tokobukupintar.com/reader-bookubuku-electron-win32-x64.zip"
                                data-twe-dropdown-item-ref>Windows 11 arm</a>
                        </li>
                    </ul>
                </div> --}}
                {{-- <a href="#"
                    class="inline-block mb-3 mr-1.5 py-3 px-4 bg-white text-[#FFB60D] text-sm font-medium rounded-full hover:shadow-md"><i
                        class="fab fa-apple mr-2"></i> ios</a>
                <div class="relative inline-block mb-3 mr-1.5" data-twe-dropdown-ref>
                    <a class="flex items-center bg-white px-6 py-3 text-sm font-medium text-[#FFB60D] rounded-full hover:shadow-md"
                        href="#" type="button" id="dropdownMacOS" data-twe-dropdown-toggle-ref aria-expanded="false"
                        data-twe-ripple-init data-twe-ripple-color="light">
                        <i class="fab fa-app-store-ios mr-2"></i> MacOS
                        <span class="ms-1 w-4 [&>svg]:h-5 [&>svg]:w-5">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd"
                                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                                    clip-rule="evenodd" />
                            </svg>
                        </span>
                    </a>
                    <ul class="absolute z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-base shadow-lg data-[twe-dropdown-show]:block"
                        aria-labelledby="dropdownMacOS" data-twe-dropdown-menu-ref>
                        <li>
                            <a class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm text-black hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline"
                                href="#" data-twe-dropdown-item-ref>Macbook</a>
                        </li>
                        <li>
                            <a class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm text-black hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline"
                                href="#" data-twe-dropdown-item-ref>Macbook M1/M2</a>
                        </li>
                    </ul>
                </div> --}}
                {{-- <div class="relative inline-block mb-3 mr-1.5" data-twe-dropdown-ref>
                    <a class="flex items-center bg-white px-6 py-3 text-sm font-medium text-[#FFB60D] rounded-full hover:shadow-md"
                        href="#" type="button" id="dropdownMacOS" data-twe-dropdown-toggle-ref aria-expanded="false"
                        data-twe-ripple-init data-twe-ripple-color="light">
                        <i class="fab fa-ubuntu mr-2"></i> Linux
                        <span class="ms-1 w-4 [&>svg]:h-5 [&>svg]:w-5">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd"
                                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                                    clip-rule="evenodd" />
                            </svg>
                        </span>
                    </a>
                    <ul class="absolute z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-base shadow-lg data-[twe-dropdown-show]:block"
                        aria-labelledby="dropdownMacOS" data-twe-dropdown-menu-ref>
                        <li>
                            <a class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm text-black hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline"
                                href="#" data-twe-dropdown-item-ref>.deb amd64</a>
                        </li>
                        <li>
                            <a class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm text-black hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline"
                                href="#" data-twe-dropdown-item-ref>.deb i386</a>
                        </li>
                        <li>
                            <a class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm text-black hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline"
                                href="#" data-twe-dropdown-item-ref>.deb arm base</a>
                        </li>
                    </ul>
                </div> --}}
            </div>
        </div>
        <div class="absolute left-[-15%] top-[-40%] hidden lg:block">
            <img src="{{ asset('images/bg-dots.webp') }}" alt="person" />
        </div>
    </div>

    <div class="absolute right-[-50px] top-[-80px] hidden lg:block">
        <img src="{{ asset('images/person-download.png') }}" alt="person" />
    </div>
</section>
{{-- End Download Section --}}



@endsection

@section('javascript')
<script src="{{ asset('plugins/gliderjs/glider.min.js') }}"></script>
<script src="{{ asset('plugins/lazysizes/lazysizes.min.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {

            // Scroll to how to read section content
            document.getElementById('smooth-scroll-link').addEventListener('click', function(event) {
                event.preventDefault(); 

                const targetElement = document.getElementById('how-to-read');

                const offset = targetElement.getBoundingClientRect().top + window.scrollY;

                window.scrollTo({
                    top: offset - 100, 
                    behavior: 'smooth'
                });
            });
            
            // Convert to slug
            function convertToSlug(Text) {
                return Text.toLowerCase()
                    .replace(/ /g, "-")
                    .replace(/[^\w-]+/g, "");
            }

            // Convert currency rupiah
            function formatRupiah(number) {
                return new Intl.NumberFormat('id-ID', {
                    style: 'currency',
                    currency: 'IDR',
                    minimumFractionDigits: 0,
                    maximumFractionDigits: 0
                }).format(number);
            }

            // Function show item latest book
            function terbaru() {
                $.ajax({
                    "url": "{{ route('terbaru.list') }}",
                    "type": "GET",
                    "data": {
                        'page': 1,
                        'limit': 20
                    }
                }).done(function(m) {
                    if (m.length > 0) {
                        // $('#div-terbaru').show();
                        let html = "";
                        for (let i = 0; i < m.length; i++) {
                            let kode_konten = m[i].kode_konten;
                            let judul = m[i].judul;
                            let sub_kategori = m[i].sub_kategori;
                            let combined_title = sub_kategori + " " + judul;
                            let slug = convertToSlug(combined_title);
                            let harga = formatRupiah(m[i].harga);

                            html += '<div ' +
                                'class="mx-1.5 md:mx-2.5 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500">' +
                                '<a href="{{ url('book') }}/' + kode_konten + '/' + slug + '">' +
                                '<div ' +
                                'class="img-box w-full text-center rounded-xl p-2 flex min-h-[215px] items-center justify-center">' +
                                '<img data-src="https://kubuku.id/api/generic/showCover/' + m[i].kode_konten +
                                '" src="{{ asset('images/ph-bacabuku.png') }}" alt="cover buku"' +
                                'class="m-auto w-40 rounded-lg lazyload" />' +
                                '</div>' +
                                '<div class="product-desc pb-3 px-3">' +
                                '<h6 class="product-title font-semibold text-black text-sm line-clamp-2 mb-1">' +
                                '' + m[i].judul + '</h6>' +
                                '<p class="product-author line-clamp-1 text-sm text-gray-500 mb-1">' +
                                '' + m[i].penulis + '</p>' +
                                '<p class="product-price fs-6 font-semibold text-sm text-primary mb-0">' +
                                '' + harga + '</p>' +
                                '</div>' +
                                '</a>' +
                                '</div>';
                        }

                        $('#glider-terbaru').append(html);

                        // Check if the element exists before initializing Glider
                        if (document.querySelector('#glider-terbaru')) {
                            new Glider(document.querySelector('#glider-terbaru'), {
                                slidesToScroll: 1,
                                slidesToShow: 5.5,
                                draggable: true,
                                arrows: {
                                    prev: '.glider-prevTerbaru',
                                    next: '.glider-nextTerbaru',
                                },
                            });
                        } else {
                            console.error('Element #glider-terbaru not found');
                        }
                    } else {
                        $('#div-terbaru').hide();
                    }
                });
            }

            // Function show item popular book
            function terpopuler() {
                $.ajax({
                    "url": "{{ route('terpopuler.list') }}",
                    "type": "GET",
                    "data": {
                        'page': 1,
                        'limit': 20
                    }
                }).done(function(m) {
                    if (m.length > 0) {
                        let html = "";
                        for (let i = 0; i < m.length; i++) {
                            let kode_konten = m[i].kode_konten;
                            let judul = m[i].judul;
                            let sub_kategori = m[i].sub_kategori;
                            let combined_title = sub_kategori + " " + judul;
                            let slug = convertToSlug(combined_title); 
                            let harga = formatRupiah(m[i].harga);

                            html += '<div ' +
                                'class="mx-2.5 rounded-xl border border-gray-100 hover:shadow-custom ease-in-out duration-500">' +
                                '<a href="{{ url('book') }}/' + kode_konten + '/' + slug + '">' +
                                '<div ' +
                                'class="img-box w-full text-center rounded-xl p-2 flex min-h-[215px] items-center justify-center">' +
                                '<img data-src="https://kubuku.id/api/generic/showCover/' + m[i].kode_konten +
                                '" src="{{ asset('images/ph-bacabuku.png') }}" alt="cover buku"' +
                                'class="m-auto w-40 rounded-lg lazyload" />' +
                                '</div>' +
                                '<div class="product-desc pb-3 px-3">' +
                                '<h6 class="product-title font-semibold text-black text-sm line-clamp-2 mb-1">' +
                                '' + m[i].judul + '</h6>' +
                                '<p class="product-author line-clamp-1 text-sm text-gray-500 mb-1">' +
                                '' + m[i].penulis + '</p>' +
                                '<p class="product-price fs-6 font-semibold text-sm text-primary mb-0">' +
                                '' + harga + '</p>' +
                                '</div>' +
                                '</a>' +
                                '</div>';
                        }

                        $('#glider-terpopuler').append(html);

                        if (document.querySelector('#glider-terpopuler')) {
                            new Glider(document.querySelector('#glider-terpopuler'), {
                                slidesToScroll: 1,
                                slidesToShow: 5.5,
                                draggable: true,
                                dots: '.dots',
                                arrows: {
                                    prev: '.glider-prevTerpopuler',
                                    next: '.glider-nextTerpopuler',
                                },
                            });
                        } else {
                            console.error('Element #glider-terpopuler not found');
                        }
                    } else {
                        $('#div-terpopuler').hide();
                    }
                });
            }

            // Initialize latest book & popular book
            terbaru();
            terpopuler();
        });
</script>
@endsection