@extends('layouts.site')
@section('title','Home')
@section('style')
<!-- Plugins/Components CSS -->
<link rel="stylesheet" href="{{ env('SECURE_ASSETS').'/assets/site/include/rs-plugin/css/settings.css'}}" media="screen">
<link rel="stylesheet" href="{{ env('SECURE_ASSETS').'/assets/site/include/rs-plugin/css/layers.css'}}">
<link rel="stylesheet" href="{{ env('SECURE_ASSETS').'/assets/site/include/rs-plugin/css/navigation.css'}}">

<!-- Plugins/Components CSS -->
<link rel="stylesheet" href="{{ env('SECURE_ASSETS').'/assets/site/css/swiper.css'}}">

@endsection
@section('content')
<!-- Content
============================================= -->
@include('partials.site.slider')
<section id="content">
    <div class="content-wrap py-0">
        <!-- about us -->
        <div class="page-section py-5 py-lg-6">
            <div class="container ">
                <div class="row align-items-center justify-content-center col-mb-30">
                    <div class="col-xl fadeInUp animated" data-animate="fadeInUp">
                        <h6 class="mb-4 ls-2 text-uppercase fw-normal">About us</h6>
                        <h1 class="display-3 fw-bolder">Need to know more about <span class="color">Global achievers</span></h1>
                        <p class="mb-5 fw-light" style=" text-align: justify;text-justify: inter-word;">Welcome to Global Achievers International School (GAS), where excellence in education meets holistic development. As a International System school, we are committed to providing a dynamic and inclusive learning...</p>
                        <a href="{{ route('site.aboutUs') }}" class="button button-rounded button-reveal button-large button-border text-end tada animated">
                            <i class="bi-arrow-right"></i>
                            <span>Read more</span>
                        </a>
                    </div>
                    <div class="col-auto pulse animated">
                        <img src="{{ env('SECURE_ASSETS').'/assets/site/images/img/video_1.gif'}}" alt="img" class="kindergarder-mockup-tv rounded-xxl shadow-sm lazy entered lazy-loaded">
                    </div>
                </div>
            </div>
        </div>
        <!-- our vision -->
        <div  class="page-section py-5 py-lg-6" style="background: url({{ env('SECURE_ASSETS').'/assets/site/images/img/section-bg.jpg'}}) no-repeat center center / cover; padding: 80px 0;">
            <div class="container">
                <div class="text-center">
                    <h3 class="display-4 fw-bolder ls-n-3 mb-5 position-relative">
                        <span class="px-1 ls-1">Vision, Mission, and Values</span></h3>
                </div>
                <div class="row justify-content-between align-items-center">
                    <div class="col-md-5">
                        <ul class="swiper-links-container list-unstyled">
                            <li class="swiper-tab-link">
                                <h3 class="swiper-tab-title">Vision</h3>
                                <div class="swiper-tab-content" style=" text-align: justify;text-justify: inter-word;">
                                    <span>Our vision at Global Achievers International School is to cultivate leaders who embody excellence, integrity, and global citizenship.</span>
                                    <span>We strive to foster a dynamic learning environment where curiosity is celebrated, diversity is embraced, and every individual is supported to become aconfident, empathetic, and socially responsible member of society.</span>
                                </div>
                                <div class="swiper-pagination-progress">
                                    <span class="swiper-pagination-bar"></span><span class="swiper-pagination-bar-active"></span>
                                </div>
                            </li>
                            <li class="swiper-tab-link active">
                                <h3 class="swiper-tab-title">Mission</h3>
                                <div class="swiper-tab-content" style=" text-align: justify;text-justify: inter-word;">
                                    <span>
                                        At Global Achievers International School, we are committed to nurturing a diverse community of lifelong learners who embrace creativity, critical thinking, and compassion. Through innovative teaching methods and a rigorous curriculum, we empower students to reach their full potential, equipping them with the knowledge, skills, and values to thrive in an ever-changing world.
                                    </span>
                                </div>
                                <div class="swiper-pagination-progress">
                                    <span class="swiper-pagination-bar"></span><span class="swiper-pagination-bar-active"></span>
                                </div>
                            </li>
                            <li class="swiper-tab-link">
                                <h3 class="swiper-tab-title">Values</h3>
                                <p class="swiper-tab-content">
                                    <span >Respect.</span>
                                    <span >Determination.</span>
                                    <span >Passion.</span>
                                    <span >Teamwork.</span>
                                    <span >Honesty.</span>
                                    <span >Responsibility.</span>
                                    <span >Self-Belief.</span>
                                </p>
                                <div class="swiper-pagination-progress">
                                    <span class="swiper-pagination-bar"></span><span class="swiper-pagination-bar-active"></span>
                                </div>
                            </li>
                        </ul>
                        <a href="{{ route('site.visionAndMission') }}" class="mt-4 button button-rounded button-reveal button-large button-border text-end tada animated">
                            <i class="bi-arrow-right"></i>
                            <span>Read more</span>
                        </a>
                    </div>
                    <div class="col-md-6">
                        <div id="swiper-tab" class="swiper_wrapper h-auto">
                            <div class="swiper swiper-tab-container swiper-fade swiper-initialized swiper-horizontal swiper-autoheight swiper-watch-progress swiper-backface-hidden">
                                <div class="swiper-wrapper" id="swiper-wrapper-95aa63c10a88d2580" aria-live="off" style="height: 599px; transition-duration: 0ms; transition-delay: 0ms;">
                                <div class="swiper-slide swiper-slide-next" role="group" aria-label="3 / 3" style="width: 636px; opacity: 0; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;" data-swiper-slide-index="2">
                                        <img src="{{ env('SECURE_ASSETS').'/assets/site/images/img/slide-1.png'}}" alt=".." class="w-100 rounded-xxl">
                                    </div><div class="swiper-slide swiper-slide-prev" role="group" aria-label="1 / 3" style="width: 636px; opacity: 0; transform: translate3d(-636px, 0px, 0px); transition-duration: 0ms;" data-swiper-slide-index="0">
                                        <img src="{{ env('SECURE_ASSETS').'/assets/site/images/img/slide-1.png'}}" alt=".." class="w-100 rounded-xxl">
                                    </div><div class="swiper-slide swiper-slide-visible swiper-slide-fully-visible swiper-slide-active" role="group" aria-label="2 / 3" style="width: 636px; opacity: 1; transform: translate3d(-1272px, 0px, 0px); transition-duration: 0ms;" data-swiper-slide-index="1">
                                        <img src="{{ env('SECURE_ASSETS').'/assets/site/images/img/slide-1.png'}}" alt=".." class="w-100 rounded-xxl bg-success bg-opacity-10">
                                    </div></div>
                            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
                        </div>
                    </div>
                </div>

                <div class="clear"></div>


            </div>

        </div>
        <!-- our teachers -->
        @include('partials.site.our-teachers-section')
        <!-- school events -->
        <div class="section" style="padding: 100px 0; background-color: #e5e9ef">
            <div class="shape-divider shape-divider-complete" data-shape="wave-5" data-height="50" id="shape-divider-2807"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 140" preserveAspectRatio="none" class="op-ts op-1"><path class="shape-divider-fill" d="M0 0v100c20 17.3 40 29.51 80 29.51 51.79 0 74.69-48.57 151.75-48.57 73.72 0 91 54.88 191.56 54.88C543.95 135.8 554 14 665.69 14c109.46 0 98.85 87 188.2 87 70.37 0 69.81-33.73 115.6-33.73 55.85 0 62 39.62 115.6 39.62 58.08 0 57.52-46.59 115-46.59 39.8 0 60 22.48 79.89 39.69V0z"></path></svg></div>
            <div class="position-absolute top-0 start-0 w-100 h-100" style="background: url({{ env('SECURE_ASSETS').'/assets/site/images/img/hero-bg-icons.svg'}}) center center / cover; opacity: 0.04"></div>
            <div class="container z-3">
                <h2 class="color text-center h1 fw-bold mb-5 pb-2">School Events</h2>
                <div class="row gutter-50">
                    <div class="col-lg-4">
                        <!-- Post Article -->
                        <div class="posts-md">
                            <div class="entry">
                                <div class="entry-image position-relative mb-md-4">
                                    <a href="#">
                                        <img src="{{ env('SECURE_ASSETS').'/assets/site/images/img/slide-1.png'}}" alt="Image 3" class="rounded-5">
                                    </a>
                                    <div class="entry-date">Mar<span>23</span></div>
                                </div>
                                <div class="entry-title text-transform-none">
                                    <h3><a class="ls-0 h3" href="#">First Orientation Day</a></h3>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <!-- Post Article -->
                        <div class="posts-md">
                            <div class="entry">
                                <div class="entry-image position-relative mb-md-4">
                                    <a href="#">
                                        <img src="{{ env('SECURE_ASSETS').'/assets/site/images/img/slide-1.png'}}" alt="Image 3" class="rounded-5">
                                    </a>
                                    <div class="entry-date">TBA<span></span></div>
                                </div>
                                <div class="entry-title text-transform-none">
                                    <h3><a class="ls-0 h3" href="#">Second Orientation Day</a></h3>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <!-- Post Article -->
                        <div class="posts-md">
                            <div class="entry">
                                <div class="entry-image position-relative mb-md-4">
                                    <a href="#">
                                        <img src="{{ env('SECURE_ASSETS').'/assets/site/images/img/slide-1.png'}}" alt="Image 3" class="rounded-5">
                                    </a>
                                    <div class="entry-date">TBA<span></span></div>
                                </div>
                                <div class="entry-title text-transform-none">
                                    <h3><a class="ls-0 h3" href="#">Third Orientation Day</a></h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- <div class="mt-5 d-flex justify-content-center">
                    <a href="#" class="button button-rounded button-reveal button-large button-border text-end tada animated">
                        <i class="bi-arrow-right"></i>
                        <span>View more</span>
                    </a>
                </div> --}}
            </div>
            <div class="shape-divider shape-divider-complete" data-shape="wave-5" data-position="bottom" data-height="60" id="shape-divider-8096"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 140" preserveAspectRatio="none" class="op-ts op-1"><path class="shape-divider-fill" d="M0 0v100c20 17.3 40 29.51 80 29.51 51.79 0 74.69-48.57 151.75-48.57 73.72 0 91 54.88 191.56 54.88C543.95 135.8 554 14 665.69 14c109.46 0 98.85 87 188.2 87 70.37 0 69.81-33.73 115.6-33.73 55.85 0 62 39.62 115.6 39.62 58.08 0 57.52-46.59 115-46.59 39.8 0 60 22.48 79.89 39.69V0z"></path></svg></div>
        </div>
        <!-- statistics -->
        {{-- <div class="row col-mb-50 my-6">
            <div class="col-sm-6 col-lg-3 text-center">
                <i class="i-plain i-xlarge mx-auto mb-0 fa fa-users"></i>
                <div class="counter counter-large" style="color: var(--cnvs-themecolor);"><span data-from="100" data-to="8465" data-refresh-interval="50" data-speed="2000">8465</span></div>
                <h5>Total students</h5>
            </div>

            <div class="col-sm-6 col-lg-3 text-center">
                <i class="i-plain i-xlarge mx-auto mb-0 bi-book"></i>
                <div class="counter counter-large" style="color: #e74c3c;"><span data-from="100" data-to="56841" data-refresh-interval="50" data-speed="2500">56841</span></div>
                <h5>Libraries</h5>
            </div>

            <div class="col-sm-6 col-lg-3 text-center">
                <i class="i-plain i-xlarge mx-auto mb-0 bi-collection-play"></i>
                <div class="counter counter-large" style="color: #233857;"><span data-from="100" data-to="2154" data-refresh-interval="50" data-speed="3500">2154</span></div>
                <h5>Media centers</h5>
            </div>

            <div class="col-sm-6 col-lg-3 text-center">
                <i class="i-plain i-xlarge mx-auto mb-0 bi-water"></i>
                <div class="counter counter-large" style="color: #598fb6;"><span data-from="100" data-to="874" data-refresh-interval="30" data-speed="2700">874</span></div>
                <h5>Swimming pools</h5>
            </div>
        </div> --}}
        <!-- prefooter contact us button -->
        <div class="section footer-stick promo-section bg-transparent" style="padding: 20px 0 100px 0; overflow: visible">
            <div class="container">
                <div class="heading-block border-bottom-0 text-center">
                    <h2 class="text-uppercase ls-1 mb-1">If you would like to make an appointment, please click the button <span>below</span>.</h2>
                    <a href="https://wa.me/+201040977766" target="_blank" class="button button-rounded button-reveal button-large button-border text-end tada animated ms-0 ls-0 mt-4">
                        <i class="bi-whatsapp text-success"></i>
                        <span>Contact Us Now</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section><!-- #content end -->
