Commit

src/components/about/aboutTimeshare.vue

       <div class="row">
         <div class="col-sm-12">
           <div class="about-img-box">
-            <img src="img/slide-3.jpg" alt class="img-fluid" style="width:800px;height:400px;" />
+            <img
+              src="img/slide-3.jpg"
+              alt="About Timeshare"
+              class="img-fluid"
+              style="width:800px;height:400px;"
+            />
           </div>
           <div class="sinse-box">
             <h3 class="sinse-title">

src/components/about/aboutUsPage.vue

 <template>
-  <!--/ About Star /-->
+  <!-- eslint-disable max-len -->
   <section class="section-about">
     <div class="container">
       <div class="row">

src/components/property/propertySearchPage.vue

 <template>
+  <!-- eslint-disable max-len -->
   <div class="container">
-    <div class="col-md-12">
-      <h3 class="my-4">Property Listing</h3>
-    </div>
-    <br />
-    <br />
-    <br />
-    <div>
-      <propertyCard
-        v-if="properties.length > 0"
-        name="propertyholder"
-        :properties="properties"
-        :key="propertysearch"
-      />
-      <div v-if="properties.length === 0">
-        <img src="../../../public/img/no-homes.gif" />
-        <br />
-        <br />
-        <p>Sorry no listing where found matching your search</p>
+    <div class="col-sm-12">
+      <div class="about-img-box">
+        <img
+          src="img/Johannesburg-south-africa-1.jpg"
+          alt="Property Listing"
+          class="img-fluid"
+          style="width:800px;height:400px;"
+        />
+      </div>
+      <div class="sinse-box">
+        <h3 class="sinse-title">
+          Property Listing
+          <span></span>
+        </h3>
       </div>
     </div>
     <br />
-    <div class="container" v-if="propertyType === 'Residential'">
+    <div class="container col-md-10" v-if="propertyType === 'Residential'">
       <div class="row">
         <div class="col-md-12">
           <h1 class="my-4">About Residential Properties</h1>
         </div>
-        <div class="col-md-6">
+        <div class="col-md-8 text-left">
           <p>
             Uni-Vate Properties understands the necessity in property-seekers
             to find that perfect fit;
           </p>
         </div>
       </div>
+      <div>
+        <propertyCard
+          v-if="properties.length > 0"
+          name="propertyholder"
+          :properties="properties"
+          :key="propertysearch"
+        />
+        <div v-if="properties.length === 0">
+          <img src="../../../public/img/no-homes.gif" />
+          <br />
+          <br />
+          <p>Sorry no listing where found matching your search</p>
+        </div>
+      </div>
+      <br />
     </div>
-    <div class="container" v-if="propertyType === 'Commercial'">
+    <div class="container col-md-10" v-if="propertyType === 'Commercial'">
       <div class="row">
         <div class="col-md-12">
           <h1 class="my-4">About Commercial Properties</h1>
         </div>
-        <div class="col-md-6">
+        <div class="col-md-8 text-left">
           <p>
             Commercial properties are characteristically any larger properties that
             generate profit through leasing or rental activities. These properties
           </p>
         </div>
       </div>
+      <div>
+        <propertyCard
+          v-if="properties.length > 0"
+          name="propertyholder"
+          :properties="properties"
+          :key="propertysearch"
+        />
+        <div v-if="properties.length === 0">
+          <img src="../../../public/img/no-homes.gif" />
+          <br />
+          <br />
+          <p>Sorry no listing where found matching your search</p>
+        </div>
+      </div>
+      <br />
     </div>
   </div>
 </template>

src/components/property/propertyeditPage.vue

   <!-- eslint-disable max-len -->
   <div>
     <div class="container">
-      <section class="intro-single">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-12 col-lg-8">
-              <div class="title-single-box">
-                <h1 class="title-single">List {{ propertyType }} {{ salesType }} Property</h1>
-              </div>
-            </div>
-          </div>
+      <div class="col-sm-12">
+        <div class="tobuy-img-box">
+          <img
+            src="img/Listings2.jpg"
+            alt="Timeshare To Buy"
+            class="img-fluid"
+            style="width:800px;height:400px;"
+          />
         </div>
-      </section>
+        <div class="sinse-box">
+          <h3 class="sinse-title">
+            List {{ propertyType }} {{ salesType }} Property
+            <span></span>
+          </h3>
+        </div>
+      </div>
+      <br />
       <div class="row">
-        <div class="col-sm-12">
+        <div class="container col-md-10">
           <div class="title-box-d">
             <h5 class="title-d">Property Overview</h5>
           </div>
         </div>
       </div>
       <div class="row mb-3">
-        <div class="col-md-12">
+        <div class="container col-md-10">
           <form id="mainForm">
             <div class="form-group row">
               <div class="col-md-4">
             <div class="form-group row">
               <div class="col-md-12">
                 <label for="Property Description">Description</label>
-                <TextEditor name="description" v-model="property.description" id="description" />
+                <TextEditor
+                  name="description"
+                  v-model="property.description"
+                  id="description"
+                  style="text-align:left"
+                />
                 <br />
                 <p>* A listing fee of R380 including VAT is payable to list your Property on the Uni-Vate website</p>
               </div>

src/components/shared/navBar.vue

             >Login</a>
             <div class="dropdown-menu" aria-labelledby="navbarDropdown">
               <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/login')">Login</a>
-              <a class="dropdown-item cursor-pointer">Logout</a>
+              <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/login')">Logout</a>
               <a class="dropdown-item cursor-pointer" @click="routerGoTo('/user/register')">Register</a>
               <a
                 class="dropdown-item cursor-pointer"

src/components/timeshare/buy/buyPage.vue

 <template>
