MOON
Server: Apache
System: Linux server1.studioinfinity.com.br 2.6.32-954.3.5.lve1.4.90.el6.x86_64 #1 SMP Tue Feb 21 12:26:30 UTC 2023 x86_64
User: artinside (517)
PHP: 7.4.33
Disabled: exec,passthru,shell_exec,system
Upload Files
File: //home/artinside/sites.artinside.com.br/mainpro/themes/web/home.php
<?php

$this->layout("_theme");
?>
    <section id="slider"
             class="slider-element slider-parallax swiper_wrapper min-vh-50 min-vh-md-75 min-vh-lg-75"
             data-effect="fade" data-autoplay="10000" data-speed="650" data-loop="true" data-progress="true">

        <div class="slider-inner">

            <div class="swiper-container swiper-parent">
                <div class="swiper-wrapper">


                    <div class="swiper-slide dark">
                        <div class="container banner-click hover">
                            <div class="slider-caption col-4">
                                <h2 class="fw-bold lh-1 ls-0 mb-4 mt-3">Your #1 Choice for <span
                                            class="text-fill-effect gradient-primary-animated">Professional Painting!</span>
                                </h2>

                            </div>
                        </div>
                        <div class="swiper-slide-bg" style="background-image: url('<?= url(
                            "images/banner2.jpg"
                        ) ?>');"></div>
                    </div>


                </div>


            </div>
            <div class="slider-arrow-left"><i class="uil uil-angle-left-b"></i></div>
            <div class="slider-arrow-right"><i class="uil uil-angle-right-b"></i></div>
        </div>


    </section>


    <section id="content">
        <div class="content-wrap py-0">

            <div class="section bg-gray-light my-0 px-lg-0 px-4">
                <div class="container py-0 py-lg-4">
                    <div class="row justify-content-center align-items-center align-content-center col-mb-80">
                        <div class="col-lg-4">
                            <img src="<?= url("images/logo-gd.png") ?>"/>
                        </div>
                        <div class="col-lg-5">
                            <small class="p-1 text-uppercase font-secondary fw-bold mb-1 gradient-border bg-light-gray">ABOUT
                                US</small>
                            <h2 class="fw-bold lh-1 ls-0 mb-4 mt-3" style="font-size: 38px;">Your #1 Choice for <span
                                        class="text-fill-effect gradient-primary-animated">Professional Painting!</span>
                            </h2>
                            <p class="fw-light text-black">
                                At MainPro Solution LLC, we are dedicated to transforming both residential and
                                commercial spaces with our expert painting services. Our commitment to quality and
                                customer satisfaction sets us apart as your top choice for professional painting
                                solutions.
                            </p>

                        </div>


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


            <div class="section py-lg-0 pt-0 m-0 dark bg-primary">
                <div class="row align-items-center justify-content-end" id="services">


                    <div class="col-lg-5 col-xl-4 p-6">
                        <div class="container">
                            <div class="mw-xs mx-auto">
                                <small class="p-1 text-uppercase font-secondary fw-bold mb-1 gradient-border bg-primary">Our
                                    Services</small>
                                <h2 class="fw-bold lh-1 ls-0 mb-4 mt-3" style="font-size: 38px;">Residential <span
                                            class="text-fill-effect gradient-primary-animated">Painting</span></h2>
                                <ul class="iconlist iconlist-lg">
                                    <li class='font-primary'>
                                        <i class="bi-check-circle-fill gradient-primary-animated text-fill-effect"
                                           style="padding: 0 30px 30px 0 !important;"></i>
                                        <span class="fs-3">
                                    Interior Painting
                                </span>
                                    </li>
                                    <li class='font-primary'>
                                        <i class="bi-check-circle-fill gradient-primary-animated text-fill-effect"
                                           style="padding: 0 30px 30px 0 !important;"></i>
                                        <span class="fs-3">
                                    Exterior Painting
                                </span>
                                    </li>
                                    <li class='font-primary'>
                                        <i class="bi-check-circle-fill gradient-primary-animated text-fill-effect"
                                           style="padding: 0 30px 30px 0 !important;"></i>
                                        <span class="fs-3">
                                    Cabinet Refinishing
                                </span>
                                    </li>
                                    <li class='font-primary'>
                                        <i class="bi-check-circle-fill gradient-primary-animated text-fill-effect"
                                           style="padding: 0 30px 30px 0 !important;"></i>
                                        <span class="fs-3">
                                    Drywall Repair
                                </span>
                                    </li>
                                    <li class='font-primary'>
                                        <i class="bi-check-circle-fill gradient-primary-animated text-fill-effect"
                                           style="padding: 0 30px 30px 0 !important;"></i>
                                        <span class="fs-3">
                                    Pressure Washing
                                </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <img src="<?= url("images/residencial1-1.jpg") ?>" style="width: 100%">
                    </div>
                </div>
            </div>

            <div class="section py-lg-0 pt-0 m-0 dark bg-primary">
                <div class="row align-items-center">

                    <div class="col-lg-5 p-6 ">
                        <div class="container">
                            <div class="mw-xs mx-auto">
                                <small class="p-1 text-uppercase font-secondary fw-bold mb-1 gradient-border bg-primary">Our
                                    Services</small>
                                <h2 class="fw-bold lh-1 ls-0 mb-4 mt-3" style="font-size: 38px;">Commercial <span
                                            class="text-fill-effect gradient-primary-animated">Painting</span></h2>
                                <ul class="iconlist iconlist-lg">
                                    <li class='font-primary'>
                                        <i class="bi-check-circle-fill gradient-primary-animated text-fill-effect"
                                           style="padding: 0 30px 30px 0 !important;"></i>
                                        <span class="fs-3">
                                    Office Buildings
                                </span>
                                    </li>
                                    <li class='font-primary'>
                                        <i class="bi-check-circle-fill gradient-primary-animated text-fill-effect"
                                           style="padding: 0 30px 30px 0 !important;"></i>
                                        <span class="fs-3">
                                    Retail Spaces
                                </span>
                                    </li>
                                    <li class='font-primary'>
                                        <i class="bi-check-circle-fill gradient-primary-animated text-fill-effect"
                                           style="padding: 0 30px 30px 0 !important;"></i>
                                        <span class="fs-3">
                                    Restaurants
                                </span>
                                    </li>
                                    <li class='font-primary'>
                                        <i class="bi-check-circle-fill gradient-primary-animated text-fill-effect"
                                           style="padding: 0 30px 30px 0 !important;"></i>
                                        <span class="fs-3">
                                    Warehouses
                                </span>
                                    </li>
                                    <li class='font-primary'>
                                        <i class="bi-check-circle-fill gradient-primary-animated text-fill-effect"
                                           style="padding: 0 30px 30px 0 !important;"></i>
                                        <span class="fs-3">
                                    Apartment Complexes
                                </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 order-lg-first">
                        <img src="<?= url("images/commercial1.jpg") ?>" style="width: 100%">
                    </div>
                </div>
            </div>

            <div class="section bg-gray-light my-0 px-lg-0 px-4" id="expertise">
                <div class="container py-0 py-lg-4">
                    <div class="row align-items-center justify-content-center">

                        <div class="col-lg-4 center">
                            <small class="p-1 text-uppercase font-secondary fw-bold mb-1 gradient-border bg-light-gray">OUR
                                EXPERTISE</small>
                            <h2 class="fw-bold lh-1 ls-0 mb-4 mt-3" style="font-size: 38px;">Why <span
                                        class="text-fill-effect gradient-primary-animated">Choose Us?</span>
                            </h2>
                        </div>

                        <div class="row justify-content-between align-items-center text-left mt-6">
                            <div class="col-md-5">
                                <ul class="swiper-links-container list-unstyled">

                                    <li class="swiper-tab-link active">
                                        <h3 class="swiper-tab-title">Experienced Professionals</h3>
                                        <p class="swiper-tab-content fw-lighter small font-body"
                                           style="font-weight: lighter !important;">Our team of skilled painters brings
                                            years of experience to every project.

                                        </p>

                                        <div class="swiper-pagination-progress">
                                            <span class="swiper-pagination-bar"></span><span
                                                    class="swiper-pagination-bar-active"></span>
                                        </div>
                                    </li>
                                    <li class="swiper-tab-link ">
                                        <h3 class="swiper-tab-title">Premium Materials</h3>
                                        <p class="swiper-tab-content fw-lighter small font-body"
                                           style="font-weight: lighter !important;">We use only top-quality paints and
                                            materials to ensure a durable and beautiful finish.
                                        </p>

                                        <div class="swiper-pagination-progress">
                                            <span class="swiper-pagination-bar"></span><span
                                                    class="swiper-pagination-bar-active"></span>
                                        </div>
                                    </li>
                                    <li class="swiper-tab-link ">
                                        <h3 class="swiper-tab-title">Attention to Detail</h3>
                                        <p class="swiper-tab-content fw-lighter small font-body"
                                           style="font-weight: lighter !important;">From meticulous preparation to the
                                            final coat, we ensure every detail meets the highest standards.
                                        </p>

                                        <div class="swiper-pagination-progress">
                                            <span class="swiper-pagination-bar"></span><span
                                                    class="swiper-pagination-bar-active"></span>
                                        </div>
                                    </li>
                                    <li class="swiper-tab-link ">
                                        <h3 class="swiper-tab-title">Customer-Centric Approach</h3>
                                        <p class="swiper-tab-content fw-lighter small font-body"
                                           style="font-weight: lighter !important;">Your satisfaction is our priority.
                                            We work closely with you to bring your vision to life.
                                        </p>

                                        <div class="swiper-pagination-progress">
                                            <span class="swiper-pagination-bar"></span><span
                                                    class="swiper-pagination-bar-active"></span>
                                        </div>
                                    </li>
                                    <li class="swiper-tab-link ">
                                        <h3 class="swiper-tab-title">Competitive Pricing</h3>
                                        <p class="swiper-tab-content fw-lighter small font-body"
                                           style="font-weight: lighter !important;">We offer fair, competitive pricing,
                                            providing excellent value without compromising quality.
                                        </p>

                                        <div class="swiper-pagination-progress">
                                            <span class="swiper-pagination-bar"></span><span
                                                    class="swiper-pagination-bar-active"></span>
                                        </div>
                                    </li>


                                </ul>
                                <!-- <div class="swiper-pagination swiper-tab-pagination"></div> -->
                            </div>
                            <div class="col-md-6">
                                <div id="swiper-tab" class="swiper_wrapper h-auto">
                                    <div class="swiper-container swiper-tab-container">
                                        <div class="swiper-wrapper">

                                            <div class="swiper-slide">

                                                <img src="<?= url("images/ico1.svg") ?>">
                                            </div>
                                            <div class="swiper-slide">

                                                <img src="<?= url("images/ico2.svg") ?>">
                                            </div>
                                            <div class="swiper-slide">

                                                <img src="<?= url("images/ico3.svg") ?>">
                                            </div>
                                            <div class="swiper-slide">

                                                <img src="<?= url("images/ico4.svg") ?>">
                                            </div>
                                            <div class="swiper-slide">

                                                <img src="<?= url("images/ico5.svg") ?>">
                                            </div>


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


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

            <div class="section bg-primary my-0 px-lg-0 px-4 dark" id="process">
                <div class="w-100 h-100 d-none d-lg-block"
                     style="position: absolute; top: -50px; background: url('<?= url(
                         "images/logo-parallax.png"
                     ) ?>') no-repeat top right ;"></div>
                <div class="w-100 h-100 d-none d-lg-block"
                     style="position: absolute; top: -50px; background: url('<?= url(
                         "images/logo-parallax-esq.png"
                     ) ?>') no-repeat top left ;"></div>

                <div class="container">
                    <div class="row align-items-center justify-content-center center">
                        <div class="col-lg-8 text-md-left mb-6">
                            <small class="p-1 text-uppercase font-secondary ls-2 mb-1 gradient-border bg-primary">PROCESS</small>
                            <h2 class="fw-bold lh-1 ls-0 mb-4 mt-3" style="font-size: 38px;">Our
                                <span class="text-fill-effect gradient-primary-animated"> Process</span>
                            </h2>

                            <!--                            <a href="mailto:ouvidoria@paliar.com.br"-->
                            <!--                               class="button bg-primary dark gradient-border h-text-light m-0 px-4 py-2">Entrar em contato</a>-->

                        </div>

                        <div class="clear"></div>

                        <div class="col-lg-10 ">

                            <div class="row align-items-center justify-content-center">
                                <div class="col-md-6 col-lg-4 mt-5 mt-md-0 mb-5">
                                    <div class="feature-box fbox-center fbox-plain">
                                        <div class="fbox-icon">
                                            <a href="#"><img src="<?= url("images/icon1.svg") ?>"></a>
                                        </div>
                                        <div class="fbox-content">
                                            <h3 class="fs-3">Consultation</h3>
                                            <p>
                                                We start with an in-depth consultation to understand your needs and
                                                preferences.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-4 mt-5 mt-md-0 mb-5">
                                    <div class="feature-box fbox-center fbox-plain">
                                        <div class="fbox-icon">
                                            <a href="#"><img src="<?= url("images/icon2.svg") ?>"></a>
                                        </div>
                                        <div class="fbox-content">
                                            <h3 class="fs-3">Preparation</h3>
                                            <p>
                                                Our team thoroughly prepares all surfaces, ensuring a flawless base for
                                                painting.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-4 mt-5 mt-md-0 mb-5">
                                    <div class="feature-box fbox-center fbox-plain">
                                        <div class="fbox-icon">
                                            <a href="#"><img src="<?= url("images/icon3.svg") ?>"></a>
                                        </div>
                                        <div class="fbox-content">
                                            <h3 class="fs-3">Painting</h3>
                                            <p>
                                                We employ professional techniques and premium materials to breathe new
                                                life into your space.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-4 mt-5 mt-md-0 mb-5">
                                    <div class="feature-box fbox-center fbox-plain">
                                        <div class="fbox-icon">
                                            <a href="#"><img src="<?= url("images/icon4.svg") ?>"></a>
                                        </div>
                                        <div class="fbox-content">
                                            <h3 class="fs-3">Final Inspection</h3>
                                            <p>
                                                A detailed inspection is conducted to ensure the highest standards of
                                                quality are met.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-4 mt-5 mt-md-0 mb-5">
                                    <div class="feature-box fbox-center fbox-plain">
                                        <div class="fbox-icon">
                                            <a href="#"><img src="<?= url("images/icon5.svg") ?>"></a>
                                        </div>
                                        <div class="fbox-content">
                                            <h3 class="fs-3">Clean-Up</h3>
                                            <p>
                                                We leave your space clean and pristine, ready for you to enjoy.
                                            </p>
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <?php
            if (isset($gallery) and $gallery != ""): ?>
                <div class="section bg-gray-light m-0" style="margin-bottom: -95px !important;" id="gallery">
                    <div class="container py-0 mb-5">
                        <div class="row align-items-center justify-content-center">

                            <div class="col-lg-5 center">
                                <small class="p-1 text-uppercase font-secondary fw-bold mb-1 gradient-border bg-light-gray">Services</small>
                                <h2 class="fw-bold lh-1 ls-0 mb-4 mt-3" style="font-size: 38px;">Check out some of the
                                    services provided by
                                    <span
                                            class="text-fill-effect gradient-primary-animated"> Mainpro Solution.</span>
                                </h2>
                            </div>
                        </div>
                    </div>

                    <div id="portfolio" class="portfolio row grid-container g-0">


                        <?php
                        foreach ($gallery->gallery()->fetch(true) as $gal): ?>


                            <article class="portfolio-item col-lg-3 col-md-4 col-sm-6 col-12 pf-media pf-icons">
                                <div class="grid-inner">
                                    <div class="portfolio-image">
                                        <a href="portfolio-single.html">
                                            <img src="<?= image($gal->gallery, 600, 400) ?>" alt="">
                                        </a>
                                        <div class="bg-overlay">
                                            <div class="bg-overlay-content dark" data-hover-animate="fadeIn">
                                                <a href="<?= url("storage/{$gal->gallery}") ?>"
                                                   class="overlay-trigger-icon bg-light text-dark"
                                                   data-hover-animate="fadeInDownSmall"
                                                   data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"
                                                   data-lightbox="image" title="Our Services"><i
                                                            class="uil uil-plus"></i></a>
                                            </div>
                                            <div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
                                        </div>
                                    </div>

                                </div>
                            </article>

                        <?php
                        endforeach; ?>

                    </div><!-- #portfolio end -->
                </div>
            <?php
            endif; ?>


            <div class="section m-0 bg-primary dark" id="testimonials">

                <div class="container">
                    <div class="row align-content-center justify-content-center align-items-center center">
                        <div class="col-lg-8 text-md-left mb-3">
                            <small class="p-1 text-uppercase font-secondary ls-2 mb-1 gradient-border bg-primary">Testimonials</small>
                            <h2 class="fw-bold lh-1 ls-0 mt-3" style="font-size: 38px;">What our
                                <span class="text-fill-effect gradient-primary-animated"> customers say</span>
                            </h2>

                        </div>
                    </div>

                    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 align-items-stretch">

                        <div class="col">
                            <div class="card rounded-6 shadow-sm overflow-hidden h-100 border-1 border-white">

                                <div class="card-body p-4">
                                    <div class="row">

                                        <div class="col">
                                            <div class="d-flex mb-3">
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                            </div>
                                            <p class="mb-3 font-secondary text-smaller lh-base">
                                                I recently hired MainPro Solutions to paint my home and I was extremely
                                                satisfied with their service. They were professional, clean, neat & paid
                                                attention to every detail throughout the process. I had asked for a few
                                                extra favors & all the extas were taken care of at no extra charge. I
                                                would highly recommend their painting services. You will not be
                                                disabled. Bruce T.
                                            </p>
                                            <h4 class="h6 mb-0 fw-bold fs-6">
                                                Bruce Theuerkauf
                                            </h4>
                                            <small class="text-muted">Customer</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="bg-icon bi-quote op-02"></div>
                            </div>
                        </div>

                        <div class="col">
                            <div class="card rounded-6 shadow-sm overflow-hidden h-100 border-1 border-white">

                                <div class="card-body p-4">
                                    <div class="row">

                                        <div class="col">
                                            <div class="d-flex mb-3">
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                            </div>
                                            <p class="mb-3 font-secondary text-smaller lh-base">
                                                My experience with this company was very efficient and successful.
                                                Tarcisio and his crew were extremely skilled, detail orientated and
                                                considerate in regards to cleanliness. They did a beautiful job. </p>
                                            <h4 class="h6 mb-0 fw-bold fs-6">
                                                Anna Stoch
                                            </h4>
                                            <small class="text-muted">Customer</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="bg-icon bi-quote op-02"></div>
                            </div>
                        </div>

                        <div class="col">
                            <div class="card rounded-6 shadow-sm overflow-hidden h-100 border-1 border-white">

                                <div class="card-body p-4">
                                    <div class="row">

                                        <div class="col">
                                            <div class="d-flex mb-3">
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                            </div>
                                            <p class="mb-3 font-secondary text-smaller lh-base">
                                                Thank you Tarcisio! Beautiful outcome, great customer service, and
                                                highly professional. We appreciate the quality of the work and give full
                                                recommendation. Thank you!
                                            </p>
                                            <h4 class="h6 mb-0 fw-bold fs-6">
                                                Robert Corbi
                                            </h4>
                                            <small class="text-muted">Customer</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="bg-icon bi-quote op-02"></div>
                            </div>
                        </div>

                        <div class="col">
                            <div class="card rounded-6 shadow-sm overflow-hidden h-100 border-1 border-white">

                                <div class="card-body p-4">
                                    <div class="row">

                                        <div class="col">
                                            <div class="d-flex mb-3">
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                            </div>
                                            <p class="mb-3 font-secondary text-smaller lh-base">
                                                The crowd was very good, very organized and so fast to paint my house.
                                            </p>
                                            <h4 class="h6 mb-0 fw-bold fs-6">
                                                Fernanda Prezybylski
                                            </h4>
                                            <small class="text-muted">Customer</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="bg-icon bi-quote op-02"></div>
                            </div>
                        </div>

                        <div class="col">
                            <div class="card rounded-6 shadow-sm overflow-hidden h-100 border-1 border-white">

                                <div class="card-body p-4">
                                    <div class="row">

                                        <div class="col">
                                            <div class="d-flex mb-3">
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                            </div>
                                            <p class="mb-3 font-secondary text-smaller lh-base">
                                                MainPro solutions does excellent work! Tarcisio is very easy to deal with.
                                            </p>
                                            <h4 class="h6 mb-0 fw-bold fs-6">
                                                Steven Abill
                                            </h4>
                                            <small class="text-muted">Customer</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="bg-icon bi-quote op-02"></div>
                            </div>
                        </div>

                        <div class="col">
                            <div class="card rounded-6 shadow-sm overflow-hidden h-100 border-1 border-white">

                                <div class="card-body p-4">
                                    <div class="row">

                                        <div class="col">
                                            <div class="d-flex mb-3">
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                                <i class="bi-star-fill h5 me-1 text-warning"></i>
                                            </div>
                                            <p class="mb-3 font-secondary text-smaller lh-base">
                                                These guys did the job in less than the estimated time and they cleaned up each night. So professional.  Would recommend them to all my friends and family.
                                            </p>
                                            <h4 class="h6 mb-0 fw-bold fs-6">
                                                Olga Miller
                                            </h4>
                                            <small class="text-muted">Customer</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="bg-icon bi-quote op-02"></div>
                            </div>
                        </div>


                    </div>

                    <div class="row align-content-center justify-content-center align-items-center center mt-5">
                        <div class="col-12 form-group">
                            <a href="https://maps.app.goo.gl/kHinDXQmSauZU7BJ9?g_st=iwb" target="_blank"
                               class="button bg-primary dark gradient-border h-text-light m-0 px-4 py-2">See More</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="section m-0 bg-light">

                <div class="container">

                    <div class="row justify-content-center align-items-center align-content-center">

                        <div class="col-lg-4 ps-md-5 ps-3 mt-4 mt-md-0">
                            <small class="p-1 text-uppercase font-secondary fw-bold mb-1 gradient-border bg-light-gray">Difference</small>
                            <h2 class="fw-bold lh-1 ls-0 mb-4 mt-3" style="font-size: 38px;">Before & <span
                                        class="text-fill-effect gradient-primary-animated">After</span></h2>
                            <p class="fw-light text-black">
                                See the incredible transformation our professional painting services can bring to your
                                space! From dull and faded walls to vibrant, fresh finishes, our team ensures a flawless
                                result that enhances both beauty and durability. Check out the stunning before-and-after
                                comparisons and let us bring new life to your place! </p>
                        </div>

                        <div class="col-lg-8">
                            <div class="twentytwenty-container">
                                <img src="<?= url("images/before.jpg") ?>" alt="Before">
                                <img src="<?= url("images/after.jpg") ?>" alt="After">
                            </div>
                        </div>

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


            <div class="section bg-primary my-0 px-lg-0 px-4 dark" id="contact">
                <div class="w-100 h-100 d-none d-lg-block"
                     style="position: absolute; top: -50px; background: url('<?= url(
                         "images/logo-parallax.png"
                     ) ?>') no-repeat top right ;"></div>
                <div class="w-100 h-100 d-none d-lg-block"
                     style="position: absolute; top: -50px; background: url('<?= url(
                         "images/logo-parallax-esq.png"
                     ) ?>') no-repeat top left ;"></div>

                <div class="container mw-md">

                    <div class="center mb-5">
                        <small class="p-1 text-uppercase font-secondary fw-bold mb-1 gradient-border bg-primary">CONTACT</small>
                        <h2 class="fw-bold lh-1 ls-0 mb-4 mt-3" style="font-size: 38px;">Get a <span
                                    class="text-fill-effect gradient-primary-animated">Free Quote</span></h2>
                    </div>


                    <div class="row g-5">

                        <div class="col-md-6">
                            <div class="row gy-5">
                                <div class="col-12">
                                    <h4 class="border-bottom border-color border-width-3 d-inline-block text-fill-effect gradient-primary-animated fs-3">
                                        Our Office</h4>
                                    <address class="mb-4">
                                        455 Madison Ave<br>
                                        Elizabeth, NJ 07201<br>
                                    </address>
                                    <div class="d-flex mb-1"><strong class="col-3">Phone:</strong> <?= CONF_TELEPHONE ?>
                                    </div>
                                    <div class="d-flex mb-1"><strong class="col-3">Email:</strong> <?= CONF_EMAIL ?>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <h4 class="border-bottom border-color border-width-3 d-inline-block text-fill-effect gradient-primary-animated fs-3">
                                        Follow Us</h4>
                                    <ul class="list-group list-group-flush social-lists">
                                        <a href="https://www.instagram.com/mainpro.solution" target="_blank"
                                           class="list-group-item d-flex bg-primary">Instagram <i
                                                    class="bi-arrow-up-right ms-auto"></i></a>
                                        <a href="https://www.facebook.com/mainpro.solution" target="_blank"
                                           class="list-group-item d-flex pt-0 bg-primary">Facebook <i
                                                    class="bi-arrow-up-right ms-auto"></i></a>
                                        <a href="https://www.linkedin.com/in/mainpro-solution-llc-4bb918300?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app"
                                           target="_blank" class="list-group-item d-flex bg-primary">LinkedIn <i
                                                    class="bi-arrow-up-right ms-auto"></i></a>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-widget">

                                <div class="form-result"></div>

                                <form class="mb-0" id="template-contactform" name="template-contactform"
                                      action="include/form.php" method="post">

                                    <div class="form-process">
                                        <div class="css3-spinner">
                                            <div class="css3-spinner-scaler"></div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-12 form-group">
                                            <label for="template-contactform-name">Name <small>*</small></label>
                                            <input type="text" id="template-contactform-name" name="name" value=""
                                                   class="form-control bg-transparent required">
                                        </div>

                                        <div class="col-12 form-group">
                                            <label for="template-contactform-email">Email <small>*</small></label>
                                            <input type="email" id="template-contactform-email" name="email" value=""
                                                   class="required email form-control bg-transparent">
                                        </div>

                                        <div class="col-12 form-group">
                                            <label for="template-contactform-email">Phone <small>*</small></label>
                                            <input type="text" id="template-contactform-email" name="phone" value=""
                                                   class="required email form-control bg-transparent">
                                        </div>

                                        <div class="col-12 form-group">
                                            <label for="template-contactform-subject">Subject <small>*</small></label>
                                            <input type="text" id="template-contactform-subject" name="subject" value=""
                                                   class="required form-control bg-transparent">
                                        </div>

                                        <div class="col-12 form-group">
                                            <label for="template-contactform-message">Message <small>*</small></label>
                                            <textarea class="required form-control bg-transparent"
                                                      id="template-contactform-message" name="message" rows="6"
                                                      cols="30"></textarea>
                                        </div>

                                        <div class="col-12 form-group d-none">
                                            <input type="text" id="template-contactform-botcheck"
                                                   name="template-contactform-botcheck" value=""
                                                   class="form-control bg-transparent">
                                        </div>

                                        <div class="col-12 form-group">
                                            <button class="button bg-primary dark gradient-border h-text-light m-0 px-4 py-2"
                                                    type="submit" id="template-contactform-submit"
                                                    name="template-contactform-submit" value="submit">Send Message
                                            </button>
                                        </div>
                                    </div>
                                    <a href="mailto:ouvidoria@paliar.com.br" -->


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

                    </div>

                </div>

            </div>


        </div>


    </section><!-- #content end -->


