<x-app-layout layout="landing" :isHeader1=true>
    <x-landing-pages.widgets.sub-header subTitle="About Us" subBreadcrume="About Us" />
    <div class="section-padding bg-white">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <p class="mb-3 text-uppercase text-primary">
                        about us
                    </p>
                    <h2 class=" mb-4">Get <span class="text-primary">Unique <br>Solutions</span> With Us!</h2>
                </div>
                <div class="col-md-6">
                    <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elementum ac integer
                        semper sit
                        semper laoreet donec. Vitae turpis pretium placerat augue mauris, adipiscing. Risus pretium,
                        amet mi
                        fringilla gravida risus accumsan.</p>
                    <a hrer="#" class="btn btn-primary mt-4">Know More</a>
                </div>
                <div class="col-md-8 mb-3 mt-4 mt-md-0">
                    <img src="{{ asset('images/landing-pages/images/home-4/banner-left.webp') }}" alt=""
                        class="img-fluid ">
                </div>
                <div class="col-md-4 mb-3">
                    <img src="{{ asset('images/landing-pages/images/home-4/banner-right.webp') }}" alt=""
                        class="img-fluid ">
                </div>
                <div class="col-md-4 mt-4 mt-lg-0">
                    <div class="card  mb-lg-0">
                        <div class="card-body">
                            <h4 class="mb-2">Our Vision</h4>
                            <p class="mb-0">
                                It Is A Long Established Fact That A Reader Will Be Distracted By The Readable Content
                                Of A
                                Page When Looking At Its Layout.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 ">
                    <div class="card mb-lg-0">
                        <div class="card-body">
                            <h4 class="mb-2">Our Mission</h4>
                            <p class="mb-0">
                                It Is A Long Established Fact That A Reader Will Be Distracted By The Readable Content
                                Of A
                                Page When Looking At Its Layout.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card  mb-lg-0">
                        <div class="card-body">
                            <h4 class="mb-2">Our Strategies</h4>
                            <p class="mb-0">
                                It Is A Long Established Fact That A Reader Will Be Distracted By The Readable Content
                                Of A
                                Page When Looking At Its Layout.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section-padding bg-secondary">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <p class="mb-3 text-uppercase text-primary">
                        our services
                    </p>
                    <h2 class=" mb-4 text-white">Services <span class="text-primary">We Offer</span></h2>
                    <p class="mb-0">It is a long established fact that a reader will be distracted by the readable
                        content
                        of a page when looking at its layout. </p>
                    <a hrer="#" class="btn btn-primary mt-4">Know More</a>
                    <img src="{{ asset('images/landing-pages/images/home-4/service.webp') }}" alt=""
                        class="img-fluid mt-4">
                </div>
                <div class="col-md-6">
                    <div class="row  row-cols-1 row-cols-lg-2">
                        <div class="col">
                            <div class="card services-box  rounded-1">
                                <div class="card-body">
                                    <h5 class="mb-3">Branding</h5>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
                                    <a href="#">Read More</a>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card services-box  rounded-1">
                                <div class="card-body">
                                    <h5 class="mb-3">Design</h5>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
                                    <a href="#">Read More</a>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card services-box mb-lg-0  rounded-1">
                                <div class="card-body">
                                    <h5 class="mb-3">Development</h5>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
                                    <a href="#">Read More</a>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card services-box mb-lg-0  rounded-1">
                                <div class="card-body">
                                    <h5 class="mb-3">Marketing</h5>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
                                    <a href="#">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section-padding bg-white">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <p class="mb-3 text-uppercase text-primary">
                        Why choose us?
                    </p>
                    <h2 class=" mb-4">We Make <span class="text-primary">Your <br>Idea Come True</span></h2>
                    <p class="mb-4">Orci ipsum tempus amet libero turpis enim sed quis. Maecenas suspendisse ac
                        integer
                        orci, suspendisse nulla. Dignissim pretium enim neque facilisi faucibus magna lectus ipsum
                        feugiat.
                    </p>
                    <div class="row row-cols-1 row-cols-lg-2">
                        <div class="col mb-4">
                            <div class="d-flex align-items-center">
                                <svg width="24" height="24" class="me-2" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path opacity="0.4"
                                        d="M16.3402 1.99976H7.67024C4.28024 1.99976 2.00024 4.37976 2.00024 7.91976V16.0898C2.00024 19.6198 4.28024 21.9998 7.67024 21.9998H16.3402C19.7302 21.9998 22.0002 19.6198 22.0002 16.0898V7.91976C22.0002 4.37976 19.7302 1.99976 16.3402 1.99976Z"
                                        fill="#3A57E8" />
                                    <path
                                        d="M10.8133 15.248C10.5893 15.248 10.3653 15.163 10.1943 14.992L7.82132 12.619C7.47932 12.277 7.47932 11.723 7.82132 11.382C8.16332 11.04 8.71632 11.039 9.05832 11.381L10.8133 13.136L14.9413 9.00796C15.2833 8.66596 15.8363 8.66596 16.1783 9.00796C16.5203 9.34996 16.5203 9.90396 16.1783 10.246L11.4323 14.992C11.2613 15.163 11.0373 15.248 10.8133 15.248Z"
                                        fill="#3A57E8" />
                                </svg>
                                Easy Communication
                            </div>
                        </div>
                        <div class="col mb-4">
                            <div class="d-flex align-items-center">
                                <svg width="24" class="me-2" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path opacity="0.4"
                                        d="M16.3402 1.99976H7.67024C4.28024 1.99976 2.00024 4.37976 2.00024 7.91976V16.0898C2.00024 19.6198 4.28024 21.9998 7.67024 21.9998H16.3402C19.7302 21.9998 22.0002 19.6198 22.0002 16.0898V7.91976C22.0002 4.37976 19.7302 1.99976 16.3402 1.99976Z"
                                        fill="#3A57E8" />
                                    <path
                                        d="M10.8133 15.248C10.5893 15.248 10.3653 15.163 10.1943 14.992L7.82132 12.619C7.47932 12.277 7.47932 11.723 7.82132 11.382C8.16332 11.04 8.71632 11.039 9.05832 11.381L10.8133 13.136L14.9413 9.00796C15.2833 8.66596 15.8363 8.66596 16.1783 9.00796C16.5203 9.34996 16.5203 9.90396 16.1783 10.246L11.4323 14.992C11.2613 15.163 11.0373 15.248 10.8133 15.248Z"
                                        fill="#3A57E8" />
                                </svg>
                                Security Assured
                            </div>
                        </div>
                        <div class="col mb-4">
                            <div class="d-flex align-items-center">
                                <svg width="24" class="me-2" height="24" viewBox="0 0 24 24"
                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path opacity="0.4"
                                        d="M16.3402 1.99976H7.67024C4.28024 1.99976 2.00024 4.37976 2.00024 7.91976V16.0898C2.00024 19.6198 4.28024 21.9998 7.67024 21.9998H16.3402C19.7302 21.9998 22.0002 19.6198 22.0002 16.0898V7.91976C22.0002 4.37976 19.7302 1.99976 16.3402 1.99976Z"
                                        fill="#3A57E8" />
                                    <path
                                        d="M10.8133 15.248C10.5893 15.248 10.3653 15.163 10.1943 14.992L7.82132 12.619C7.47932 12.277 7.47932 11.723 7.82132 11.382C8.16332 11.04 8.71632 11.039 9.05832 11.381L10.8133 13.136L14.9413 9.00796C15.2833 8.66596 15.8363 8.66596 16.1783 9.00796C16.5203 9.34996 16.5203 9.90396 16.1783 10.246L11.4323 14.992C11.2613 15.163 11.0373 15.248 10.8133 15.248Z"
                                        fill="#3A57E8" />
                                </svg>
                                Expert Advise
                            </div>
                        </div>
                        <div class="col mb-4">
                            <div class="d-flex align-items-center">
                                <svg width="24" class="me-2" height="24" viewBox="0 0 24 24"
                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path opacity="0.4"
                                        d="M16.3402 1.99976H7.67024C4.28024 1.99976 2.00024 4.37976 2.00024 7.91976V16.0898C2.00024 19.6198 4.28024 21.9998 7.67024 21.9998H16.3402C19.7302 21.9998 22.0002 19.6198 22.0002 16.0898V7.91976C22.0002 4.37976 19.7302 1.99976 16.3402 1.99976Z"
                                        fill="#3A57E8" />
                                    <path
                                        d="M10.8133 15.248C10.5893 15.248 10.3653 15.163 10.1943 14.992L7.82132 12.619C7.47932 12.277 7.47932 11.723 7.82132 11.382C8.16332 11.04 8.71632 11.039 9.05832 11.381L10.8133 13.136L14.9413 9.00796C15.2833 8.66596 15.8363 8.66596 16.1783 9.00796C16.5203 9.34996 16.5203 9.90396 16.1783 10.246L11.4323 14.992C11.2613 15.163 11.0373 15.248 10.8133 15.248Z"
                                        fill="#3A57E8" />
                                </svg>
                                Pocket Friendly Prices
                            </div>
                        </div>
                    </div>
                    <a hrer="#" class="btn btn-primary">Know More</a>
                </div>
                <div class="col-md-6 mt-4 mt-md-0">
                    <img src="{{ asset('images/landing-pages/images/home-4/Image-1.webp') }}" alt=""
                        class="img-fluid ">
                </div>
            </div>
        </div>
    </div>
    <div class="inner-box bg-secondary">
        <div class="container">
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-5 align-items-center ">
                <div class="col mb-lg-0 mb-4">
                    <x-landing-pages.widgets.client clientImage="07.webp" />
                </div>
                <div class="col mb-lg-0 mb-4">
                    <x-landing-pages.widgets.client clientImage="08.webp" />
                </div>
                <div class="col mb-lg-0 mb-4">
                    <x-landing-pages.widgets.client clientImage="09.webp" />
                </div>
                <div class="col mb-lg-0 mb-4">
                    <x-landing-pages.widgets.client clientImage="10.webp" />
                </div>
                <div class="col">
                    <x-landing-pages.widgets.client clientImage="11.webp" />
                </div>
            </div>
        </div>
    </div>
    <div class="section-card-padding">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12 text-center">
                    <p class="mb-3 text-primary">Reviews</p>
                    <h2 class="mb-5 text-secondary">What our <span class="text-primary">Customer’s are saying</span>
                    </h2>
                </div>
                <div class="overflow-hidden slider-circle-btn" id="testimonial-one-slider">
                    <ul class="p-0 m-0 swiper-wrapper list-inline">
                        <li class="swiper-slide card-slide card overflow-hidden">
                            <x-landing-pages.widgets.testimonial-one testTitle="A true game changer."
                                testText="“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vitae, eget condimentum
                        luctus nec nec tellus sem sed. Diam elementum tellus posuere ipsum tortor.”"
                                testUser="user-1.webp" userTitle="Eleen Rogers" Id="01" />
                        </li>
                        <li class="swiper-slide card-slide card overflow-hidden">
                            <x-landing-pages.widgets.testimonial-one testTitle="Best you can Get"
                                testText="“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vitae, eget condimentum
                        luctus nec nec tellus sem sed. Diam elementum tellus posuere ipsum tortor.”"
                                testUser="user-2.webp" userTitle="Brooklyn Simmons" Id="02" />
                        </li>
                        <li class="swiper-slide card-slide card overflow-hidden">
                            <x-landing-pages.widgets.testimonial-one
                                testTitle="Perfect poduct for your
                        business"
                                testText="“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vitae, eget
                        condimentum luctus nec nec tellus sem sed. Diam elementum tellus posuere ipsum tortor.”"
                                testUser="user-3.webp" userTitle="Jenny Wilson" Id="03" />
                        </li>
                        <li class="swiper-slide card-slide card overflow-hidden">
                            <x-landing-pages.widgets.testimonial-one testTitle="A true game changer."
                                testText="“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vitae, eget condimentum
                        luctus nec nec tellus sem sed. Diam elementum tellus posuere ipsum tortor.”"
                                testUser="user-1.webp" userTitle="Eleen Rogers" Id="01" />
                        </li>
                        <li class="swiper-slide card-slide card overflow-hidden">
                            <x-landing-pages.widgets.testimonial-one testTitle="Best you can Get"
                                testText="“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vitae, eget condimentum
                        luctus nec nec tellus sem sed. Diam elementum tellus posuere ipsum tortor.”"
                                testUser="user-2.webp" userTitle="Brooklyn Simmons" Id="02" />
                        </li>
                        <li class="swiper-slide card-slide card overflow-hidden">
                            <x-landing-pages.widgets.testimonial-one
                                testTitle="Perfect poduct for your
                        business"
                                testText="“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vitae, eget
                        condimentum luctus nec nec tellus sem sed. Diam elementum tellus posuere ipsum tortor.”"
                                testUser="user-3.webp" userTitle="Jenny Wilson" Id="03" />
                        </li>
                    </ul>
                    <div class="swiper-button swiper-button-next"></div>
                    <div class="swiper-button swiper-button-prev"></div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