-  <section>
-    <section class="intro-single">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-12 col-lg-8">
-            <div class="title-single-box">
-              <h1 class="title-single" style="text-align:left;">Timeshare To Buy</h1>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
+  <!-- eslint-disable max-len -->
+  <section class="collapse-items">
     <div class="container">
       <div class="row">
-        <div class="col-md-12 text-left">
-          <p>
-            The resorts have been listed in their relevant provinces.
-            Please select the resort for which you would like to view
-            the available weeks and then select the weeks that interest
-            you on the resort page.
-          </p>
-          <p>
-            Arrival and departure dates are indicated but please note
-            that these dates may vary annually.
-          </p>
-          <p>
-            As with any property related sale, upon purchasing the holiday
-            of your choice, there will be a transfer fee payable for the
-            change of ownership. This fee will depend on the relevant resort
-            or managing agent.
-          </p>
+        <div class="col-sm-12">
+          <div class="tobuy-img-box">
+            <img
+              src="img/Monateng_Safari_Lodge1.jpg"
+              alt="Timeshare To Buy"
+              class="img-fluid"
+              style="width:800px;height:400px;"
+            />
+          </div>
+          <div class="sinse-box">
+            <h3 class="sinse-title">
+              Timeshare To Buy
+              <span></span>
+            </h3>
+          </div>
         </div>
-      </div>
 
-      <div class="row mb-4">
-        <div class="col-md-4">
-          <div class="accordion" id="accordionExample">
-            <div class="card" v-for="(region, r) in regions" :key="r">
-              <a
-                class="btn btn-b-n"
-                type="button"
-                data-toggle="collapse"
-                :data-target="'#collapse' + region.id"
-                aria-expanded="false"
-                :aria-controls="'collapse' + region.id"
-              >
-                <div :id="'header' + region.id">
-                  <h5
-                    class="mb-0"
-                    @mouseover="updateMapProvince(region.regionName)"
-                  >{{ region.regionName }}</h5>
-                </div>
-              </a>
-              <div
-                :id="'collapse' + region.id"
-                class="collapse"
-                :aria-labelledby="'header' + region.id"
-                data-parent="#accordionExample"
-              >
-                <div class="card-body">
-                  <p class="mb-0" v-for="(resort, i) in region.resorts" :key="i">
-                    <a
-                      class="cursor-pointer"
-                      href="#"
-                      @click="routerGoTo('/resort/' + resort.resortCode)"
-                      @mouseover="updateMap(resort.resortCode)"
-                    >{{resort.resortName}}</a>
-                    <br />
-                  </p>
+        <div class="container col-md-10">
+          <br />
+          <div class="row">
+            <div class="col-md-12 text-left">
+              <p>
+                The resorts have been listed in their relevant provinces.
+                Please select the resort for which you would like to view
+                the available weeks and then select the weeks that interest
+                you on the resort page.
+              </p>
+              <p>
+                Arrival and departure dates are indicated but please note
+                that these dates may vary annually.
+              </p>
+              <p>
+                As with any property related sale, upon purchasing the holiday
+                of your choice, there will be a transfer fee payable for the
+                change of ownership. This fee will depend on the relevant resort
+                or managing agent.
+              </p>
+            </div>
+          </div>
+          <br />
+          <div class="row mb-4">
+            <div class="container col-md-4">
+              <div class="accordion" id="accordionExample">
+                <div class="card" v-for="(region, r) in regions" :key="r">
+                  <a
+                    class="mb-0 color-text-a"
+                    data-toggle="collapse"
+                    :data-target="'#collapse' + region.id"
+                    aria-expanded="false"
+                    :aria-controls="'collapse' + region.id"
+                  >
+                    <div :id="'header' + region.id">
+                      <h5
+                        class="btn btn-link font-weight-bold color-b"
+                        @mouseover="updateMapProvince(region.regionName)"
+                      >{{ region.regionName }}</h5>
+                    </div>
+                  </a>
+                  <div
+                    :id="'collapse' + region.id"
+                    class="collapse"
+                    :aria-labelledby="'header' + region.id"
+                    data-parent="#accordionExample"
+                  >
+                    <div class="card-body">
+                      <p class="mb-0" v-for="(resort, i) in region.resorts" :key="i">
+                        <a
+                          class="cursor-pointer"
+                          href="#"
+                          @click="routerGoTo('/resort/' + resort.resortCode)"
+                          @mouseover="updateMap(resort.resortCode)"
+                        >{{resort.resortName}}</a>
+                        <br />
+                      </p>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-        </div>
-        <div class="col-md-8">
-          <div class="tab-content" id="myTabContent">
-            <div
-              class="tab-pane fade show active"
-              id="directions"
-              role="tabpanel"
-              aria-labelledby="directions-tab"
-            >
-              <iframe
-                :src="mapUrl"
-                width="100%"
-                height="450"
-                frameborder="0"
-                style="border:0"
-                allowfullscreen
-              ></iframe>
-              <br />
+            <div class="col-md-8">
+              <div class="tab-content" id="myTabContent">
+                <div
+                  class="tab-pane fade show active"
+                  id="directions"
+                  role="tabpanel"
+                  aria-labelledby="directions-tab"
+                >
+                  <iframe
+                    :src="mapUrl"
+                    width="100%"
+                    height="450"
+                    frameborder="0"
+                    style="border:0"
+                    allowfullscreen
+                  ></iframe>
+                  <br />
 
