Property Search & Sell updated

src/components/property/propertySearchPage.vue

@@ -1,32 +1,29 @@
 <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;
@@ -57,13 +54,28 @@
           </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
@@ -92,6 +104,21 @@
           </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/timeshare/sell/sellPage.vue

@@ -3,20 +3,40 @@
   <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 unitConfigurationList" :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"
@@ -50,7 +70,7 @@
               </div>
             </div>
             <div class="col-md-4" v-if="refAgent">
-              <label for="Name of Agency"></label>
+              <label>Name of Agency</label>
               <input
                 class="form-control"
                 placeholder="Name of Agency"
@@ -60,7 +80,7 @@
               />
             </div>
             <div class="col-md-4" v-if="refAgent">
-              <label for="Name of Agent"></label>
+              <label>Name of Agent</label>
               <input
                 class="form-control"
                 placeholder="Name of Agent"
@@ -73,7 +93,7 @@
 
           <div class="form-group row">
             <div class="col-md-6">
-              <label for="Resort Name"></label>
+              <label>Resort Name</label>
               <select class="form-control" id="resort" name="resort">
                 <option value>Please select Resort Name</option>
                 <option value></option>
@@ -81,20 +101,20 @@
               </select>
             </div>
             <div class="col-md-6">
-              <label for="* If other"></label>
+              <label>* If other</label>
               <input class="form-control" placeholder="* If other" type="text" name="other" value />
             </div>
           </div>
           <div class="form-group row">
             <div class="col-md-6">
-              <label for="Region"></label>
+              <label>Region</label>
               <select class="form-control" name="region" id="region">
                 <option value>Please select Region</option>
                 <option v-for="(region, r) in regions" :key="r">{{region.regionName}}</option>
               </select>
             </div>
             <div class="col-md-6">
-              <label for="Season"></label>
+              <label>Season</label>
               <select class="form-control" name="season">
                 <option value>Please select Season</option>
                 <option value="Peak">Peak</option>
@@ -111,17 +131,17 @@
           </div>
           <div class="form-group row">
             <div class="col-md-6">
-              <label for="Module"></label>
+              <label>Module</label>
               <input class="form-control" placeholder="Module" type="text" name="module" value />
             </div>
             <div class="col-md-6">
-              <label for="Week number"></label>
+              <label>Week Number</label>
               <input class="form-control" placeholder="Week Number" type="text" name="week" value />
             </div>
           </div>
           <div class="form-group row">
             <div class="col-md-6">
-              <label for="Bedrooms"></label>
+              <label>Bedrooms</label>
               <select class="form-control" name="bedrooms">
                 <option value>Please select Bedrooms</option>
                 <option value="Studio">Studio</option>
@@ -134,7 +154,7 @@
               </select>
             </div>
             <div class="col-md-6">
-              <label for="Sleeps maximum"></label>
+              <label>Sleeps maximum</label>
               <select class="form-control" name="sleeps">
                 <option value>Please select Sleeps maximum</option>
                 <option value="2">2</option>
@@ -148,17 +168,17 @@
           </div>
           <div class="form-group row">
             <div class="col-md-6">
-              <label for="Unit number"></label>
+              <label>Unit number</label>
               <input class="form-control" placeholder="Unit Number" type="text" name="unit" value />
             </div>
             <div class="col-md-6">
-              <label for="Owner"></label>
+              <label>Owner</label>
               <input class="form-control" placeholder="Owner" type="text" name="owner" value />
             </div>
           </div>
           <div class="form-group row">
             <div class="col-md-6">
-              <label for="Levy"></label>
+              <label>Levy</label>
               <input
                 class="form-control"
                 placeholder="Levy"
@@ -171,7 +191,7 @@
           </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"