@extends('layouts.app')
@section('content')
    <div class="hero bg-gradient-color text-white-color mb-xl">
        <div class="container">
            <div class="hero-content">
                <h2 class="h1 title-xxl title-animation font-primary-bd mb-4">
                    <span>{{ $whoWeAreStaticPage->title_by_lang }}<span class="text-secondary-color">.</span></span>
                </h2>
                <p class="text-xxl mb-0 wow fadeInUp" data-wow-duration="1s">
                    {!! $whoWeAreStaticPage->description_by_lang !!}
                </p>
            </div>
        </div>
    </div>
    <!--End Hero-->

    <div class="mb-xl text-center">
        <div class="container">
            <h2 class="h1 title-xxl title-animation text-primary-color font-primary-bd mb-md">
                <span>{{ $whatWeDoStaticPage->title_by_lang }}<span class="text-secondary-color">.</span></span>
            </h2>
            <div class="parallax-section">
                <div class="image-ingredients wow fadeInUp mb-md" data-wow-duration="1s">
                    <img src="{{ asset('storage/' . getSettings()->more_configs['what_we_do']) ?? '' }}" alt="about"
                        loading="lazy" class="w-100 rounded-5">
                </div>
                <div class="d-flex flex-column row-gap-4 text-xxl">
                    <div class="wow fadeInUp" data-wow-duration="1s">
                        {!! $whatWeDoStaticPage->description_by_lang !!}
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!--End About-->


    <!--Start Services-->
    @include('layouts.includes._services', ['services' => $services])
    <!--End Services-->

    <!--start Products-->
    @include('layouts.includes._products', ['products' => $products])

    <!--End Products-->


    <!--start Projects-->
    @include('layouts.includes._projects', ['projects' => $projects, 'services' => $services])

    <!--End Projects-->

    <div class="mb-xl">
        <div class="container">
            <h2 class="h1 text-center title-xl title-animation text-primary-color font-primary-bd mb-md">
                <span>@lang('site.our_solutions')</span>
            </h2>
            <div class="text-center bg-light-color py-xxl px-lg-5 px-4 rounded-4">


                @include('layouts.includes._solutions', ['services' => $services])

                <h3 class="title-lg font-primary-bd mb-xl wow fadeInUp" data-wow-duration="1s">
                    @lang('site.success_partners')
                </h3>

                @include('layouts.includes._partners', ['partners' => $partners])

            </div>
        </div>
    </div>
    <!--End Partners-->

    <div class="mb-md text-center">
        <div class="container">
            <h2 class="title-xxl title-animation text-primary-color font-primary-bd mb-md"><span>
                    @lang('site.your_tech_savvy')
                </span> <br> <span class="title-border">@lang('site.partner')</span></h2>
            <div class="col-lg-3 mx-auto wow fadeInUp" data-wow-duration="1s">
                <a href="{{ route('about_us') }}" class="btn btn-hover btn-secondary-color py-3 rounded-pill w-100">
                    <span>@lang('site.about_us')</span>
                </a>
            </div>
        </div>
    </div>
    <!--End About-->
@endsection