-              <small>
-                <a
-                  :href="mapUrl"
-                  style="color:#60CBEB;text-align:left"
-                  target="_blank"
-                >See map bigger</a>
-              </small>
-            </div>
-            <div
-              class="tab-pane fade"
-              id="resort-layout"
-              role="tabpanel"
-              aria-labelledby="resort-layout-tab"
-            >
-              <img class="img-fluid" :src="layout" alt="Resort Layout" />
+                  <small>
+                    <a
+                      :href="mapUrl"
+                      style="color:#60CBEB;text-align:left"
+                      target="_blank"
+                    >See map bigger</a>
+                  </small>
+                </div>
+                <div
+                  class="tab-pane fade"
+                  id="resort-layout"
+                  role="tabpanel"
+                  aria-labelledby="resort-layout-tab"
+                >
+                  <img class="img-fluid" :src="layout" alt="Resort Layout" />
+                </div>
+              </div>
             </div>
           </div>
         </div>

src/components/timeshare/faqPage.vue

-/* eslint-disable max-len */
 <template>
+  <!-- eslint-disable max-len -->
   <section class="collapse-items">
-    <section class="intro-single">
-      <div class="container">
-        <div class="title-single-box">
-          <h3 class="title-single" style="text-align:left;">Frequently Asked Questions</h3>
-        </div>
-      </div>
-    </section>
-    <div class="container col-md-5">
-      <div id="accordion">
-        <div class="card">
-          <div class="card-header" id="heading1" style="text-align:left">
-            <h5 class="mb-0 color-text-a">
-              <button
-                class="btn btn-link font-weight-bold color-b"
-                data-toggle="collapse"
-                data-target="#collapse1"
-                aria-expanded="true"
-                aria-controls="collapse1"
-              >What is timeshare vacation ownership?</button>
-            </h5>
+    <div class="container">
+      <div class="row">
+        <div class="col-sm-12">
+          <div class="faq-img-box">
+            <img
+              src="img/questions.jpg"
+              alt="Frequently Asked Questions"
+              class="img-fluid"
+              style="width:800px;height:400px;"
+            />
           </div>
-          <div
-            id="collapse1"
-            class="collapse show color-text-a"
-            aria-labelledby="heading1"
-            data-parent="#accordion"
-          >
-            <div class="card-body" style="text-align:left">
-              Owning a timeshare means you own a portion of time in a specific unit in a resort. Most commonly the
-              increments are sold per week and usually this means Friday to Friday depending on the specific resorts
-              calendar. In specific resorts it could also mean midweek or weekend modules.
-            </div>
+          <div class="sinse-box">
+            <h3 class="sinse-title">
+              Frequently Asked Questions
+              <span></span>
+            </h3>
           </div>
         </div>
-        <div class="card">
-          <div class="card-header" id="heading2" style="text-align:left">
-            <h5 class="mb-0">
-              <button
-                class="btn btn-link font-weight-bold color-b"
-                data-toggle="collapse"
-                data-target="#collapse2"
-                aria-expanded="false"
-                aria-controls="collapse2"
-              >What is included in my timeshare?</button>
-            </h5>
-          </div>
-          <div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#accordion">
-            <div class="card-body" style="text-align:left">
-              Most timeshare resorts are self-catering which means you have a ‘home away from home” holiday. You will
-              not be required to pay for your accommodation week other than a maintenance levy which is charged by the
-              resort. Some resorts do charge a key or breakage deposit but these are usually refundable.
+        <div class="container col-md-10">
+          <br />
+          <div id="accordion">
+            <div class="card">
+              <div class="card-header" id="heading1" style="text-align:left">
+                <h5 class="mb-0 color-text-a">
+                  <button
+                    class="btn btn-link font-weight-bold color-b"
+                    data-toggle="collapse"
+                    data-target="#collapse1"
+                    aria-expanded="true"
+                    aria-controls="collapse1"
+                  >What is timeshare vacation ownership?</button>
+                </h5>
+              </div>
+              <div
+                id="collapse1"
+                class="collapse show color-text-a"
+                aria-labelledby="heading1"
+                data-parent="#accordion"
+              >
+                <div class="card-body" style="text-align:left">
+                  Owning a timeshare means you own a portion of time in a specific unit in a resort. Most commonly the
+                  increments are sold per week and usually this means Friday to Friday depending on the specific resorts
+                  calendar. In specific resorts it could also mean midweek or weekend modules.
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-        <div class="card">
-          <div class="card-header" id="heading3" style="text-align:left">
-            <h5 class="mb-0">
-              <button
-                class="btn btn-link font-weight-bold color-b"
-                data-toggle="collapse"
-                data-target="#collapse3"
-                aria-expanded="false"
-                aria-controls="collapse3"
-              >What is timeshare resale?</button>
-            </h5>
-          </div>
-          <div id="collapse3" class="collapse" aria-labelledby="heading3" data-parent="#accordion">
-            <div class="card-body" style="text-align:left">
-              Should the needs or lifestyle change for the timeshare owner, he may decide to sell his week. As a proud
-              member of VOASA, Uni-Vate Properties are accredited agents who facilitate this process for the seller and
-              prospective buyer, ensuring sound and ethical business practice for all transactions.
+            <div class="card">
+              <div class="card-header" id="heading2" style="text-align:left">
+                <h5 class="mb-0">
+                  <button
+                    class="btn btn-link font-weight-bold color-b"
+                    data-toggle="collapse"
+                    data-target="#collapse2"
+                    aria-expanded="false"
+                    aria-controls="collapse2"
+                  >What is included in my timeshare?</button>
+                </h5>
+              </div>
+              <div
+                id="collapse2"
+                class="collapse"
+                aria-labelledby="heading2"
+                data-parent="#accordion"
+              >
+                <div class="card-body" style="text-align:left">
+                  Most timeshare resorts are self-catering which means you have a ‘home away from home” holiday. You will
+                  not be required to pay for your accommodation week other than a maintenance levy which is charged by the
+                  resort. Some resorts do charge a key or breakage deposit but these are usually refundable.
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-        <div class="card">
-          <div class="card-header" id="heading4" style="text-align:left">
-            <h5 class="mb-0">
-              <button
-                class="btn btn-link font-weight-bold color-b"
-                data-toggle="collapse"
-                data-target="#collapse4"
-                aria-expanded="false"
-                aria-controls="collapse4"
-              >Can Uni-Vate Properties sell my points?</button>
-            </h5>
-          </div>
-          <div id="collapse4" class="collapse" aria-labelledby="heading4" data-parent="#accordion">
-            <div class="card-body" style="text-align:left">
-              Uni-Vate Properties specialise in fixed weeks or flexi week timeshare but are qualified to sell and/or
-              advise on points sales.
+            <div class="card">
+              <div class="card-header" id="heading3" style="text-align:left">
+                <h5 class="mb-0">
+                  <button
+                    class="btn btn-link font-weight-bold color-b"
+                    data-toggle="collapse"
+                    data-target="#collapse3"
+                    aria-expanded="false"
+                    aria-controls="collapse3"
+                  >What is timeshare resale?</button>
+                </h5>
+              </div>
+              <div
+                id="collapse3"
+                class="collapse"
+                aria-labelledby="heading3"
+                data-parent="#accordion"
+              >
+                <div class="card-body" style="text-align:left">
+                  Should the needs or lifestyle change for the timeshare owner, he may decide to sell his week. As a proud
+                  member of VOASA, Uni-Vate Properties are accredited agents who facilitate this process for the seller and
+                  prospective buyer, ensuring sound and ethical business practice for all transactions.
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-        <div class="card">
-          <div class="card-header" id="heading5" style="text-align:left">
-            <h5 class="mb-0">
-              <button
-                class="btn btn-link font-weight-bold color-b"
-                data-toggle="collapse"
-                data-target="#collapse5"
-                aria-expanded="false"
-                aria-controls="collapse5"
-              >How do I list my week with Uni-Vate Properties?</button>
-            </h5>
-          </div>
-          <div id="collapse5" class="collapse" aria-labelledby="heading5" data-parent="#accordion">
-            <div class="card-body" style="text-align:left">
-              You can complete the on-line details which you will find under the “To Sell” tab. There will be a listing
-              fee payable of R380 including VAT. The details submitted will go through a verification process. Subject
-              to there being no complications, the listing will be processed and published.
+            <div class="card">
+              <div class="card-header" id="heading4" style="text-align:left">
+                <h5 class="mb-0">
+                  <button
+                    class="btn btn-link font-weight-bold color-b"
+                    data-toggle="collapse"
+                    data-target="#collapse4"
+                    aria-expanded="false"
+                    aria-controls="collapse4"
+                  >Can Uni-Vate Properties sell my points?</button>
+                </h5>
+              </div>
+              <div
+                id="collapse4"
+                class="collapse"
+                aria-labelledby="heading4"
+                data-parent="#accordion"
+              >
+                <div class="card-body" style="text-align:left">
+                  Uni-Vate Properties specialise in fixed weeks or flexi week timeshare but are qualified to sell and/or
+                  advise on points sales.
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-        <div class="card">
-          <div class="card-header" id="heading6" style="text-align:left">
-            <h5 class="mb-0">
-              <button
-                class="btn btn-link font-weight-bold color-b"
-                data-toggle="collapse"
-                data-target="#collapse6"
-                aria-expanded="false"
-                aria-controls="collapse6"
-              >Is timeshare an investment?</button>
-            </h5>
-          </div>
-          <div id="collapse6" class="collapse" aria-labelledby="heading6" data-parent="#accordion">
-            <div class="card-body" style="text-align:left">
-              Timeshare is not an appreciating property investment but it is an investment into your vacation lifestyle.
-              It will improve your lifestyle and the quality and variety of your family holidays both locally and
-              internationally while saving you money. The memories gained and the time spent with loved ones is
-              priceless.
+            <div class="card">
+              <div class="card-header" id="heading5" style="text-align:left">
+                <h5 class="mb-0">
+                  <button
+                    class="btn btn-link font-weight-bold color-b"
+                    data-toggle="collapse"
+                    data-target="#collapse5"
+                    aria-expanded="false"
+                    aria-controls="collapse5"
+                  >How do I list my week with Uni-Vate Properties?</button>
+                </h5>
+              </div>
+              <div
+                id="collapse5"
+                class="collapse"
+                aria-labelledby="heading5"
+                data-parent="#accordion"
+              >
+                <div class="card-body" style="text-align:left">
+                  You can complete the on-line details which you will find under the “To Sell” tab. There will be a listing
+                  fee payable of R380 including VAT. The details submitted will go through a verification process. Subject
+                  to there being no complications, the listing will be processed and published.
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-        <div class="card">
-          <div class="card-header" id="heading7" style="text-align:left">
-            <h5 class="mb-0">
-              <button
-                class="btn btn-link font-weight-bold color-b"
-                data-toggle="collapse"
-                data-target="#collapse7"
-                aria-expanded="false"
-                aria-controls="collapse7"
-              >How is my week sold?</button>
-            </h5>
-          </div>
-          <div id="collapse7" class="collapse" aria-labelledby="heading7" data-parent="#accordion">
-            <div class="card-body" style="text-align:left">
-              Through Uni-Vate Properties your week will be marketed extensively to all of their available channels.
-              Uni-Vate will only charge a listing Fee of R380 including VAT which is due when listing.
+            <div class="card">
+              <div class="card-header" id="heading6" style="text-align:left">
+                <h5 class="mb-0">
+                  <button
+                    class="btn btn-link font-weight-bold color-b"
+                    data-toggle="collapse"
+                    data-target="#collapse6"
+                    aria-expanded="false"
+                    aria-controls="collapse6"
+                  >Is timeshare an investment?</button>
+                </h5>
+              </div>
+              <div
+                id="collapse6"
+                class="collapse"
+                aria-labelledby="heading6"
+                data-parent="#accordion"
+              >
+                <div class="card-body" style="text-align:left">
+                  Timeshare is not an appreciating property investment but it is an investment into your vacation lifestyle.
+                  It will improve your lifestyle and the quality and variety of your family holidays both locally and
+                  internationally while saving you money. The memories gained and the time spent with loved ones is
+                  priceless.
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-        <div class="card">
-          <div class="card-header" id="heading8" style="text-align:left">
-            <h5 class="mb-0">
-              <button
-                class="btn btn-link font-weight-bold color-b"
-                data-toggle="collapse"
-                data-target="#collapse8"
-                aria-expanded="false"
-                aria-controls="collapse8"
-              >How do I buy a week?</button>
-            </h5>
-          </div>
-          <div id="collapse8" class="collapse" aria-labelledby="heading8" data-parent="#accordion">
-            <div class="card-body" style="text-align:left">
-              All available and verified weeks will be listed on the website for prospective buyers. Once you identify a
-              week that suits your holiday need and price, click on “Enquire Now” and complete your details to conclude
-              the initiation of the transaction.
+            <div class="card">
+              <div class="card-header" id="heading7" style="text-align:left">
+                <h5 class="mb-0">
+                  <button
+                    class="btn btn-link font-weight-bold color-b"
+                    data-toggle="collapse"
+                    data-target="#collapse7"
+                    aria-expanded="false"
+                    aria-controls="collapse7"
+                  >How is my week sold?</button>
+                </h5>
+              </div>
+              <div
+                id="collapse7"
+                class="collapse"
+                aria-labelledby="heading7"
+                data-parent="#accordion"
+              >
+                <div class="card-body" style="text-align:left">
+                  Through Uni-Vate Properties your week will be marketed extensively to all of their available channels.
+                  Uni-Vate will only charge a listing Fee of R380 including VAT which is due when listing.
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-        <div class="card">
-          <div class="card-header" id="heading9" style="text-align:left">
-            <h5 class="mb-0">
-              <button
-                class="btn btn-link font-weight-bold color-b"
-                data-toggle="collapse"
-                data-target="#collapse9"
-                aria-expanded="false"
-                aria-controls="collapse9"
-              >Is my money safe?</button>
-            </h5>
-          </div>
-          <div id="collapse9" class="collapse" aria-labelledby="heading9" data-parent="#accordion">
-            <div class="card-body" style="text-align:left">
-              By law, your money will be held in a trust account while the transfer is being processed. This trust
-              account is a specification of any company registered as an estate agency with the EAAB.
+            <div class="card">
+              <div class="card-header" id="heading8" style="text-align:left">
+                <h5 class="mb-0">
+                  <button
+                    class="btn btn-link font-weight-bold color-b"
+                    data-toggle="collapse"
+                    data-target="#collapse8"
+                    aria-expanded="false"
+                    aria-controls="collapse8"
+                  >How do I buy a week?</button>
+                </h5>
+              </div>
+              <div
+                id="collapse8"
+                class="collapse"
+                aria-labelledby="heading8"
+                data-parent="#accordion"
+              >
+                <div class="card-body" style="text-align:left">
+                  All available and verified weeks will be listed on the website for prospective buyers. Once you identify a
+                  week that suits your holiday need and price, click on “Enquire Now” and complete your details to conclude
+                  the initiation of the transaction.
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-        <div class="card">
-          <div class="card-header" id="heading10" style="text-align:left">
-            <h5 class="mb-0">
-              <button
-                class="btn btn-link font-weight-bold color-b"
-                data-toggle="collapse"
-                data-target="#collapse10"
-                aria-expanded="false"
-                aria-controls="collapse10"
-              >Can I exchange my timeshare for other destinations?</button>
-            </h5>
-          </div>
-          <div
-            id="collapse10"
-            class="collapse"
-            aria-labelledby="heading10"
-            data-parent="#accordion"
-          >
-            <div class="card-body" style="text-align:left">
-              Most definitely! Once the week has been transferred to you, you have a choice of membership with RCI
-              and/or DAE, two of the worlds largest exchange companies that will gladly exchange your week for you
-              anywhere in the world with friendly and professional service. We will gladly put you in touch with them
-              and the entire world will be available to you for holidays.
+            <div class="card">
+              <div class="card-header" id="heading9" style="text-align:left">
+                <h5 class="mb-0">
+                  <button
+                    class="btn btn-link font-weight-bold color-b"
+                    data-toggle="collapse"
+                    data-target="#collapse9"
+                    aria-expanded="false"
+                    aria-controls="collapse9"
+                  >Is my money safe?</button>
+                </h5>
+              </div>
+              <div
+                id="collapse9"
+                class="collapse"
+                aria-labelledby="heading9"
+                data-parent="#accordion"
+              >
+                <div class="card-body" style="text-align:left">
+                  By law, your money will be held in a trust account while the transfer is being processed. This trust
+                  account is a specification of any company registered as an estate agency with the EAAB.
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-        <div class="card">
-          <div class="card-header" id="heading11" style="text-align:left">
-            <h5 class="mb-0">
-              <button
-                class="btn btn-link font-weight-bold color-b"
-                data-toggle="collapse"
-                data-target="#collapse11"
-                aria-expanded="false"
-                aria-controls="collapse11"
-              >There are so many agents and scam artists out there. Why Uni-Vate Properties?</button>
-            </h5>
-          </div>
-          <div id="collapse11" class="collapse" aria-labelledby="heading" data-parent="#accordion">
-            <div class="card-body" style="text-align:left">
-              Uni-Vate Properties (Pty) Ltd is affiliated to the Estate Agents Board (EAAB) as well as the Institute of
-              Estate Agents South Africa (IEASA) and are obliged to comply with the Estate Agents Code of Conduct. We
-              are also proud members of Vacation Ownership Association South Africa (VOASA) and are obliged to comply
-              with their code too. This assures our clients of professional, ethical and fair service at all times. We
-              also have 25 years’ experience in the Timeshare industry in SA and to date the team have processed many
-              sales in the residential, share block and commercial arenas within South Africa and are currently involved
-              in the rental and management of 40 commercial and 15 residential properties. The Uni-Vate resale support
-              team consists of three highly qualified and experienced staff, who have thirteen years’ joint experience
-              in the timeshare resales industry.
+            <div class="card">
+              <div class="card-header" id="heading10" style="text-align:left">
+                <h5 class="mb-0">
+                  <button
+                    class="btn btn-link font-weight-bold color-b"
+                    data-toggle="collapse"
+                    data-target="#collapse10"
+                    aria-expanded="false"
+                    aria-controls="collapse10"
+                  >Can I exchange my timeshare for other destinations?</button>
+                </h5>
+              </div>
+              <div
+                id="collapse10"
+                class="collapse"
+                aria-labelledby="heading10"
+                data-parent="#accordion"
+              >
+                <div class="card-body" style="text-align:left">
+                  Most definitely! Once the week has been transferred to you, you have a choice of membership with RCI
+                  and/or DAE, two of the worlds largest exchange companies that will gladly exchange your week for you
+                  anywhere in the world with friendly and professional service. We will gladly put you in touch with them
+                  and the entire world will be available to you for holidays.
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-        <div class="card">
-          <div class="card-header" id="heading12" style="text-align:left">
-            <h5 class="mb-0">
-              <button
-                class="btn btn-link font-weight-bold color-b"
-                data-toggle="collapse"
-                data-target="#collapse12"
-                aria-expanded="false"
-                aria-controls="collapse12"
-              >Why would I buy a resale week rather than a new week?</button>
-            </h5>
-          </div>
-          <div
-            id="collapse12"
-            class="collapse"
-            aria-labelledby="heading12"
-            data-parent="#accordion"
-          >
-            <div class="card-body" style="text-align:left">
-              Both are equally viable. The difference is either the seller is the developer of a resort marketing
-              directly to the public and offering finance options on the purchase, or an individual who wants to sell
-              their week for a variety of reasons. Often when purchasing from an individual the price can be negotiated
-              as it is a cash sale with no financing options.
-              Its all about finding the resort and time of your choice that fits your pocket so that you can have many
-              years of happy holidays. Uni-Vate Properties are highly qualified in offering sound advice and assisting
-              you in what can be a tricky decision.
+            <div class="card">
+              <div class="card-header" id="heading11" style="text-align:left">
+                <h5 class="mb-0">
+                  <button
+                    class="btn btn-link font-weight-bold color-b"
+                    data-toggle="collapse"
+                    data-target="#collapse11"
+                    aria-expanded="false"
+                    aria-controls="collapse11"
+                  >There are so many agents and scam artists out there. Why Uni-Vate Properties?</button>
+                </h5>
+              </div>
+              <div
+                id="collapse11"
+                class="collapse"
+                aria-labelledby="heading"
+                data-parent="#accordion"
+              >
+                <div class="card-body" style="text-align:left">
+                  Uni-Vate Properties (Pty) Ltd is affiliated to the Estate Agents Board (EAAB) as well as the Institute of
+                  Estate Agents South Africa (IEASA) and are obliged to comply with the Estate Agents Code of Conduct. We
+                  are also proud members of Vacation Ownership Association South Africa (VOASA) and are obliged to comply
+                  with their code too. This assures our clients of professional, ethical and fair service at all times. We
+                  also have 25 years’ experience in the Timeshare industry in SA and to date the team have processed many
+                  sales in the residential, share block and commercial arenas within South Africa and are currently involved
+                  in the rental and management of 40 commercial and 15 residential properties. The Uni-Vate resale support
+                  team consists of three highly qualified and experienced staff, who have thirteen years’ joint experience
+                  in the timeshare resales industry.
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-        <div class="card">
-          <div class="card-header" id="heading13" style="text-align:left">
-            <h5 class="mb-0">
-              <button
-                class="btn btn-link font-weight-bold color-b"
-                data-toggle="collapse"
-                data-target="#collapse13"
-                aria-expanded="false"
-                aria-controls="collapse13"
-              >How is the price of the week determined?</button>
-            </h5>
-          </div>
-          <div
-            id="collapse13"
-            class="collapse"
-            aria-labelledby="heading13"
-            data-parent="#accordion"
-          >
-            <div class="card-body" style="text-align:left">
-              The selling price is always market related determined by five factors. Resort quality, season, sleeper
-              size of the unit, location of the resort and lastly, supply and demand.
-              Uni-Vate Properties offer transparent advice on all pricing ensuring that both buyer and seller receive
-              the best value for their money.
+            <div class="card">
+              <div class="card-header" id="heading12" style="text-align:left">
+                <h5 class="mb-0">
+                  <button
+                    class="btn btn-link font-weight-bold color-b"
+                    data-toggle="collapse"
+                    data-target="#collapse12"
+                    aria-expanded="false"
+                    aria-controls="collapse12"
+                  >Why would I buy a resale week rather than a new week?</button>
+                </h5>
+              </div>
+              <div
+                id="collapse12"
+                class="collapse"
+                aria-labelledby="heading12"
+                data-parent="#accordion"
+              >
+                <div class="card-body" style="text-align:left">
+                  Both are equally viable. The difference is either the seller is the developer of a resort marketing
+                  directly to the public and offering finance options on the purchase, or an individual who wants to sell
+                  their week for a variety of reasons. Often when purchasing from an individual the price can be negotiated
+                  as it is a cash sale with no financing options.
+                  Its all about finding the resort and time of your choice that fits your pocket so that you can have many
+                  years of happy holidays. Uni-Vate Properties are highly qualified in offering sound advice and assisting
+                  you in what can be a tricky decision.
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-        <div class="card">
-          <div class="card-header" id="heading14" style="text-align:left">
-            <h5 class="mb-0">
-              <button
-                class="btn btn-link font-weight-bold color-b"
-                data-toggle="collapse"
-                data-target="#collapse14"
-                aria-expanded="false"
-                aria-controls="collapse14"
-              >How are levies determined?</button>
-            </h5>
-          </div>
-          <div
-            id="collapse14"
-            class="collapse"
-            aria-labelledby="heading14"
-            data-parent="#accordion"
-          >
-            <div class="card-body" style="text-align:left">
-              Levies are determined by the share block Board of Directors who are accountable to the shareholders. The
-              managing agents of the resort are always available to assist with any queries that owners may have.
+            <div class="card">
+              <div class="card-header" id="heading13" style="text-align:left">
+                <h5 class="mb-0">
+                  <button
+                    class="btn btn-link font-weight-bold color-b"
+                    data-toggle="collapse"
+                    data-target="#collapse13"
+                    aria-expanded="false"
+                    aria-controls="collapse13"
+                  >How is the price of the week determined?</button>
+                </h5>
+              </div>
+              <div
+                id="collapse13"
+                class="collapse"
+                aria-labelledby="heading13"
+                data-parent="#accordion"
+              >
+                <div class="card-body" style="text-align:left">
+                  The selling price is always market related determined by five factors. Resort quality, season, sleeper
+                  size of the unit, location of the resort and lastly, supply and demand.
+                  Uni-Vate Properties offer transparent advice on all pricing ensuring that both buyer and seller receive
+                  the best value for their money.
+                </div>
+              </div>
+            </div>
+            <div class="card">
+              <div class="card-header" id="heading14" style="text-align:left">
+                <h5 class="mb-0">
+                  <button
+                    class="btn btn-link font-weight-bold color-b"
+                    data-toggle="collapse"
+                    data-target="#collapse14"
+                    aria-expanded="false"
+                    aria-controls="collapse14"
+                  >How are levies determined?</button>
+                </h5>
+              </div>
+              <div
+                id="collapse14"
+                class="collapse"
+                aria-labelledby="heading14"
+                data-parent="#accordion"
+              >
+                <div class="card-body" style="text-align:left">
+                  Levies are determined by the share block Board of Directors who are accountable to the shareholders. The
+                  managing agents of the resort are always available to assist with any queries that owners may have.
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
+    <br />
   </section>
 </template>
 <script>

src/components/timeshare/sell/sellPage.vue

   <div class="container">
     <div class="row">
       <div class="col-md-12">
-        <h1 class="my-4">
-          To Sell
-          <div style="float: right;" class="btn btn-blue btn-lg">
-            <router-link to class="colorBlack">Bulk Weeks upload</router-link>
+        <div class="col-sm-12">
+          <div class="about-img-box">
+            <img
+              src="img/sell.jpg"
+              alt="Timeshare To Sell"
+              class="img-fluid"
+              style="width:800px;height:400px;"
+            />
           </div>
-        </h1>
-        <hr />
+          <div class="sinse-box">
+            <h3 class="sinse-title">
+              Timeshare To Sell
+              <span></span>
+            </h3>
+          </div>
+        </div>
+        <br />
+        <div>
+          <div style="float: right;" class="btn btn-link color-b">
+            <router-link to="LinkToBeSelected">
+              Bulk Weeks Upload
+              <span class="ion-ios-arrow-forward" style="color:#60CBEB"></span>
+            </router-link>
+          </div>
+        </div>
+        <br />
+        <br />
         <p>* You need to be logged in to submit your listing. Please register and log in if you have not done so already.</p>
         <hr />
       </div>
     </div>
     <div v-for="(item, i) in sellItem" :key="i">{{item}}</div>
     <div class="row mb-4">
-      <div class="col-md-12">
+      <div class="container col-md-10">
         <form
           id="mainForm"
           method="POST"
           </div>
           <div class="form-group row">
             <div class="col-md-6">
-              <h5>Has your week been spacebanked for the current year?</h5>
+              <p>Has your week been spacebanked for the current year?</p>
               <div class="form-check">
                 <input
                   class="form-check-input"

src/components/user/loginPage.vue

             </div>
           </div>
           <div class="form-group row"></div>
-          <button @click="Login" class="btn btn-b-n" type="submit">Sign In</button>
+          <button @click="Login()" class="btn btn-b-n" type="submit">Sign In</button>
           <p v-if="user !== null">{{ user }}</p>
         </div>
       </form>
           </div>
           <div class="form-group row"></div>
           <div class="offset-md-3 col-md-5">
-            <button class="btn btn-b-n" type="submit">Get Help</button>
+            <button @click="SendMail()" class="btn btn-b-n" type="submit">Get Help</button>
           </div>
         </div>
       </form>
           password: this.password,
         })
         .then(response => console.log(response.data));
-      this.$router.push('/about/us');
+      this.$router.push('/');
     },
     togglePassword() {
       this.showPassword = true;
       this.showPassword = false;
       this.isPasswordShown = 'password';
     },
-    // authHeader() {
-    //   const user = JSON.parse(localStorage.getItem('user'));
+    authHeader() {
+      const user = JSON.parse(localStorage.getItem('user'));
 
-    //   if (user && user.token) {
-    //     return { Authoriztion: `Bearer ${user.token}` };
-    //   }
-    //   return {};
-    // },
+      if (user && user.token) {
+        return { Authoriztion: `Bearer ${user.token}` };
+      }
+      return {};
+    },
+    SendMail() {},
   },
 };
 </script>

src/components/user/registerAgencySection.vue

             <h5 style="margin-bottom: 1em">Agency Administrator</h5>
             <div class="row" style="text-align:left">
               <div class="col-md-6" style="margin-bottom: 1em">
-                <eva-icon name="person" fill="#60CBEB"></eva-icon>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="name"
-                  placeholder="Name"
-                  v-model="registerAgency.user.name"
-                />
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="person" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="name"
+                    placeholder="Name"
+                    v-model="registerAgency.user.name"
+                  />
+                </div>
               </div>
+
               <div class="col-md-6" style="margin-bottom: 1em">
-                <eva-icon name="person" fill="#60CBEB"></eva-icon>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="surname"
-                  placeholder="Surname"
-                  v-model="registerAgency.user.surname"
-                />
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="person" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="surname"
+                    placeholder="Surname"
+                    v-model="registerAgency.user.surname"
+                  />
+                </div>
               </div>
             </div>
 
             <div class="row" style="text-align:left">