@endsection

@section('js')
<!-- SLIDER REVOLUTION 5.x SCRIPTS  -->
<script src="{{ env('SECURE_ASSETS').'/assets/site/include/rs-plugin/js/jquery.themepunch.tools.min.js'}}"></script>
<script src="{{ env('SECURE_ASSETS').'/assets/site/include/rs-plugin/js/jquery.themepunch.revolution.min.js'}}"></script>

<script src="{{ env('SECURE_ASSETS').'/assets/site/include/rs-plugin/js/extensions/revolution.extension.actions.min.js'}}"></script>
<script src="{{ env('SECURE_ASSETS').'/assets/site/include/rs-plugin/js/extensions/revolution.extension.carousel.min.js'}}"></script>
<script src="{{ env('SECURE_ASSETS').'/assets/site/include/rs-plugin/js/extensions/revolution.extension.kenburn.min.js'}}"></script>
<script src="{{ env('SECURE_ASSETS').'/assets/site/include/rs-plugin/js/extensions/revolution.extension.layeranimation.min.js'}}"></script>
<script src="{{ env('SECURE_ASSETS').'/assets/site/include/rs-plugin/js/extensions/revolution.extension.migration.min.js'}}"></script>
<script src="{{ env('SECURE_ASSETS').'/assets/site/include/rs-plugin/js/extensions/revolution.extension.navigation.min.js'}}"></script>
<script src="{{ env('SECURE_ASSETS').'/assets/site/include/rs-plugin/js/extensions/revolution.extension.parallax.min.js'}}"></script>
<script src="{{ env('SECURE_ASSETS').'/assets/site/include/rs-plugin/js/extensions/revolution.extension.slideanims.min.js'}}"></script>
<script src="{{ env('SECURE_ASSETS').'/assets/site/include/rs-plugin/js/extensions/revolution.extension.video.min.js'}}"></script>

