@extends('Frontend.Layouts.app')
@section('title', 'من نحن')
@section('content')
    <!-- HEADER AREA -->
    @include('Frontend.Includes.navbar')
    <!-- HEADER AREA END -->
    <div class="site-content">

        <div class="container-fluid">
            <div class="item-efftect">
                <div class="efftect overflow-hidden"></div>
                <div class="efftect overflow-hidden"></div>
                <div class="efftect overflow-hidden"></div>
                <div class="efftect overflow-hidden"></div>
                <div class="efftect overflow-hidden"></div>
            </div>
        </div>
        @php
        $setting = App\Models\About_setting::first();
        @endphp
        <!--=================================
              Page Header -->
        <div class="inner-header bg-holder"
             data-bg="{{ asset('storage/files/' . ($setting->section1_image ?? 'default.png')) }}">
            <div class="container">
                <div class="row  justify-content-center">
                    <div class="col-md-12 text-center">
                        <h1 class="title">{{__('lang.About Tbadul Irada')}}</h1>
                        <p style="color: white">{{ app()->getLocale() == 'ar' ? $setting->section5_title : $setting->section5_title_en }}</p>
                        <p style="color: white">{{ app()->getLocale() == 'ar' ? $setting->section5_subtitle : $setting->section5_subtitle_en }} </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="content-wrapper">

            <section class="space-pt bg-black ellipse-top">
                <div class="space-pb ellipse-bottom">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-5">
                                <div class="sticky-top" style="top: 80px;">
                                    <div class="section-title mb-0">
                                        <span class="sub-title"><img class="img-fluid"
                                                src="{{ asset('front/images/subtitle-icon.png') }}" alt="" />
                                                {{ app()->getLocale() == 'ar' ? $setting->section1_title : $setting->section1_title_en }}</span>
                                            </span>
                                    </div>
                                      {!! app()->getLocale() == 'ar' ? $setting->section1_content : $setting->section1_content_en !!}
                                </div>
                            </div>
                            <div class="col-lg-7">
                                <div class="history-wrapper">
                                    <div class="history-year-sm">  {{__('lang.Our mission')}}</div>
                                    <div class="history-info">
                                        <div class="history-year-lg">  {{__('lang.Our mission')}}</div>
                                        <div class="history-content">
                                            {!! app()->getLocale() == 'ar' ? $setting->content_1 : $setting->content_1_en !!}
                                        </div>
                                    </div>
                                </div>
                                <div class="history-wrapper mt-4 mb-4">
                                    <div class="history-year-sm">{{__('lang.our vision')}}</div>
                                    <div class="history-info">
                                        <div class="history-year-lg"> {{__('lang.our vision')}}</div>
                                        <div class="history-content">
                                            {!! app()->getLocale() == 'ar' ? $setting->content_2 : $setting->content_2_en !!}

                                        </div>
                                    </div>
                                </div>
                                <div class="history-wrapper mt-4 mb-4">
                                    <div class="history-year-sm"> {{__('lang.our values')}}</div>
                                    <div class="history-info">
                                        <div class="history-year-lg"> {{__('lang.our values')}}</div>
                                        <div class="history-content">
                                            {!! app()->getLocale() == 'ar' ? $setting->content_3 : $setting->content_3_en !!}

                                        </div>
                                    </div>
                                </div>
                                <div class="history-wrapper">
                                    <div class="history-year-sm"> {{__('lang.how we walk with you step by step?')}}
                                    </div>
                                    <div class="history-info">
                                        <div class="history-year-lg">
                                        </div>
                                        <div class="history-content">
                                            {!! app()->getLocale() == 'ar' ? $setting->content_4 : $setting->content_4_en !!}

                                        </div>
                                    </div>
                                </div>
                                <div class="history-wrapper mt-4 mb-4">
                                    <div class="history-year-sm"> {{__('lang.We plan')}}</div>
                                    <div class="history-info">
                                        <div class="history-year-lg"> </div>
                                        <div class="history-content">
                                            {!! app()->getLocale() == 'ar' ? $setting->content_5 : $setting->content_5_en !!}

                                        </div>
                                    </div>
                                </div>
                                <div class="history-wrapper mt-4 mb-4">
                                    <div class="history-year-sm"> {{__('lang.implement')}}</div>
                                    <div class="history-info">
                                        <div class="history-year-lg">{{__('lang.implement')}}</div>
                                        <div class="history-content">
                                            {!! app()->getLocale() == 'ar' ? $setting->content_6 : $setting->content_6_en !!}

                                        </div>
                                    </div>
                                </div>
                                <div class="history-wrapper mt-4 mb-4">
                                    <div class="history-year-sm">{{__('lang.monitor and develop')}}
                                    </div>
                                    <div class="history-info">
                                        <div class="history-year-lg">
                                        </div>
                                        <div class="history-content">
                                            {!! app()->getLocale() == 'ar' ? $setting->content_7 : $setting->content_7_en !!}

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!--=================================
                About Info -->
            <section class="space-pt z-index-2 ">
                <div class="container">
                    <div class="row justify-content-between">
                        <div class="col-lg-7 mb-5 mb-lg-0">
                            <div class="section-title pb-0 pb-lg-4">
                                <span class="title"> {{ app()->getLocale() == 'ar' ? $setting->section3_title : $setting->section3_title_en }} </span>
                             </div>
                            <div class="row">
                                <div class="col-sm-4">
                                    <img class="img-fluid" src="{{ asset('storage/files/' . ($setting->section3_image2 ?? 'default.png')) }}"
                                        alt="#">
                                </div>
                                <div class="col-sm-8">
                                    {!! app()->getLocale() == 'ar' ? $setting->section3_content : $setting->section3_content_en !!}
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-5">
                            <img class="img-fluid ps-lg-5" src="{{ asset('storage/files/' . ($setting->section3_image1 ?? 'default.png')) }}"
                                alt="#">
                        </div>
                    </div>
                </div>
            </section>
            <section class="space-ptb ellipse-bottom">
                <div class="container">
                    <div class="row">
                        <div class="col-md-5 mb-5 mb-md-0">
                            <img class="img-fluid mx-lg-5 radius-10" src="{{ asset('storage/files/' . ($setting->section2_image ?? 'default.png')) }}"
                                alt="#">
                        </div>
                        <div class="col-md-7">
                            <div class="section-title pe-xl-5">
                                <span class="sub-title"> </span>
                                <h2 class="title"> {{ app()->getLocale() == 'ar' ? $setting->section2_title : $setting->section2_title_en }}</h2>
                                <h2 class="sub-title"> {{ app()->getLocale() == 'ar' ? $setting->section2_subtitle : $setting->section2_subtitle_en }}</h2>
                            </div>
                            <div class="ps-sm-5">
                                <div class="list-wrapper">
                                        {!! app()->getLocale() == 'ar' ? $setting->section2_content : $setting->section2_content_en !!}

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="space-ptb ellipse-bottom">
                <div class="container">
                    <div class="row">

                        <div class="col-md-7">
                            <div class="section-title pe-xl-5">
                                <span class="sub-title"> </span>
                                <h2 class="title">{{ app()->getLocale() == 'ar' ? $setting->section4_title : $setting->section4_title_en }}</h2>
                            </div>
                            <div class="ps-sm-5">
                                <div class="list-wrapper">{!! app()->getLocale() == 'ar' ? $setting->section4_content : $setting->section4_content_en !!}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-5 mb-5 mb-md-0">
                            <img class="img-fluid mx-lg-5 radius-10" width="100%" src="{{ asset('storage/files/' . ($setting->section4_image ?? 'default.png')) }}"
                                alt="#">
                        </div>
                    </div>
                </div>
            </section>
            @php
                $hsetting = App\Models\Home_setting::select('section10_subtitle','section10_title','section10_title_en','section10_subtitle_en')->first();
            @endphp
            <section class="space-small-ptb ellipse-top bg-black z-index-2">
                <div class="container">
                    <div class="row mb-lg-5">
                        <div class="col-xxl-6 col-lg-8">
                            <div class="section-title mb-lg-0">
                                <span
                                    class="sub-title">{{ app()->getLocale() == 'ar' ? $hsetting->section10_title : $hsetting->section10_title_en }}</span>
                                <h2 class="title mb-0">
                                    {{ app()->getLocale() == 'ar' ? $hsetting->section10_subtitle : $hsetting->section10_subtitle_en }}
                                </h2>
                            </div>
                        </div>
                        <div class="col-xxl-6 col-lg-4 align-self-end">
                            <div class="d-flex justify-content-center mt-5 ms-sm-5 ms-0">
                                <a class="btn btn-primary" href="{{route('front.form')}}">
                                    <span>{{__('lang.start now')}}</span>
                                    <svg width="20" height="22" viewBox="0 0 20 22" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <g clip-path="url(#clip0_59_253)">
                                            <path
                                                d="M19.4854 11.4293L17.0513 12.221C13.1214 13.4993 10.3036 16.9595 9.84784 21.0668C9.49371 16.981 6.71926 13.5081 2.81255 12.2604L0.210283 11.4293"
                                                stroke="white" stroke-width="2" />
                                            <path d="M9.83594 20.8889L9.83594 0" stroke="white" stroke-width="2" />
                                        </g>
                                        <defs>
                                            <clipPath id="clip0_59_253">
                                                <rect width="21.3333" height="20" fill="white"
                                                    transform="translate(20) rotate(90)" />
                                            </clipPath>
                                        </defs>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    @include('Frontend.Includes.Footer')
    <!-- FOOTER AREA END -->
@endsection
