@extends('layouts.app')

@section('content')
    <section>
        <div class="container mx-auto px-2 py-6" id="slider-banner-section">
            <div class="flex flex-col lg:flex-row gap-3">
                <div class="w-full ">
                    <div class="relative group rounded-md overflow-hidden shadow-lg">

                        <!-- Slider Container -->
                        <div class="swiper  w-full">
                            <div class="swiper-wrapper ">
                                <!-- Slide 1 -->
                                <div class="swiper-slide">
                                    <a href="" class="block h-full">
                                        <img src="https://scontent.fdac41-1.fna.fbcdn.net/v/t39.30808-6/476099362_579028651781519_7471688684803902634_n.jpg?_nc_cat=102&ccb=1-7&_nc_sid=86c6b0&_nc_eui2=AeEu35n-Xnvck1lV2r44W5IpQpDuMp7Pn_NCkO4yns-f81w48GgvZ2Z16MGW9GLHLVG0EgY2ZP0oo_ouObVdHZxM&_nc_ohc=yUFawGDE9EYQ7kNvwFaRgtk&_nc_oc=AdnkQlniyxFIXGLEW_JXxHAc0Ta_Mp8Upa6COcI1CkDD65Fp21bAlrC60i6dzaxRR-s&_nc_zt=23&_nc_ht=scontent.fdac41-1.fna&_nc_gid=8nQbW-CK1FFHOe3aWwLJ5g&oh=00_AfaVUWFy9m0xTTvyG3U5gisSwNJXS8ZbvdUEgdkN7u-OWw&oe=68D06DA3"
                                            alt="Admission 2024-25"
                                            class="w-full h-full object-cover max-h-[500px]  aspect-video">
                                    </a>
                                </div>

                                <!-- Slide 2 -->
                                <div class="swiper-slide">
                                    <a href="" class="block h-full">
                                        <img src="https://scontent.fdac41-1.fna.fbcdn.net/v/t39.30808-6/489209823_1200482982087510_1760955143196558670_n.jpg?_nc_cat=110&ccb=1-7&_nc_sid=cc71e4&_nc_eui2=AeGWU8gyTSwaV6P9k-N3RiOTlx6BvE70iLqXHoG8TvSIugnlQh4MZviuqsA6WEsLKQU0S56PfQ1I4aeIhM8ITnMY&_nc_ohc=YuDKPU4O6lIQ7kNvwHjSTsM&_nc_oc=AdkO0RDR8-gKAqbWeFFmV0gpgp0di8h_8i397gr7qkH8fvePT7qL_7WwKN7RF1J65ZE&_nc_zt=23&_nc_ht=scontent.fdac41-1.fna&_nc_gid=5s6kR1EW40p1CovieFwybA&oh=00_AfaqH90sgU4-qBjdA0YWn53ROxYy1zrXZ8yq9b3JiL69gA&oe=68D069DC"
                                            alt="Sure 60 1st Paper"
                                            class="w-full h-full object-cover max-h-[500px] aspect-video">
                                    </a>
                                </div>

                                <div class="swiper-slide">
                                    <a href="" class="block h-full">
                                        <img src="https://scontent.fdac41-1.fna.fbcdn.net/v/t39.30808-6/489687880_1198769385592203_2097725538605423012_n.jpg?_nc_cat=102&ccb=1-7&_nc_sid=86c6b0&_nc_eui2=AeFZ5cdjaSlKR2jMyJJmYIxOl00VWOigL2uXTRVY6KAva-IkDA8ij3tmOKfgT4t7EuIDEBwaSXUj2cpgOYkTZjmK&_nc_ohc=SsvQIyc1sn0Q7kNvwFWDl7z&_nc_oc=AdkSn3RE82xq7b1iS1TFE6ubE88PFH8yVaAvzLiJgnyHFmf-sFSSAZpebodUdopKbbo&_nc_zt=23&_nc_ht=scontent.fdac41-1.fna&_nc_gid=hQLZCnA6Zyuvd9RGpyP1TA&oh=00_AfbZUNJ9qICeSdLRvBR3WIH4D4RThHnIC5fBZKpeF_TVDQ&oe=68D04704"
                                            alt="REW Pub" class="w-full h-full object-cover max-h-[500px] aspect-video">
                                    </a>
                                </div>
                            </div>

                            <div class="hidden md:block">
                                <div
                                    class="swiper-button-next bg-secondary/50 !w-9 !h-9 rounded-full shrink-0 hover:bg-secondary duration-300">
                                </div>
                                <div
                                    class="swiper-button-prev bg-secondary/50 !w-9 !h-9 rounded-full shrink-0 hover:bg-secondary duration-300">
                                </div>
                            </div>

                            <div class="swiper-pagination !bottom-3"></div>

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

            </div>
        </div>
    </section>
    <script>
        new Swiper('.swiper', {
            loop: true,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });
    </script>

