@extends('frontend.layouts.app')

@section('title')
About Us | R Web Solutions Corp.
@endsection

@section('seo')

@endsection

@section('content')

<link rel="stylesheet" href="{{ asset('/css/frontend/about.css') }}">


<div class="messenger-box">
    <div>
        <a href="#">
            <div class="arrow-container">
                <i style="color: white;;" class="fa-solid fa-arrow-up"></i>
            </div>
        </a>
    </div>
    <a href="https://www.messenger.com/t/2350712291663307/?messaging_source=source%3Apages%3Amessage_shortlink&source_id=1441792&recurring_notification=0">
        <img src="{{ asset('assets/homepage/messenger.png') }}" alt="messenger" width="55px">
    </a>
</div>

<section class="about-main-section-container proxima" draggable="false">
    <div class="card border-0" draggable="false" style="background:rgba(255,255,255, 0)">
        <img class="about-image-banner" src="{{ asset('assets/about/about-main-bg.png') }}" alt="about-banner">
        <img class="about-image-mobile-banner" src="{{ asset('assets/about/about-main-mobile-bg.png') }}" alt="about-banner">
        <div class="card-img-overlay container" draggable="false">
            <div class="row">
                <div class="col-lg-6 col-md-12 col-sm-12 about-left-box" draggable="false">
                    <div class="about-left-title">
                        <span>Get to</span>
                    </div>
                    <div class="about-left-second-title">
                        <span>Know us</span>
                    </div>
                </div>
                <div class="col-lg-6 col-md-12 col-sm-12 about-right-box" draggable="false">
                    <div class="card border-0" style="background: rgba(255,255,255, 0)">
                        <div class="slime-about-bg"></div>
                        <div class="card-img-overlay">
                            <div class="about-image-box">
                                <img src="{{ asset('assets/about/rweb-team.png') }}" alt="rweb">
                            </div>
                        </div>
                    </div>
                </div>
                <div class=" about-center-box d-flex  justify-content-end text-center">
                    <span class="about-center-description">From our cutting-edge services,
                        <span class="about-highlight-description">R Web Solutions, Corp.</span>
                        believe that the solutions we created today will surpass the possibilities in technology.
                        No matter what's your product or service, you have a story to tell. And we're the best company to tell it.
                    </span>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="about-second-section-container proxima" draggable="false">
    <div class="card border-0" draggable="false" style="background:rgba(255,255,255, 0)">
        <img class="about-second-image-banner" src="{{ asset('assets/about/about-second-section-bg.png') }}" alt="about-banner">
        <div class="card-img-overlay">
            <div class="container">
                <div class="row about-second-title-box">
                    <div class="col-12 d-flex justify-content-between">
                        <hr class="solid">
                        <p class="about-second-title">Our Company</p>
                        <hr class="solid">
                    </div>
                </div>
            </div>
            <div class="container our-company-container pt-4">
                <div class="row">
                    <div class="col-lg-6 about-second-left-box">
                        <div class="col-12">
                            <span class="our-company-description">
                                R Web Solutions Corp. is a Philippine-based company, leading an innovative
                                technology Solution from a cutting-edge web design, custom software and mobile
                                applications. Since our inception in mid-2019, We have pioneered custom business
                                solution that have become vital components in our client's business achievement.
                                Our immense technology and industry expertise enable us to partner with clients to
                                deliver sophisticated solution rapidly and on budget. From our cutting-edge services,
                                we believe that the solution we create today will surpass the possibilities in technology. No matter what's your product or service, you have a story to tell. And, we're the best company to tell it.
                            </span>
                        </div>
                        <div class="col-12 pt-5 ">
                            <div class="row">
                                <div class="col-6 our-mission-box">
                                    <div class="card text-center">
                                        <img class="mission-image" src="{{ asset('assets/about/mission.svg') }}" alt="mission">
                                        <span class="mission-title">Our Mission</span>
                                        <span class="mission-description">
                                            To ensure business problems getting solution on
                                            ongoing technology. Small to big companies, R Web Solutions will
                                            plan the process to ideation and concept to provide
                                            quality services.
                                        </span>
                                    </div>
                                </div>
                                <div class="col-6 our-vision-box">
                                    <div class="card text-center">
                                        <img class="vision-image" src="{{ asset('assets/about/vision.svg') }}" alt="vision">
                                        <span class="vision-title">Our Vision</span>
                                        <span class="vision-description">
                                            We’re not just a resource provider.
                                            We value our customers’ success as much as our own – so that they
                                            can have the courage to engage new technology.
                                        </span>
                                    </div>
                                </div>
                                <!-- <div class="col-12 our-vision-box">
                                    <div class="card text-center">
                                        <img class="vision-image" src="{{ asset('assets/about/vision.svg') }}" alt="vision">
                                        <span class="vision-title">Our Vision</span>
                                        <span class="vision-description">
                                            We’re not just a resource provider.
                                            We value our customers’ success as much as our own – so that they
                                            can have the courage to engage new technology.
                                        </span>
                                    </div>
                                </div> -->
                            </div>
                            <div class="row mt-3">
                                <div class="col-12 our-mission-box">
                                    <div class="card text-center">
                                        <img class="mission-image img-fluid" src="{{ asset('assets/about/quality-policy.png') }}" alt="mission">
                                        <span class="mission-title">Quality Policy</span>
                                        <ul class="policy-description ">
                                            <li>
                                                We aim to understand our client's requirements and provide
                                                them with innovative, user-friendly projects that fulfill
                                                their needs and objectives.
                                            </li>
                                            <li>
                                                We promote open and transparent communication and
                                                training within our team and with our clients to ensure
                                                that all project requirements are well-understood and
                                                met.
                                            </li>
                                            <li>
                                                We follow well-defined, documented processes for
                                                development to ensure consistency and efficiency.
                                            </li>
                                            <li>
                                                We are dedicated to minimizing errors and defects in our
                                                development processes through continual improvement.
                                            </li>
                                            <li>
                                                Establishing quality objectives is imperative to ensure
                                                continuous improvements in our processes and
                                                outcomes, fostering a culture of excellence and
                                                advancement.
                                            </li>
                                            <li>
                                                We commit to satisfy applicable requirements of ISO
                                                9001:2015 and R Web Solutions Corp. QMS and regulatory
                                                requirements.
                                            </li>
                                        </ul>


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

                    <div class="col-lg-6 about-second-right-box">
                        <div class="row">
                            <div class="col-12 image-box">
                                <img class="img-fluid" id="image" src="{{ asset('assets/about/about-logo.png') }}" alt="logo" draggable="false">
                            </div>
                            <div class="col-12 about-shadow-box">
                                <img class="img-fluid" id="shadow" src="{{ asset('assets/homepage/main-section/shadow-right.png') }}" alt="logo-shadow">
                            </div>
                            <div class="col-12 name-box">
                                <span>Web Solutions Corp.</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container our-team-container">
                <section class="about-third-section-container proxima" draggable="false">
                    <div class="container">
                        <div class="row">
                            <div class="col-12 d-flex justify-content-center">
                                <span class="about-third-title">
                                    Why Choose <span style="color: #fa6f10">US</span>
                                </span>
                            </div>
                            <div class="col-12 d-flex justify-content-center text-center">
                                <span class="about-third-description p-lg-2 p-md-2 p-sm-2 p-1">
                                    We are committed to providing our clients with exceptional service while offering our employees the best training.
                                </span>
                            </div>
                            <div class="col-12">
                                <div class="choose-us-box">
                                    <ul class="nav nav-pills" id="pills-tab" role="tablist">
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link active" id="pills-technology-tab" data-bs-toggle="pill" data-bs-target="#pills-technology" type="button" role="tab" aria-controls="pills-technology" aria-selected="true">Latest Technology</button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="pills-support-tab" data-bs-toggle="pill" data-bs-target="#pills-support" type="button" role="tab" aria-controls="pills-support" aria-selected="false">Full Support</button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="pills-content-tab" data-bs-toggle="pill" data-bs-target="#pills-content" type="button" role="tab" aria-controls="pills-content" aria-selected="false">Content Management</button>
                                        </li>
                                        <li class="nav-item" role="presentation">
                                            <button class="nav-link" id="pills-time-tab" data-bs-toggle="pill" data-bs-target="#pills-time" type="button" role="tab" aria-controls="pills-time" aria-selected="false">Time Is Gold</button>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-12 tab-content-box">
                                <div class="tab-content" id="pills-tabContent">
                                    <div class="tab-pane tab-pane-1 fade show active" id="pills-technology" role="tabpanel" aria-labelledby="pills-technology-tab">
                                        <div class="row">
                                            <div class="col-lg-2 col-md-3 col-sm-12 d-flex justify-content-center">
                                                <img class="img-fluid" src="{{ asset('assets/about/technology.png') }}" alt="icon">
                                            </div>
                                            <div class="col-lg-10 col-md-9 col-sm-12 pills-description-box">
                                                <span>
                                                    Partner with us and soar in the digital world. We work together to maximize the potential of your brand; we are more than just supporters.
                                                    Count on us to not only support your vision but to also introduce you to the latest technology, ensuring your brand stands out and succeeds in the competitive
                                                    digital world.
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane tab-pane-2 fade" id="pills-support" role="tabpanel" aria-labelledby="pills-support-tab">
                                        <div class="row">
                                            <div class="col-lg-2 col-md-3 col-sm-12 d-flex justify-content-center">
                                                <img class="img-fluid" src="{{ asset('assets/about/support.png') }}" alt="icon">
                                            </div>
                                            <div class="col-lg-10 col-md-9 col-sm-12 pills-description-box">
                                                <span>
                                                    Choose us because we're dedicated to supporting your vision.
                                                    Our commitment to swift communication means we'll always be there to listen, adapt,
                                                    and bring your ideas to life efficiently.Choose us because we're dedicated to supporting your vision.
                                                    Our commitment to swift communication means we'll always be there to listen, adapt, and bring your ideas to life efficiently.
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane tab-pane-3 fade" id="pills-content" role="tabpanel" aria-labelledby="pills-content-tab">
                                        <div class="row">
                                            <div class="col-lg-2 col-md-3 col-sm-12 d-flex justify-content-center">
                                                <img class="img-fluid" src="{{ asset('assets/about/content.png') }}" alt="icon">
                                            </div>
                                            <div class="col-lg-10 col-md-9 col-sm-12 pills-description-box">
                                                <span>
                                                    Choose us for your website needs because we empower you with a user-friendly CMS.
                                                    With our expertise, you'll effortlessly manage your site's content, ensuring it stays fresh and
                                                    engaging without the need for technical skills.
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane tab-pane-4 fade" id="pills-time" role="tabpanel" aria-labelledby="pills-time-tab">
                                        <div class="row">
                                            <div class="col-lg-2 col-md-3 col-sm-12 d-flex justify-content-center">
                                                <img class="img-fluid" src="{{ asset('assets/about/time.png') }}" alt="icon">
                                            </div>
                                            <div class="col-lg-10 col-md-9 col-sm-12 pills-description-box">
                                                <span>
                                                    Choose us because we value time. We understand the importance of deadlines and guarantee that your project will be completed on time.
                                                    With us, you can rely on timely delivery, allowing you to stay on track and achieve your objectives efficiently.
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 about-slider-container">
                            <div class="wrapper">
                                <ul class="carousel">
                                    <li class="card">
                                        <img src="{{ asset('assets/homepage/second-section/website-development.png') }}" alt="icon" class="default-image">
                                        <img src="{{ asset('assets/homepage/second-section/website-development-hover.png') }}" alt="icon" class="hover-image">
                                        <p class="service-name">Website Development</p>
                                    </li>
                                    <li class="card">
                                        <img src="{{ asset('assets/homepage/second-section/mobile-development.png') }}" alt="icon" class="default-image">
                                        <img src="{{ asset('assets/homepage/second-section/mobile-development-hover.png') }}" alt="icon" class="hover-image">
                                        <p class="service-name" style="margin-top: 0px">Mobile App Development</p>
                                    </li>
                                    <li class="card">
                                        <img src="{{ asset('assets/homepage/second-section/software-development.png') }}" alt="icon" class="default-image">
                                        <img src="{{ asset('assets/homepage/second-section/software-development-hover.png') }}" alt="icon" class="hover-image">
                                        <p class="service-name" style="margin-top: 0px">Custom Software Development</p>
                                    </li>
                                    <li class="card">
                                        <img src="{{ asset('assets/homepage/second-section/digital-marketing.png') }}" alt="icon" class="default-image">
                                        <img src="{{ asset('assets/homepage/second-section/digital-marketing-hover.png') }}" alt="icon" class="hover-image">
                                        <p class="service-name" style="margin-top: 0px">Digital Marketing Services</p>
                                    </li>
                                    <li class="card">
                                        <img src="{{ asset('assets/homepage/second-section/multimedia.png') }}" alt="icon" class="default-image">
                                        <img src="{{ asset('assets/homepage/second-section/multimedia-hover.png') }}" alt="icon" class="hover-image">
                                        <p class="service-name">Multimedia Services</p>
                                    </li>
                                    <li class="card">
                                        <img src="{{ asset('assets/homepage/second-section/hosting-server.png') }}" alt="icon" class="default-image">
                                        <img src="{{ asset('assets/homepage/second-section/hosting-server-hover.png') }}" alt="icon" class="hover-image">
                                        <p class="service-name" style="margin-top: 0px">Reliable Hosting & Server</p>
                                    </li>
                                    <li class="card">
                                        <img src="{{ asset('assets/homepage/second-section/cybersecurity.png') }}" alt="icon" class="default-image">
                                        <img src="{{ asset('assets/homepage/second-section/cybersecurity-hover.png') }}" alt="icon" class="hover-image">
                                        <p class="service-name">Cybersecurity Services</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</section>


