@extends('landing.layout')

@section('title', 'Klinik Pengetahuan')

@section('content')
        <section class="relative py-5 bg-slate-50 dark:bg-slate-800 mt-[74px]">
            <div class="container relative">
                <div class="grid md:grid-cols-12 grid-cols-1 gap-2 items-center">
                    <div class="lg:col-span-5 md:col-span-4">
                        <h3 class="text-2xl md:leading-normal leading-normal font-semibold">Courses</h3>
                    </div>

                    <div class="lg:col-span-7 md:col-span-8 md:text-end">
                        <ul class="tracking-[0.5px] mb-0 inline-block">
                            <li class="inline-block text-slate-400 dark:text-white/60 duration-500 ease-in-out hover:text-violet-600 dark:hover:text-white"><a href="index.html">Edupath</a></li>
                            <li class="inline-block text-slate-500 dark:text-white/60 mx-0.5 ltr:rotate-0 rtl:rotate-180"><i class="iconoir-nav-arrow-right align-middle"></i></li>
                            <li class="inline-block text-slate-400 dark:text-white/60 duration-500 ease-in-out hover:text-violet-600 dark:hover:text-white"><a href="#">Courses</a></li>
                            <li class="inline-block text-slate-500 dark:text-white/60 mx-0.5 ltr:rotate-0 rtl:rotate-180"><i class="iconoir-nav-arrow-right align-middle"></i></li>
                            <li class="inline-block text-violet-600 dark:text-white" aria-current="page">Grid Courses</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <section class="relative py-12">
            <div class="container relative">
                <div class="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-6">
                    <div class="group bg-white dark:bg-slate-900 rounded-md shadow-md hover:shadow-lg shadow-slate-100 dark:shadow-slate-800 transition duration-500">
                        <div class="p-3 pb-0 relative">
                            <div class="relative overflow-hidden rounded-md">
                                <img src="{{ asset('landing') }}/images/course/1.jpg" class="group-hover:scale-105 duration-500" alt="">
                            </div>
                            <div class="absolute start-6 top-6">
                                <span class="bg-violet-600 text-white text-[12px] px-2.5 py-1 rounded-md h-4">Free</span>
                                <span class="bg-violet-600 text-white text-[12px] px-2.5 py-1 rounded-md h-4">Event</span>
                            </div>

                            <div class="absolute -bottom-5 end-6">
                                <span class="bg-violet-600 text-white size-10 flex items-center justify-center rounded-full shadow-md shadow-slate-100 dark:shadow-slate-800 font-semibold">$0</span>
                            </div>
                        </div>

                        <div class="p-6">
                            <div class="flex mb-3">
                                <span class="text-slate-400 text-sm flex items-center"><i data-feather="book" class="text-slate-900 dark:text-white size-[14px] me-1"></i>10 Lessons</span>
                                <span class="text-slate-400 text-sm flex items-center ms-3"><i data-feather="users" class="text-slate-900 dark:text-white size-[14px] me-1"></i>49 Students</span>
                            </div>

                            <a href="course-detail.html" class="text-lg hover:text-violet-600 font-medium">The Ultimate Course Bundle</a>

                            <p class="text-slate-400 mt-2">The phrasal sequence of the is now so many campaign</p>

                            <div class="flex justify-between mt-3">
                                <span class="flex items-center"><img src="{{ asset('landing') }}/images/team/2.jpg" class="size-8 rounded-full shadow-sm shadow-slate-100 dark:shadow-slate-800 me-2" alt=""> <a href="#" class="hover:text-violet-600 font-medium"> Calvin Carlo</a></span>
                                <a href="#" class="h-8 px-3 tracking-wide inline-flex items-center justify-center font-medium rounded-md bg-violet-600/10 hover:bg-violet-600 text-violet-600 hover:text-white text-sm">Explore <i class="mdi mdi-arrow-right align-middle ms-1"></i></a>
                            </div>
                        </div>
                    </div>

                    <div class="group bg-white dark:bg-slate-900 rounded-md shadow-md hover:shadow-lg shadow-slate-100 dark:shadow-slate-800 transition duration-500">
                        <div class="p-3 pb-0 relative">
                            <div class="relative overflow-hidden rounded-md">
                                <img src="{{ asset('landing') }}/images/course/2.jpg" class="group-hover:scale-105 duration-500" alt="">
                            </div>
                            <div class="absolute start-6 top-6">
                                <span class="bg-violet-600 text-white text-[12px] px-2.5 py-1 rounded-md h-4">Free</span>
                                <span class="bg-violet-600 text-white text-[12px] px-2.5 py-1 rounded-md h-4">Event</span>
                            </div>

                            <div class="absolute -bottom-5 end-6">
                                <span class="bg-violet-600 text-white size-10 flex items-center justify-center rounded-full shadow-md shadow-slate-100 dark:shadow-slate-800 font-semibold">$19</span>
                            </div>
                        </div>

                        <div class="p-6">
                            <div class="flex mb-3">
                                <span class="text-slate-400 text-sm flex items-center"><i data-feather="book" class="text-slate-900 dark:text-white size-[14px] me-1"></i>10 Lessons</span>
                                <span class="text-slate-400 text-sm flex items-center ms-3"><i data-feather="users" class="text-slate-900 dark:text-white size-[14px] me-1"></i>49 Students</span>
                            </div>

                            <a href="course-detail.html" class="text-lg hover:text-violet-600 font-medium">App Development Course</a>

                            <p class="text-slate-400 mt-2">The phrasal sequence of the is now so many campaign</p>

                            <div class="flex justify-between mt-3">
                                <span class="flex items-center"><img src="{{ asset('landing') }}/images/team/2.jpg" class="size-8 rounded-full shadow-sm shadow-slate-100 dark:shadow-slate-800 me-2" alt=""> <a href="#" class="hover:text-violet-600 font-medium"> Calvin Carlo</a></span>
                                <a href="#" class="h-8 px-3 tracking-wide inline-flex items-center justify-center font-medium rounded-md bg-violet-600/10 hover:bg-violet-600 text-violet-600 hover:text-white text-sm">Explore <i class="mdi mdi-arrow-right align-middle ms-1"></i></a>
                            </div>
                        </div>
                    </div>

                    <div class="group bg-white dark:bg-slate-900 rounded-md shadow-md hover:shadow-lg shadow-slate-100 dark:shadow-slate-800 transition duration-500">
                        <div class="p-3 pb-0 relative">
                            <div class="relative overflow-hidden rounded-md">
                                <img src="{{ asset('landing') }}/images/course/3.jpg" class="group-hover:scale-105 duration-500" alt="">
                            </div>
                            <div class="absolute start-6 top-6">
                                <span class="bg-violet-600 text-white text-[12px] px-2.5 py-1 rounded-md h-4">Free</span>
                                <span class="bg-violet-600 text-white text-[12px] px-2.5 py-1 rounded-md h-4">Event</span>
                            </div>

                            <div class="absolute -bottom-5 end-6">
                                <span class="bg-violet-600 text-white size-10 flex items-center justify-center rounded-full shadow-md shadow-slate-100 dark:shadow-slate-800 font-semibold">$29</span>
                            </div>
                        </div>

                        <div class="p-6">
                            <div class="flex mb-3">
                                <span class="text-slate-400 text-sm flex items-center"><i data-feather="book" class="text-slate-900 dark:text-white size-[14px] me-1"></i>10 Lessons</span>
                                <span class="text-slate-400 text-sm flex items-center ms-3"><i data-feather="users" class="text-slate-900 dark:text-white size-[14px] me-1"></i>49 Students</span>
                            </div>

                            <a href="course-detail.html" class="text-lg hover:text-violet-600 font-medium">Spoken English Popular Course</a>

                            <p class="text-slate-400 mt-2">The phrasal sequence of the is now so many campaign</p>

                            <div class="flex justify-between mt-3">
                                <span class="flex items-center"><img src="{{ asset('landing') }}/images/team/2.jpg" class="size-8 rounded-full shadow-sm shadow-slate-100 dark:shadow-slate-800 me-2" alt=""> <a href="#" class="hover:text-violet-600 font-medium"> Calvin Carlo</a></span>
                                <a href="#" class="h-8 px-3 tracking-wide inline-flex items-center justify-center font-medium rounded-md bg-violet-600/10 hover:bg-violet-600 text-violet-600 hover:text-white text-sm">Explore <i class="mdi mdi-arrow-right align-middle ms-1"></i></a>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="grid md:grid-cols-12 grid-cols-1 mt-6">
                    <div class="md:col-span-12 text-center">
                        <nav>
                            <ul class="inline-flex items-center -space-x-px">
                                <li>
                                    <a href="#" class="size-8 inline-flex justify-center items-center mx-1 rounded-full text-slate-400 bg-white dark:bg-slate-900 hover:text-white shadow-sm shadow-slate-100 dark:shadow-slate-800 hover:border-violet-600 dark:hover:border-violet-600 hover:bg-violet-600 dark:hover:bg-violet-600">
                                        <i class="mdi mdi-chevron-left text-[20px]"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="size-8 inline-flex justify-center items-center mx-1 rounded-full text-slate-400 hover:text-white bg-white dark:bg-slate-900 shadow-sm shadow-slate-100 dark:shadow-slate-800 hover:border-violet-600 dark:hover:border-violet-600 hover:bg-violet-600 dark:hover:bg-violet-600">1</a>
                                </li>
                                <li>
                                    <a href="#" class="size-8 inline-flex justify-center items-center mx-1 rounded-full text-slate-400 hover:text-white bg-white dark:bg-slate-900 shadow-sm shadow-slate-100 dark:shadow-slate-800 hover:border-violet-600 dark:hover:border-violet-600 hover:bg-violet-600 dark:hover:bg-violet-600">2</a>
                                </li>
                                <li>
                                    <a href="#" aria-current="page" class="z-10 size-8 inline-flex justify-center items-center mx-1 rounded-full text-white bg-violet-600 shadow-sm shadow-slate-100 dark:shadow-slate-800">3</a>
                                </li>
                                <li>
                                    <a href="#" class="size-8 inline-flex justify-center items-center mx-1 rounded-full text-slate-400 hover:text-white bg-white dark:bg-slate-900 shadow-sm shadow-slate-100 dark:shadow-slate-800 hover:border-violet-600 dark:hover:border-violet-600 hover:bg-violet-600 dark:hover:bg-violet-600">4</a>
                                </li>
                                <li>
                                    <a href="#" class="size-8 inline-flex justify-center items-center mx-1 rounded-full text-slate-400 bg-white dark:bg-slate-900 hover:text-white shadow-sm shadow-slate-100 dark:shadow-slate-800 hover:border-violet-600 dark:hover:border-violet-600 hover:bg-violet-600 dark:hover:bg-violet-600">
                                        <i class="mdi mdi-chevron-right text-[20px]"></i>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>

            <div class="container relative md:mt-24 mt-16">
                <div class="grid grid-cols-1">
                    <div class="relative bg-white dark:bg-slate-900 lg:px-8 px-6 py-10 rounded-lg shadow-sm shadow-slate-200 dark:shadow-slate-800 overflow-hidden">
                        <div class="grid md:grid-cols-2 grid-cols-1 items-center gap-6">
                            <div class="md:text-start text-center z-1">
                                <h3 class="mb-2 md:text-3xl text-2xl md:leading-normal leading-normal font-semibold">Subscribe to Newsletter!</h3>
                                <p class="text-slate-400 max-w-xl mx-auto">Subscribe to get latest updates and information.</p>
                            </div>

                            <div class="z-1">
                                <form class="relative mx-auto max-w-xl">
                                    <input type="email" id="subemail" name="name" class="pt-4 pe-40 pb-4 ps-6 w-full h-[50px] outline-none text-slate-900 dark:text-white rounded-full bg-white/70 dark:bg-slate-900/70 border border-slate-100 dark:border-slate-800" placeholder="Enter your email id..">
                                    <button type="submit" class="h-12 px-6 tracking-wide items-center justify-center font-medium bg-violet-600 text-white rounded-full absolute top-[1px] end-[1px]">Subcribe Now</button>
                                </form>
                            </div>
                        </div>

                        <div class="absolute -top-5 -start-5">
                            <div class="iconoir-mail lg:text-[150px] text-7xl text-slate-900/5 dark:text-white/5 ltr:-rotate-45 rtl:rotate-45"></div>
                        </div>

                        <div class="absolute -bottom-5 -end-5">
                            <div class="iconoir-edit-pencil lg:text-[150px] text-7xl text-slate-900/5 dark:text-white/5 rtl:-rotate-90"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
@endsection