<div class="bg-gradient-to-b from-blue-50/70 to-indigo-50/70 py-12 px-4 relative">
     <img src="{{asset('assets/images/bg_image.png')}}" class="w-full h-full absolute left-0 top-0  opacity-50" alt="">
    <div class="max-w-6xl mx-auto">
        <!-- Section Card -->
        <div class=" bg-white rounded-2xl border border-slate-100 text-center px-6 py-10 md:py-14 shadow-md backdrop-blur-lg overflow-hidden max-w-4xl mx-auto ">
           
            
        
            
              <h2 class="text-2xl md:text-3xl font-bold text-black mb-2 ">
                  {{ __('text.course_cat') }}


                </h2>

            <!-- Subtitle -->
            <h3 class="text-sm md:text-lg font-medium text-slate-700 mt-2 max-w-md mx-auto leading-relaxed">
                {{ __('text.course_cat_subtitle') }}
            </h3>

            <!-- Categories Container -->
            <div class="relative"> 
                <!-- Classes Scroll -->
                <div class="flex gap-3 md:gap-5 py-5 overflow-x-auto scrollbar-thin scrollbar-thumb-blue-200 scrollbar-track-blue-50 scrollbar-thumb-rounded-full md:justify-center md:flex-wrap">
                    @foreach ($allCategories as $category)
                    <!-- Class Card -->
                    <div class="class-card group flex-shrink-0 w-28 md:w-36 h-28 cursor-pointer flex flex-col items-center justify-center px-6 py-4 transition-all duration-300 rounded-xl bg-white border border-slate-100 shadow-sm hover:shadow-md relative overflow-hidden from-blue-50 to-indigo-50">
                        
                        <!-- Icon container with subtle background -->
                        <div class="relative mb-3 p-2 rounded-lg bg-blue-50/50 group-hover:bg-white/80 transition-colors duration-300">
                            <img src="{{ asset($category->icon) }}" alt="{{ $category->name }}" 
                                 class="w-8 h-8 md:w-10 md:h-10 object-contain transition-transform duration-300 group-hover:scale-110" loading="lazy">
                        </div>
                        
                        <!-- Category name -->
                        <h4 class="relative text-xs md:text-sm font-medium text-slate-700 group-hover:text-slate-900 transition-colors duration-300 text-center leading-tight">
                            {{ $category->name }}
                        </h4>

                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>




    <section class="mt-8"
        style="background: radial-gradient(60.52% 68.24% at 50% 68.24%, rgb(139 91 255 / 30%) 0, rgb(248 244 255 / 30%) 44.14%, rgb(231 219 255 / 30%) 100%)">
        <div class="container py-12 md:py-16 px-4">
            <div class="text-center mb-10">
                <h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-4 line-bar">
                    {{ __('text.course_title') }}
                </h2>
                <p class="text-gray-600 mt-2">{{ __('text.course_subtitle') }}</p>
            </div>



            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3  gap-5 ">

                @foreach ($courses as $course)
                    <div
                        class="border border-gray-200 rounded-lg bg-white overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-300 relative border-b-0 z-0">
                        <!-- Image -->
                        <div class="overflow-hidden p-1.5">
                            <img src="{{ asset($course->thumbnail_url) }}" alt=""
                                class="w-full rounded-lg transition-transform duration-300 hover:scale-105 aspect-video ">
                        </div>

                        <!-- Title -->
                        <a href="{{ route('course.view', $course->slug) }}" class="block px-4 pt-3">
                            <h1
                                class=" text-lg md:text-[22px] line-clamp-2 font-semibold text-gray-900 hover:text-secondary transition-colors duration-200 h-[50px] leading-6 ">
                                {{ $course->title }}
                            </h1>
                        </a>

                        <!-- Price & Discount -->
                        <div class="flex items-center justify-between px-4 py-3 border-b border-dashed border-[#d9dce1]">
                            @if ($course->is_free == 1)
                                <span
                                    class="inline-block px-3 py-1 text-xs font-semibold text-white bg-green-500 rounded-md shadow-sm">
                                    {{ __('text.free') }}
                                </span>
                            @else
                                <div class="flex items-center gap-2">
                                    <span
                                        class="text-[22px] font-bold text-primary">৳{{ (float) $course->discounted_price }}</span>
                                    <span
                                        class="text-sm text-gray-400 line-through">৳{{ (float) $course->original_price }}</span>
                                </div>
                                <span
                                    class="px-2.5 py-0.5 text-xs font-semibold text-white rounded-full bg-gradient-to-r from-yellow-600 to-yellow-500">
                                    {{ $course->discount_percentage }}%
                                </span>
                            @endif
                        </div>

                        <!-- Stats & Button -->
                        <div class="px-4 pb-3 bg-[#f9fbff]">
                            <div
                                class="flex justify-between items-center mb-3 text-gray-700 border-b border-dashed border-slate-300 py-2">

                                @if ($course->course_type == 'Live')
                                    <div class="flex items-center gap-2 text-sm font-medium">
                                        <img alt="live" class="w-5 h-5" src="{{ asset('assets/icons/live-ani.svg') }}">
                                        {{ __('text.live') }}
                                    </div>
                                @else
                                    <div class="flex items-center gap-2 text-sm font-medium">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-red-400"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4"></path>
                                            <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
                                            <rect width="8" height="6" x="2" y="12" rx="1"></rect>
                                            <path d="m10 15.5 4 2.5v-6l-4 2.5"></path>
                                        </svg>
                                        {{ __('text.recorded') }}
                                    </div>
                                @endif

                                <div class="flex items-center gap-2 text-sm font-medium">
                                    <img alt="category" class="w-5 h-5" src="{{ asset($course->category->icon) }}">
                                    {{ $course->category->name }}
                                </div>
                            </div>

                            <div class="flex justify-between items-center mb-4 text-gray-700">
                                <div class="flex items-center gap-2">
                                    <img src="{{ asset('assets/icons/multi-user.png') }}"
                                        class="w-5 h-5 rounded-full shadow" alt="Students">
                                    <span class="text-sm font-medium"> {{ __('text.enrolled') }}:
                                        {{ $course->total_enroll }}</span>
                                </div>
                                <div class="flex items-center gap-2">
                                    <img src="{{ asset('assets/icons/video-player.svg') }}" class="w-4 h-4" alt="Classes">
                                    <span class="text-sm font-medium"> {{ __('text.class') }}:
                                        {{ $course->total_class }}</span>
                                </div>
                            </div>

                            @if ($course->status === 'draft')
                                <span
                                    class="block w-full text-center py-2.5 text-yellow-600 font-semibold border border-yellow-400 rounded-lg bg-yellow-50">
                                    ⏳ {{ __('text.coming_soon') }}
                                </span>
                            @else
                                <a href="{{ route('course.view', $course->slug) }}"
                                    class="btn-primary block text-center !py-2.5">
                                    {{ __('text.view_details') }}
                                </a>
                            @endif
                        </div>




                        <!-- Bottom Decoration -->
                        <div class="border-6 border-transparent"
                            style="background-image: url('{{ asset('assets/images/card_bottom_icons.webp') }}'); background-position: 17px; border-image-repeat: round;">
                        </div>
                    </div>
                @endforeach

            </div>


        </div>


        </div>
    </section>

   <section class="py-14 md:py-20 px-4 bg-white">
    <div class="container mx-auto text-center">
        <!-- Section Title -->
        <div class="text-center mb-12">
            <h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-3">
                {{ __('text.trusted_platform_title') }}
            </h2>
            <p class="text-gray-600 md:text-lg">
                {{ __('text.trusted_platform_subtitle') }}
            </p>
        </div>

        <!-- Stats Cards Grid -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mb-12">
            <!-- Card 1 -->
            <div
                class="group bg-orange-50 border border-orange-100 hover:border-orange-200 rounded-2xl px-4 pt-6 pb-4 flex flex-col items-center justify-between shadow-sm hover:shadow-lg transition-all duration-300">
                <div>
                    <div class="text-3xl md:text-4xl font-extrabold text-orange-600 mb-2">1M+</div>
                    <div class="text-sm md:text-base text-gray-700">Happy Students</div>
                </div>
                <div class="w-full h-24 mt-3 bg-center bg-contain bg-no-repeat group-hover:scale-105 transition-transform duration-300"
                    style="background-image: url('{{ asset('assets/icons/users_p.webp') }}');">
                </div>
            </div>

            <!-- Card 2 -->
            <div
                class="group bg-red-50 border border-red-100 hover:border-red-200 rounded-2xl px-4 pt-6 pb-4 flex flex-col items-center justify-between shadow-sm hover:shadow-lg transition-all duration-300">
                <div>
                    <div class="text-3xl md:text-4xl font-extrabold text-red-500 mb-2">50+</div>
                    <div class="text-sm md:text-base text-gray-700">Mock Tests</div>
                </div>
                <div class="w-full h-24 mt-3 bg-center bg-contain bg-no-repeat group-hover:scale-105 transition-transform duration-300"
                    style="background-image: url('{{ asset('assets/icons/paper_&_pan.webp') }}');">
                </div>
            </div>

            <!-- Card 3 -->
            <div
                class="group bg-sky-50 border border-sky-100 hover:border-sky-200 rounded-2xl px-4 pt-6 pb-4 flex flex-col items-center justify-between shadow-sm hover:shadow-lg transition-all duration-300">
                <div>
                    <div class="text-3xl md:text-4xl font-extrabold text-sky-600 mb-2">100+</div>
                    <div class="text-sm md:text-base text-gray-700">Video Lectures</div>
                </div>
                <div class="w-full h-24 mt-3 bg-center bg-contain bg-no-repeat group-hover:scale-105 transition-transform duration-300"
                    style="background-image: url('{{ asset('assets/icons/video_pc.webp') }}');">
                </div>
            </div>

            <!-- Card 4 -->
            <div
                class="group bg-purple-50 border border-purple-100 hover:border-purple-200 rounded-2xl px-4 pt-6 pb-4 flex flex-col items-center justify-between shadow-sm hover:shadow-lg transition-all duration-300">
                <div>
                    <div class="text-3xl md:text-4xl font-extrabold text-purple-600 mb-2">200+</div>
                    <div class="text-sm md:text-base text-gray-700">Practice Papers</div>
                </div>
                <div class="w-full h-24 mt-3 bg-center bg-contain bg-no-repeat group-hover:scale-105 transition-transform duration-300"
                    style="background-image: url('{{ asset('assets/icons/note_multi.webp') }}');">
                </div>
            </div>
        </div>

        <!-- CTA Button -->
        <div class="flex justify-center">
            <a href="{{ route('course.index') }}"
                class="btn-dark">
                Get Started
            </a>
        </div>
    </div>
