@extends('layouts.start')
@section('title')
    About us
@endsection
@section('css')
    {{-- Css Files here --}}
@endsection
@section('content')
    <!-- start page title section -->
    <section class="wow fadeIn bg-light-gray padding-35px-tb page-title-small top-space top-space">
        <div class="container">
            <div class="row equalize xs-equalize-auto">
                <div class="col-lg-8 col-md-6 col-sm-6 col-xs-12 display-table">
                    <div class="display-table-cell vertical-align-middle text-left xs-text-center">
                        <!-- start page title -->
                        <h1 class="alt-font text-extra-dark-gray font-weight-500 no-margin-bottom text-uppercase">About Us</h1>
                        <!-- end page title -->
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 display-table text-right xs-text-left xs-margin-10px-top">
                    <div class="display-table-cell vertical-align-middle breadcrumb text-small alt-font">
                        <!-- start breadcrumb -->
                        <ul class="xs-text-center">
                            <li><a href="#" class="text-dark-gray">Pages</a></li>
                            <li class="text-dark-gray">About Us</li>
                        </ul>
                        <!-- end breadcrumb -->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end page title section -->
    <!-- start story section -->
    <section class="wow fadeIn animated animated">
        <div class="container">
            <div class="row equalize sm-equalize-auto">
                <div class="col-md-5 col-sm-12 col-xs-12 text-center sm-margin-30px-bottom wow fadeInLeft">
                    <div class="display-table width-100 height-100">
                        <div class="display-table-cell vertical-align-middle width-100 height-100">
                            <img src="{{ asset('/') }}images/51825150_m.jpg" alt="" class="border-radius-6 width-100">
                        </div>
                    </div>
                </div>
                <div class="col-md-7 col-sm-12 col-xs-12 wow fadeInRight" data-wow-delay="0.2s">
                    <div class="display-table width-100 height-100">
                        <div class="display-table-cell vertical-align-middle padding-twelve-lr sm-text-center sm-no-padding width-100">
                            <span class="text-deep-pink alt-font margin-10px-bottom display-inline-block text-medium">Don’t worry, we have the developers you need.</span>
                            <h6 class="alt-font text-extra-dark-gray">
                                WR with its African Partners have invested in a large pool of African Tech Talent for companies round the globe.
                            </h6>
                            <p>
                                Top Talents are hard to find, not close by or expensive to hire;
                                WR bridges this gap with tested developers managed by American Project Leads,
                                ready for hire on your software and web projects.
                            </p>
                            <a href="{{ route('hire') }}" class="btn btn-dark-gray btn-small text-extra-small btn-rounded margin-5px-top">
                                <i class="fa fa-play-circle icon-very-small margin-5px-right no-margin-left" aria-hidden="true"></i>
                                Hire A Developer
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end story section -->
    <!-- start feature box  -->
    <section class="bg-extra-dark-gray wow fadeIn md-padding-two-lr">
        <div class="container">
            <div class="row">
                <!-- feature box item-->
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 feature-box-1 xs-margin-30px-bottom wow fadeInRight">
                    <div class="col-md-12 col-sm-12 no-padding margin-15px-bottom alt-font">
                        <h3 class="char-value letter-spacing-minus-1 text-medium-gray font-weight-300">01.</h3>
                        <span class="text-large line-height-22 padding-20px-left sm-padding-15px width-100 display-table-cell vertical-align-middle">Top Tier.<br> Talent Network.</span>
                    </div>
                    <p class="width-90 md-width-100">
                        We have invested in a network of Partners in across the globe to develop top talent
                    </p>
                    <div class="clearfix"></div>
                    <div class="separator-line-horrizontal-medium-light3 bg-deep-pink margin-5px-top"></div>
                </div>
                <!-- end feature box item-->
                <!-- start feature box item-->
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 feature-box-1 xs-margin-30px-bottom  wow fadeInRight" data-wow-delay="0.2s">
                    <div class="col-md-12 col-sm-12 no-padding margin-15px-bottom alt-font">
                        <h3 class="char-value letter-spacing-minus-1 text-medium-gray font-weight-300">02.</h3>
                        <span class="text-large line-height-22 padding-20px-left width-100 display-table-cell vertical-align-middle">Onshore.<br> Team Managers.</span>
                    </div>
                    <p class="width-90 md-width-100">
                        Onshore Team Managers" section in the WR page to "Our Home_based Team Managers work with you for faster project delivery
                    </p>
                    <div class="clearfix"></div>
                    <div class="separator-line-horrizontal-medium-light3 bg-deep-pink margin-5px-top"></div>
                </div>
                <!-- end feature box item-->
                <!-- start feature box item-->
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 feature-box-1  wow fadeInRight" data-wow-delay="0.4s">
                    <div class="col-md-12 col-sm-12 no-padding margin-15px-bottom alt-font">
                        <h3 class="char-value letter-spacing-minus-1 text-medium-gray font-weight-300">03.</h3>
                        <span class="text-large line-height-22 padding-20px-left width-100 display-table-cell vertical-align-middle">Pricing.<br> For Success.</span>
                    </div>
                    <p class="width-90 md-width-100">
                        Success should be affordable, the price for growth is lower than it has ever been
                    </p>
                    <div class="clearfix"></div>
                    <div class="separator-line-horrizontal-medium-light3 bg-deep-pink margin-5px-top"></div>
                </div>
                <!-- end feature box item-->
            </div>
        </div>
    </section>
    <!-- end feature box -->
    <!-- start slider section  -->
    <section id="clients" class="parallax wow fadeIn" data-stellar-background-ratio="0.4" style="background-image:url('images/homepage-9-parallax-img5.jpg');">
        <div class="opacity-medium bg-extra-dark-gray"></div>
        <div class="container text-center">
            <div class="row">
                <div class="swiper-slider-clients swiper-container white-move">
                    <div class="swiper-wrapper">
                        <!-- start slide -->
                        <div class="swiper-slide text-center"><a href="#"><img src="images/android-logo.png" alt=""></a></div>
                        <!-- end slide -->
                        <!-- start slide -->
                        <div class="swiper-slide text-center"><a href="#"><img src="images/angularjs-logo.png" alt=""></a></div>
                        <!-- end slide -->
                        <!-- start slide -->
                        <div class="swiper-slide text-center"><a href="#"><img src="images/drupal-logo.png" alt=""></a></div>
                        <!-- end slide -->
                        <!-- start slide -->
                        <div class="swiper-slide text-center"><a href="https://www.magento.com"><img src="images/magento-logo2.png" alt=""></a></div>
                        <!-- end slide -->
                        <!-- start slide -->
                        <div class="swiper-slide text-center"><a href="#"><img src="images/laravel-logo.png" alt=""></a></div>
                        <!-- end slide -->
                        <!-- start slide -->
                        <div class="swiper-slide text-center"><a href="https://www.pingdom.com"><img src="images/python-logo.png" alt=""></a></div>
                        <!-- end slide -->
                        <!-- start slide -->
                        <div class="swiper-slide text-center"><a href="https://www.lesscss.org"><img src="images/ruby-logo.png" alt=""></a></div>
                        <!-- end slide -->
                        <!-- start slide -->
                        <div class="swiper-slide text-center"><a href="https://www.jquery.com"><img src="images/jquery-logo.png" alt=""></a></div>
                        <!-- end slide -->
                        <!-- start slide -->
                        <div class="swiper-slide text-center"><a href="#"><img src="images/swift-logo.png" alt=""></a></div>
                        <!-- end slide -->
                        <!-- start slide -->
                        <div class="swiper-slide text-center"><a href="#"><img src="images/symfony-logo.png" alt=""></a></div>
                        <!-- end slide -->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end slider section -->
    <!-- start testimonial section -->
    <section class="wow fadeIn animated bg-light-gray testimonial-style3">
        <div class="container">
            <div class="row">
                <div class="sm-width-60 sm-center-col xs-width-100">
                    <div class="col-md-4 sm-margin-two-bottom wow fadeIn last-paragraph-no-margin testimonial-style3">
                        <div class="testimonial-content-box padding-twelve-all bg-white border-radius-6 box-shadow arrow-bottom sm-padding-eight-all">
                            As an electronic payment service startup,
                            getting experienced tech guys was really a pain in the neck,
                            but WR made it easy to build out tech team and within a slim budget
                        </div>
                        <!-- start testimonials item -->
                        <div class="testimonial-box padding-25px-all xs-padding-20px-all">
                            <div class="image-box width-20"><img src="{{ asset('/') }}images/paydelegate_logo.png" class="border-radius-100" alt=""></div>
                            <div class="name-box padding-20px-left">
                                <div class="alt-font font-weight-500 text-small text-uppercase text-extra-dark-gray">Shoko Mugikura</div>
                                <p class="text-extra-small text-uppercase text-medium-gray">PAYDELEGATE</p>
                            </div>
                        </div>
                    </div>
                    <!-- end testimonials item -->
                    <!-- start testimonials item -->
                    <div class="col-md-4 sm-margin-two-bottom wow fadeIn last-paragraph-no-margin testimonial-style3" data-wow-delay="0.2s">
                        <div class="testimonial-content-box padding-twelve-all bg-white border-radius-6 box-shadow arrow-bottom sm-padding-eight-all">
                            WR was able to get us a developer in 48 hours to
                            complete and maintain our in-house app when a crucial team member left without notice.
                        </div>
                        <div class="testimonial-box padding-25px-all xs-padding-20px-all">
                            <div class="image-box width-20"><img src="{{ asset('/') }}images/bzone.png" class="border-radius-100" alt=""></div>
                            <div class="name-box padding-20px-left">
                                <div class="alt-font font-weight-500 text-small text-uppercase text-extra-dark-gray">Alexander Harvard</div>
                                <p class="text-extra-small text-uppercase text-medium-gray">BZone</p>
                            </div>
                        </div>
                    </div>
                    <!-- end testimonials item -->
                    <!-- start testimonials item -->
                    <div class="col-md-4 wow fadeIn last-paragraph-no-margin testimonial-style3" data-wow-delay="0.4s">
                        <div class="testimonial-content-box padding-twelve-all bg-white border-radius-6 box-shadow arrow-bottom sm-padding-eight-all">
                            Having a remotely managed tech team from the USA was one of the best decisions we ever made.
                        </div>
                        <div class="testimonial-box padding-25px-all xs-padding-20px-all">
                            <div class="image-box width-20"><img src="{{ asset('/') }}images/photorocks.png" class="border-radius-100" alt=""></div>
                            <div class="name-box padding-20px-left">
                                <div class="alt-font font-weight-500 text-small text-uppercase text-extra-dark-gray">Herman Miller</div>
                                <p class="text-extra-small text-uppercase text-medium-gray">PhotoRocks</p>
                            </div>
                        </div>
                    </div>
                    <!-- end testimonials item -->
                </div>
            </div>
        </div>
    </section>
    <!-- end testimonial section -->
@endsection

@section('js')
    {{-- Js Files here --}}
@endsection