@extends('website.layout.main')

@section('content')
    <!--Page Header Start-->
    <x-website-page-header title="{{__('messages.aboutus')}}" bgImage="assets/images/backgrounds/page-header-bg.png"
        homeLink="{{ url('/') }}" />
    <!--Page Header End-->

        <!--Who We Are Start -->
        <section class="who-we-are">
            <div class="who-we-are__shape-3 float-bob-y">
                <img src="{{ asset('assets/images/shapes/who-we-are-shape-3.png') }}" alt="">
            </div>
            <div class="who-we-are__shape-4 float-bob-x">
                <img src="{{ asset('assets/images/shapes/who-we-are-shape-4.png') }}" alt="">
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-xl-6 wow fadeInLeft" data-wow-delay="300ms">
                        <div class="who-we-are__left">
                            <div class="section-title text-left sec-title-animation animation-style2">
                                <div class="section-title__tagline-box">
                                    <span class="section-title__tagline">{{__('messages.who')}}</span>
                                </div>
                                <h2 class="section-title__title title-animation"> 
                                    {{-- {{__('messages.dreams')}} --}}
                                    {!! $data['about_title'] !!}
                                </h2>
                            </div><span class="color-black"></span>
                            {!! $data['about_content'] !!}

                            <p>{{__('messages.wearep')}}</p>
                            <div class="who-we-are__btn-box">
                                <a href="{{route('projects')}}" class="who-we-are__btn thm-btn">Our Projects<span><i
                                            class="icon-arrow-right"></i></span></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 wow slideInRight" data-wow-delay="100ms" data-wow-duration="2500ms">
                        <div class="who-we-are__right">
                            <div class="who-we-are__img-box">
                                <div class="who-we-are__img">
                                    <img src="{{ $data['section_images']['who_we_are_img_1'] ?? 'https://placehold.co/490x490' }}" alt="">
                                </div>
                                <div class="who-we-are__img-2">
                                    <img src="{{ $data['section_images']['who_we_are_img_2'] ?? 'https://placehold.co/300x308' }}" alt="">
                                </div>
                                <div class="who-we-are__shape-1 img-bounce"></div>
                                <div class="who-we-are__shape-2"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--Who We Are End -->
    <!--About One Start -->
    <section class="about-One">
        <div class="container">
            <div class="row">
                <div class="col-xl-6">
                    <div class="about-One__left  wow slideInLeft" data-wow-delay="100ms" data-wow-duration="2500ms">
                        <div class="about-One__img-box">
                            <div class="about-One__img">
                                <img src="{{ $data['section_images']['about_one_img_1'] ?? 'https://placehold.co/370x380' }}" alt="">
                            </div>
                            <div class="about-One__img-2">
                                <img src="{{ $data['section_images']['about_one_img_2'] ?? 'https://placehold.co/370x380' }}" alt="">
                            </div>
                            <div class="about-One__provide-box wow zoomIn animated animated" data-wow-delay="500ms"
                                data-wow-duration="2500ms">
                                <div class="about-One__provide-icon">
                                    <span class="icon-pet-care"></span>
                                </div>
                                <div class="about-One__provide-content">
                                    <div class="about-One__provide-count count-box">
                                        <h3 class="count-text" data-stop="10" data-speed="1500">00</h3>
                                        <span>+</span>
                                    </div>
                                    <p class="about-One__provide-count-text"> {{__('messages.servicewe')}} </p>
                                </div>
                            </div>
                            <div class="about-One__shape-1"></div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6">
                    <div class="about-One__right wow fadeInRight" data-wow-delay="300ms">
                        <div class="section-title text-left sec-title-animation animation-style2">
                            <div class="section-title__tagline-box">
                                <span class="section-title__tagline">{{__('messages.aboutus')}}</span>
                            </div>
                            <h2 class="section-title__title title-animation"> {{__('messages.unitefor')}}
                                <br> {{__('messages.changeworld')}}
                            </h2>
                        </div>
                        <div class="about-One__vission-mission">
                            <div class="about-One__tab-box tabs-box">
                                <ul class="tab-buttons clearfix list-unstyled">
                                    <li data-tab="#vission" class="tab-btn active-btn"><span> {{__('messages.ourvision')}} </span></li>
                                    <li data-tab="#mission" class="tab-btn"><span> {{__('messages.ourmission')}} </span></li>
                                    <li data-tab="#goal" class="tab-btn"><span> {{__('messages.ourvalues')}} </span></li>
                                </ul>
                                <div class="tabs-content">
                                    <!--tab-->
                                    <div class="tab active-tab" id="vission">
                                        <div class="tabs-content__inner">
                                            {!! $data['about_intro']['vision'] ?? '' !!}
                                            {{-- <p> {{__('messages.ourvission')}} </p> --}}
                                        </div>
                                    </div>
                                    <!--tab-->
                                    <!--tab-->
                                    <div class="tab" id="mission">
                                        <div class="tabs-content__inner">
                                            {!! $data['about_intro']['mission'] ?? '' !!}
                                            {{-- <p> {{__('messages.mission1')}}</p>
                                            <p> {{__('messages.mission2')}} </p>
                                                <p>{{__('messages.mission3')}}</p>
                                                <div class="cause-details__points-box">
                                                    <ul class="cause-details__points-list list-unstyled">
                                                        <li>
                                                            <div class="icon">
                                                                <span class="fas fa-check"></span>
                                                            </div>
                                                            <p>{{__('messages.point1')}}</p>
                                                        </li>
                                                        <li>
                                                            <div class="icon">
                                                                <span class="fas fa-check"></span>
                                                            </div>
                                                            <p> {{__('messages.point2')}} </p>
                                                        </li>
                                                        <li>
                                                            <div class="icon">
                                                                <span class="fas fa-check"></span>
                                                            </div>
                                                            <p> {{__('messages.point3')}} </p>
                                                        </li>
                                                        <li>
                                                            <div class="icon">
                                                                <span class="fas fa-check"></span>
                                                            </div>
                                                            <p> {{__('messages.point4')}} </p>
                                                        </li>
                                                        <li>
                                                            <div class="icon">
                                                                <span class="fas fa-check"></span>
                                                            </div>
                                                            <p> {{__('messages.point5')}} </p>
                                                        </li>
                                                    </ul>
                                                    {{-- <ul class="cause-details__points-list list-unstyled">
                                                       
                                                        
                                                    </li>
                                                   
                                                    </ul> --}
                                                </div> --}}
                                        </div>
                                    </div>
                                    <!--tab-->
                                    <!--tab-->
                                    <div class="tab" id="goal">
                                        <div class="tabs-content__inner">
                                            {!! $data['about_intro']['value'] ?? '' !!}
                                            {{-- <h6>{{__('messages.Quality')}}</h6>
                                            <p> {{__('messages.qualityvalue')}}</p>
                                            <h6>{{__('messages.Integrity')}}</h6>
                                            <p>{{__('messages.integrityvalue')}} </p>
                                            <h6>{{__('messages.Inclusivity')}}</h6>
                                            <p>{{__('messages.inclusivityvalue')}}</p>
                                            <h6>{{__('messages.Collaboration')}}</h6>
                                            <p>{{__('messages.collaborationvalue')}}</p>
                                            <h6>{{__('messages.Resilience')}}</h6>
                                            <p>{{__('messages.resiliencevalue')}}</p> --}}
                                        </div>
                                    </div>
                                    <!--tab-->
                                </div>
                            </div>
                        </div>
                       
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--About One End -->

    <!--Call to Action Start -->
    <section class="donate-one">
        <div class="container">
            <div class="row">
                <div class="col-xl-6 col-lg-6 wow slideInLeft" data-wow-delay="100ms" data-wow-duration="2500ms">
                    <div class="donate-one__single">
                        <div class="donate-one__single-bg"
                            style="background-image: url('{{ $data['section_images']['service_bg_1'] ?? 'https://placehold.co/630x376' }}');">
                        </div>
                        <h3 class="donate-one__title"><a href="{{route('projects')}}">Our Projects</a>
                        </h3>
                        <p class="donate-one__text">Discover our ongoing projects and achievements in mental health, psychosocial support and socio-economic empowerment.
                        </p>
                        <div class="donate-one__btn-box">
                            <a href="{{route('projects')}}" class="donate-one__btn thm-btn">View our projects<span><i
                                        class="icon-arrow-right"></i></span></a>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6 col-lg-6 wow slideInRight" data-wow-delay="100ms" data-wow-duration="2500ms">
                    <div class="donate-one__single donate-one__single-2">
                        <div class="donate-one__single-bg"
                            style="background-image: url('{{ $data['section_images']['service_bg_2'] ?? 'https://placehold.co/630x376' }}');">
                        </div>
                        <h3 class="donate-one__title"><a href="{{route('contact-us')}}">Contact Us</a></h3>
                        <p class="donate-one__text">Would you like to learn more about our activities or collaborate with us? Feel free to contact us.
                        </p>
                        <div class="donate-one__btn-box">
                            <a href="{{route('contact-us')}}" class="donate-one__btn thm-btn">Contact Us<span><i
                                        class="icon-arrow-right"></i></span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--Call to Action End -->
@endsection