</section>



    <section class="py-14 bg-slate-50">
        <div class="container  px-4">
            <div class="text-center mb-4 ">
                <h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-4 line-bar">
                    {{ __('text.testominal_title') }}
                </h2>


                <p class="text-gray-600 mt-2"> {{ __('text.testominal_des') }}</p>
            </div>


            <!-- Swiper -->
            <div class="swiper testimonialSwiper">
                <div class="swiper-wrapper py-10">

                    <!-- Slide 1 -->
                    <div
                        class="swiper-slide bg-gradient-to-b from-[#feffff] to-[#eff8ff] border border-[#d1e9ff] rounded-xl shadow-md p-6 flex flex-col justify-between min-w-[280px] md:min-w-[370px]">
                        <div>
                            <img src="{{ asset('assets/images/Comma.png') }}" alt="quote"
                                class="h-8 w-10 mb-3" />
                            <p class="text-gray-700 text-sm md:text-base h-44 overflow-y-auto">
                                I used to regularly follow the youtube videos, prelims booster videos and specially
                                editorial discussion from where I made important pointers. I also watched some history
                                videos like Buddhism, Jainism as the topics were explained very clearly… all these were very
                                helpful during my preparation… Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                                Similique qui debitis enim fugiat dolores consequatur aut temporibus facere dignissimos
                                excepturi eligendi, expedita optio pariatur. Omnis inventore iure possimus atque temporibus
                                esse libero, quas vel magni quibusdam, error tempora. Aliquid, enim! Aliquid ipsum error
                                voluptatibus, sunt commodi eveniet recusandae in adipisci, illo blanditiis praesentium totam
                                reprehenderit modi delectus laboriosam voluptas vitae libero deleniti ratione quasi
                                voluptatum. Quos atque harum explicabo quidem reprehenderit dolores reiciendis perferendis
                                magni unde, recusandae esse tempora quasi voluptates culpa deleniti amet fugiat, accusamus
                                odit sapiente iure expedita nihil minus vel. Incidunt similique animi ab inventore dicta!
                                Corporis.
                            </p>
                        </div>
                        <div class="flex items-center gap-3 mt-4">
                            <div class="border-2 border-gray-300 rounded-full p-1">
                                <img src="https://static.pw.live/5eb393ee95fab7468a79d189/GLOBAL_CMS/f701dd38-826d-4328-836e-8e1061c5d281.jpg"
                                    alt="student" class="h-9 w-9 rounded-full" />
                            </div>
                            <div>
                                <h3 class="font-bold text-gray-900">Anmol Rathore</h3>
                                <div class="flex items-center gap-2 text-xs text-primary font-semibold">
                                    <span class="">UPSC CSE 2023 AIR 7</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Slide 2 -->
                    <div
                        class="swiper-slide bg-gradient-to-b from-[#feffff] to-[#eff8ff] border border-[#d1e9ff] rounded-xl shadow-md p-6 flex flex-col justify-between min-w-[280px] md:min-w-[370px]">
                        <div>
                            <img src="{{ asset('assets/images/Comma.png') }}" alt="quote"
                                class="h-8 w-10 mb-3" />
                            <p class="text-gray-700 text-sm md:text-base h-44 overflow-y-auto ">
                                I am Raja Majhi, and I am thrilled to share that I have secured All India Rank 1 (AIR 1) in
                                the GATE 2024 examination in ECE. From the very beginning, Physics Wallah stood out for its
                                structured and comprehensive curriculum. The faculty members ensured every concept was
                                crystal clear...
                            </p>
                        </div>
                        <div class="flex items-center gap-3 mt-4">
                            <div class="border-2 border-gray-300 rounded-full p-1">
                                <img src="https://static.pw.live/5eb393ee95fab7468a79d189/GLOBAL_CMS/5613a51e-e9ac-4e90-a78e-81dba01b1940.png"
                                    alt="student" class="h-9 w-9 rounded-full" />
                            </div>
                            <div>
                                <h3 class="font-bold text-gray-900">Raja Majhi</h3>
                                <div class="flex items-center gap-2 text-xs text-primary font-semibold">
                                    <span>GATE</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Testimonial 1 -->
                    <div
                        class="swiper-slide bg-gradient-to-b from-[#feffff] to-[#eff8ff] border border-[#d1e9ff] rounded-xl shadow-md p-6 flex flex-col justify-between min-w-[280px] md:min-w-[370px]">
                        <div>
                            <img src="{{ asset('assets/images/Comma.png') }}" alt="quote"
                                class="h-8 w-10 mb-3" />
                            <p class="text-gray-700 text-sm md:text-base h-44 overflow-y-auto ">
                                I am Raja Majhi, and I am thrilled to share that I have secured All India Rank 1 (AIR 1)
                                in the GATE 2024 examination in ECE. From the very beginning, Shikkha Point stood out
                                for its structured and comprehensive curriculum...
                            </p>
                        </div>
                        <div class="flex items-center gap-3 mt-4">
                            <div class="border-2 border-gray-300 rounded-full p-1">
                                <img src="https://i.pravatar.cc/100?img=1" alt="student" class="h-9 w-9 rounded-full" />
                            </div>
                            <div>
                                <h3 class="font-bold text-gray-900">Raja Majhi</h3>
                                <div class="flex items-center gap-2 text-xs text-primary font-semibold">
                                    <span>GATE</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Testimonial 2 -->
                    <div
                        class="swiper-slide bg-gradient-to-b from-[#feffff] to-[#eff8ff] border border-[#d1e9ff] rounded-xl shadow-md p-6 flex flex-col justify-between min-w-[280px] md:min-w-[370px]">
                        <div>
                            <img src="{{ asset('assets/images/Comma.png') }}" alt="quote"
                                class="h-8 w-10 mb-3" />
                            <p class="text-gray-700 text-sm md:text-base h-44 overflow-y-auto ">
                                I am Priya Sharma, and I cracked NEET 2024 with flying colors. Shikkha Point’s
                                doubt-solving sessions and mock tests gave me the edge I needed. The mentors were
                                always supportive and approachable...
                            </p>
                        </div>
                        <div class="flex items-center gap-3 mt-4">
                            <div class="border-2 border-gray-300 rounded-full p-1">
                                <img src="https://i.pravatar.cc/100?img=2" alt="student" class="h-9 w-9 rounded-full" />
                            </div>
                            <div>
                                <h3 class="font-bold text-gray-900">Priya Sharma</h3>
                                <div class="flex items-center gap-2 text-xs text-primary font-semibold">
                                    <span>NEET</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Testimonial 3 -->
                    <div
                        class="swiper-slide bg-gradient-to-b from-[#feffff] to-[#eff8ff] border border-[#d1e9ff] rounded-xl shadow-md p-6 flex flex-col justify-between min-w-[280px] md:min-w-[370px]">
                        <div>
                            <img src="{{ asset('assets/images/Comma.png') }}" alt="quote"
                                class="h-8 w-10 mb-3" />
                            <p class="text-gray-700 text-sm md:text-base h-44 overflow-y-auto ">
                                My name is Arjun Das, and I secured JEE Advanced rank within the top 1000.
                                The clarity of concepts, practice questions, and motivational sessions at
                                Shikkha Point truly made the difference in my preparation...
                            </p>
                        </div>
                        <div class="flex items-center gap-3 mt-4">
                            <div class="border-2 border-gray-300 rounded-full p-1">
                                <img src="https://i.pravatar.cc/100?img=3" alt="student" class="h-9 w-9 rounded-full" />
                            </div>
                            <div>
                                <h3 class="font-bold text-gray-900">Arjun Das</h3>
                                <div class="flex items-center gap-2 text-xs text-primary font-semibold">
                                    <span>JEE Advanced</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Testimonial 4 -->
                    <div
                        class="swiper-slide bg-gradient-to-b from-[#feffff] to-[#eff8ff] border border-[#d1e9ff] rounded-xl shadow-md p-6 flex flex-col justify-between min-w-[280px] md:min-w-[370px]">
                        <div>
                            <img src="{{ asset('assets/images/Comma.png') }}" alt="quote"
                                class="h-8 w-10 mb-3" />
                            <p class="text-gray-700 text-sm md:text-base h-44 overflow-y-auto ">
                                I am Nabila Rahman, and I achieved outstanding results in my SSC exams.
                                Shikkha Point’s teaching style made even the toughest subjects easy to grasp.
                                I owe my success to the dedication of the faculty team...
                            </p>
                        </div>
                        <div class="flex items-center gap-3 mt-4">
                            <div class="border-2 border-gray-300 rounded-full p-1">
                                <img src="https://i.pravatar.cc/100?img=4" alt="student" class="h-9 w-9 rounded-full" />
                            </div>
                            <div>
                                <h3 class="font-bold text-gray-900">Nabila Rahman</h3>
                                <div class="flex items-center gap-2 text-xs text-primary font-semibold">
                                    <span>SSC</span>
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- Add more slides here -->

                </div>

                <!-- Swiper Pagination -->
                <div class="swiper-pagination mt-8"></div>
            </div>
        </div>
    </section>
    <script>
        const swiper = new Swiper(".testimonialSwiper", {
            slidesPerView: 1.2,
            spaceBetween: 20,
            loop: true,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            breakpoints: {
                640: {
                    slidesPerView: 1.5,
                },
                768: {
                    slidesPerView: 2,
                },
                1024: {
                    slidesPerView: 3,
                },
            },
        });
    </script>

    <section class="bg-black py-16" style="background-image: url({{ asset('assets/images/Background_Noise.jpeg') }})">
        <div class="mx-auto px-4 max-w-5xl">
            <div class="text-center mb-3">
                <h2 class="text-2xl md:text-3xl font-bold text-white mb-2 ">
                    যুক্ত হও আমাদের সাথে


                </h2>
                <p class="text-gray-200 mt-2"> আমাদের লাইভ ক্লাসগুলোতে অংশ নিতে এবং সবসময় আপডেটেড থাকতে,

                </p>

                <div class="grid grid-cols-1 md:grid-cols-2 mt-6 gap-6">
                    <div
                        class="bg-[linear-gradient(180deg,rgba(19,57,146,0.40)_0%,rgba(6,14,83,0.40)_100%)] rounded-lg border border-[#253A71] text-center px-4 md:px-6 pt-10 pb-4 md:pb-8 flex items-center justify-between gap-3">
                        <div class="flex items-start flex-col">
                            <h4 class="text-[26px] text-white font-semibold mb-5">অফিসিয়াল ফেসবুক পেজ</h4>
                            <a
                                href="#"class=" bg-[#104ce4] hover:bg-[#093dc1] text-white rounded-md px-6 py-2 text-lg inline-block">যুক্ত
                                হও</a>
                        </div>
                        <div>
                            <img src="{{ asset('assets/icons/fb.webp') }}" alt="">
                        </div>
                    </div>
                    <div
                        class="bg-[linear-gradient(180deg,rgba(123,21,21,0.40)_0%,rgba(59,6,6,0.40)_100%)] rounded-lg border border-[#592327] text-center px-4 md:px-6 pt-10 pb-4 md:pb-8 flex items-center justify-between gap-3">
                        <div class="flex items-start flex-col">
                            <h4 class="text-[26px] text-white font-semibold mb-5">আমাদের ফ্রি প্লে-লিস্ট</h4>
                            <a href="#"
                                class="bg-[#dd1e2a] hover:bg-[#f10010] text-white rounded-md px-6 py-2 text-lg inline-block">ভিডিও
                                দেখো</a>
                        </div>
                        <div>
                            <img src="{{ asset('assets/icons/yt.webp') }}" alt="">
                        </div>
                    </div>
                    <div
                        class="bg-[linear-gradient(180deg,rgba(241,59,143,0.40)_0%,rgba(241,59,143,0.20)_100%)] rounded-lg border border-[#b22b6a] text-center px-4 md:px-6 pt-10 pb-4 md:pb-8 flex items-center justify-between gap-3">
                        <div class="flex items-start flex-col">
                            <h4 class="text-[26px] text-white font-semibold mb-5">আমাদের ফ্রি প্লে-লিস্ট</h4>
                            <a href="#"
                                class="bg-[#df1c77] hover:bg-[#f70d7a] text-white rounded-md px-6 py-2 text-lg inline-block">ফলো
                                করো</a>
                        </div>
                        <div>
                            <img src="{{ asset('assets/icons/igm.webp') }}" alt="">
                        </div>
                    </div>
                    <div
                        class="bg-[linear-gradient(180deg,rgba(19,57,146,0.40)_0%,rgba(6,14,83,0.40)_100%)] rounded-lg border border-[#253A71] text-center px-4 md:px-6 pt-10 pb-4 md:pb-8 flex items-center justify-between gap-3">
                        <div class="flex items-start flex-col">
                            <h4 class="text-[26px] text-white font-semibold mb-5">অফিসিয়াল ফেসবুক গ্রুপ</h4>
                            <a
                                href="#"class=" bg-[#104ce4] hover:bg-[#093dc1] text-white rounded-md px-6 py-2 text-lg inline-block">যুক্ত
                                হও</a>
                        </div>
                        <div>
                            <img src="{{ asset('assets/icons/fb.webp') }}" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection