Style Updated and Fixes

src/components/property/commercial/enquireNow/contentSection.vue

@@ -1,124 +1,131 @@
 <template>
   <div class="container pt-5">
-        <div class="row mb-8">
-          <div class="col-md-6">
-            <h3>Mooikloof Office Park</h3>
-            <p>
-              The cream of the crop, no costs were spared on the finishing touches of this beautiful office.  This 160m2 office is ideally situated in Pretoria East in the hub of business expansion for Pretoria.  Two superb, air-conditioned ground floor units divided only by glass and completed with two small recording studios.  The Space is currently used for corporate boardroom and training centre functions and can accommodate up to 25 delegates.  Stunning finishes y interior designer complete the unit with style and class.  The perfect address and office for the established professional for the training centre of your dreams! 
-            </p>
-            <p><strong>View by Appointment only!</strong></p>
-            <br/>
-              <p></p>
-              To arrange a viewing contact Mynie:
-              <div class="col-md-4">
-                <a href="mailto:info@univateproperties.co.za">info@univateproperties.co.za</a
-                  ><br />
-                  <a href="tel:0124921238">+27 (0) 12 492 1238</a>
-              </div>
-          </div>
-          <div class="col-md-6">
-            <form >
-              <div class="form-group row">
-        <div class="form-group col-md-6">
-          <input
-            type="text"
-            name="name"
-            class="form-control"
-            id="Unit"
-            placeholder="Unit"
-            data-rule="minlen:4"
-            v-model="Unit"
-          />
-          <div class="validation"></div>
-        </div>
-                <div class="form-group col-md-6">
-          <input
-            type="text"
-            name="name"
-            class="form-control"
-            id="Price"
-            placeholder="Price"
-            data-rule="minlen:4"
-            v-model="Price"
-          />
-          <div class="validation"></div>
-        </div>
-                <div class="form-group col-md-6">
-          <input
-            type="text"
-            name="name"
-            class="form-control"
-            id="Size"
-            placeholder="Size"
-            data-rule="minlen:4"
-            v-model="Size"
-          />
-          <div class="validation"></div>
-        </div>
-                <div class="form-group col-md-6">
-          <input
-            type="text"
-            name="name"
-            class="form-control"
-            id="Suburb"
-            placeholder="Suburb"
-            data-rule="minlen:4"
-            v-model="Suburb"
-          />
-          <div class="validation"></div>
-        </div>
-                <div class="form-group col-md-12">
-          <input
-            type="text"
-            name="name"
-            class="form-control"
-            id="Name"
-            placeholder="Name"
-            data-rule="minlen:4"
-            v-model="Name"
-          />
-          <div class="validation"></div>
-        </div>
-                <div class="form-group col-md-12">
-          <input
-            type="text"
-            name="name"
-            class="form-control"
-            id="ContactNumber"
-            placeholder="ContactNumber"
-            data-rule="minlen:4"
-            v-model="ContactNumber"
-          />
-          <div class="validation"></div>
+    <div class="row mb-8">
+      <div class="col-md-6">
+        <h3>Mooikloof Office Park</h3>
+        <p>
+          The cream of the crop, no costs were spared on the finishing touches of this beautiful
+          office. This 160m2 office is ideally situated in Pretoria East in the hub of business
+          expansion for Pretoria. Two superb, air-conditioned ground floor units divided only by
+          glass and completed with two small recording studios. The Space is currently used for
+          corporate boardroom and training centre functions and can accommodate up to 25 delegates.
+          Stunning finishes y interior designer complete the unit with style and class. The perfect
+          address and office for the established professional for the training centre of your
+          dreams!
+        </p>
+        <p><strong>View by Appointment only!</strong></p>
+        <br />
+        <p></p>
+        To arrange a viewing contact Mynie:
+        <div class="col-md-4">
+          <a href="mailto:info@univateproperties.co.za">info@univateproperties.co.za</a><br />
+          <a href="tel:0124921238">+27 (0) 12 492 1238</a>
         </div>
-                <div class="form-group col-md-12">
-          <input
-            type="text"
-            name="name"
-            class="form-control"
-            id="Email"
-            placeholder="Email"
-            data-rule="minlen:4"
-            v-model="Email"
-          />
-          <div class="validation"></div>
-        </div>
-              </div>
-              <div class="text-center">
-        <button class="btn-solid-blue" @click="sendMail()">ENQUIRE NOW</button>
-      </div>
-      <div v-if="boolSent">
-        <alert :text="alertMsg" :type="'SUCCESS'" />
       </div>
-            </form>
+      <div class="col-md-6">
+        <form>
+          <div class="form-group row">
+            <div class="form-group col-md-6">
+              <input
+                type="text"
+                name="name"
+                class="form-control"
+                id="Unit"
+                placeholder="Unit"
+                data-rule="minlen:4"
+                v-model="Unit"
+              />
+              <div class="validation"></div>
+            </div>
+            <div class="form-group col-md-6">
+              <input
+                type="text"
+                name="name"
+                class="form-control"
+                id="Price"
+                placeholder="Price"
+                data-rule="minlen:4"
+                v-model="Price"
+              />
+              <div class="validation"></div>
+            </div>
+            <div class="form-group col-md-6">
+              <input
+                type="text"
+                name="name"
+                class="form-control"
+                id="Size"
+                placeholder="Size"
+                data-rule="minlen:4"
+                v-model="Size"
+              />
+              <div class="validation"></div>
+            </div>
+            <div class="form-group col-md-6">
+              <input
+                type="text"
+                name="name"
+                class="form-control"
+                id="Suburb"
+                placeholder="Suburb"
+                data-rule="minlen:4"
+                v-model="Suburb"
+              />
+              <div class="validation"></div>
+            </div>
+            <div class="form-group col-md-12">
+              <input
+                type="text"
+                name="name"
+                class="form-control"
+                id="Name"
+                placeholder="Name"
+                data-rule="minlen:4"
+                v-model="Name"
+              />
+              <div class="validation"></div>
+            </div>
+            <div class="form-group col-md-12">
+              <input
+                type="text"
+                name="name"
+                class="form-control"
+                id="ContactNumber"
+                placeholder="ContactNumber"
+                data-rule="minlen:4"
+                v-model="ContactNumber"
+              />
+              <div class="validation"></div>
+            </div>
+            <div class="form-group col-md-12">
+              <input
+                type="text"
+                name="name"
+                class="form-control"
+                id="Email"
+                placeholder="Email"
+                data-rule="minlen:4"
+                v-model="email"
+              />
+              <div class="validation"></div>
+            </div>
           </div>
-        </div>
+          <div class="text-center">
+            <button class="btn-solid-blue" @click="sendMail()">ENQUIRE NOW</button>
+          </div>
+          <div v-if="boolSent">
+            <alert :text="alertMsg" :type="'SUCCESS'" />
+          </div>
+        </form>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import axios from 'axios';
-import alert from '../../../shared/alert';
+/* eslint-disable */
+import axios from "axios";
+import alert from "../../../shared/alert";
 
 export default {
   components: {

src/components/property/commercial/singleView/contentSection.vue

@@ -64,24 +64,13 @@
                       </div>
                     </div>
                   </td>
-                  <td><a href="#" class="btn-solid-blue">BOOK A VIEWING</a></td>
-                  <td>open plan</td>
                   <td>
-                    <router-link to="/EnquireNow">More Info</router-link>
+                    <router-link class="btn-solid-blue" to="/EnquireNow">MORE INFO</router-link>
                   </td>
                 </tr>
-                <tr>
-                  <td>#123456</td>
-                  <td>#m2</td>
-                  <td>Top Floor</td>
-                  <td>yes</td>
-                  <td>open plan</td>
-                  <td><router-link to="/EnquireNow">More Info</router-link></td>
-                </tr>
               </tbody>
             </table>
           </div>
-          <p></p>
 
           <!-- <div class="d-flex mt-3">
             <iframe

src/components/propertyManagement/rentalManagement/carouselSecitonNew.vue

@@ -0,0 +1,61 @@
+<template>
+  <section id="intro">
+    <div class="container">
+      <div class="row">
+        <div align="left" class="col-sm-12 col-md-8">
+          <div class="intro-content box">
+            <h2>Let us manage your property</h2>
+            <p>
+              At Uni-Vate we appreciate the significant and positive relationship between effective
+              Property Management and property prices. We understand that effective management not
+              only relies on administrative processes being intact, but also on a clear plan and
+              good communication with our clients based on respect, trust understanding, openness
+              and accountability. We have access to a comprehensive set of human and other resources
+              to ensure that your property is proactively managed to protect your investment and to
+              ensure the contentedness of occupants. We offer comprehensive property management
+              services, whether it being Sectional Title Management, HOA Management or Rental
+              Property Portfolio Management.
+            </p>
+            <a href="#" class="btn-solid-blue">LIST YOUR PROPERTY WITH UNI-VATE PROPERTIES</a>
+            <router-link v-if="!isLoggedIn" to="/user/login" class="btn-white-border"
+              >LOGIN TO OWNERS PORTAL</router-link
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <carousel
+      :nav="false"
+      :dots="false"
+      :items="1"
+      :autoplay="true"
+      :loop="true"
+      :autoHeight="true"
+      id="intro-carousel"
+      style="margin-top:-50px;"
+      :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
+    >
+      <img class="item" src="/img/intro-carousel/home-1.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/16.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/comm-1.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/comm-4.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/3.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/home-5.jpg" alt="" />
+    </carousel>
+
+    <div id="intro-carousel" class="owl-carousel"></div>
+  </section>
+</template>
+
+<script>
+/* eslint-disable */
+import carousel from "vue-owl-carousel";
+export default {
+  components: {
+    carousel
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/propertyManagement/rentalManagement/carouselSection.vue

@@ -2,17 +2,26 @@
   <section id="intro">
     <div class="container">
       <div class="row">
-        <div align="left" class="col-sm-12 col-md-8">
+        <div align="left" class="col-sm-12 col-md-10">
           <div class="intro-content box">
-            <h2>Let us manage your property</h2>
-            <p>
-              At Uni-Vate we appreciate the significant and positive relationship between effective Property Management and property prices.  We understand that effective management not only relies on administrative processes being intact, but also on a clear plan and good communication with our clients based on respect, trust understanding, openness and accountability.  We have access to a comprehensive set of human and other resources to ensure that your property is proactively managed to protect your investment and to ensure the contentedness of occupants.
-              We offer comprehensive property management services, whether it being Sectional Title Management, HOA Management or Rental Property Portfolio Management.  
-            </p>
-            <a href="#" class="btn-solid-blue">LIST YOUR PROPERTY WITH UNI-VATE PROPERTIES</a>
-            <router-link v-if="!isLoggedIn" to="/user/login" class="btn-white-border"
-              >LOGIN TO OWNERS PORTAL</router-link
-            >
+            <div style="margin-top:-40px">
+              <h2>Let us manage your property</h2>
+              <p>
+                At Uni-Vate we appreciate the significant and positive relationship between
+                effective Property Management and property prices. We understand that effective
+                management not only relies on administrative processes being intact, but also on a
+                clear plan and good communication with our clients based on respect, trust
+                understanding, openness and accountability. We have access to a comprehensive set of
+                human and other resources to ensure that your property is proactively managed to
+                protect your investment and to ensure the contentedness of occupants. We offer
+                comprehensive property management services, whether it being Sectional Title
+                Management, HOA Management or Rental Property Portfolio Management.
+              </p>
+              <a href="#" class="btn-solid-blue">LIST YOUR PROPERTY WITH UNI-VATE PROPERTIES</a>
+              <router-link v-if="!isLoggedIn" to="/user/login" class="btn-white-border"
+                >LOGIN TO OWNERS PORTAL</router-link
+              >
+            </div>
           </div>
         </div>
       </div>

src/components/propertyManagement/rentalManagement/contentSection.vue

@@ -3,15 +3,21 @@
     <div class="container" style="margin-top:-15px">
       <div class="row">
         <div class="col-lg-12">
-          <p>Uni-Vate offers a comprehensive rental property management and letting service for residential and commercial property portfolios.  Our exceptional financial and facility management processes ensure that we are a cut above the rest and provides a competitive advantage.</p>
-          <p>We pride ourselves on offering tailored solutions to property owners increasing the returns to our clients.</p>
+          <p>
+            Uni-Vate offers a comprehensive rental property management and letting service for
+            residential and commercial property portfolios. Our exceptional financial and facility
+            management processes ensure that we are a cut above the rest and provides a competitive
+            advantage.
+          </p>
+          <p>
+            We pride ourselves on offering tailored solutions to property owners increasing the
+            returns to our clients.
+          </p>
           <p>Our rental property management and letting services include the following:</p>
         </div>
         <p></p>
         <div class="row">
-          <div class="col-md-6">
-            
-          </div>
+          <div class="col-md-6"></div>
           <div class="col-md-6">
             <h4>Contact us for a quote</h4>
           </div>
@@ -20,60 +26,114 @@
           <p>Our Services:</p>
           <ul class="nav nav-tabs" id="myTab" role="tablist">
             <li class="nav-item">
-              <a class="nav-link-active" id="tenant-tab" data-toggle="tab" href="#tenant" role="tab" aria-controls="tenant" aria-selected="true">Tenant Selection and Vacancy Management</a>
+              <a
+                class="nav-link-active"
+                id="tenant-tab"
+                data-toggle="tab"
+                href="#tenant"
+                role="tab"
+                aria-controls="tenant"
+                aria-selected="true"
+                >Tenant Selection and Vacancy Management</a
+              >
             </li>
             <li class="nav-item">
-              <a class="nav-link-active" id="rent-tab" data-toggle="tab" href="#rent" role="tab" aria-controls="rent" aria-selected="false">Rent Collection</a>
+              <a
+                class="nav-link-active"
+                id="rent-tab"
+                data-toggle="tab"
+                href="#rent"
+                role="tab"
+                aria-controls="rent"
+                aria-selected="false"
+                >Rent Collection</a
+              >
             </li>
             <li class="nav-item">
-              <a class="nav-link-active" id="financial-tab" data-toggle="tab" href="#financial" role="tab" aria-controls="financial" aria-selected="false">Financial Management</a>
+              <a
+                class="nav-link-active"
+                id="financial-tab"
+                data-toggle="tab"
+                href="#financial"
+                role="tab"
+                aria-controls="financial"
+                aria-selected="false"
+                >Financial Management</a
+              >
             </li>
             <li class="nav-item">
-              <a class="nav-link-active" id="admin-tab" data-toggle="tab" href="#admin" role="tab" aria-controls="admin" aria-selected="false">Administration, Secretarial and Advisor</a>
+              <a
+                class="nav-link-active"
+                id="admin-tab"
+                data-toggle="tab"
+                href="#admin"
+                role="tab"
+                aria-controls="admin"
+                aria-selected="false"
+                >Administration, Secretarial and Advisor</a
+              >
             </li>
             <li class="nav-item">
-              <a class="nav-link-active" id="maintenance-tab" data-toggle="tab" href="#maintenance" role="tab" aria-controls="maintenance" aria-selected="false">Property Mainenance Management</a>
+              <a
+                class="nav-link-active"
+                id="maintenance-tab"
+                data-toggle="tab"
+                href="#maintenance"
+                role="tab"
+                aria-controls="maintenance"
+                aria-selected="false"
+                >Property Mainenance Management</a
+              >
             </li>
           </ul>
 
           <div class="tab-content">
             <div class="tab-pane active" id="tenant" role="tabpanel" aria-labelledby="tenant-tab">
               <p></p>
-              <p>•	Advertising and Marketing</p>
-              <p>•	Financial and character screening of potential tenants</p>
-              <p>•	Showing</p>
-              <p>•	Determining affordability</p>
-              <p>•	Conclusion of contract and ensuring that any suspensive conditions are met</p>
+              <p>• Advertising and Marketing</p>
+              <p>• Financial and character screening of potential tenants</p>
+              <p>• Showing</p>
+              <p>• Determining affordability</p>
+              <p>• Conclusion of contract and ensuring that any suspensive conditions are met</p>
             </div>
-            <hr/>
+            <hr />
             <div class="tab-pane" id="rent" role="tabpanel" aria-labelledby="rent-tab">
-              <p>•	Monthly invoicing and collection via debit order</p>
-              <p>•	Credit Control including soft collections</p>
-              <p>•	Attorney Collections liaison</p>
-              <p>•	Liaison with metering companies </p>
+              <p>• Monthly invoicing and collection via debit order</p>
+              <p>• Credit Control including soft collections</p>
+              <p>• Attorney Collections liaison</p>
+              <p>• Liaison with metering companies</p>
             </div>
             <div class="tab-pane" id="financial" role="tabpanel" aria-labelledby="financial-tab">
-              <p>•	Account reconciliation and payment of net rental after approved operating expenses </p>
-              <p>•	Payment of approved expenses on behalf of Landlord.</p>
-              <p>•	Preparation and submission of monthly reports.</p>
-              <p>•	Monthly accounting of receipts and expenses.</p>
-              <p>•	Preparation of annual property budget.</p>
-              <p>•	Management of deposits in trust account.</p>
+              <p>
+                • Account reconciliation and payment of net rental after approved operating expenses
+              </p>
+              <p>• Payment of approved expenses on behalf of Landlord.</p>
+              <p>• Preparation and submission of monthly reports.</p>
+              <p>• Monthly accounting of receipts and expenses.</p>
+              <p>• Preparation of annual property budget.</p>
+              <p>• Management of deposits in trust account.</p>
             </div>
             <div class="tab-pane" id="admin" role="tabpanel" aria-labelledby="admin-tab">
-              <p>•	Preparation and circulation of correspondence and notices to tenants</p>
-              <p>•	Preparation and conclusion of lease agreements, debit order forms and other legal documentation</p>
-              <p>•	Record maintenance</p>
+              <p>• Preparation and circulation of correspondence and notices to tenants</p>
+              <p>
+                • Preparation and conclusion of lease agreements, debit order forms and other legal
+                documentation
+              </p>
+              <p>• Record maintenance</p>
             </div>
-            <div class="tab-pane" id="maintenance" role="tabpanel" aria-labelledby="maintenance-tab">
-              <p>•	Attending to maintenance issues</p>
-              <p>•	Procurement quotations </p>
-              <p>•	Allocating approved repair work to approved sub-contractors</p>
-              <p>•	Processing insurance claims, on request.</p>
+            <div
+              class="tab-pane"
+              id="maintenance"
+              role="tabpanel"
+              aria-labelledby="maintenance-tab"
+            >
+              <p>• Attending to maintenance issues</p>
+              <p>• Procurement quotations</p>
+              <p>• Allocating approved repair work to approved sub-contractors</p>
+              <p>• Processing insurance claims, on request.</p>
             </div>
           </div>
         </div>
-        
       </div>
     </div>
   </section>

src/components/propertyManagement/rentalManagement/rentalPropertyManagement.vue

@@ -1,30 +1,22 @@
 <template>
   <div>
-    <CarouselSection />
+    <carouselSection />
     <main id="main">
-      <ServicesSection data-aos="fade-down" data-aos-anchor-placement="top-bottom" />
-      <TestimonialSection
-        data-aos="fade-up"
-        data-aos-anchor-placement="top-bottom"
-        data-aos-delay="150"
-      />
+      <ServicesSection />
+      <TestimonialSection />
     </main>
   </div>
 </template>
 
 <script>
 /* eslint-disable */
-import CarouselSection from "./carouselSection";
+import carouselSection from "./carouselSection";
 import ServicesSection from "../sectionalTitle/ourServicesSection";
 import TestimonialSection from "../testimonialSection";
-import AOS from "aos";
-import "aos/dist/aos.css";
+
 export default {
-  created() {
-    AOS.init();
-  },
   components: {
-    CarouselSection,
+    carouselSection,
     ServicesSection,
     TestimonialSection
   }

src/components/propertyManagement/sectionalTitle/carouselSection.vue

@@ -2,18 +2,26 @@
   <section id="intro">
     <div class="container">
       <div class="row">
-        <div align="left" class="col-sm-12 col-md-8">
+        <div align="left" class="col-sm-12 col-md-10">
           <div class="intro-content box">
-            <h2>Let us manage your property</h2>
-            <p>
-              At Uni-Vate we appreciate the significant and positive relationship between effective Property Management and property prices.  We understand that effective management not only relies on administrative processes being intact, but also on a clear plan and good communication with our clients based on respect, trust understanding, openness and accountability.  We have access to a comprehensive set of human and other resources to ensure that your property is proactively managed to protect your investment and to ensure the contentedness of occupants.
-              We offer comprehensive property management services, whether it being Sectional Title Management, HOA Management or Rental Property Portfolio Management.  
-
-            </p>
-            <a href="#" class="btn-solid-blue">LIST YOUR PROPERTY WITH UNI-VATE PROPERTIES</a>
-            <router-link v-if="!isLoggedIn" to="/user/login" class="btn-white-border"
-              >LOGIN TO OWNERS PORTAL</router-link
-            >
+            <div style="margin-top:-40px">
+              <h2>Let us manage your property</h2>
+              <p>
+                At Uni-Vate we appreciate the significant and positive relationship between
+                effective Property Management and property prices. We understand that effective
+                management not only relies on administrative processes being intact, but also on a
+                clear plan and good communication with our clients based on respect, trust
+                understanding, openness and accountability. We have access to a comprehensive set of
+                human and other resources to ensure that your property is proactively managed to
+                protect your investment and to ensure the contentedness of occupants. We offer
+                comprehensive property management services, whether it being Sectional Title
+                Management, HOA Management or Rental Property Portfolio Management.
+              </p>
+              <a href="#" class="btn-solid-blue">LIST YOUR PROPERTY WITH UNI-VATE PROPERTIES</a>
+              <router-link v-if="!isLoggedIn" to="/user/login" class="btn-white-border"
+                >LOGIN TO OWNERS PORTAL</router-link
+              >
+            </div>
           </div>
         </div>
       </div>

src/components/propertyManagement/sectionalTitle/ourServicesSection.vue

@@ -3,104 +3,210 @@
     <div class="container" style="margin-top:-15px">
       <div class="row">
         <div class="col-lg-12">
-          <p>Whether residential, commercial, hybrid schemes or home owners associations – we offer a complete property management solution tailored for the needs of the individual community scheme.</p>
-          <p>We are proud members of the National Association of Managing Agents and registered Estate Agents and Debt Collectors offering the following valuable functions to the residents and corporate bodies alike: </p>
+          <p>
+            Whether residential, commercial, hybrid schemes or home owners associations – we offer a
+            complete property management solution tailored for the needs of the individual community
+            scheme.
+          </p>
+          <p>
+            We are proud members of the National Association of Managing Agents and registered
+            Estate Agents and Debt Collectors offering the following valuable functions to the
+            residents and corporate bodies alike:
+          </p>
         </div>
-        <p></p>
-        <div class="row">
-          <div class="col-md-6">
-            
-          </div>
-          <div class="col-md-6">
-            <h4>Contact us for a quote</h4>
-          </div>
+      </div>
+      <div class="row mt-2">
+        <div class="col-md-6"></div>
+        <div class="col-md-6">
+          <h4>Contact us for a quote</h4>
         </div>
-        <div align="left" class="col-lg-12">
-          <p>Our Services:</p>
-          <ul class="nav nav-tabs" id="myTab" role="tablist">
+      </div>
+      <div class="row">
+        <div class="col-md-12">
+          <div class="section-header">
+            <h2>Our Services</h2>
+          </div>
+          <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
             <li class="nav-item">
-              <a class="nav-link-active" id="takeOn-tab" data-toggle="tab" href="#takeOn" role="tab" aria-controls="takeOn" aria-selected="true">Take-on Audit</a>
+              <a
+                class="nav-link"
+                id="takeOn-tab"
+                data-toggle="tab"
+                href="#takeOn"
+                role="tab"
+                aria-controls="takeOn"
+                aria-selected="true"
+                ><h4>Take-on Audit</h4>
+              </a>
             </li>
             <li class="nav-item">
-              <a class="nav-link-active" id="levy-tab" data-toggle="tab" href="#levy" role="tab" aria-controls="levy" aria-selected="false">Levy, Billing and Collections</a>
+              <a
+                class="nav-link"
+                id="levy-tab"
+                data-toggle="tab"
+                href="#levy"
+                role="tab"
+                aria-controls="levy"
+                aria-selected="false"
+                ><h4>Levy, Billing and Collections</h4>
+              </a>
             </li>
             <li class="nav-item">
-              <a class="nav-link-active" id="financial-tab" data-toggle="tab" href="#financial" role="tab" aria-controls="financial" aria-selected="false">Financial Management and Accounting</a>
+              <a
+                class="nav-link"
+                id="financial-tab"
+                data-toggle="tab"
+                href="#financial"
+                role="tab"
+                aria-controls="financial"
+                aria-selected="false"
+                ><h4>Financial Management and Accounting</h4>
+              </a>
             </li>
             <li class="nav-item">
-              <a class="nav-link-active" id="advisory-tab" data-toggle="tab" href="#advisory" role="tab" aria-controls="advisory" aria-selected="false">Advisory and Secretarial functions</a>
+              <a
+                class="nav-link"
+                id="advisory-tab"
+                data-toggle="tab"
+                href="#advisory"
+                role="tab"
+                aria-controls="advisory"
+                aria-selected="false"
+                ><h4>Advisory and Secretarial functions</h4>
+              </a>
             </li>
             <li class="nav-item">
-              <a class="nav-link-active" id="admin-tab" data-toggle="tab" href="#admin" role="tab" aria-controls="admin" aria-selected="false">Administrative functions</a>
+              <a
+                class="nav-link"
+                id="admin-tab"
+                data-toggle="tab"
+                href="#admin"
+                role="tab"
+                aria-controls="admin"
+                aria-selected="false"
+                ><h4>Administrative functions</h4>
+              </a>
             </li>
           </ul>
-
+        </div>
+      </div>
+      <div class="row">
+        <div align="left" class="col-lg-12">
           <div class="tab-content">
             <div class="tab-pane active" id="takeOn" role="tabpanel" aria-labelledby="takeOn-tab">
               On appointment of company as managing agent, we perform a take-on audit which entails:
               <p></p>
-              <p>•	Deeds search to confirm that correct owners and their details are loaded for levy billing and communication purposes.</p>
-              <p>•	Validation of sectional tile plans, PQ and levy schedule.</p>
-              <p>•	Levy Budget review, identification of risks and formulation of recommendations.</p>
-              <p>•	Accounting quality assessment from last financial statements to date.</p>
-              <p>•	Confirmation that the adjusting journals and opening balance adjustments agree to the auditor’s report.</p>
-              <p>•	Assessment of 10 MAP Plan and CSOS compliance.</p>
-              <p>•	Assessment of insurance cover.</p>
-              <p>•	Assessment of firefighting equipment.</p>
-              <p>•	Confirmation of conduct rules lodged with CSOS.</p>
-              <p>•	Assessment of owner arrear levies, credit control procedures, and legal report.</p>
-              <p>•	Assessment of compliance to relevant legislation.</p>
-              <p>•	Compilation of a report and action log to address identified gaps</p>
-              <p>•	Compilation of a property management control schedule demonstrating required monthly operational activities to be managed.</p>
+              <p>
+                • Deeds search to confirm that correct owners and their details are loaded for levy
+                billing and communication purposes.
+              </p>
+              <p>• Validation of sectional tile plans, PQ and levy schedule.</p>
+              <p>
+                • Levy Budget review, identification of risks and formulation of recommendations.
+              </p>
+              <p>• Accounting quality assessment from last financial statements to date.</p>
+              <p>
+                • Confirmation that the adjusting journals and opening balance adjustments agree to
+                the auditor’s report.
+              </p>
+              <p>• Assessment of 10 MAP Plan and CSOS compliance.</p>
+              <p>• Assessment of insurance cover.</p>
+              <p>• Assessment of firefighting equipment.</p>
+              <p>• Confirmation of conduct rules lodged with CSOS.</p>
+              <p>
+                • Assessment of owner arrear levies, credit control procedures, and legal report.
+              </p>
+              <p>• Assessment of compliance to relevant legislation.</p>
+              <p>• Compilation of a report and action log to address identified gaps</p>
+              <p>
+                • Compilation of a property management control schedule demonstrating required
+                monthly operational activities to be managed.
+              </p>
             </div>
-            <hr/>
             <div class="tab-pane" id="levy" role="tabpanel" aria-labelledby="levy-tab">
-              <p>•	Distribution of monthly levy statements to owners by email</p>
-              <p>•	Collection of monthly levies and charges due to CSOS</p>
-              <p>•	Credit Control of outstanding levies</p>
-              <p>•	Billing of interest on arrears</p>
-              <p>•	Soft Collections</p>
-              <p>•	Attorney Collections liaison</p>
-              <p>•	Liaison with metering companies </p>
-              <p>•	Issuing of levy clearance certificates</p>
+              <p>• Distribution of monthly levy statements to owners by email</p>
+              <p>• Collection of monthly levies and charges due to CSOS</p>
+              <p>• Credit Control of outstanding levies</p>
+              <p>• Billing of interest on arrears</p>
+              <p>• Soft Collections</p>
+              <p>• Attorney Collections liaison</p>
+              <p>• Liaison with metering companies</p>
+              <p>• Issuing of levy clearance certificates</p>
             </div>
             <div class="tab-pane" id="financial" role="tabpanel" aria-labelledby="financial-tab">
-              <p>•	Payment of approved operational and capital expenditure as per the approved budget and on sign-off in accordance with scheme executive instructions.</p>
-              <p>•	To open and / or operate a bank account in the name of the community scheme or a trust account which include current, savings and investment accounts in the name of the Scheme.</p>
-              <p>•	To keep books of account and records in accordance with standard accounting principles.</p>
-              <p>•	Preparing the annual audit file for the appointed auditors.</p>
-              <p>•	Preparing the annual budget and levy schedule for approval by the members at the AGM.</p>
-              <p>•	To compile and distribute a monthly management report to scheme executives which will include an income and expenditure statement detailing actual expenses versus budgeted expenses, a balance sheet, a debtor and supplier age analysis and any such supplementary information as the scheme executives may require.</p>
-              <p>•	Invest surplus funds after payment of creditors.</p>
+              <p>
+                • Payment of approved operational and capital expenditure as per the approved budget
+                and on sign-off in accordance with scheme executive instructions.
+              </p>
+              <p>
+                • To open and / or operate a bank account in the name of the community scheme or a
+                trust account which include current, savings and investment accounts in the name of
+                the Scheme.
+              </p>
+              <p>
+                • To keep books of account and records in accordance with standard accounting
+                principles.
+              </p>
+              <p>• Preparing the annual audit file for the appointed auditors.</p>
+              <p>
+                • Preparing the annual budget and levy schedule for approval by the members at the
+                AGM.
+              </p>
+              <p>
+                • To compile and distribute a monthly management report to scheme executives which
+                will include an income and expenditure statement detailing actual expenses versus
+                budgeted expenses, a balance sheet, a debtor and supplier age analysis and any such
+                supplementary information as the scheme executives may require.
+              </p>
+              <p>• Invest surplus funds after payment of creditors.</p>
             </div>
             <div class="tab-pane" id="advisory" role="tabpanel" aria-labelledby="advisory-tab">
-              <p>•	Managing the owners’ register</p>
-              <p>•	Consulting and providing advice on risk, compliance and governance matters where required.</p>
-              <p>•	Preparation and distribution of notices of meetings, agendas and minutes in respect of executives and owners’ meetings</p>
-              <p>•	Attending limited scheme executive meetings and the annual Annual General Meeting.</p>
-              <p>•	Attending Special General Meetings on request.</p>
-              <p>•	Arrange property valuation in terms of PMR 23(3).</p>
-              <p>•	Arrange competitive comprehensive property and fidelity insurance cover.</p>
-              <p>•	Submission and management of all insurance claims.</p>
-              <p>•	Maintenance management for common property to arrange quotes, booking contractors and facilitating approval and payment.  </p>
-              <p>•	Maintenance of statutory records.</p>
-              <p>•	Assisting with queries from management and owners.</p>
-              <p>•	Assisting executives with CSOS disputes.</p>
+              <p>• Managing the owners’ register</p>
+              <p>
+                • Consulting and providing advice on risk, compliance and governance matters where
+                required.
+              </p>
+              <p>
+                • Preparation and distribution of notices of meetings, agendas and minutes in
+                respect of executives and owners’ meetings
+              </p>
+              <p>
+                • Attending limited scheme executive meetings and the annual Annual General Meeting.
+              </p>
+              <p>• Attending Special General Meetings on request.</p>
+              <p>• Arrange property valuation in terms of PMR 23(3).</p>
+              <p>• Arrange competitive comprehensive property and fidelity insurance cover.</p>
+              <p>• Submission and management of all insurance claims.</p>
+              <p>
+                • Maintenance management for common property to arrange quotes, booking contractors
+                and facilitating approval and payment.
+              </p>
+              <p>• Maintenance of statutory records.</p>
+              <p>• Assisting with queries from management and owners.</p>
+              <p>• Assisting executives with CSOS disputes.</p>
             </div>
             <div class="tab-pane" id="admin" role="tabpanel" aria-labelledby="admin-tab">
-              <p>•	Managing the owners’ register.</p>
-              <p>•	Safekeeping of the governance documents such as the conduct rules.</p>
-              <p>•	Issuing clearance and insurance certificates as and when required.</p>
-              <p>•	Performing general secretarial duties.</p>
-              <p>•	Recording, preparing and circulating the minutes of the trustee meetings and the AGM’s.</p>
-              <p>•	The preparing and circulation of all correspondence to owners and residents</p>
-              <p>•	Safekeeping of the minute books in perpetuity.</p>
-              <p>•	Provision of a legal address domicilium citandi et executandi for the body corporate.</p>
-              <p>•	Archiving and safekeeping of all body corporate records, as required by current legislation.</p>
+              <p>• Managing the owners’ register.</p>
+              <p>• Safekeeping of the governance documents such as the conduct rules.</p>
+              <p>• Issuing clearance and insurance certificates as and when required.</p>
+              <p>• Performing general secretarial duties.</p>
+              <p>
+                • Recording, preparing and circulating the minutes of the trustee meetings and the
+                AGM’s.
+              </p>
+              <p>• The preparing and circulation of all correspondence to owners and residents</p>
+              <p>• Safekeeping of the minute books in perpetuity.</p>
+              <p>
+                • Provision of a legal address domicilium citandi et executandi for the body
+                corporate.
+              </p>
+              <p>
+                • Archiving and safekeeping of all body corporate records, as required by current
+                legislation.
+              </p>
             </div>
           </div>
         </div>
-        
       </div>
     </div>
   </section>
@@ -110,4 +216,28 @@
 export default {};
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.nav-tabs li a {
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  border-bottom-color: rgb(221, 221, 221);
+  height: 100%;
+}
+
+.nav-tabs li :hover {
+  background-color: rgb(27, 117, 187);
+}
+
+.nav-tabs li a.active {
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  border-bottom-color: rgb(221, 221, 221);
+}
+
+.nav-tabs li a :hover {
+  background-color: transparent;
+  color: white;
+}
+</style>

src/components/shared/navBar.vue

@@ -141,10 +141,14 @@
                     </a>
                     <ul style="margin-top:-10px; text-align:left" :class="propManClass">
                       <li>
-                        <router-link to="/propertyManagement">Sectional Title and HOA Management</router-link>
+                        <router-link to="/propertyManagement"
+                          >Sectional Title and HOA Management</router-link
+                        >
                       </li>
                       <li>
-                        <router-link to="/rentalPropertyManagement">Rental Property Portfolio Management</router-link>
+                        <router-link to="/rentalPropertyManagement"
+                          >Rental Property Portfolio Management</router-link
+                        >
                       </li>
                     </ul>
                   </li>
@@ -309,7 +313,10 @@ export default {
       propertiesClass: "no-display",
       aboutClass: "no-display",
       userClass: "no-display",
-      registerClass: "no-display"
+      registerClass: "no-display",
+      commercialClass: "no-display",
+      residentialClass: "no-display",
+      propManClass: "no-display"
     };
   },
   methods: {

src/main.js

@@ -23,8 +23,8 @@ Vue.use(VueGoogleMaps, {
 });
 Vue.config.productionTip = false;
 //axios.defaults.baseURL = "http://localhost:57260";
-axios.defaults.baseURL = "http://training.provision-sa.com:82";
-//axios.defaults.baseURL = "http://localhost:8080/";
+//axios.defaults.baseURL = "http://training.provision-sa.com:82";
+axios.defaults.baseURL = "http://localhost:8080/";
 
 Vue.prototype.$axios = axios;
 

src/router/index.js

@@ -29,7 +29,7 @@ import PropertyType from "../components/admin/property/propertyTypeEdit.vue";
 import UserDefinedGroups from "../components/admin/property/userDefinedGroupsPage.vue";
 import UserDefinedGroup from "../components/admin/property/userDefinedGroupPage.vue";
 import PropertyManagement from "../components/propertyManagement/sectionalTitle/propertyManagement.vue";
-import RentalPropertyManagement from '../components/propertyManagement/rentalManagement/contentSection.vue'
+import RentalPropertyManagement from "../components/propertyManagement/rentalManagement/rentalPropertyManagement.vue";
 
 import ResidentialPage from "../components/property/residential/residentialPage.vue";
 import CommercialPage from "../components/property/commercial/commercialPage.vue";
@@ -77,7 +77,7 @@ import LandingPage from "../components/marketing/landingPage.vue";
 import LandingPageWeek from "../components/marketing/landingPageWeek.vue";
 import MarketingPage from "../components/marketing/clientView.vue";
 import MarketingPageExp from "../components/marketing/landingPageExpired.vue";
-import EnquireNow from '../components/property/commercial/enquireNow/enquirenow.vue';
+import EnquireNow from "../components/property/commercial/enquireNow/enquirenow.vue";
 
 Vue.use(Router);
 
@@ -216,8 +216,8 @@ export default new Router({
       component: PropertyManagement
     },
     {
-      path: '/rentalPropertyManagement',
-      name: 'RentalPropertyManagement',
+      path: "/rentalPropertyManagement",
+      name: "RentalPropertyManagement",
       component: RentalPropertyManagement
     },
     {
@@ -425,6 +425,6 @@ export default new Router({
       path: "/toBuyResults",
       name: "ToBuySearch",
       component: ToBuySearch
-    },
-  ],
+    }
+  ]
 });