@extends('site.layout.layout')

@section('title',__('About Us'))

@push('css')
<style>
    .new-icon-design{
        background: #e52982;
        border-radius: 50%;
        padding: 10px;
    }

    .figure-icon-style{
        display: flex;
        align-items: start;
        justify-content: center;
        text-align:start!important;
    }
</style>
@endpush

@section('content')
    <main class="orders_page shopping_cart_page product_details_page py-2">
        <!-- ------- breadcrumb ---------- -->
        <nav aria-label="breadcrumb" class="py-2 px-3 px-lg-4">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ route('home') }}"><i class="fas fa-arrow-right-long"></i> {{ __('Home') }}</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page"> {{ __('About Us') }}</li>
            </ol>
        </nav>
        <section class="all_products row py-3 px-3 px-lg-4 mb-5">
            <div class="col-sm-12 col-md-12">
                <section class="title_sec mb-4 text-center">
                    <h6 class="active" href="#" style="color:#e52982"> {{ __('About the site') }}</h6>
                    <h3 class="section_title my-3"> {{ __("In Tasahil, technology is closer to you.") }}</h3>
                    <p style="margin:auto"> {{ __('A trusted platform that brings together sellers and individuals to buy and sell new and used electronics easily and securely.') }}</p>
                </section>
                <section class="services_sec container pb-5">
                    <div class="row">
                        <div class="col-lg-3 mb-4">
                            <figure class="p-4">
                                <img src="{{ asset('site/img/about/services-1.svg') }}" class="mode_icon new-icon-design" data-light="{{ asset('site/img/about/services-1.svg') }}" data-dark="{{ asset('site/img/about/services-1.svg') }}" alt="">
                                <figcaption>
                                    <h5 class="my-2"> {{ __('Trust') }}</h5>
                                    <p> {{ __('We build a trustworthy relationship with our customers by providing accurate and transparent information.') }}</p>
                                </figcaption>
                            </figure>
                        </div>
                        <div class="col-lg-3 mb-4">
                            <figure class="p-4">
                                <img src="{{ asset('site/img/about/services-2.svg') }}" class="mode_icon new-icon-design" data-light="{{ asset('site/img/about/services-2.svg') }}" data-dark="{{ asset('site/img/about/services-2.svg') }}" alt="">
                                <figcaption>
                                    <h5 class="my-2"> {{ __('Diversity') }}</h5>
                                    <p> {{ __('We are keen to provide a wide range of products to meet the needs of all users.') }}</p>
                                </figcaption>
                            </figure>
                        </div>
                        <div class="col-lg-3 mb-4">
                            <figure class="p-4">
                                <img src="{{ asset('site/img/about/services-3.svg') }}" class="mode_icon new-icon-design" data-light="{{ asset('site/img/about/services-3.svg') }}" data-dark="{{ asset('site/img/about/services-3.svg') }}" alt="">
                                <figcaption>
                                    <h5 class="my-2"> {{ __('Support') }}</h5>
                                    <p> {{ __('We provide ongoing customer support to ensure a comfortable shopping experience.') }}</p>
                                </figcaption>
                            </figure>
                        </div>
                        <div class="col-lg-3 mb-4">
                            <figure class="p-4">
                                <img src="{{ asset('site/img/about/services-4.svg') }}" class="mode_icon new-icon-design" data-light="{{ asset('site/img/about/services-4.svg') }}" data-dark="{{ asset('site/img/about/services-4.svg') }}" alt="">
                                <figcaption>
                                    <h5 class="my-2"> {{ __('Innovation') }}</h5>
                                    <p> {{ __('We provide the latest technologies and advanced products to our users.') }}</p>
                                </figcaption>
                            </figure>
                        </div>
                        <div class="col-lg-3 mb-4">
                            <figure class="p-4">
                                <img src="{{ asset('site/img/about/services-5.svg') }}" class="mode_icon new-icon-design" data-light="{{ asset('site/img/about/services-5.svg') }}" data-dark="{{ asset('site/img/about/services-5.svg') }}" alt="">
                                <figcaption>
                                    <h5 class="my-2"> {{ __('Simplicity') }}</h5>
                                    <p> {{ __('Easy-to-use interface makes buying and selling simple for everyone.') }}</p>
                                </figcaption>
                            </figure>
                        </div>
                        <div class="col-lg-3 mb-4">
                            <figure class="p-4">
                                <img src="{{ asset('site/img/about/services-6.svg') }}" class="mode_icon new-icon-design" data-light="{{ asset('site/img/about/services-6.svg') }}" data-dark="{{ asset('site/img/about/services-6.svg') }}" alt="">
                                <figcaption>
                                    <h5 class="my-2"> {{ __('Security') }}</h5>
                                    <p> {{ __("We ensure the protection of users' data and the safety of their transactions through our platform.") }}</p>
                                </figcaption>
                            </figure>
                        </div>
                        <div class="col-lg-3 mb-4">
                            <figure class="p-4">
                                <img src="{{ asset('site/img/about/services-7.svg') }}" class="mode_icon new-icon-design" data-light="{{ asset('site/img/about/services-7.svg') }}" data-dark="{{ asset('site/img/about/services-7.svg') }}" alt="">
                                <figcaption>
                                    <h5 class="my-2"> {{ __('Transparency') }}</h5>
                                    <p> {{ __('Clear and accurate information about every product and seller on the platform.') }}</p>
                                </figcaption>
                            </figure>
                        </div>
                        <div class="col-lg-3 mb-4">
                            <figure class="p-4">
                                <img src="{{ asset('site/img/about/services-8.svg') }}" class="mode_icon new-icon-design" data-light="{{ asset('site/img/about/services-8.svg') }}" data-dark="{{ asset('site/img/about/services-8.svg') }}" alt="">
                                <figcaption>
                                    <h5 class="my-2"> {{ __('Communication') }}</h5>
                                    <p> {{ __('We enhance communication channels between us and our clients to help them make informed decisions.') }}</p>
                                </figcaption>
                            </figure>
                        </div>
                    </div>
                </section>
            </div>
            <div class="col-sm-12 col-md-12 py-4">
                <section class="title_sec mb-4 text-center">
                    <h3 class="section_title my-3"> {{ __("Why choose Tasahal?") }}</h3>
                    <p style="margin:auto"> {{ __('We offer you an exceptional shopping experience with advanced features that guarantee your satisfaction and security.') }}</p>
                </section>
                <section class="services_sec container pb-5">
                    <div class="row">
                        <div class="col-lg-4 mb-4">
                            <figure class="p-4 figure-icon-style">
                                <img src="{{ asset('site/img/about/services-9.svg') }}" class="mode_icon new-icon-design" data-light="{{ asset('site/img/about/services-9.svg') }}" data-dark="{{ asset('site/img/about/services-9.svg') }}" alt="">
                                <figcaption class="mx-3">
                                    <h5 class="my-2"> {{ __('Verified sellers') }}</h5>
                                    <p> {{ __('All vendors are certified and audited to ensure quality service.') }}</p>
                                </figcaption>
                            </figure>
                        </div>
                        <div class="col-lg-4 mb-4">
                            <figure class="p-4 figure-icon-style">
                                <img src="{{ asset('site/img/about/services-9.svg') }}" class="mode_icon new-icon-design" data-light="{{ asset('site/img/about/services-9.svg') }}" data-dark="{{ asset('site/img/about/services-9.svg') }}" alt="">
                                <figcaption class="mx-3">
                                    <h5 class="my-2"> {{ __('Buyer protection') }}</h5>
                                    <p> {{ __('Money back guarantee if the product does not match the description') }}</p>
                                </figcaption>
                            </figure>
                        </div>
                        <div class="col-lg-4 mb-4">
                            <figure class="p-4 figure-icon-style">
                                <img src="{{ asset('site/img/about/services-9.svg') }}" class="mode_icon new-icon-design" data-light="{{ asset('site/img/about/services-9.svg') }}" data-dark="{{ asset('site/img/about/services-9.svg') }}" alt="">
                                <figcaption class="mx-3">
                                    <h5 class="my-2"> {{ __('Easy inclusion of individuals') }}</h5>
                                    <p> {{ __('Anyone can sell their products with simple and quick steps.') }}</p>
                                </figcaption>
                            </figure>
                        </div>
                        <div class="col-lg-4 mb-4">
                            <figure class="p-4 figure-icon-style">
                                <img src="{{ asset('site/img/about/services-9.svg') }}" class="mode_icon new-icon-design" data-light="{{ asset('site/img/about/services-9.svg') }}" data-dark="{{ asset('site/img/about/services-9.svg') }}" alt="">
                                <figcaption class="mx-3">
                                    <h5 class="my-2"> {{ __('Secure payments') }}</h5>
                                    <p> {{ __('A secure payment system that ensures the security of your financial transactions.') }}</p>
                                </figcaption>
                            </figure>
                        </div>
                        <div class="col-lg-4 mb-4">
                            <figure class="p-4 figure-icon-style">
                                <img src="{{ asset('site/img/about/services-9.svg') }}" class="mode_icon new-icon-design" data-light="{{ asset('site/img/about/services-9.svg') }}" data-dark="{{ asset('site/img/about/services-9.svg') }}" alt="">
                                <figcaption class="mx-3">
                                    <h5 class="my-2"> {{ __('Outstanding technical support') }}</h5>
                                    <p> {{ __('24/7 support team available to assist you') }}</p>
                                </figcaption>
                            </figure>
                        </div>
                        <div class="col-lg-4 mb-4">
                            <figure class="p-4 figure-icon-style">
                                <img src="{{ asset('site/img/about/services-9.svg') }}" class="mode_icon new-icon-design" data-light="{{ asset('site/img/about/services-9.svg') }}" data-dark="{{ asset('site/img/about/services-9.svg') }}" alt="">
                                <figcaption class="mx-3">
                                    <h5 class="my-2"> {{ __('Competitive prices') }}</h5>
                                    <p> {{ __('Compare prices to ensure you get the best deal.') }}</p>
                                </figcaption>
                            </figure>
                        </div>
                    </div>
                </section>
            </div>
        </section>
    </main>
@endsection