-              <div class="col-md-8">
-                <eva-icon name="email" fill="#60CBEB"></eva-icon>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="email"
-                  placeholder="Email Address"
-                  v-model="registerAgency.user.email"
-                />
-                <div class="form-group row"></div>
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="email" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="email"
+                    placeholder="Email Address"
+                    v-model="registerAgency.user.email"
+                  />
+                </div>
               </div>
 
-              <div class="col-md-6" style="text-align:left">
-                <eva-icon name="smartphone" fill="#60CBEB"></eva-icon>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="cellnumber"
-                  placeholder="Contact Number"
-                  v-model="registerAgency.user.cellNumber"
-                />
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="smartphone" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="cellnumber"
+                    placeholder="Contact Number"
+                    v-model="registerAgency.user.cellNumber"
+                  />
+                </div>
               </div>
             </div>
-            <hr />
+
             <div class="row">
-              <div class="col-md-7" style="margin-bottom: 1em">
-                <eva-icon name="person" fill="#60CBEB"></eva-icon>
-                <input
-                  class="form-control"
-                  type="text"
-                  name="username"
-                  placeholder="Username"
-                  v-model="registerAgency.user.username"
-                />
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="person" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="username"
+                    placeholder="Username"
+                    v-model="registerAgency.user.username"
+                  />
+                </div>
               </div>
-              <div class="col-md-7" style="margin-bottom: 1em">
-                <eva-icon name="lock" fill="#60CBEB"></eva-icon>
-                <input
-                  class="form-control"
-                  :type="isPasswordShown"
-                  v-model="registerAgency.user.password"
-                  id="password"
-                  placeholder="Password"
-                  name="password"
-                  value
-                />
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="lock" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    :type="isPasswordShown"
+                    v-model="registerAgency.user.password"
+                    id="password"
+                    placeholder="Password"
+                    name="password"
+                    value
+                  />
+                </div>
               </div>
-              <div class="col-md-7" style="margin-bottom: 1em">
-                <eva-icon name="lock" fill="#60CBEB"></eva-icon>
-                <input
-                  class="form-control"
-                  :type="isPasswordShown"
-                  v-model="registerAgency.user.password"
-                  id="password"
-                  placeholder="Confirm Password"
-                  name="confirmpassword"
-                  value
-                />
-                <div>
-                  <eva-icon
-                    v-if="!showPassword"
-                    name="eye-off"
-                    fill="#60CBEB"
-                    @click="togglePassword()"
-                  ></eva-icon>
-                  <eva-icon v-else name="eye" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="lock" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    :type="isPasswordShown"
+                    v-model="registerAgency.user.password"
+                    id="password"
+                    placeholder="Confirm Password"
+                    name="confirmpassword"
+                    value
+                  />
+                </div>
+
+                <div class="input-group-append">
+                  <span class="input-group-text">
+                    <eva-icon
+                      v-if="!showPassword"
+                      name="eye-off"
+                      fill="#60CBEB"
+                      @click="togglePassword()"
+                    ></eva-icon>
+                    <eva-icon v-else name="eye" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
+                  </span>
                 </div>
               </div>
             </div>
           </div>
+
           <div class="form-group row"></div>
           <div class="row offset-md-1">
             <div class="col-md-2">

src/store/modules/timeshare/status.js

   getters: {},
   actions: {
     getStatusList({
-      commit
+      commit,
     }) {
-      axios.get('http://localhost:57260/api/status')
+      axios.get('/api/status')
         .then(result => commit('setStatusList', result.data))
         .catch(console.error);
     },

src/store/modules/timeshare/unitConfiguration.js

     getUnitConfigurationList({
       commit,
     }) {
-      axios.get('http://localhost:57260/api/unitConfiguration')
+      axios.get('/api/unitConfiguration')
         .then(result => commit('setUnitConfigurationList', result.data))
         .catch(console.error);
     },