<!-- ADD-ONS JS FILES -->
<script>
    var tpj=jQuery;
    var revapi19;
    tpj(document).ready(function() {
        if(tpj("#rev_slider_19_1").revolution == undefined){
            revslider_showDoubleJqueryError("#rev_slider_19_1");
        }else{
            revapi19 = tpj("#rev_slider_19_1").show().revolution({
                sliderType:"carousel",
                jsFileLocation: "include/rs-plugin/js/",
                sliderLayout:"fullwidth",
                dottedOverlay:"none",
                delay:7000,
                navigation: {
                    keyboardNavigation:"on",
                    keyboard_direction: "horizontal",
                    mouseScrollNavigation:"off",
                    onHoverStop:"off",
                    tabs: {
                        style:"hesperiden",
                        enable:false,
                        width:260,
                        height:80,
                        min_width:260,
                        wrapper_padding:25,
                        wrapper_color:"#F5F5F5",
                        wrapper_opacity:"1",
                        tmp:`<div class="tp-tab-content">  <span class="tp-tab-date"></span>  <span class="tp-tab-title"></span> <span class="tp-tab-date tp-tab-para"></span></div><div class="tp-tab-image"></div>`,
                        visibleAmount: 9,
                        hide_onmobile: false,
                        hide_under:480,
                        hide_onleave:false,
                        hide_delay:200,
                        direction:"horizontal",
                        span:true,
                        position:"outer-bottom",
                        space:0,
                        h_align:"left",
                        v_align:"bottom",
                        h_offset:0,
                        v_offset:0
                    }
                },
                carousel: {
                    horizontal_align: "center",
                    vertical_align: "center",
                    fadeout: "on",
                    vary_fade: "on",
                    maxVisibleItems: 3,
                    infinity: "on",
                    space: 0,
                    stretch: "off",
                    showLayersAllTime: "off",
                    easing: "Power3.easeInOut",
                    speed: "800"
                },
                responsiveLevels:[1140,992,768,576],
                visibilityLevels:[1140,992,768,576],
                gridwidth:[850,700,400,300],
                gridheight:[580,600,500,400],
                lazyType:"single",
                shadow:0,
                spinner:"off",
                stopLoop:"on",
                stopAfterLoops:-1,
                stopAtSlide:-1,
                shuffle:"off",
                autoHeight:"off",
                disableProgressBar:"off",
                hideThumbsOnMobile:"off",
                hideSliderAtLimit:0,
                hideCaptionAtLimit:0,
                hideAllCaptionAtLilmit:0,
                debugMode:false,
                fallbacks: {
                    simplifyAll:"off",
                    nextSlideOnWindowFocus:"off",
                    disableFocusListener:false,
                }
            });
        }
    });	/* Revolution Slider End */