<section class="about-fourth-section-container proxima" draggable="false">
    <div class="container">
        <div class="col-12">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                    <div class="client-box">
                        <div class="client-title">
                            <span>
                                Satisfied <span style="color: #fa6f10">Clients</span>
                            </span>
                        </div>
                        <div class="client-description">
                            <span>
                                We’ve been helping 180+ businesses from all around
                                Philippine making their ideas into reality in engaging in technology
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-8 col-md-8 col-sm-12 col-12">
                    <div class="partner-slider-container">
                        <div class="slide-track">
                            <div class="slide">
                                <img src="{{ asset('assets/about/partner-1.png') }}" alt="Partners">
                            </div>
                            <div class="slide">
                                <img src="{{ asset('assets/about/partner-2.png') }}" alt="Partners">
                            </div>
                            <div class="slide">
                                <img src="{{ asset('assets/about/partner-3.png') }}" alt="Partners">
                            </div>
                            <div class="slide">
                                <img src="{{ asset('assets/about/partner-4.png') }}" alt="Partners">
                            </div>
                            <div class="slide">
                                <img src="{{ asset('assets/about/partner-5.png') }}" alt="Partners">
                            </div>
                            <div class="slide">
                                <img src="{{ asset('assets/about/partner-6.png') }}" alt="Partners">
                            </div>
                            <div class="slide">
                                <img src="{{ asset('assets/about/partner-7.png') }}" alt="Partners">
                            </div>
                            <div class="slide">
                                <img src="{{ asset('assets/about/partner-8.png') }}" alt="Partners">
                            </div>
                            <div class="slide">
                                <img src="{{ asset('assets/about/partner-9.png') }}" alt="Partners">
                            </div>
                            <div class="slide">
                                <img src="{{ asset('assets/about/partner-10.png') }}" alt="Partners">
                            </div>
                            <!-- Second List -->

                            <div class="slide">
                                <img src="{{ asset('assets/about/partner-1.png') }}" alt="Partners">
                            </div>
                            <div class="slide">
                                <img src="{{ asset('assets/about/partner-2.png') }}" alt="Partners">
                            </div>
                            <div class="slide">
                                <img src="{{ asset('assets/about/partner-3.png') }}" alt="Partners">
                            </div>
                            <div class="slide">
                                <img src="{{ asset('assets/about/partner-4.png') }}" alt="Partners">
                            </div>
                            <div class="slide">
                                <img src="{{ asset('assets/about/partner-5.png') }}" alt="Partners">
                            </div>
                            <div class="slide">
                                <img src="{{ asset('assets/about/partner-6.png') }}" alt="Partners">
                            </div>
                            <div class="slide">
                                <img src="{{ asset('assets/about/partner-7.png') }}" alt="Partners">
                            </div>
                            <div class="slide">
                                <img src="{{ asset('assets/about/partner-8.png') }}" alt="Partners">
                            </div>
                            <div class="slide">
                                <img src="{{ asset('assets/about/partner-9.png') }}" alt="Partners">
                            </div>
                            <div class="slide">
                                <img src="{{ asset('assets/about/partner-10.png') }}" alt="Partners">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="about-fifth-section-container proxima" draggable="false">
    <div class="card border-0" style="background: rgba(255,255,255, 0)">
        @foreach($feedbacks as $index => $item)
        @if($index == 0)
        <div class="client-image-1">
            <img src="{{ asset('uploads/feedbacks/' . $item->image) }}" alt="client-photo">
        </div>
        @elseif($index == 1)
        <div class="client-image-2">
            <img src="{{ asset('uploads/feedbacks/' . $item->image) }}" alt="client-photo">
        </div>
        @elseif($index == 2)
        <div class="client-image-3">
            <img src="{{ asset('uploads/feedbacks/' . $item->image) }}" alt="client-photo">
        </div>
        @elseif($index == 3)
        <div class="client-image-4">
            <img src="{{ asset('uploads/feedbacks/' . $item->image) }}" alt="client-photo">
        </div>
        @elseif($index == 4)
        <div class="client-image-5">
            <img src="{{ asset('uploads/feedbacks/' . $item->image) }}" alt="client-photo">
        </div>
        @endif
        @endforeach
        <div class="container">
            <div class="col-12">
                <div class="row">
                    <div class="about-feedback-container col-lg-8 col-md-12 col-sm-12 col-12 order-lg-0 order-md-1 order-sm-1 order-1">
                        <div class="wrapper">
                            <ul class="carousel">
                                @foreach ($feedbacks as $item)
                                <li class="card">
                                    <div class="d-flex flex-row">
                                        <div class="feedback-image-box">
                                            <img src="{{asset('uploads/feedbacks/' . $item->image)}}" alt="client-photo">
                                        </div>
                                        <div class="feedback-quote-box">
                                            <div class="quote-image">
                                                <img src="{{asset('assets/about/quotation.png')}}" alt="comment">
                                            </div>
                                            <div class="quote-message">
                                                <span>
                                                    {!! $item->content !!}
                                                </span>
                                            </div>
                                            <div class="quote-name">
                                                <span>
                                                    {{ $item->name }}
                                                </span>
                                            </div>
                                            <div class="quote-position">
                                                <span>
                                                    {{ $item->position }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                @endforeach
                                <!-- <li class="card">
                                    <div class="d-flex flex-row">
                                        <div class="feedback-image-box">
                                            <img src="{{asset('assets/about/mikko.png')}}" alt="client-photo">
                                        </div>
                                        <div class="feedback-quote-box">
                                            <div class="quote-image">
                                                <img src="{{asset('assets/about/quotation.png')}}" alt="comment">
                                            </div>
                                            <div class="quote-message">
                                                <span>
                                                    “I am so well pleased with R Web Solutions' services in
                                                    developing our WASH Info Hub website, as they are quick in making
                                                    such an interactive website and very responsive to my queries and requests
                                                    just to finalize the design and contents. Hence, I wish them all the best
                                                    and keep up the good work! ”
                                                </span>
                                            </div>
                                            <div class="quote-name">
                                                <span>
                                                    Mr. Jack Lord C. Rubillar
                                                </span>
                                            </div>
                                            <div class="quote-position">
                                                <span>
                                                    Executive Director
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="card">
                                    <div class="d-flex flex-row">
                                        <div class="feedback-image-box">
                                            <img src="{{asset('assets/about/mikko.png')}}" alt="client-photo">
                                        </div>
                                        <div class="feedback-quote-box">
                                            <div class="quote-image">
                                                <img src="{{asset('assets/about/quotation.png')}}" alt="comment">
                                            </div>
                                            <div class="quote-message">
                                                <span>
                                                    “I am so well pleased with R Web Solutions' services in
                                                    developing our WASH Info Hub website, as they are quick in making
                                                    such an interactive website and very responsive to my queries and requests
                                                    just to finalize the design and contents. Hence, I wish them all the best
                                                    and keep up the good work! ”
                                                </span>
                                            </div>
                                            <div class="quote-name">
                                                <span>
                                                    Mr. Jack Lord C. Rubillar
                                                </span>
                                            </div>
                                            <div class="quote-position">
                                                <span>
                                                    Executive Director
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </li> -->
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-12 col-sm-12 col-12 order-lg-1 order-md-0 order-sm-0 order-0">
                        <div class="feedback-box">
                            <div class="feedback-title">
                                <span>
                                    Client <span style="color: #fa6f10">Feedback</span>
                                </span>
                            </div>
                            <div class="feedback-description">
                                <span>
                                    Never simply believe what we say! See what our client has to say about us.
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="about-six-section-container proxima" draggable="false">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                <div class="six-section-title">
                    <span>
                        Be Part Of Our
                    </span>
                </div>
                <div class="six-section-description">
                    <span>
                        <span style="color: #fa6f10">Success Stories</span> Today!
                    </span>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                <div class="d-flex justify-content-center">
                    <a class="free-estimate-button" href="{{ url('/contact') }}">
                        <button>
                            Get free quotation <img src="{{ asset('assets/homepage/button-right-arrow.png') }}" alt="button-icon">
                        </button>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('js')
<script src="{{ asset('js/frontend/about/rotation-image.js') }}"></script>
<script src="{{ asset('js/frontend/about/team-carousel.js') }}"></script>
<script src="{{ asset('js/frontend/about/about-service-slider.js') }}"></script>
<script src="{{ asset('js/frontend/about/partner-slider.js') }}"></script>
<script src="{{ asset('js/frontend/about/feedback-slider.js') }}"></script>
<script src="{{ asset('js/frontend/about/animation.js') }}"></script>
@endsection