@extends('layout.app')
@section('title')
<title>About Us</title>
    <meta name="description" content="ET Education and Visa Services, presented by Extratech, is an adept provider of excellent education consultation, information, and visa guidance solution to students seeking schooling abroad.">
    <meta name="robots" content="index, follow" />
    <meta property="og:url" content="" />
    <meta property="og:image" content="{{url('frontend/images/banner.png')}}"/>
    <meta property="og:title" content="ET-Visas"/>
    <meta property="og:description" content="ET Education and Visa Services, presented by Extratech, is an adept provider of excellent education consultation, information, and visa guidance solution to students seeking schooling abroad."/>
@endsection
@section('content')
    <section class="about-header-section">
        <div class="about-banner-header">
            {!!$about->description ?? '' !!}
        </div>
        <div class="about-banner-img">
            <img src="{{url('frontend/images/about-banner.png')}}" class="img-fluid" alt="">
        </div>
    </section>
    <section class="overseas-section">
        {!!$about->sub_description ?? '' !!}
            <div class="overseas-img">
                <img src="{{url('frontend/images/australia-map.png')}}" class="img-fluid" alt="">
            </div>
    </section>
    <section class="why-et">
        <div class="why-et-header">
        {!!$about->bottom_description ?? '' !!}
        </div>
        <div class="et-cards">
            {{-- <div class="et-card">
                <div class="et-card-img">
                    <img src="{{url('frontend/images/user.png')}}" class="img-fluid" alt="">
                </div>
                <div class="et-card-detail">
                    <h2>24/7</h2>
                    <p>Assistance</p>
                </div>
            </div>
            <div class="et-card">
                <div class="et-card-img">
                    <img src="{{url('frontend/images/user.png')}}" class="img-fluid" alt="">
                </div>
                <div class="et-card-detail">
                    <h2>99%</h2>
                    <p>Success Rate</p>
                </div>
            </div>
            <div class="et-card">
                <div class="et-card-img">
                    <img src="{{url('frontend/images/user.png')}}" class="img-fluid" alt="">
                </div>
                <div class="et-card-detail">
                    <h2>100+</h2>
                    <p>Institutions</p>
                </div>
            </div>
            <div class="et-card">
                <div class="et-card-img">
                    <img src="{{url('frontend/images/user.png')}}" class="img-fluid" alt="">
                </div>
                <div class="et-card-detail">
                    <h2>50+</h2>
                    <p>Teams</p>
                </div>
            </div> --}}
        </div>
    </section>
    <section class="our-values-section">
        <h1>We are our values</h1>
        <div class="row gx-5">
            <div class="col-md-6">
                <div class="values-left">
                    <p>We are passionate about creating a calm, inspiring work environment that attracts very
                        high-performing talent. We connect that talent with our partners, providing mutual growth opportunities.
                    </p>
                    <div class="values-img">
                        <img src="{{url('frontend/images/attractive-man.png')}}" class="img-fluid" id="values-img" alt="">
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="values-lists">
                    <a onclick="changeImg('{{url('frontend/images/attractive-man.png')}}','{{1}}')" id="values-link{{1}}" class="link-active">
                        <h2>Transparency</h2> 
                    </a>
                    <a onclick="changeImg('','{{2}}')" id="values-link{{2}}">
                        <h2>Commitment</h2> 
                    </a>
                    <a onclick="changeImg('','{{3}}')" id="values-link{{3}}">
                        <h2>Professionalism</h2> 
                    </a>
                    <a onclick="changeImg('','{{4}}')" id="values-link{{4}}">
                        <h2>Reliability</h2> 
                    </a>
                    <a onclick="changeImg('','{{5}}')" id="values-link{{5}}">
                        <h2>Integrity</h2> 
                    </a>
                    <a onclick="changeImg('{{url('frontend/images/attractive-man.png')}}','{{6}}')" id="values-link{{6}}">
                        <h2>Trustworthy</h2> 
                    </a>
                </div>
            </div>
        </div>
    </section>
    <section class="lets-chat-section">
        <h1>Let's Chat</h1>
        <p>Answers to every education & migration query.Talk to our Expert!</p>
        <div class="text-center">
            <a href="contact">Consult with us <i class="fa-solid fa-arrow-right fa-2xs ms-1"></i></a>
        </div>
    </section>
@endsection
@section('script')
    <script>
        function changeImg(img, id){
            if ($('.link-active').length > 0) {
                pre_id = $('.link-active')[0]['id'];
                myId = document.getElementById(pre_id);
                myId.classList.remove("link-active");
            }
          
            var link = document.getElementById("values-link"+ id);
            link.classList.add("link-active")
            var image = document.getElementById('values-img');
            image.src=img
        }
    </script>
@endsection