<?php


$this->start("scripts"); ?>


    <script>
        var revapi139,
            tpj;

        (function () {
            if (!/loaded|interactive|complete/.test(document.readyState)) document.addEventListener("DOMContentLoaded", onLoad); else onLoad();

            function onLoad() {
                if (tpj === undefined) {
                    tpj = jQuery;
                    if ("off" == "on") tpj.noConflict();
                }
                if (tpj("#rev_slider_139_1").revolution == undefined) {
                    revslider_showDoubleJqueryError("#rev_slider_139_1");
                } else {
                    revapi139 = tpj("#rev_slider_139_1").show().revolution({
                        sliderType: "standard",
                        jsFileLocation: "include/rs-plugin/js/",
                        sliderLayout: "fullscreen",
                        dottedOverlay: "none",
                        delay: 9000,
                        navigation: {
                            keyboardNavigation: "off",
                            keyboard_direction: "horizontal",
                            mouseScrollNavigation: "off",
                            mouseScrollReverse: "default",
                            onHoverStop: "off",
                            touch: {
                                touchenabled: "on",
                                touchOnDesktop: "off",
                                swipe_threshold: 75,
                                swipe_min_touches: 1,
                                swipe_direction: "horizontal",
                                drag_block_vertical: false
                            }
                            ,
                            arrows: {
                                style: "uranus",
                                enable: true,
                                hide_onmobile: false,
                                hide_under: 0,
                                hide_onleave: false,
                                tmp: '',
                                left: {
                                    h_align: "left",
                                    v_align: "center",
                                    h_offset: 15,
                                    v_offset: 0
                                },
                                right: {
                                    h_align: "right",
                                    v_align: "center",
                                    h_offset: 15,
                                    v_offset: 0
                                }
                            }
                            ,
                            bullets: {
                                enable: true,
                                hide_onmobile: false,
                                style: "bullet-bar",
                                hide_onleave: false,
                                direction: "horizontal",
                                h_align: "center",
                                v_align: "bottom",
                                h_offset: 0,
                                v_offset: 30,
                                space: 5,
                                tmp: ''
                            }
                        },
                        responsiveLevels: [1240, 1024, 778, 480],
                        visibilityLevels: [1240, 1024, 778, 480],
                        gridwidth: [1240, 1024, 778, 480],
                        gridheight: [868, 768, 960, 720],
                        lazyType: "none",
                        shadow: 0,
                        spinner: "off",
                        stopLoop: "off",
                        stopAfterLoops: -1,
                        stopAtSlide: -1,
                        shuffle: "off",
                        autoHeight: "off",
                        fullScreenAutoWidth: "on",
                        fullScreenAlignForce: "on",
                        fullScreenOffsetContainer: "",
                        fullScreenOffset: "0px",
                        hideThumbsOnMobile: "off",
                        hideSliderAtLimit: 0,
                        hideCaptionAtLimit: 0,
                        hideAllCaptionAtLilmit: 0,
                        debugMode: false,
                        fallbacks: {
                            simplifyAll: "off",
                            nextSlideOnWindowFocus: "off",
                            disableFocusListener: false,
                        }
                    });
                    revapi139.on("revolution.slide.onloaded", function (e) {
                        revapi139.addClass("tiny_bullet_slider");
                    });
                }
                ; /* END OF revapi call */
            }; /* END OF ON LOAD FUNCTION */
        }()); /* END OF WRAPPING FUNCTION */

        jQuery(window).on('load', function () {
            jQuery(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.5});
        });
    </script>


    <script type="text/javascript">
        $(".feature-hover").hover(function () {
            $(".fbox-hover").fadeOut("fast");

        });


        var SwiperTabsContainer = new Swiper('.swiper-tab-container', {
            loop: true,
            slidesPerView: 1,
            autoHeight: true,
            autoplay: {
                delay: 10000,
                disableOnInteraction: false,
                autoplayDisableOnInteraction: false
            },
            effect: 'fade',
            fadeEffect: {
                crossFade: true
            },
            longSwipes: true,
            autoplayDisableOnInteraction: true,
            on: {
                activeIndexChange: function (swiper) {
                    var index = swiper.realIndex;
                    jQuery('.swiper-tab-link').removeClass('active');
                    jQuery('.swiper-tab-link').eq(index).addClass('active');
                }
            }
        });

        jQuery('.swiper-tab-link').on('click', function () {
            var index = jQuery(this).index();
            SwiperTabsContainer.slideToLoop(index);
            jQuery('.swiper-tab-link').removeClass('active');
            jQuery(this).addClass('active');
        });
    </script>


<?php
$this->end(); ?>