@extends('frontend.layouts.main')
@section('content')
<main>
    <!-- hero-area start-->
    {{-- <div class="hero-area hero-height d-flex align-items-center position-relative" data-background="">
        <div class="container">
            <div class="hero-2-content-wrpapper position-relative">
                <div class="hero-shape-3 d-none d-xl-block">
                    <img class="" src="{{ asset('frontend/assets/image/shape/shape-04.png')}}" alt="image not found">
                    <h5 class="slider-shap-text">Top Rated
                        Exams</h5>
                </div>
                <div class="hero-shape-2 d-none d-xl-block">
                    <img src="{{ asset('frontend/assets/image/shape/shape-09.png')}}" alt="shape">
                </div>
                <div class="hero-shape-4 d-none d-lg-block">
                    <img src="{{ asset('frontend/assets/image/shape/shape-8.png')}}" alt="shape">
                </div>
                <div class="hero-thumb-01 d-none d-xl-block">
                    <img src="{{ asset('frontend/assets/image/slider/hero-01.png')}}" alt="shape">
                </div>
                <div class="hero-thumb-02 d-none d-lg-block">
                    <img src="{{ asset('frontend/assets/image/slider/hero-02.png')}}" alt="shape">
                </div>
                <div class="row justify-content-center">
                    <div class="col-xl-8 col-lg-8 col-md-10">
                        <div class="slider-content-wrapper">
                            <div class="hero-tittle-info text-center mb-30">
                                <h2>Score Higher, <br>
                                    Dream 
                                   <span class="down-mark-line-2">Bigger!</span></h2>
                            </div>
                            <div class="slider-search d-flex justify-content-center">
                                <a class="user-btn-sign-up edu-btn" data-bs-toggle="modal" data-bs-target="#exampleModal">Schedule a Free Consultation</a>
                            </div>
                            <div class="slider-course-content text-center">
                                <ul>
                                    <li><i class="fas fa-check-circle"></i><span>Learn
                                        </span></li>
                                    <li><i class="fas fa-check-circle"></i><span>Practice</span></li>
                                    <li><i class="fas fa-check-circle"></i><span>Improve</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> --}}
    <section class="slider-area hero-height position-relative fix">
        <div class="container">
            <div class="row">
                <div class="col-xl-6 col-lg-6 col-md-6 mb-md-0 mb-4">
                    <div class="hero-text hero-right position-relative">
                        <img class="shape-3" src="{{ asset('frontend/assets/image/shape/shape-03.png')}}" alt="image not found">
                        <h5>Score Higher, Dream Bigger!</h5>
                        <h2> Achieve Your Best Score with Zuper Class!
                        </h2>
                        <p>Your Trusted SAT & ACT Test Prep Experts.
                        </p>
                        <div class="hero-btn">
                            <a class="edu-btn"  data-bs-toggle="modal" data-bs-target="#exampleModal" 
                                data-bs-msg="Query Submitted Successfully.">Schedule a Free Class
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6 col-lg-6 col-md-6">
                    <div class="d-flex justify-content-end">
                        <img src="{{ asset('frontend/assets/image/slider/main1.jpg')}}" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- hero-area end-->
    <section class="about-area p-relative pt-90 pb-70">
        <div class="container">
            <img class="about-shape" src="{{ asset('frontend/assets/image/shape/education-shape-03.png')}}" alt="shape">
            <div class="row">
                <div class="col-xl-6 col-lg-6">
                    <div class="about-content mb-50">
                        <div class="section-title mb-30">
                            <h2>
                                Ace Your SAT | ACT with us<br>
                            </h2>
                        </div>
                        <div class="student-choose-list">
                            <p class=" mb-30">With 1.8+ Crore Students and One of the best Selection rate in India
                                amongst online learning platforms, you can surely rely on us to excel.</p>
                            <ul>
                                <li><i class="fas fa-check-circle"></i> <strong> Expert Teachers -</strong> Experienced with Proven Track Records </li>
                                <li><i class="fas fa-check-circle"></i> <strong> Customized Study Plans -</strong> Tailored for Your Strengths & Weaknesses </li>
                                <li><i class="fas fa-check-circle"></i> <strong> Small Class Size -</strong> Personalized Attention and Support </li>
                                <li><i class="fas fa-check-circle"></i> <strong> Ensured Success -</strong> Assurance of 200/5+ Point Increase in your SAT/ACT </li>
                                <li><i class="fas fa-check-circle"></i> <strong> Best in Class Support -</strong> Get your Doubts Solved within 12 Hours </li>
                                <li><i class="fas fa-check-circle"></i> <strong> Tech-Driven Learning -</strong> Extensive Resources for Interactive Learning </li>
                            </ul>
                        </div>
                        <a class="edu-btn" href="{{route('frontend.aboutUs')}}">Know More</a>
                    </div>
                </div>
                <div class="col-xl-6 col-lg-6">
                    <div class="about-img position-relative mb-50">
                        <div class="about-main-img">
                            <img src="{{ asset('frontend/assets/image/explore-pass__illust.svg')}}" alt="about">
                        </div>
                        <img class="about-shape-1" src="{{ asset('frontend/assets/image/shape/education-shape-01.png')}}" alt="about">
                        <img class="about-shape-2" src="{{ asset('frontend/assets/image/shape/education-shape-02.png')}}" alt="about">
                        <img class="about-shape-3" src="{{ asset('frontend/assets/image/shape/education-shape-05.png')}}" alt="about">
                    </div>
                </div>
            </div>
        </div>

    </section>
    <section class="course-section p-relative bg-white">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-10 col-lg-10">
                    <div class="text-center">
                        <div class="section-title mb-20">
                            <h2>
                                Our Course
                            </h2>
                        </div>
                    </div>
                    <div class="row justify-content-center g-0">
                        <div class="col-md-6 mb-md-0 mb-3">
                            <div class="course-box course-box-first">
                                <div class="course-header">
                                    <div class="d-flex align-items-center">
                                        <div class="course-icon-circle">
                                            <img src="{{ asset('frontend/assets/image/sat.png')}}">
                                        </div>
                                        <div class="course-icon-text">
                                            <h4 class="text-white"> SAT Comprehensive Course  </h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="course-body">
                                    <p class="text-start">The SAT is a standardized
                                        examination conducted by the College Board, and students applying for
                                        admission to
                                        undergraduate schools must take it.</p>
                                    <h5 class="mt-3 text-black text-start">Topic</h5>
                                    <div class="undefined mt-3"></div>
                                    <div class="mt-3">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="check-icon"><i class="fas fa-check-circle"></i></div>
                                            <span class="d-block ms-3">50+ hours of classes</span>
                                        </div>
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="check-icon"><i class="fas fa-check-circle"></i></div>
                                            <span class="d-block ms-3">Small batch size of maximum 3</span>
                                        </div>
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="check-icon"><i class="fas fa-check-circle"></i></div>
                                            <span class="d-block ms-3">Unlimited doubt sessions</span>
                                        </div>
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="check-icon"><i class="fas fa-check-circle"></i></div>
                                            <span class="d-block ms-3">Comprehensive coverage of all SAT sections:
                                                Math, Reading and Writing</span>
                                        </div>
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="check-icon"><i class="fas fa-check-circle"></i></div>
                                            <span class="d-block ms-3">A team of two tutors, each a domain expert.
                                            </span>
                                        </div>
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="check-icon"><i class="fas fa-check-circle"></i></div>
                                            <span class="d-block ms-3">Mock tests under real exam conditions</span>
                                        </div>
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="check-icon"><i class="fas fa-check-circle"></i></div>
                                            <span class="d-block ms-3">Regular Parent-teacher meetings</span>
                                        </div>
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="check-icon"><i class="fas fa-check-circle"></i></div>
                                            <span class="d-block ms-3">Upto 1 missed class covered every week
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="course-box course-box-second">
                                <div class="course-header">
                                    <div class="d-flex align-items-center">
                                        <div class="course-icon-circle">
                                            <img src="{{ asset('frontend/assets/image/sat.png')}}">
                                        </div>
                                        <div class="course-icon-text">
                                            <h4 class="text-white">ACT Comprehensive Course</h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="course-body">
                                    <p class="text-start">This test assesses high school applicants
                                        for their readiness to attend college based on their previous knowledge in
                                        Maths,
                                        Science and English.</p>
                                    <h5 class="mt-3 text-black text-start">Topic</h5>
                                    <div class="undefined mt-3"></div>
                                    <div class="mt-3">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="check-icon"><i class="fas fa-check-circle"></i></div>
                                            <span class="d-block ms-3">50+ hours of classes</span>
                                        </div>
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="check-icon"><i class="fas fa-check-circle"></i></div>
                                            <span class="d-block ms-3">Small batch size of maximum 3</span>
                                        </div>
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="check-icon"><i class="fas fa-check-circle"></i></div>
                                            <span class="d-block ms-3">Unlimited doubt sessions</span>
                                        </div>
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="check-icon"><i class="fas fa-check-circle"></i></div>
                                            <span class="d-block ms-3">Comprehensive coverage of all SAT sections:
                                                Math, Reading and Writing</span>
                                        </div>
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="check-icon"><i class="fas fa-check-circle"></i></div>
                                            <span class="d-block ms-3">A team of two tutors, each a domain expert.
                                            </span>
                                        </div>
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="check-icon"><i class="fas fa-check-circle"></i></div>
                                            <span class="d-block ms-3">Mock tests under real exam conditions</span>
                                        </div>
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="check-icon"><i class="fas fa-check-circle"></i></div>
                                            <span class="d-block ms-3">Regular Parent-teacher meetings</span>
                                        </div>
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="check-icon"><i class="fas fa-check-circle"></i></div>
                                            <span class="d-block ms-3">Upto 1 missed class covered every week
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-center g-0" style="margin-top: 1.5rem;">
                        <div class="col-md-2">
                        <a class="edu-btn"  data-bs-toggle="modal" data-bs-target="#exampleModal">Apply now
                        </a></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="Personaliz-section mt-70">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="text-center">
                        <h2 class="text-white font-weight-bold pb-5 fs-1">
                            Personalized Study </br>(One-on-One) </h2>
                        <p class="text-white max-width fs-5">For those who prefer a one-on-one approach,</br> our private tutoring sessions offer personalized instruction tailored to your specific needs and goals.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- education-area-start -->
   {{-- <section class="about-area p-relative pt-90 pb-70">
        <div class="container">
            <img class="about-shape" src="{{ asset('frontend/assets/image/shape/education-shape-03.png')}}" alt="shape">
            <div class="row">
                <div class="col-xl-6 col-lg-6">
                    <div class="about-img position-relative mb-50">
                        <div class="about-main-img">
                            <img src="{{ asset('frontend/assets/image/home-banner__illust.svg')}}" alt="about">
                        </div>
                        <img class="about-shape-1" src="{{ asset('frontend/assets/image/shape/education-shape-01.png')}}" alt="about">
                        <img class="about-shape-2" src="{{ asset('frontend/assets/image/shape/education-shape-02.png')}}" alt="about">
                        <img class="about-shape-3" src="{{ asset('frontend/assets/image/shape/education-shape-05.png')}}" alt="about">
                    </div>
                </div>
                <div class="col-xl-5 col-lg-5">
                    <div class="about-content mb-50">
                        <div class="section-title mb-30">
                            <h2>Increase Your 
                                Education Level <span class="down-mark-line-2">With Us</span>
                            </h2>
                        </div>
                        <div class="student-choose-list">
                            <p class=" mb-30">Helping employees gain skills and providing career development often
                                take a back seat
                                to business priorities but workplace. We offer fresh courses on emerging topics that
                                keep your level.</p>
                            <ul>
                                <li><i class="fas fa-check-circle"></i>Course curriculum </li>
                                <li><i class="fas fa-check-circle"></i>Easy to enroll courses</li>
                                <li><i class="fas fa-check-circle"></i>Know the latest technology</li>
                            </ul>
                        </div>
                        <a class="edu-btn" data-bs-toggle="modal" data-bs-target="#exampleModal">Apply now</a>
                    </div>
                </div>
            </div>
        </div>

    </section> --}}
    <!-- education-area-end -->
    <section class="Comparison-section pt-70 pb-70" id="Comparison">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10 col-md-10">
                    <div class="text-center">
                        <h2 class="mb-30"> Comparative Analysis
                            <span class="down-mark-line-2">
                            </span>
                        </h2>
                    </div>
                    <div class="Comparison-box">
                        <div class="section-title text-center">
                            <table>
                                <thead>
                                    <tr>
                                        <th class="fontBold">Benefits</th>
                                        <th class="fontBold">Us</th>
                                        <th class="fontBold">Similar Companies</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Batch size</td>
                                        <td>Maximum 3</td>
                                        <td>10+</td>
                                    </tr>
                                    <tr>
                                        <td>Personalised-Homework </td>
                                        <td>Yes </td>
                                        <td>No </td>
                                    </tr>
                                    <tr>
                                        <td>12 hour doubt Support </td>
                                        <td>Yes </td>
                                        <td>No</td>
                                    </tr>
                                    <tr>
                                        <td>Team of two tutors </td>
                                        <td>Yes</td>
                                        <td>Yes</td>
                                    </tr>
                                    <tr>
                                        <td>Missed classes covered</td>
                                        <td>Yes</td>
                                        <td>No</td>
                                    </tr>
                                    <tr>
                                        <td>Price(INR)</td>
                                        <td>
                                            < 40000 </td>
                                        <td> > 60000 </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!----testimonial section start-->
    <section class="testimonial-area pb-120 pt-90" id="testimonial">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 offset-lg-3">
                    <div class="section-title text-center mb-55">
                        <h2>What Students<br>Think and Say About <span class="down-mark-line">Us</span></h2>
                    </div>
                </div>
            </div>
            <!-- Slider main container -->
            <div class="swiper swiper-container testimonial-active swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper" id="swiper-wrapper-fbb2d7933f39c051" aria-live="off"
                    style="transform: translate3d(-2300px, 0px, 0px); transition-duration: 0ms;">
                    @forelse ($testimonials as $testimonial)
                    <div class="swiper-slide" data-swiper-slide-index="0" role="group">
                        <div class="testimonial-items position-relative">
                            <div class="testimonial-header">
                                <div class="testimonial-img">
                                    <img src=@if($testimonial->image != null) 
                                    {{ asset($testimonial->image)}}
                                    @else 
                                    {{ asset('frontend/assets/image/icon/user.png')}} 
                                    @endif
                                    alt="image not found">
                                </div>
                                
                                <div class="testimonial-title" style="padding-top:10px ">
                                    <h4>{{$testimonial->client}}</h4>
                                    <span>{{$testimonial->designation}}</span>
                                </div>
                            </div>
                            <div class="testimoni-quotes">
                                <img src="{{ asset('frontend/assets/image/testimonial/quotes.png')}}" alt="image not found">

                            </div>
                            <div class="testimonial-body">
                                <h3>{{$testimonial->title}}</h3>
                                {!!$testimonial->description!!}
                            </div>
                        </div>
                    </div> 
                    @empty
                    <div class="swiper-slide" data-swiper-slide-index="0" role="group">
                        <div class="testimonial-items position-relative">
                            <div class="testimonial-header">
                                
                                <div class="testimonial-title" style="padding-top:10px ">
                                    <h4>David Johnson</h4>
                                    <span>Student</span>
                                </div>
                            </div>
                            <div class="testimoni-quotes">
                                <img src="{{ asset('frontend/assets/image/testimonial/quotes.png')}}" alt="image not found">

                            </div>
                            <div class="testimonial-body">
                                <h3>Great Course !</h3>
                                <p>Thanks to our marketplace model, our content keeps pace with market changes.
                                    You’ll find
                                    courses on the latest technologies and business practice</p>
                            </div>
                            <div class="testimonial-icon">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div> 
                    @endforelse
                                      
                </div>
                 <!-- If we need pagination -->
                 <div class="testimonial-pagination text-center swiper-pagination-clickable swiper-pagination-bullets">
                    
                </div>
                <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
            </div>
        </div>
    </section>
    <!----testimonial section end here-->
    <!----faq section start here-->
    <section class="faq-area pt-90 pb-90" id="faq">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 offset-lg-3">
                    <div class="section-title text-center mb-55">
                        <h2> Frequently Asked Queastions </h2>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-lg-8 col-md-8">
                    <div class="accordion" id="accordionExample">
                        @forelse ($faqs as $faq)
                            
                        
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="heading{{$faq->id}}">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapse{{$faq->id}}" aria-expanded="true" aria-controls="collapse{{$faq->id}}">
                                    {{$faq->question}}
                                </button>
                            </h2>
                            <div id="collapse{{$faq->id}}" class="accordion-collapse collapse"
                                aria-labelledby="heading{{$faq->id}}" data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    {{$faq->answer}}
                                </div>
                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="text-center">No Faqs Available</div>
                    @endforelse
                </div>
            </div>
        </div>
    </section>
    <!----faq section here here-->
</main>
@endsection