@extends('layouts.site')
@push('styles')
    @if ($homepage->seo_other != null)
        {!! $homepage->seo_other !!}
    @endif
@endpush

@section('seo_title')
    {{ $homepage->seo_title }}
@endsection

@section('seo_description')
    {{ $homepage->seo_description }}
@endsection

@section('content')
    <div class="container">
        <button class="btn book-now" data-toggle="modal" data-target="#exampleModal" title="Quick Contact">Quick
            Contact</button>
    </div>
    <section class="text-left bg-parallax" style="padding-bottom:30px;">
        <div class="bg-img"><img src="{{ $homepage->getFirstMediaUrl('banner-image') }}" alt="slide img"></div>
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-12 col-xl-8">
                    <h1 class="pagetitle__heading">{{ $homepage->title }}</h1>
                    <p class="pagetitle__desc">{{ $homepage->description }}</p>
                    </p>
                </div><!-- /.col-xl-6 -->
            </div><!-- /.row -->
            <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-12">
                    <div class="row awards-wrapper">
                        <div class="col-sm-3 col-md-6 col-lg-3">
                            <div class="awardBlk">
                                <div class="div">
                                    <div class="awardCountBlk">
                                        <div class="count">
                                            <p>{{$homepage->client_count}}+</p>
                                        </div>
                                        <span>Clients</span>
                                    </div>
                                    <div class="awardIco">
                                        <img src="{{ asset('site1/assets/images/home/heart.png') }}" alt="icon">
                                    </div>
                                </div>
                            </div>
                        </div><!-- /.col-lg-3 -->
                        <div class="col-sm-3 col-md-6 col-lg-3">
                            <div class="awardBlk">
                                <div class="div">
                                    <div class="awardCountBlk">
                                        <div class="count">
                                            <p>{{$homepage->year_business}}+</p></div>
                                        <span>Years of Business</span>
                                    </div>
                                    <div class="awardIco">
                                        <img src="{{ asset('site1/assets/images/home/bulb.png') }}" alt="icon">
                                    </div>
                                </div>
                            </div>
                        </div><!-- /.col-lg-3 -->
                        <div class="col-sm-3 col-md-6 col-lg-3">
                            <div class="awardBlk">
                                <div class="div">
                                    <div class="awardCountBlk">
                                        <div class="count">
                                            <p>{{number_format($homepage->project_users_count/1000,1)}}K</p></div>
                                        <span>Products users</span>
                                    </div>
                                    <div class="awardIco">
                                        <img src="{{ asset('site1/assets/images/home/sat.png') }}" alt="icon">
                                    </div>
                                </div>
                            </div>
                        </div><!-- /.col-lg-3 -->
                        <div class="col-sm-3 col-md-6 col-lg-3">
                            <div class="awardBlk">
                                <div class="div">
                                    <div class="awardCountBlk">
                                        <div class="count">
                                            <p>{{$homepage->project_delivered_count}}+</p>
                                            </div>
                                        <span>Projects Delivered</span>
                                    </div>
                                    <div class="awardIco">
                                        <img src="{{ asset('site1/assets/images/home/like.png') }}" alt="icon">
                                    </div>
                                </div>
                            </div>
                        </div><!-- /.col-lg-3 -->
                    </div><!-- /.row -->
                </div>

            </div>
        </div><!-- /.container -->
    </section><!-- /.page-title -->

    <!-- ======================
                                                  Features Layout 2
                                                  ========================= -->
    <section class="awards block-about pb-70">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-7">
                    <div class="row awards-wrapper">
                        @foreach ($aboutPoints as $aboutPoint)
                            <div class="col-sm-6 col-md-6 col-lg-6">
                                <!-- fancybox item #3 -->
                                <div class="fancybox-item">
                                    <div class="fancybox__icon-img">
                                        <img src="{{ $aboutPoint->getFirstMediaUrl('about-point-image') }}" alt="icon">
                                    </div><!-- /.fancybox__icon-img -->
                                    <div class="fancybox__content">
                                        <h4 class="fancybox__title">{{ $aboutPoint->title }}</h4>
                                        <p class="fancybox__desc">{{ $aboutPoint->description }}
                                        </p>
                                    </div><!-- /.fancybox-content -->
                                </div><!-- /.fancybox-item -->
                            </div><!-- /.col-lg-3 -->
                        @endforeach
                    </div><!-- /.row -->
                </div>
                <div class="col-sm-12 col-md-12 col-lg-5">
                    <div class="row heading mb-60">
                        <div class="col-sm-12 col-md-12 col-lg-12">
                            <h3 class="heading__title">{{ $homepage->about_title }}
                            </h3>
                        </div><!-- /col-lg-5 -->
                        <div class="col-sm-12 col-md-12 col-lg-12 text-justify">
                            <p class="heading__desc">{!! $homepage->about_description !!}</p>
                            <a href="/about-us" class="btn btn__primary btn__icon mt-20">
                                <span>{{ $homepage->about_button_text }}</span>
                                <i class="icon-arrow-right"></i>
                            </a>
                        </div><!-- /.col-lg-5 -->
                    </div><!-- /.row -->
                </div>
            </div>

        </div><!-- /.container -->
    </section><!-- /.Awards -->

    @include('layouts.components.partners')

    <!-- ========================
                                    Services Carousel
                                =========================== -->
    <section class="services-layout2 pt-130 pb-90">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-8 offset-lg-2">
                    <div class="heading text-center mb-50">
                        <h3 class="heading__title"> Our Solutions</h3>
                        <h2 class="heading__subtitle">{{ $homepage->short_desc_for_solutions }}</h2>
                    </div><!-- /.heading -->
                </div><!-- /.col-lg-8 -->
            </div><!-- /.row -->
            <div class="row">
                @foreach ($serviceCategories as $serviceCategory)
                    <div class="col-sm-12 col-md-6 col-lg-4">
                        <div class="service-item dlt-scrollbar overflow-y service-item-custom-card solutions-card">
                            <div class="service__content">
                                {{-- <div class="service__icon">
                                    <i class="icon-permission"></i>
                                </div><!-- /.service__icon --> --}}
                                <h4 class="service__title">{{ $serviceCategory->title }}</h4>
                                <p class="service__desc">{{ $serviceCategory->short_desc }}</p>
                                <a href="/{{ $serviceCategory->slug }}" class="btn btn__secondary">
                                    <span>Read More</span>
                                    <i class="icon-arrow-right"></i>
                                </a>
                            </div><!-- /.service-content -->
                        </div><!-- /.service-item -->
                    </div><!-- /.col-lg-4 -->
                    <!-- service item #1 -->
                @endforeach
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section>

    @include('layouts.components.clients')

    <div class="login-popup inActive" id="login-popup">
        <div class="login-popup-wrapper webinar-wrapper">
            <a href="https://forms.gle/122YDcGk3YC65Qfc6" target="_blank" id="webinar-register">
                <img src="{{ asset('site1/assets/images/home/webinar-min.jpg') }}" alt="icon">
            </a>
        </div>
    </div><!-- /.login-popup -->

    @include('layouts.components.contact')
@endsection