@extends('main-site.partials.app')

@section('title', __('About Us'))

@section('content')
    <!-- Page Banner -->
    <div class="page-banner">
        <div class="container position-relative">
            <div class="row justify-content-center">
                <div class="col-xl-7 col-md-10">
                    <div class="banner-content text-center">
                        <h1 class="page-banner-title">
                            {{ __("website_301.about_us.About1") }}
                            <br>
                            {{ __("website_301.about_us.About2") }}

                        </h1>
                        <p class="banner-desc mb-0">
                            {{ __("website_301.about_us.About3") }}

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

    <div class="bg-grey">

        <!-- how-start -->
        <section class="start-section sec-padding position-relative wow fadeInUp">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 mb-4 mb-lg-0">
                        <div class="start-content">
                            <div class="section-title2">
                                <p class="d-flex align-items-center gap-2">{{ __("website_301.about_us.HowStart") }}<span><span class="line1"></span><span class="line2"></span></span></p>
                                <h2 class="mb-0">{{ __("website_301.about_us.About1") }} <br> {{ __("website_301.about_us.About2") }}</h2>
                            </div>
                            <p class="mb-0">
                                {{ __("website_301.about_us.About4") }}
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="start-img">
                            <img src="{{ asset('main-site/assets/img/how-start.png') }}" class="w-100" alt="">
                        </div>
                        <div class="start-count">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="count">
                                        <h2 class="mb-1">{{ App\Http\Helpers\HelperSetting::get_value('statistics_sections_years') }}</h2>
                                        <p class="mb-0">{{ __("website_301.about_us.Exp") }}</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="count">
                                        <h2 class="mb-1">{{ App\Http\Helpers\HelperSetting::get_value('statistics_count_visitors') }}</h2>
                                        <p class="mb-0">{{ __("website_301.about_us.Visits") }}</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="count">
                                        <h2 class="mb-1">{{App\Http\Helpers\HelperSetting::get_value('statistics_count_teacher') }}</h2>
                                        <p class="mb-0">{{ __("website_301.about_us.TeachersNo") }}</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="count">
                                        <h2 class="mb-1">{{ App\Http\Helpers\HelperSetting::get_value('statistics_count_course') }}</h2>
                                        <p class="mb-0">{{ __("website_301.about_us.CoursesNo") }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- features -->
        <section class="features-section sec-padding position-relative wow fadeInUp">
            <div class="container">
                <div class="section-title2">
                    <p class="d-flex align-items-center gap-2">{{ __("website_301.about_us.BestEver") }}<span><span class="line1"></span><span class="line2"></span></span></p>
                    <h2 class="mb-0">{{ __("website_301.about_us.Discover1") }}<br>{{ __("website_301.about_us.Discover2") }}</h2>
                </div>
                <div class="row">
                    <div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
                        <div class="feature-card">
                            <svg width="40" height="50" viewBox="0 0 40 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g opacity="0.4">
                                <path d="M32.5 5V18.75H7.5V5C7.5 2.23858 9.73858 0 12.5 0H27.5C30.2614 0 32.5 2.23858 32.5 5Z" fill="#530F0F"/>
                                </g>
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M20 50C31.0457 50 40 41.0457 40 30C40 18.9543 31.0457 10 20 10C8.9543 10 0 18.9543 0 30C0 41.0457 8.9543 50 20 50ZM23.3579 24.2012L21.9672 21.2714C21.1625 19.5762 18.8375 19.5762 18.0328 21.2714L16.6421 24.2012C16.3226 24.8743 15.7049 25.3409 14.9904 25.4489L11.8807 25.9187C10.0813 26.1905 9.36287 28.4895 10.6649 29.8091L12.9151 32.0896C13.4321 32.6136 13.668 33.3685 13.546 34.1084L13.0148 37.3285C12.7074 39.1918 14.5884 40.6126 16.1978 39.7329L18.9792 38.2126C19.6183 37.8633 20.3817 37.8633 21.0208 38.2126L23.8022 39.7329C25.4116 40.6126 27.2926 39.1918 26.9852 37.3285L26.454 34.1084C26.332 33.3685 26.5679 32.6136 27.0849 32.0896L29.3351 29.8091C30.6371 28.4895 29.9187 26.1905 28.1193 25.9187L25.0096 25.4489C24.2951 25.3409 23.6774 24.8743 23.3579 24.2012Z" fill="#530F0F"/>
                            </svg>
                            <h4>{{ __("website_301.about_us.Quality") }}</h4>
                            <p>{{ __("website_301.about_us.Quality2") }}</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
                        <div class="feature-card">
                            <svg width="50" height="46" viewBox="0 0 50 46" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M23.2921 6.56112C17.9828 2.8408 10.5318 1.15487 4.98582 0.528179C2.24106 0.218023 0 2.51006 0 5.33795V33.4999C0 36.3278 2.24106 38.6207 4.98582 38.9308C10.5318 39.5575 17.9828 41.2434 23.2921 44.9637C23.8023 45.3212 24.4011 45.5 25 45.5V7.09738C24.4011 7.09738 23.8023 6.91862 23.2921 6.56112ZM5.64736 13.3499C5.80584 12.3266 6.76389 11.6255 7.78722 11.784C11.0442 12.2884 14.712 13.1314 18.1765 14.4712C19.1424 14.8446 19.6226 15.9304 19.2491 16.8962C18.8756 17.8621 17.7898 18.3422 16.824 17.9688C13.6774 16.752 10.2853 15.9655 7.21331 15.4898C6.18997 15.3313 5.48887 14.3732 5.64736 13.3499ZM7.78722 21.784C6.76389 21.6255 5.80584 22.3266 5.64736 23.3499C5.48887 24.3732 6.18997 25.3313 7.21331 25.4898C8.76142 25.7295 10.3956 26.0489 12.0416 26.4642C13.0457 26.7175 14.065 26.1089 14.3183 25.1048C14.5716 24.1008 13.963 23.0814 12.959 22.8281C11.1864 22.3809 9.43656 22.0394 7.78722 21.784Z" fill="#530F0F"/>
                                <path opacity="0.4" d="M26.7079 6.56112C32.0172 2.8408 39.4682 1.15487 45.0142 0.528179C47.7589 0.218023 50 2.51006 50 5.33795V33.4999C50 36.3278 47.7589 38.6207 45.0142 38.9308C39.4682 39.5575 32.0172 41.2434 26.7079 44.9637C26.1977 45.3212 25.5989 45.5 25 45.5V7.09738C25.5989 7.09738 26.1977 6.91862 26.7079 6.56112Z" fill="#530F0F"/>
                            </svg>
                            <h4>{{ __("website_301.about_us.Strategy") }}</h4>
                          <p>
                            {{ __("website_301.about_us.Strategy2") }}
                          </p>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
                        <div class="feature-card">
                            <svg width="54" height="44" viewBox="0 0 54 44" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <g opacity="0.4">
                                <path d="M34.5 22C34.5 17.8579 31.1422 14.5 27 14.5C22.8579 14.5 19.5 17.8579 19.5 22C19.5 26.1421 22.8579 29.5 27 29.5C31.1422 29.5 34.5 26.1421 34.5 22Z" fill="#530F0F"/>
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M40.5176 0.852093C41.1516 0.0333451 42.3293 -0.116406 43.148 0.517614C46.4466 3.07192 49.1231 6.31267 50.9798 10.0069C52.8366 13.7013 53.8258 17.7546 53.8732 21.8719C53.9207 25.9891 53.0251 30.0633 51.2537 33.7977C49.4824 37.5319 46.8808 40.8306 43.6415 43.4566C42.8371 44.1087 41.6564 43.9853 41.0042 43.1808C40.3521 42.3764 40.4756 41.1957 41.28 40.5436C44.0888 38.2665 46.3373 35.4122 47.8655 32.1905C49.3937 28.969 50.1643 25.459 50.1235 21.9151C50.0827 18.3711 49.2314 14.8786 47.6292 11.6909C46.027 8.50293 43.713 5.69805 40.852 3.48256C40.0333 2.84854 39.8835 1.67084 40.5176 0.852093Z" fill="#530F0F"/>
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M13.4825 0.852093C12.8485 0.0333451 11.6708 -0.116406 10.852 0.517614C7.55347 3.07192 4.87688 6.31267 3.02018 10.0069C1.16339 13.7013 0.174215 17.7546 0.12679 21.8719C0.079366 25.9891 0.974926 30.0633 2.74634 33.7977C4.51766 37.5319 7.11924 40.8306 10.3585 43.4566C11.1629 44.1087 12.3437 43.9853 12.9958 43.1808C13.6479 42.3764 13.5244 41.1957 12.72 40.5436C9.91118 38.2665 7.66272 35.4122 6.13448 32.1905C4.60634 28.969 3.83572 25.459 3.87654 21.9151C3.91736 18.3711 4.76865 14.8786 6.3708 11.6909C7.97305 8.50293 10.287 5.69805 13.148 3.48256C13.9667 2.84854 14.1165 1.67084 13.4825 0.852093Z" fill="#530F0F"/>
                                </g>
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M27.0391 29.5C28.0746 29.5 28.875 29.2755 28.875 29.2755V42.4092C28.875 43.2188 28.0355 43.875 27 43.875C25.9645 43.875 25.125 43.2188 25.125 42.4092V29.2755C25.125 29.2755 26.0035 29.5 27.0391 29.5Z" fill="#530F0F"/>
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M35.5228 10.8454C36.1605 10.0295 37.3389 9.88511 38.1547 10.5228C39.9126 11.8969 41.34 13.6291 42.3306 15.6008C43.3215 17.5728 43.8496 19.7334 43.8741 21.9291C43.8986 24.1247 43.4189 26.296 42.4721 28.2885C41.5254 30.2806 40.1366 32.0422 38.4092 33.4525C37.6071 34.1074 36.4259 33.988 35.771 33.1859C35.1161 32.3837 35.2355 31.2026 36.0376 30.5477C37.3427 29.4821 38.3812 28.1602 39.0851 26.679C39.7888 25.1981 40.1425 23.5912 40.1244 21.971C40.1063 20.3507 39.7167 18.7511 38.9798 17.2844C38.2427 15.8173 37.1745 14.5163 35.8453 13.4773C35.0294 12.8396 34.885 11.6612 35.5228 10.8454Z" fill="#530F0F"/>
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M18.4772 10.8454C17.8395 10.0295 16.6611 9.88511 15.8453 10.5228C14.0875 11.8969 12.66 13.6291 11.6694 15.6008C10.6786 17.5728 10.1504 19.7334 10.1259 21.9291C10.1014 24.1247 10.5811 26.296 11.5279 28.2885C12.4746 30.2806 13.8634 32.0422 15.5908 33.4525C16.3929 34.1074 17.5741 33.988 18.229 33.1859C18.8839 32.3837 18.7645 31.2026 17.9624 30.5477C16.6573 29.4821 15.6188 28.1602 14.915 26.679C14.2112 25.1981 13.8576 23.5912 13.8757 21.971C13.8938 20.3507 14.2833 18.7511 15.0202 17.2844C15.7573 15.8173 16.8255 14.5163 18.1547 13.4773C18.9706 12.8396 19.115 11.6612 18.4772 10.8454Z" fill="#530F0F"/>
                            </svg>
                            <h4>{{ __("website_301.about_us.Online") }}</h4>
                            <p>
                                {{ __("website_301.about_us.Online2") }}                            </p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
                        <div class="feature-card">
                            <svg width="42" height="50" viewBox="0 0 42 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M11 15.5558V26.0002C11 28.2093 12.7909 30.0002 15 30.0002H27C29.2091 30.0002 31 28.2093 31 26.0002V15.5558L24.046 18.6464C22.1068 19.5083 19.8932 19.5083 17.954 18.6464L11 15.5558ZM37.25 12.778V23.7502C37.25 24.7857 38.0895 25.6252 39.125 25.6252C40.1605 25.6252 41 24.7857 41 23.7502V11.1089C40.9772 11.1206 40.9538 11.1318 40.9299 11.1425L37.25 12.778Z" fill="#530F0F"/>
                                <path opacity="0.4" d="M1.06996 8.85787L17.9538 1.35393C19.8931 0.492048 22.1067 0.492048 24.0459 1.35393L40.9298 8.85787C41.9195 9.29777 41.9195 10.7025 40.9298 11.1424L24.0459 18.6463C22.1067 19.5082 19.8931 19.5082 17.9538 18.6463L1.06996 11.1424C0.0801944 10.7025 0.0801944 9.29777 1.06996 8.85787Z" fill="#530F0F"/>
                                <path opacity="0.4" d="M26.7489 33.499L22.7776 37.5147C21.7991 38.5041 20.2009 38.5041 19.2224 37.5147L15.2511 33.499C14.6376 32.8786 13.742 32.6142 12.905 32.8603C5.89215 34.9226 1 39.5822 1 45C1 47.7614 3.23858 50 6 50H36C38.7614 50 41 47.7614 41 45C41 39.5822 36.1078 34.9226 29.095 32.8603C28.258 32.6142 27.3624 32.8786 26.7489 33.499Z" fill="#530F0F"/>
                            </svg>
                            <h4>{{ __("website_301.about_us.Exams") }}</h4>
                            <p>
                                {{ __("website_301.about_us.Exams2") }}                   </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- About -->
        <section class="about-section sec-padding position-relative wow fadeInUp">
            <div class="container">
                <div class="row gx-lg-6">
                    <div class="col-lg-6 mb-4 mb-lg-0">
                        <div class="about-img position-relative">
                            <img src="{{ asset('main-site/assets/img/about.png') }}" class="img-fluid" alt="About">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="about-content">
                            <div class="section-title">
                                <h2>{{ __("website.home.StartYourJourney") }}</h2>
                            </div>
                            <div class="d-flex gap-3 align-items-start mb-4">
                                <img src="{{ asset('main-site/assets/img/icons/focus.png') }}" alt="">
                                <p class="mb-0">{{ __("website.home.ExploreDiverseMaterials") }}</p>

                            </div>
                            <div class="d-flex gap-3 align-items-start mb-4">
                                <img src="{{ asset('main-site/assets/img/icons/graduation cap.png') }}" alt="">
                                <p class="mb-0">{{ __("website_301.home.ExploreDiverseMaterials4") }}</p>

                            </div>
                            <div class="d-flex gap-3 align-items-start mb-0">
                                <img src="{{ asset('main-site/assets/img/icons/globe.png') }}" alt="">
                                <p class="mb-0">{{ __("website_301.home.ExploreDiverseMaterials5") }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="shape1"></div>
            <div class="shape2"></div>
        </section>
    </div>


    <!-- cta section -->
    <div class="cta-section position-relative sec-padding wow fadeInUp">
        <div class="container position-relative">
            <div class="row justify-content-center">
                <div class="col-lg-6 col-md-8 text-center">
                    <h2 class="title mb-3">{{ __("website_301.home.Cta1") }}</h2>
                    <p class="mb-4">{{ __("website_301.home.Cta2") }}</p>
                    @auth
                        <a href="{{ route('posts') }}" class="main-btn white">
                            {{ __("website_301.home.Cta4") }}
                            </a>
                    @else
                        <a href="{{ route('login') }}" class="main-btn white">
                            {{ __("website_301.home.Cta5") }}
                        </a>
                    @endauth
                </div>
            </div>
        </div>
    </div>

    <!-- Explore -->
    <section class="explore-section about-section sec-padding sec-padding-top wow fadeInUp">
        <div class="container">
            <div class="row align-items-center gx-lg-6">
                <div class="col-lg-5 mb-4 mb-lg-0">
                    <div>
                        <img src="{{ asset('main-site/assets/img/explore.png') }}" class="img-fluid" alt="About">
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="about-content">
                        <div class="section-title">
                            <h2>{{ __("website_301.home.Explore1") }}</h2>
                        </div>
                        <p class="mb-4">
                                {{ __("website_301.home.Explore2") }}
                        </p>
                        <div class="d-flex gap-2 align-items-start mb-2">
                            <i class="icon-check-circle"><span class="path1"></span><span class="path2"></span></i>
                            <p class="mb-0">{{ __("website_301.home.Explore3") }}</p>
                        </div>
                        <div class="d-flex gap-2 align-items-start mb-2">
                            <i class="icon-check-circle"><span class="path1"></span><span class="path2"></span></i>
                            <p class="mb-0">{{ __("website_301.home.Explore5") }}</p>
                        </div>
                        <div class="d-flex gap-2 align-items-start mb-2">
                            <i class="icon-check-circle"><span class="path1"></span><span class="path2"></span></i>
                            <p class="mb-0">{{ __("website_301.home.Explore6") }}</p>
                        </div>
                        <a href="{{ auth()->check() ? route('courses') : route('login') }}"
                            class="main-btn mt-4">{{ __("website_301.home.Explore4") }}</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonial -->
    <section class="testimonial-section sec-padding wow fadeInUp">
        <div class="container">
            <div class="section-title text-center">
                <h2><span>{{ __("website_301.home.About1") }}</span>{{ __("website_301.home.About2")}}</h2>
                <p class="mb-0">{{ __("website_301.home.About3")}}</p>
            </div>
            <div class="row justify-content-center">
                <div class="col-xl-6 col-md-10">
                    <div class="testimonial-slider owl-theme owl-carousel">
                        @foreach ($reviews as $review)
                        <div class="testi-card d-flex">
                            <div class="testi-img">
                                <img src="{{ asset($review->image) }}" alt="" class="img-fluid">
                            </div>
                            <div class="testi-content">
                                <div class="text-end mb-1">
                                    <svg width="34" height="31" viewBox="0 0 34 31" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M14.149 4.69975C12.4823 6.36642 11.0157 8.33309 9.749 10.5998C8.549 12.7998 7.71567 15.0664 7.249 17.3998C7.51567 17.3331 7.98233 17.2998 8.649 17.2998C10.1157 17.2998 11.349 17.8998 12.349 19.0998C13.4157 20.2331 13.949 21.6998 13.949 23.4998C13.949 25.5664 13.3157 27.2664 12.049 28.5998C10.7823 29.8664 9.11567 30.4998 7.049 30.4998C4.98233 30.4998 3.31567 29.7331 2.049 28.1998C0.782333 26.6664 0.148999 24.4998 0.148999 21.6998C0.148999 18.0998 1.08233 14.3664 2.949 10.4998C4.81567 6.56642 7.349 3.26642 10.549 0.599754L14.149 4.69975ZM28.249 17.2998C29.7823 17.2998 31.049 17.8998 32.049 19.0998C33.1157 20.2331 33.649 21.6998 33.649 23.4998C33.649 25.5664 33.0157 27.2664 31.749 28.5998C30.4823 29.8664 28.8157 30.4998 26.749 30.4998C24.6157 30.4998 22.9157 29.7331 21.649 28.1998C20.3823 26.6664 19.749 24.4998 19.749 21.6998C19.749 18.1664 20.6823 14.4331 22.549 10.4998C24.4157 6.56642 26.949 3.26642 30.149 0.599754L33.749 4.69975C32.0823 6.36642 30.649 8.33309 29.449 10.5998C28.249 12.7998 27.4157 15.0664 26.949 17.3998C27.2157 17.3331 27.649 17.2998 28.249 17.2998Z"
                                            fill="#530F0F" fill-opacity="0.5" />
                                    </svg>
                                </div>
                                <p>
                                    {{ $review->review }}
                                </p>
                                <div class="mt-1">
                                    <svg width="34" height="31" viewBox="0 0 34 31" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M19.851 26.2998C21.5177 24.6331 22.9843 22.6664 24.251 20.3998C25.451 18.1998 26.2843 15.9331 26.751 13.5998C26.4843 13.6664 26.0177 13.6998 25.351 13.6998C23.8843 13.6998 22.651 13.0998 21.651 11.8998C20.5843 10.7664 20.051 9.29976 20.051 7.49976C20.051 5.43309 20.6843 3.73309 21.951 2.39976C23.2177 1.13309 24.8843 0.499757 26.951 0.499757C29.0177 0.499757 30.6843 1.26642 31.951 2.79976C33.2177 4.33309 33.851 6.49976 33.851 9.29976C33.851 12.8998 32.9177 16.6331 31.051 20.4998C29.1843 24.4331 26.651 27.7331 23.451 30.3998L19.851 26.2998ZM5.751 13.6998C4.21766 13.6998 2.951 13.0998 1.951 11.8998C0.884333 10.7664 0.351 9.29976 0.351 7.49976C0.351 5.43309 0.984333 3.73309 2.251 2.39975C3.51767 1.13309 5.18433 0.499755 7.251 0.499755C9.38433 0.499755 11.0843 1.26642 12.351 2.79976C13.6177 4.33309 14.251 6.49976 14.251 9.29976C14.251 12.8331 13.3177 16.5664 11.451 20.4998C9.58433 24.4331 7.051 27.7331 3.851 30.3998L0.250996 26.2998C1.91766 24.6331 3.351 22.6664 4.551 20.3998C5.751 18.1998 6.58433 15.9331 7.051 13.5998C6.78433 13.6664 6.351 13.6998 5.751 13.6998Z"
                                            fill="#530F0F" fill-opacity="0.5" />
                                    </svg>
                                </div>
                                <h3 class="user-name">{{ $review->name }}</h3>
                                <p class="user-title mb-0">{{ $review->job }}</p>
                            </div>
                        </div>
                    @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection