@section('title', UI::get('about-title') ?? null)
@section('subtitle', UI::get('about-sub-title') ?? null)
@section('header-image', UI::get('about-header-image') ?? null)
<x-guest-layout>

    @if ($brands && $brands->isNotEmpty())
        <div class="logo-section">
            <div class="container-fluid one">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="logo-wrapper">
                            <div class="logo-title">
                                <h6>
                                    Our Trusted Partner
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
                                        viewBox="0 0 12 12">
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M10.1865 1.06237L0 11.2484L0.751627 12L10.9376 1.81347V8.85645H12V0H3.14355V1.06237H10.1865Z">
                                        </path>
                                    </svg>
                                </h6>
                            </div>
                            <div class="logo-area m-0">
                                <div class="container-fluid one">
                                    <div class="col-lg-12">
                                        <div class="client-logo-wrap">
                                            <div class="marque-wrap">
                                                <div class="marquee_text2">
                                                    @foreach ($brands as $item)
                                                        <img class="brands-img" src="{{ asset($item->logo) }}"
                                                            alt="{{ $item->title }}" title="{{ $item->title }}">
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <div class="mission-section mt-130 mb-130">
        <div class="container-fluid one pl--95">
            <div class="row g-lg-4 gy-5">
                <div class="col-lg-4">
                    <div class="mission-img">
                        <img src="{{ UI::get('about-img') }}" alt="">
                    </div>
                </div>
                <div class="col-lg-8 pl--95">
                    <div class="mission-content-wrap">
                        <div class="mission-content-top">
                            <div class="section-title1 w-890">
                                <h2>{{ UI::get('about-headline') ?? null }}</h2>
                            </div>
                            <p>{!! UI::get('about-long') ?? null !!}</p>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="why-choose-section mb-130">
        <div class="container-fluid one pl--95">
            <div class="row g-xl-4 gy-5">
                <div class="col-xl-7 pr--95">
                    <div class="choose-content">
                        <div class="section-title1 two mb-50">
                            <span>Why Choose Us</span>
                            <h2>{{ UI::get('wcu-title') ?? null }}</h2>
                        </div>
                        @if (UI::get('key-features'))
                            <div class="sulution-approach">
                                <h3>Key Solution Approach :</h3>
                                <ul>
                                    @foreach (json_decode(UI::get('key-features'), true) as $feature)
                                        <li>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
                                                viewBox="0 0 14 14">
                                                <path
                                                    d="M12.1223 3.19025C12.163 3.23089 12.1953 3.27917 12.2174 3.33232C12.2394 3.38548 12.2508 3.44246 12.2508 3.5C12.2508 3.55755 12.2394 3.61453 12.2174 3.66768C12.1953 3.72084 12.163 3.76911 12.1223 3.80975L5.99725 9.93475C5.95661 9.9755 5.90833 10.0078 5.85518 10.0299C5.80203 10.0519 5.74505 10.0633 5.6875 10.0633C5.62996 10.0633 5.57298 10.0519 5.51982 10.0299C5.46667 10.0078 5.41839 9.9755 5.37775 9.93475L2.31525 6.87225C2.2331 6.7901 2.18695 6.67868 2.18695 6.5625C2.18695 6.44632 2.2331 6.3349 2.31525 6.25275C2.3974 6.1706 2.50882 6.12445 2.625 6.12445C2.74118 6.12445 2.8526 6.1706 2.93475 6.25275L5.6875 9.00638L11.5028 3.19025C11.5434 3.14951 11.5917 3.11719 11.6448 3.09513C11.698 3.07307 11.755 3.06172 11.8125 3.06172C11.87 3.06172 11.927 3.07307 11.9802 3.09513C12.0333 3.11719 12.0816 3.14951 12.1223 3.19025Z">
                                                </path>
                                            </svg> {{ $feature }}
                                        </li>
                                    @endforeach

                                </ul>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="col-xl-5 d-flex align-items-end">
                    <div class="mission-img">
                        <img src="{{ UI::get('wcu-img') }}" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('pages.components.testimonials')

    @include('pages.components.team')

</x-guest-layout>