@extends('site.layouts.app')
@section('content')
    <!-- page banner -->
    <div class="page-banner">
        <div class="container position-relative">
            <div class="row justify-content-center">
                <div class="col-lg-6 col-md-9">
                    <div class="banner-content text-center">
                        <h1 class="page-banner-title">
                            {{ __('site.About_us.About_1') }}
                            <br>
                            Saudi Suppliers
                        </h1>
                        <p class="banner-desc mb-0">
                            {{ __('site.About_us.About_2') }}
                        </p>
                        <a href="#" class="main-btn white mt-5 fw-bold">{{ __('site.About_us.About_3') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- About -->
    <section class="about-section position-relative sec-padding-bottom wow fadeInUp">
        <div class="container position-relative">
            <div class="mb-4">
                <h3 class="primary-color fw-bold mb-4">{{ __('site.About_us.About_4') }}</h3>
                <p class="dark-color mb-0">
                    {{ \App\Http\Helpers\HelperApp::convert_numbers(__('site.About_us.About_5')) }}
                </p>
            </div>
            <div class="row align-items-center gx-lg-5">
                <div class="col-lg-6 mb-4 mb-lg-0">
                    <div class="d-flex align-items-center gap-2 mb-25">
                        <div class="icon-img">
                            <img src="{{ asset('main-site') }}/assets/img/icons/dart.png" class="img-fluid">
                        </div>
                        <div class="flex-1">
                            <h4 class="fw-600 primary-color">{{ __('site.About_us.About_6') }}</h4>
                            <p class="mb-0 dark-color">{{ __('site.About_us.About_7') }}</p>
                        </div>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <div class="icon-img">
                            <img src="{{ asset('main-site') }}/assets/img/icons/success.png" class="img-fluid">
                        </div>
                        <div class="flex-1">
                            <h4 class="fw-600 primary-color">{{ __('site.About_us.About_8') }}</h4>
                            <p class="mb-0 dark-color">
                                {{ __('site.About_us.About_9') }}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="about-img">
                        <img src="{{ asset('main-site') }}/assets/img/about.png" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
        <div class="shape"><img src="{{ asset('main-site') }}/assets/img/shape2.png"></div>
    </section>

    @include('site.inc.principle')




    <!-- Features -->
    <section class="features-section position-relative sec-padding-bottom wow fadeInUp">
        <div class="container">
            <div class="section-title circle mb-5">
                <span>{{ __('site.About_us.About_10') }}</span>
                <h2>{{ __('site.About_us.About_11') }}</h2>
            </div>
            <div class="row pt-3">
                <div class="col-lg-6 mb-25">
                    <div class="feature-card d-flex gap-3">
                        <div class="card-img"><img src="{{ asset('main-site') }}/assets/img/icons/chart.png"
                                class="img-fluid"></div>
                        <div class="card-content">
                            <h5 class="fw-600 primary-color">{{ __('site.About_us.About_12') }}</h5>
                            <p class="dark-color">
                                {{ __('site.About_us.About_13') }}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 mb-25">
                    <div class="feature-card d-flex gap-3">
                        <div class="card-img"><img src="{{ asset('main-site') }}/assets/img/icons/quality.png"
                                class="img-fluid"></div>
                        <div class="card-content">
                            <h5 class="fw-600 primary-color">{{ __('site.About_us.About_14') }}</h5>
                            <p class="dark-color">
                                {{ __('site.About_us.About_15') }}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 mb-25">
                    <div class="feature-card d-flex gap-3">
                        <div class="card-img"><img src="{{ asset('main-site') }}/assets/img/icons/sales.png"
                                class="img-fluid"></div>
                        <div class="card-content">
                            <h5 class="fw-600 primary-color">{{ __('site.About_us.About_16') }}</h5>
                            <p class="dark-color">
                                {{ __('site.About_us.About_17') }}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 mb-25">
                    <div class="feature-card d-flex gap-3">
                        <div class="card-img"><img src="{{ asset('main-site') }}/assets/img/icons/financial-growth.png"
                                class="img-fluid"></div>
                        <div class="card-content">
                            <h5 class="fw-600 primary-color">{{ __('site.About_us.About_18') }}</h5>
                            <p class="dark-color">
                                {{ __('site.About_us.About_19') }}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 mb-25">
                    <div class="feature-card d-flex gap-3">
                        <div class="card-img"><img src="{{ asset('main-site') }}/assets/img/icons/supplier.png"
                                class="img-fluid"></div>
                        <div class="card-content">
                            <h5 class="fw-600 primary-color">{{ __('site.About_us.About_20') }}</h5>
                            <p class="dark-color">
                                {{ __('site.About_us.About_21') }}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 mb-25">
                    <div class="feature-card d-flex gap-3">
                        <div class="card-img"><img src="{{ asset('main-site') }}/assets/img/icons/product.png"
                                class="img-fluid"></div>
                        <div class="card-content">
                            <h5 class="fw-600 primary-color">{{ __('site.About_us.About_22') }}</h5>
                            <p class="dark-color">
                                {{ __('site.About_us.About_23') }}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 mb-25">
                    <div class="feature-card d-flex gap-3">
                        <div class="card-img"><img src="{{ asset('main-site') }}/assets/img/icons/communication.png"
                                class="img-fluid"></div>
                        <div class="card-content">
                            <h5 class="fw-600 primary-color">{{ __('site.About_us.About_24') }}</h5>
                            <p class="dark-color">
                                {{ __('site.About_us.About_25') }}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 mb-25">
                    <div class="feature-card d-flex gap-3">
                        <div class="card-img"><img src="{{ asset('main-site') }}/assets/img/icons/verified.png"
                                class="img-fluid"></div>
                        <div class="card-content">
                            <h5 class="fw-600 primary-color">{{ __('site.About_us.About_26') }}</h5>
                            <p class="dark-color">
                                {{ __('site.About_us.About_27') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    @include('site.inc.clients')



    <!-- CTA -->
    <div class="cta-section position-relative sec-padding wow fadeInUp">
        <div class="container position-relative">
            <div class="row justify-content-center">
                <div class="col-lg-6 col-md-8 text-center">
                    <h2 class="title mb-3">{{ __('site.About_us.About_28') }}</h2>
                    <p>{{ __('site.About_us.About_29') }}</p>
                    @auth
                        <a href="{{ route('suppliers.index') }}"
                            class="main-btn white">{{ __('site.About_us.About_30') }}</a>
                    @else
                        <a href="{{ route('login') }}" class="main-btn white">{{ __('site.About_us.About_31') }}</a>

                    @endauth
                </div>
            </div>
        </div>
    </div>


@endsection