@extends('layouts.front-layout')
@section('title') About @endsection

@section('content')

    <section class="inner-banner">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <figure>
                        <img src="{{ pagesSingleImage('About', 'top_banner_image') }}" class="img-fluid" alt="">
                    </figure>
                </div>
                <div class="col-md-6">
                    <h2>{{ $pageData['About']['top_banner_title'] ?? '' }}</h2>
                </div>
            </div>
        </div>
    </section>

    <section class="market-direction">
        <div class="container">
            <div class="row align-items-center ">
                <div class="col-md-6" data-aos="fade-up">
                    <div class="market-direct">
                        <h5>{{ $pageData['About']['your_trusted_partners_heading'] ?? '' }}</h5>
                        <h2 class="mainHead">{{ $pageData['About']['our_trusted_partners_sub_heading'] ?? '' }}</h2>

                        {!!$pageData['About']['your_trusted_partners_description'] ?? '' !!}
                        <ul>
                            <li><img src="{{ pagesSingleImage('About', 'your_trusted_partners_first_logo_image') }}" class="img-fluid" alt=""></li>
                            <li><img src="{{ pagesSingleImage('About', 'your_trusted_partners_second_logo_image') }}" class="img-fluid" alt=""></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-5" data-aos="fade-up">
                    <figure class="marketimg11">
                        <img src="{{ pagesSingleImage('About', 'your_trusted_partners_right_side_image') }}" class="img-fluid" alt="">
                    </figure>
                </div>
            </div>
        </div>
    </section>


    <section class="whats-makes">
        <div class="container">
            <div class="whastmakestop">
                <h2 class="mainHead" data-aos="fade-up">What<span>makes us different?</span></h2>
                <p>It is all in the details.</p>
            </div>
            <div class="row align-items-center">
                @forelse($get_makes_us_different as $makes_us_different)

                <div class="col-md-3" data-aos="fade-up">
                    <div class="makeswrap">
                        <figure>
                            <img src="{{$makes_us_different->makesUsDifferentImage('makes_us_different_image') ? : ''}}" class="img-fluid" alt="">
                        </figure>
                        <div class="makescntnt">
                            <h3>{{$makes_us_different->heading ? : ''}}</h3>
                            <h4>{!! $makes_us_different->description ? :''!!}</h4>
                        </div>
                    </div>
                </div>
                @empty
                    <h2 class="text-center">makes us different not available</h2>
                @endforelse

            </div>
        </div>
    </section>


    <section>
        <div class="container">
            <div class="text-center">
                {!!$pageData['About']['our_philosophy_description'] ?? '' !!}
            </div>
        </div>
    </section>


    <section>
        <div class="container">
            <div class="text-center">
                {!!$pageData['About']['our_model_description'] ?? '' !!}
            </div>
        </div>
    </section>



    <section class="testimonialSec">
        <div class="container">

            <div class="row align-items-center justify-content-between">
                <div class="col-md-7" data-aos="fade-up">
                    <h2 class="mainHead" data-aos="fade-up">Stories From <span>Our Valued Clients</span></h2>
                    <div class="swiper reviewSlider">
                        <div class="swiper-wrapper">
                            @forelse($get_our_valued_clients as $our_valued_client)

                            <div class="swiper-slide">
                                <div class="reviewBox">

                                    <div class="revewImg">
                                        <img src="{{$our_valued_client->ourValueClientImage('our_value_client_image') ? : ''}}" class="img-fluid" alt="img">
                                        <div>

                                            <h6>{{$our_valued_client->heading ? : ''}} <span>{{$our_valued_client->sub_heading ? : ''}}</span></h6>
                                        </div>
                                    </div>
                                    {!! $our_valued_client->description ? : ''!!}

                                </div>
                            </div>

                            @empty
                                <h2 class="text-center">our valued clients not available</h2>
                            @endforelse
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <div class="col-md-5">
                    <figure class="testifigure">
                        <img src="{{ pagesSingleImage('Our Value Client', 'right_side_image') }}" class="img-fluid" alt="">
                        <img src="upload/images/storiesicon1.webp" class="img-fluid storiesimg11" alt="">
                        <img src="upload/images/storiesicon2.webp" class="img-fluid storiesimg22" alt="">
                        <img src="upload/images/storiesicon3.webp" class="img-fluid storiesimg33" alt="">
                    </figure>
                </div>
            </div>
        </div>
    </section>



    <section class="support-sec">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-8" data-aos="fade-up">
                    <div class="supportwrap">
                        <h2 class="mainHead">
                            {!!$pageData['Home']['for_any_inquiries_section_description'] ?? ''!!}

                        </h2>
                    </div>
                </div>
                <div class="col-md-4" data-aos="fade-up">
                    <div class="phonesides">
                        <div class="phonewrap">
                            <figure>
                                <img src="upload/images/phoneimg1.webp" class="img-fluid" alt="">
                            </figure>
                            <a href="">For Call <span>(+12) 34 6754 345</span></a>
                        </div>
                        <div class="phonewrap">
                            <figure>
                                <img src="upload/images/phoneimg2.webp" class="img-fluid" alt="">
                            </figure>
                            <a href="">For Consultation<span>contact@gmail.com</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection