@extends('layouts.front.master')
@section('contant')

<main>

        <!-- Banner area start here -->
        <section class="banner-inner-area sub-bg bg-image" data-background="assets/images/bg/banner-inner-bg.png" style="background-image: url(&quot;assets/images/bg/banner-inner-bg.png&quot;);">
            <div class="banner-inner__shape1">
                <img class="animation__sunMove" src="assets/images/shape/banner-inner-shape1.png" alt="image">
            </div>
            <div class="banner-inner__shape2">
                <img src="assets/images/shape/banner-inner-shape2.png" alt="image">
            </div>
            <div class="banner-inner__shape3">
                <img class="animation__arryLeftRight" src="assets/images/shape/banner-inner-shape3.png" alt="image">
            </div>
            <div class="banner-inner__shape4">
                <img class="animation__arryUpDown" src="assets/images/shape/banner-inner-shape4.png" alt="image">
            </div>
            <div class="banner-inner__shape5">
                <img src="assets/images/shape/banner-inner-shape5.png" alt="image">
            </div>
            <div class="banner-inner__circle">
                <img class="slide-effect1" src="assets/images/shape/banner-inner-circle.png" alt="image">
            </div>
            <div class="banner-inner__circle2">
                <img class="slide-effect2" src="assets/images/shape/banner-inner-circle2.png" alt="image">
            </div>
            <div class="banner-inner__dots">
                <img class="pxl-image-zoom" src="assets/images/shape/banner-inner-dots.png" alt="image">
            </div>
            <div class="container">
                <div class="banner-inner__content">
                    <h1>
                        About Us
                    </h1>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><i class="fa-regular fa-angle-right"></i></li>
                        <li>About Us</li>
                    </ul>
                </div>
            </div>
        </section>
        <!-- Banner area end here -->
        <!-- About area start here -->
        <section class="about-area about-inner-area pt-120 extra-padding">
            <div class="about-inner__shape">
                <img class="animation__arryUpDown" src="assets/images/shape/about-inner-shape.png" alt="image">
            </div>
            <div class="container">
                <div class="row g-4">
                    <div class="col-xl-5 wow fadeInRight" data-wow-delay="200ms" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 200ms; animation-name: fadeInRight;">
                        <div class="about__left-part">
                            <div class="about__image">
                                <img class="about-dots sway__animation" src="{{asset('assets/images/shape/about-dots.png')}}" alt="shape">
                                <img class="about-circle" src="{{asset('assets/images/shape/about-circle.png')}}" alt="shape">
                                <img src="{{asset('assets/images/about/about-image1.png')}}" alt="image">
                                {{-- <img class="sm-image" src="{{asset('assets/images/about/about-image2.png')}}" alt="image"> --}}
                                <div class="count-info">
                                    <h5 class="primary-color fs-28"><span class="count primary-color">25</span>+</h5>
                                    <span class="fs-14">Years Experience</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-7">
                        <div class="about__right-wrp">
                            <div class="section-header">
                                <h5 class="wow fadeInUp" data-wow-delay="00ms" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 0ms; animation-name: fadeInUp;">ABOUT US</h5>
                                <h2 class="wow fadeInUp" data-wow-delay="200ms" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 200ms; animation-name: fadeInUp;">Learn &amp; Grow
                                    Your <span>Skills <img src="{{asset('assets/images/shape/header-shape.png')}}" alt="shape"></span> From Anywhere
                                </h2>
                                <p class="wow fadeInUp" data-wow-delay="00ms" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 0ms; animation-name: fadeInUp;">
                                    At Cert Solution, we are committed to empowering students and IT professionals with the knowledge
                                    and skills they need to excel in their careers. As a leading education platform, we offer a wide
                                    range of courses designed to help you learn, grow, and achieve industry-recognized certifications.
                                    Whether you're just starting out or looking to advance your career, our expert-led training programs
                                    provide the tools and support necessary to reach your goals.</p>
                            </div>
                            <div class="about__right-part mt-30 wow fadeInDown" data-wow-delay="200ms" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 200ms; animation-name: fadeInDown;">
                                <div class="about__info">
                                    <div class="icon bg__1">
                                        <img src="assets/images/icon/about-icon1.png" alt="icon">
                                    </div>
                                    <div>
                                        <h4>Educator Support</h4>
                                        <p class="mt-10">Elit Aenean scelerisque vitae consequat the.</p>
                                    </div>
                                </div>
                                <div class="about__info">
                                    <div class="icon bg__2">
                                        <img src="assets/images/icon/about-icon2.png" alt="icon">
                                    </div>
                                    <div>
                                        <h4>Flexible Classes</h4>
                                        <p class="mt-10">Elit Aenean scelerisque vitae consequat the.</p>
                                    </div>
                                </div>
                            </div>
                            <!-- <a href="about.html" class="btn-one mt-50 wow fadeInDown" data-wow-delay="200ms" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 200ms; animation-name: fadeInDown;">About Us<i class="fa-light fa-arrow-right-long"></i></a> -->
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- About area end here -->

        <!-- Discount area start here -->
        <section class="discout-two-area pt-120 pb-30 primary-bg">
            <div class="discout-two__shape-left">
                <img src="assets/images/shape/discout-two-shpe-left.png" alt="shape">
            </div>
            <div class="discout-two__shape-right">
                <img src="assets/images/shape/discout-two-shpe-right.png" alt="shape">
            </div>
            <div class="container">
                <div class="col-xl-5">
                    <div class="discout-two__item">
                        <h2 class="text-white wow fadeInUp" data-wow-delay="00ms" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 0ms; animation-name: fadeInUp;">15% Offer
                            For All Categories Courses</h2>
                        <a href="{{ route('allCources') }}" class="btn-one-light mt-30 wow fadeInUp" data-wow-delay="00ms" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 0ms; animation-name: fadeInUp;">All Courses<i class="fa-light fa-arrow-right-long"></i></a>
                        <img class="discout-arry animation__arryLeftRight" src="assets/images/shape/discout-arry.png" alt="shape">
                    </div>
                </div>
            </div>
            <div class="discout-two__image image">
                <img src="assets/images/offer/offter-ten-hero.png" alt="image">
                <img class="shape" src="assets/images/offer/offter-ten-hero.png" alt="shape">
            </div>
        </section>
        <!-- Discount area end here -->

        <!-- Team area start here -->
        <!-- <section class="team-area sub-bg pt-120 pb-120">
            <div class="team__line added-inner-page">
                <img class="sway_Y__animation" src="assets/images/shape/line.png" alt="line-shape">
            </div>
            <div class="team__earth">
                <img class="animation__arryUpDown" src="assets/images/shape/earth.png" alt="shape">
            </div>
            <div class="team__right-rectangle wow slideInRight" data-wow-delay="200ms" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 200ms; animation-name: slideInRight;">
                <img src="assets/images/shape/right-rectangle.png" alt="shape">
            </div>
            <div class="container">
                <div class="section-header mb-60 text-center">
                    <h5 class="wow fadeInUp" data-wow-delay="00ms" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 0ms; animation-name: fadeInUp;">OUR MENTOR</h5>
                    <h2 class="wow fadeInUp" data-wow-delay="200ms" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 200ms; animation-name: fadeInUp;">Meet with <span>Our
                            Expert <img src="assets/images/shape/header-shape.png" alt="shape"></span>
                        Mentor</h2>
                </div>
                <div class="row g-4">
                    <div class="col-xl-4 col-md-6 wow fadeInUp" data-wow-delay="00ms" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 0ms; animation-name: fadeInUp;">
                        <div class="team__item">
                            <div class="team__image image">
                                <img src="assets/images/team/team-image1.jpg" alt="image">
                            </div>
                            <div class="team__content">
                                <h4 class="fs-22">
                                    <a class="primary-hover" href="team-details.html">Mohammad Arifuzzaman</a>
                                </h4>
                                <span>Marketing Expert</span>
                                <div class="social-icons">
                                    <a href="#0"><i class="fa-brands fa-facebook-f"></i></a>
                                    <a href="#0"><i class="fa-brands fa-instagram"></i></a>
                                    <a href="#0"><i class="fa-brands fa-linkedin-in"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-md-6 wow fadeInUp" data-wow-delay="200ms" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 200ms; animation-name: fadeInUp;">
                        <div class="team__item">
                            <div class="team__image image">
                                <img src="assets/images/team/team-image2.jpg" alt="image">
                            </div>
                            <div class="team__content">
                                <h4 class="fs-22">
                                    <a class="primary-hover" href="team-details.html">Anneniya Roy</a>
                                </h4>
                                <span>Web Developer</span>
                                <div class="social-icons">
                                    <a href="#0"><i class="fa-brands fa-facebook-f"></i></a>
                                    <a href="#0"><i class="fa-brands fa-instagram"></i></a>
                                    <a href="#0"><i class="fa-brands fa-linkedin-in"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-md-6 wow fadeInUp" data-wow-delay="400ms" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 400ms; animation-name: fadeInUp;">
                        <div class="team__item">
                            <div class="team__image image">
                                <img src="assets/images/team/team-image3.jpg" alt="image">
                            </div>
                            <div class="team__content">
                                <h4 class="fs-22">
                                    <a class="primary-hover" href="team-details.html">Haven Sardar</a>
                                </h4>
                                <span>WordPress Expert</span>
                                <div class="social-icons">
                                    <a href="#0"><i class="fa-brands fa-facebook-f"></i></a>
                                    <a href="#0"><i class="fa-brands fa-instagram"></i></a>
                                    <a href="#0"><i class="fa-brands fa-linkedin-in"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section> -->
        <!-- Team area end here -->

        <!-- Testimonial area start here -->
        <section class="testimonial-two-area pt-120 pb-120">
            <div class="testimonial-two__wrp">
                <div class="row g-5">
                    <div class="col-xxl-4">
                        <div class="section-header">
                            <h5 class="wow fadeInUp" data-wow-delay="00ms" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 0ms; animation-name: fadeInUp;">TESTIMONIALS</h5>
                            <h2 class="wow fadeInUp" data-wow-delay="200ms" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 200ms; animation-name: fadeInUp;">Testimonials from
                                Our <span>Students <img src="assets/images/shape/header-shape.png" alt="shape"></span>
                            </h2>
                            <p class="wow fadeInUp" data-wow-delay="400ms" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 400ms; animation-name: fadeInUp;">Aonsectetur
                                adipiscing elit Aenean scelerisque augue <br> vitae consequat Juisque eget
                                congue.
                            </p>
                            <div class="d-flex align-items-center gap-3 mt-30 wow fadeInUp" data-wow-delay="600ms" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 600ms; animation-name: fadeInUp;"><button class="arry-prev testimonial-two__arry-prev" tabindex="0" aria-label="Previous slide" aria-controls="swiper-wrapper-010a44d28332889f"><i class="fa-light fa-arrow-left-long"></i></button>
                                <button class="arry-next testimonial-two__arry-next active" tabindex="0" aria-label="Next slide" aria-controls="swiper-wrapper-010a44d28332889f"><i class="fa-light fa-arrow-right-long"></i></button>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-8">
                        <div class="swiper testimonial-two__slider p-4 radius8 swiper-initialized swiper-horizontal swiper-pointer-events swiper-backface-hidden">
                            <div class="swiper-wrapper" id="swiper-wrapper-010a44d28332889f" aria-live="polite" style="transform: translate3d(-977px, 0px, 0px); transition-duration: 0ms;">

                                @foreach ($reviews as $index => $review)
                                    <div class="swiper-slide {{ $index === 0 ? 'swiper-slide-active' : '' }}" data-swiper-slide-index="{{ $index }}" role="group" aria-label="{{ $index + 1 }} / {{ count($reviews) }}" style="width: 301.667px; margin-right: 24px;">
                                        <div class="testimonial-two__item">
                                            <div class="d-flex align-items-center gap-3">
                                                <div class="image">
                                                    <img src="{{ asset('assets/images/testimonial/rating.png') }}" alt="image">
                                                    <svg width="24" height="18" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M0 0V18L9 9V0H0ZM15 0V18L24 9V0H15Z" fill="#2EB97E"></path>
                                                    </svg>
                                                </div>
                                                <div class="content">
                                                    <h4>{{ $review->user_name }}</h4>
                                                </div>
                                            </div>
                                            <p class="mt-40 mb-30">{{ Str::limit($review->review, 200) }}</p>
                                            <div class="star">
                                                @if($review->rating != null)
                                                        <div class="rating">
                                                            <div class="empty-star">
                                                                @for($i = 0; $i < 5; $i++)
                                                                    <span class="far fa-star"></span>
                                                                @endfor
                                                            </div>
                                                            <div class="fill-star" style="width: {{ ($review->rating / 5) * 100 }}%;">
                                                                @for($i = 0; $i < 5; $i++)
                                                                    <span class="fas fa-star"></span>
                                                                @endfor
                                                            </div>
                                                        </div>
                                                        @endif
                                            </div>
                                        </div>
                                    </div>
                                @endforeach


     
                                

                            </div>
                        <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Testimonial area end here -->
    </main>
@endsection