</script>

<!-- vision swiper -->
<script>
    window.addEventListener( 'load', function() {
        var swiperParent = new Swiper('.swiper-testimonial', {
            slidesPerView: 3,
            spaceBetween: 30,
            navigation: {
                prevEl: '.slider-arrow-left',
                nextEl: '.slider-arrow-right'
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            breakpoints: {
                1: {
                    slidesPerView: 1
                },
                576: {
                    slidesPerView: 1
                },
                768: {
                    slidesPerView: 2
                },
                1200: {
                    slidesPerView: 3
                }
            }
        });

        var SwiperTabsContainer = new Swiper('.swiper-tab-container', {
            loop: true,
            slidesPerView: 1,
            autoHeight: true,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
                autoplayDisableOnInteraction: false
            },
            effect: 'fade',
            fadeEffect: {
                crossFade: true
            },
            longSwipes: true,
            autoplayDisableOnInteraction:true,
            on: {
                activeIndexChange: function(swiper) {
                    var index = swiper.realIndex;
                    jQuery('.swiper-tab-link').removeClass('active');
                    jQuery('.swiper-tab-link').eq(index).addClass('active');
                }
            }
        });

        jQuery('.swiper-tab-link').on('click', function() {
            var index = jQuery(this).index();
            SwiperTabsContainer.slideToLoop(index);
            jQuery('.swiper-tab-link').removeClass('active');
            jQuery(this).addClass('active');
        });
    });
</script>
@endsection