Theme Update

package-lock.json

@@ -1809,14 +1809,12 @@
     "ajv-errors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
-      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true
+      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ=="
     },
     "ajv-keywords": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.4.1.tgz",
-      "integrity": "sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==",
-      "dev": true
+      "integrity": "sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ=="
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -1862,7 +1860,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
       "requires": {
         "color-convert": "^1.9.0"
       }
@@ -1894,6 +1891,16 @@
         }
       }
     },
+    "aos": {
+      "version": "3.0.0-beta.6",
+      "resolved": "https://registry.npmjs.org/aos/-/aos-3.0.0-beta.6.tgz",
+      "integrity": "sha512-VLWrpq8bfAWcetynVHMMrqdC+89Qq/Ym6UBJbHB4crIwp3RR8uq1dNGgsFzoDl03S43rlVMK+na3r5+oUCZsYw==",
+      "requires": {
+        "classlist-polyfill": "^1.2.0",
+        "lodash.debounce": "^4.0.8",
+        "lodash.throttle": "^4.1.1"
+      }
+    },
     "aproba": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
@@ -2170,7 +2177,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
       "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=",
-      "dev": true,
       "requires": {
         "chalk": "^1.1.3",
         "esutils": "^2.0.2",
@@ -2180,20 +2186,17 @@
         "ansi-regex": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
         },
         "ansi-styles": {
           "version": "2.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
-          "dev": true
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
         },
         "chalk": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-          "dev": true,
           "requires": {
             "ansi-styles": "^2.2.1",
             "escape-string-regexp": "^1.0.2",
@@ -2205,14 +2208,12 @@
         "js-tokens": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-          "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
-          "dev": true
+          "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
         },
         "strip-ansi": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-          "dev": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -2220,8 +2221,7 @@
         "supports-color": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
-          "dev": true
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
         }
       }
     },
@@ -2792,7 +2792,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "requires": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -2891,6 +2890,11 @@
         }
       }
     },
+    "classlist-polyfill": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
+      "integrity": "sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4="
+    },
     "clean-css": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
@@ -3102,7 +3106,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
@@ -3110,8 +3113,7 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "color-string": {
       "version": "1.5.3",
@@ -3580,7 +3582,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-1.0.1.tgz",
       "integrity": "sha512-+ZHAZm/yqvJ2kDtPne3uX0C+Vr3Zn5jFn2N4HywtS5ujwvsVkyg0VArEXpl3BgczDA8anieki1FIzhchX4yrDw==",
-      "dev": true,
       "requires": {
         "babel-code-frame": "^6.26.0",
         "css-selector-tokenizer": "^0.7.0",
@@ -3600,7 +3601,6 @@
           "version": "6.0.23",
           "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
           "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-          "dev": true,
           "requires": {
             "chalk": "^2.4.1",
             "source-map": "^0.6.1",
@@ -3610,8 +3610,7 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         }
       }
     },
@@ -3637,7 +3636,6 @@
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.1.tgz",
       "integrity": "sha512-xYL0AMZJ4gFzJQsHUKa5jiWWi2vH77WVNg7JYRyewwj6oPh4yb/y6Y9ZCw9dsj/9UauMhtuxR+ogQd//EdEVNA==",
-      "dev": true,
       "requires": {
         "cssesc": "^0.1.0",
         "fastparse": "^1.1.1",
@@ -3647,20 +3645,17 @@
         "cssesc": {
           "version": "0.1.0",
           "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz",
-          "integrity": "sha1-yBSQPkViM3GgR3tAEJqq++6t27Q=",
-          "dev": true
+          "integrity": "sha1-yBSQPkViM3GgR3tAEJqq++6t27Q="
         },
         "jsesc": {
           "version": "0.5.0",
           "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
-          "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
-          "dev": true
+          "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0="
         },
         "regexpu-core": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-1.0.0.tgz",
           "integrity": "sha1-hqdj9Y7k18L2sQLkdkBQ3n7ZDGs=",
-          "dev": true,
           "requires": {
             "regenerate": "^1.2.1",
             "regjsgen": "^0.2.0",
@@ -3670,14 +3665,12 @@
         "regjsgen": {
           "version": "0.2.0",
           "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
-          "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=",
-          "dev": true
+          "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc="
         },
         "regjsparser": {
           "version": "0.1.5",
           "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz",
           "integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=",
-          "dev": true,
           "requires": {
             "jsesc": "~0.5.0"
           }
@@ -5025,8 +5018,7 @@
     "esutils": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
-      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
-      "dev": true
+      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs="
     },
     "etag": {
       "version": "1.8.1",
@@ -5334,8 +5326,7 @@
     "fastparse": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
-      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
-      "dev": true
+      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ=="
     },
     "faye-websocket": {
       "version": "0.10.0",
@@ -6444,8 +6435,7 @@
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
     },
     "has-symbols": {
       "version": "1.0.1",
@@ -6782,14 +6772,12 @@
     "icss-replace-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
-      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=",
-      "dev": true
+      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0="
     },
     "icss-utils": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-2.1.0.tgz",
       "integrity": "sha1-g/Cg7DeL8yRheLbCrZE28TWxyWI=",
-      "dev": true,
       "requires": {
         "postcss": "^6.0.1"
       },
@@ -6798,7 +6786,6 @@
           "version": "6.0.23",
           "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
           "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-          "dev": true,
           "requires": {
             "chalk": "^2.4.1",
             "source-map": "^0.6.1",
@@ -6808,8 +6795,7 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         }
       }
     },
@@ -7658,6 +7644,11 @@
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
       "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
     },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+    },
     "lodash.defaultsdeep": {
       "version": "4.6.1",
       "resolved": "https://registry.npmjs.org/lodash.defaultsdeep/-/lodash.defaultsdeep-4.6.1.tgz",
@@ -7682,6 +7673,11 @@
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
       "dev": true
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "lodash.transform": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.transform/-/lodash.transform-4.6.0.tgz",
@@ -8772,6 +8768,14 @@
         "os-tmpdir": "^1.0.0"
       }
     },
+    "owl.carousel": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/owl.carousel/-/owl.carousel-2.3.4.tgz",
+      "integrity": "sha512-JaDss9+feAvEW8KZppPSpllfposEzQiW+Ytt/Xm5t/3CTJ7YVmkh6RkWixoA2yXk2boIwedYxOvrrppIGzru9A==",
+      "requires": {
+        "jquery": ">=1.8.3"
+      }
+    },
     "p-defer": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
@@ -9348,7 +9352,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.1.tgz",
       "integrity": "sha512-6jt9XZwUhwmRUhb/CkyJY020PYaPJsCyt3UjbaWo6XEbH/94Hmv6MP7fG2C5NDU/BcHzyGYxNtHvM+LTf9HrYw==",
-      "dev": true,
       "requires": {
         "postcss": "^6.0.1"
       },
@@ -9357,7 +9360,6 @@
           "version": "6.0.23",
           "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
           "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-          "dev": true,
           "requires": {
             "chalk": "^2.4.1",
             "source-map": "^0.6.1",
@@ -9367,8 +9369,7 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         }
       }
     },
@@ -9376,7 +9377,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz",
       "integrity": "sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=",
-      "dev": true,
       "requires": {
         "css-selector-tokenizer": "^0.7.0",
         "postcss": "^6.0.1"
@@ -9386,7 +9386,6 @@
           "version": "6.0.23",
           "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
           "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-          "dev": true,
           "requires": {
             "chalk": "^2.4.1",
             "source-map": "^0.6.1",
@@ -9396,8 +9395,7 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         }
       }
     },
@@ -9405,7 +9403,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz",
       "integrity": "sha1-1upkmUx5+XtipytCb75gVqGUu5A=",
-      "dev": true,
       "requires": {
         "css-selector-tokenizer": "^0.7.0",
         "postcss": "^6.0.1"
@@ -9415,7 +9412,6 @@
           "version": "6.0.23",
           "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
           "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-          "dev": true,
           "requires": {
             "chalk": "^2.4.1",
             "source-map": "^0.6.1",
@@ -9425,8 +9421,7 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         }
       }
     },
@@ -9434,7 +9429,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz",
       "integrity": "sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=",
-      "dev": true,
       "requires": {
         "icss-replace-symbols": "^1.1.0",
         "postcss": "^6.0.1"
@@ -9444,7 +9438,6 @@
           "version": "6.0.23",
           "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
           "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-          "dev": true,
           "requires": {
             "chalk": "^2.4.1",
             "source-map": "^0.6.1",
@@ -9454,8 +9447,7 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         }
       }
     },
@@ -9630,8 +9622,7 @@
     "postcss-value-parser": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-      "dev": true
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
     },
     "prelude-ls": {
       "version": "1.1.2",
@@ -9989,8 +9980,7 @@
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
-      "integrity": "sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==",
-      "dev": true
+      "integrity": "sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg=="
     },
     "regenerate-unicode-properties": {
       "version": "8.1.0",
@@ -10637,7 +10627,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
       "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
-      "dev": true,
       "requires": {
         "ajv": "^6.1.0",
         "ajv-errors": "^1.0.0",
@@ -11084,8 +11073,7 @@
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
-      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==",
-      "dev": true
+      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw=="
     },
     "source-map": {
       "version": "0.5.7",
@@ -11441,6 +11429,15 @@
       "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
       "dev": true
     },
+    "style-loader": {
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.23.1.tgz",
+      "integrity": "sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg==",
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "schema-utils": "^1.0.0"
+      }
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -11479,7 +11476,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "requires": {
         "has-flag": "^3.0.0"
       }
@@ -12190,6 +12186,11 @@
       "integrity": "sha512-TigfiZUs7SN3Z6uxKilqJUtYxte8vp0F4QxabCli6hkKPqU97JzAZc3P7AL6omkRAd2DMI26fOrIGjuALTvXww==",
       "dev": true
     },
+    "vue-disable-autocomplete": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/vue-disable-autocomplete/-/vue-disable-autocomplete-0.0.4.tgz",
+      "integrity": "sha512-NtEMoepVfFScR6f7d37g3tQh3F5VU75ai+5+GHoQ0pt3ftrLUeOWXi0ozQDExTwPFgLK3Yk86NeyokSZMlXvFg=="
+    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",
@@ -12269,6 +12270,29 @@
         "vue-style-loader": "^4.1.0"
       }
     },
+    "vue-owl-carousel": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/vue-owl-carousel/-/vue-owl-carousel-2.0.3.tgz",
+      "integrity": "sha512-TRl6pnbL0HqlebOpEzbGbXL4KxJwlDGxAWeCREjNumvsjB5MXg875y+fkko/M3ML1nxJXIRHw1XWmXgxaQbang==",
+      "requires": {
+        "css-loader": "^1.0.0",
+        "file-loader": "^2.0.0",
+        "jquery": "^3.3.1",
+        "owl.carousel": "^2.3.4",
+        "style-loader": "^0.23.0"
+      },
+      "dependencies": {
+        "file-loader": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-2.0.0.tgz",
+          "integrity": "sha512-YCsBfd1ZGCyonOKLxPiKPdu+8ld9HAaMEvJewzz+b2eTF7uL5Zm/HdBF6FjCrpCMRq25Mi0U1gl4pwn2TlH7hQ==",
+          "requires": {
+            "loader-utils": "^1.0.2",
+            "schema-utils": "^1.0.0"
+          }
+        }
+      }
+    },
     "vue-router": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.5.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@nuxtjs/axios": "^5.9.3",
     "animate.css": "^3.7.2",
+    "aos": "^3.0.0-beta.6",
     "axios": "^0.19.2",
     "core-js": "^2.6.11",
     "datatables.net": "^1.10.20",
@@ -25,9 +26,11 @@
     "v-file-upload": "^3.1.7",
     "vue": "^2.6.11",
     "vue-carousel": "^0.18.0",
+    "vue-disable-autocomplete": "0.0.4",
     "vue-eva-icons": "^1.1.1",
     "vue-js-modal": "^1.3.33",
     "vue-json-excel": "^0.2.98",
+    "vue-owl-carousel": "^2.0.3",
     "vue-router": "^3.1.5",
     "vue-trix": "^1.1.7",
     "vue2-editor": "^2.10.2",

public/js/main.js

@@ -1,162 +1,276 @@
-(function ($) {
+/* eslint-disable */
+(function($) {
   // Preloader
-  $(window).on('load', () => {
-    if ($('#preloader')) {
-      $('#preloader').fadeOut('slow', function () {
+  $(window).on("load", () => {
+    if ($("#preloader")) {
+      $("#preloader").fadeOut("slow", function() {
         $(this).remove();
       });
     }
   });
 
   // Back to top button
-  $(window).scroll(function () {
+  $(window).scroll(function() {
     if ($(this).scrollTop() > 100) {
-      $('.back-to-top').fadeIn('slow');
+      $(".back-to-top").fadeIn("slow");
     } else {
-      $('.back-to-top').fadeOut('slow');
+      $(".back-to-top").fadeOut("slow");
     }
   });
-  $('.back-to-top').click(() => {
-    $('html, body').animate({
-      scrollTop: 0,
-    }, 1500, 'easeInOutExpo');
+  $(".back-to-top").click(() => {
+    $("html, body").animate(
+      {
+        scrollTop: 0
+      },
+      1500,
+      "easeInOutExpo"
+    );
     return false;
   });
 
-  const nav = $('nav');
+  const nav = $("nav");
   const navHeight = nav.outerHeight();
 
   /* --/ ScrollReveal /Easy scroll animations for web and mobile browsers /--*/
   window.sr = ScrollReveal();
-  sr.reveal('.foo', {
+  sr.reveal(".foo", {
     duration: 1000,
-    delay: 15,
+    delay: 15
+  });
+
+  // Smooth scroll for the menu and links with .scrollto classes
+  $(".nav-menu a, #mobile-nav a, .scrollto").on("click", function() {
+    if (
+      location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") &&
+      location.hostname == this.hostname
+    ) {
+      var target = $(this.hash);
+      if (target.length) {
+        var top_space = 0;
+
+        if ($("#header").length) {
+          top_space = $("#header").outerHeight();
+
+          if (!$("#header").hasClass("header-fixed")) {
+            top_space = top_space - 20;
+          }
+        }
+
+        $("html, body").animate(
+          {
+            scrollTop: target.offset().top - top_space
+          },
+          1500,
+          "easeInOutExpo"
+        );
+
+        if ($(this).parents(".nav-menu").length) {
+          $(".nav-menu .menu-active").removeClass("menu-active");
+          $(this)
+            .closest("li")
+            .addClass("menu-active");
+        }
+
+        if ($("body").hasClass("mobile-nav-active")) {
+          $("body").removeClass("mobile-nav-active");
+          $("#mobile-nav-toggle i").toggleClass("fa-times fa-bars");
+          $("#mobile-body-overly").fadeOut();
+        }
+        return false;
+      }
+    }
   });
 
+  // Mobile Navigation
+  if ($("#nav-menu-container").length) {
+    var $mobile_nav = $("#nav-menu-container")
+      .clone()
+      .prop({
+        id: "mobile-nav"
+      });
+    $mobile_nav.find("> ul").attr({
+      class: "",
+      id: ""
+    });
+    $("body").append($mobile_nav);
+    $("body").prepend(
+      '<button type="button" id="mobile-nav-toggle"><i class="fa fa-bars"></i></button>'
+    );
+    $("body").append('<div id="mobile-body-overly"></div>');
+    $("#mobile-nav")
+      .find(".menu-has-children")
+      .prepend('<i class="fa fa-chevron-down"></i>');
+
+    $(document).on("click", ".menu-has-children i", function(e) {
+      $(this)
+        .next()
+        .toggleClass("menu-item-active");
+      $(this)
+        .nextAll("ul")
+        .eq(0)
+        .slideToggle();
+      $(this).toggleClass("fa-chevron-left fa-chevron-down");
+    });
+
+    $(document).on("click", "#mobile-nav-toggle", function(e) {
+      $("body").toggleClass("mobile-nav-active");
+      $("#mobile-nav-toggle i").toggleClass("fa-times fa-bars");
+      $("#mobile-body-overly").toggle();
+    });
+
+    $(document).click(function(e) {
+      var container = $("#mobile-nav, #mobile-nav-toggle");
+      if (!container.is(e.target) && container.has(e.target).length === 0) {
+        if ($("body").hasClass("mobile-nav-active")) {
+          $("body").removeClass("mobile-nav-active");
+          $("#mobile-nav-toggle i").toggleClass("fa-times fa-bars");
+          $("#mobile-body-overly").fadeOut();
+        }
+      }
+    });
+  } else if ($("#mobile-nav, #mobile-nav-toggle").length) {
+    $("#mobile-nav, #mobile-nav-toggle").hide();
+  }
+
   /* --/ Carousel owl /--*/
-  $('#carousel').owlCarousel({
+  $("#carousel").owlCarousel({
     loop: true,
     margin: -1,
     items: 1,
     nav: true,
-    navText: ['<i class="ion-ios-arrow-back" aria-hidden="true"></i>',
-      '<i class="ion-ios-arrow-forward" aria-hidden="true"></i>',
+    navText: [
+      '<i class="ion-ios-arrow-back" aria-hidden="true"></i>',
+      '<i class="ion-ios-arrow-forward" aria-hidden="true"></i>'
     ],
     autoplay: true,
     autoplayTimeout: 3000,
-    autoplayHoverPause: true,
+    autoplayHoverPause: true
   });
 
   /* --/ Animate Carousel /--*/
-  $('.intro-carousel').on('translate.owl.carousel', () => {
-    $('.intro-content .intro-title').removeClass('zoomIn animated').hide();
-    $('.intro-content .intro-price').removeClass('fadeInUp animated').hide();
-    $('.intro-content .intro-title-top, .intro-content .spacial').removeClass(
-      'fadeIn animated',
-    )
+  $(".intro-carousel").on("translate.owl.carousel", () => {
+    $(".intro-content .intro-title")
+      .removeClass("zoomIn animated")
+      .hide();
+    $(".intro-content .intro-price")
+      .removeClass("fadeInUp animated")
+      .hide();
+    $(".intro-content .intro-title-top, .intro-content .spacial")
+      .removeClass("fadeIn animated")
       .hide();
   });
 
-  $('.intro-carousel').on('translated.owl.carousel', () => {
-    $('.intro-content .intro-title').addClass('zoomIn animated').show();
-    $('.intro-content .intro-price').addClass('fadeInUp animated').show();
-    $('.intro-content .intro-title-top, .intro-content .spacial').addClass('fadeIn animated')
+  $(".intro-carousel").on("translated.owl.carousel", () => {
+    $(".intro-content .intro-title")
+      .addClass("zoomIn animated")
+      .show();
+    $(".intro-content .intro-price")
+      .addClass("fadeInUp animated")
+      .show();
+    $(".intro-content .intro-title-top, .intro-content .spacial")
+      .addClass("fadeIn animated")
       .show();
   });
 
   /* --/ Navbar Collapse /--*/
-  $('.navbar-toggle-box-collapse').on('click', () => {
-    $('body').removeClass('box-collapse-closed').addClass('box-collapse-open');
+  $(".navbar-toggle-box-collapse").on("click", () => {
+    $("body")
+      .removeClass("box-collapse-closed")
+      .addClass("box-collapse-open");
   });
-  $('.close-box-collapse, .click-closed').on('click', () => {
-    $('body').removeClass('box-collapse-open').addClass('box-collapse-closed');
-    $('.menu-list ul').slideUp(700);
+  $(".close-box-collapse, .click-closed").on("click", () => {
+    $("body")
+      .removeClass("box-collapse-open")
+      .addClass("box-collapse-closed");
+    $(".menu-list ul").slideUp(700);
   });
 
   /* --/ Navbar Menu Reduce /--*/
-  $(window).trigger('scroll');
-  $(window).bind('scroll', () => {
+  $(window).trigger("scroll");
+  $(window).bind("scroll", () => {
     const pixels = 50;
     const top = 1200;
     if ($(window).scrollTop() > pixels) {
-      $('.navbar-default').addClass('navbar-reduce');
-      $('.navbar-default').removeClass('navbar-trans');
+      $(".navbar-default").addClass("navbar-reduce");
+      $(".navbar-default").removeClass("navbar-trans");
     } else {
-      $('.navbar-default').addClass('navbar-trans');
-      $('.navbar-default').removeClass('navbar-reduce');
+      $(".navbar-default").addClass("navbar-trans");
+      $(".navbar-default").removeClass("navbar-reduce");
     }
     if ($(window).scrollTop() > top) {
-      $('.scrolltop-mf').fadeIn(1000, 'easeInOutExpo');
+      $(".scrolltop-mf").fadeIn(1000, "easeInOutExpo");
     } else {
-      $('.scrolltop-mf').fadeOut(1000, 'easeInOutExpo');
+      $(".scrolltop-mf").fadeOut(1000, "easeInOutExpo");
     }
   });
 
   /* --/ Property owl /--*/
-  $('#property-carousel').owlCarousel({
+  $("#property-carousel").owlCarousel({
     loop: true,
     margin: 30,
     responsive: {
       0: {
-        items: 1,
+        items: 1
       },
       769: {
-        items: 2,
+        items: 2
       },
       992: {
-        items: 3,
-      },
-    },
+        items: 3
+      }
+    }
   });
 
   /* --/ Property owl owl /--*/
-  $('#property-single-carousel').owlCarousel({
+  $("#property-single-carousel").owlCarousel({
     loop: true,
     margin: 0,
     nav: true,
-    navText: ['<i class="ion-ios-arrow-back" aria-hidden="true"></i>',
-      '<i class="ion-ios-arrow-forward" aria-hidden="true"></i>',
+    navText: [
+      '<i class="ion-ios-arrow-back" aria-hidden="true"></i>',
+      '<i class="ion-ios-arrow-forward" aria-hidden="true"></i>'
     ],
     responsive: {
       0: {
-        items: 1,
-      },
-    },
+        items: 1
+      }
+    }
   });
 
   /* --/ News owl /--*/
-  $('#new-carousel').owlCarousel({
+  $("#new-carousel").owlCarousel({
     loop: true,
     margin: 30,
     responsive: {
       0: {
-        items: 1,
+        items: 1
       },
       769: {
-        items: 2,
+        items: 2
       },
       992: {
-        items: 3,
-      },
-    },
+        items: 3
+      }
+    }
   });
 
   /* --/ Testimonials owl /--*/
-  $('#testimonial-carousel').owlCarousel({
+  $("#testimonial-carousel").owlCarousel({
     margin: 0,
     autoplay: true,
     nav: true,
-    animateOut: 'fadeOut',
-    animateIn: 'fadeInUp',
-    navText: ['<i class="ion-ios-arrow-back" aria-hidden="true"></i>',
-      '<i class="ion-ios-arrow-forward" aria-hidden="true"></i>',
+    animateOut: "fadeOut",
+    animateIn: "fadeInUp",
+    navText: [
+      '<i class="ion-ios-arrow-back" aria-hidden="true"></i>',
+      '<i class="ion-ios-arrow-forward" aria-hidden="true"></i>'
     ],
     autoplayTimeout: 4000,
     autoplayHoverPause: true,
     responsive: {
       0: {
-        items: 1,
-      },
-    },
+        items: 1
+      }
+    }
   });
-}(jQuery));
+})(jQuery);

public/lib/wow/wow.js

@@ -0,0 +1,542 @@
+/*
+* WOW wow.js - v1.3.0 - 2016-10-04
+* https://wowjs.uk
+* Copyright (c) 2016 Thomas Grainger; Licensed MIT
+*/
+
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(['module', 'exports'], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(module, exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod, mod.exports);
+    global.WOW = mod.exports;
+  }
+})(this, function (module, exports) {
+  'use strict';
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var _class, _temp;
+
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
+  var _createClass = function () {
+    function defineProperties(target, props) {
+      for (var i = 0; i < props.length; i++) {
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+      }
+    }
+
+    return function (Constructor, protoProps, staticProps) {
+      if (protoProps) defineProperties(Constructor.prototype, protoProps);
+      if (staticProps) defineProperties(Constructor, staticProps);
+      return Constructor;
+    };
+  }();
+
+  function isIn(needle, haystack) {
+    return haystack.indexOf(needle) >= 0;
+  }
+
+  function extend(custom, defaults) {
+    for (var key in defaults) {
+      if (custom[key] == null) {
+        var value = defaults[key];
+        custom[key] = value;
+      }
+    }
+    return custom;
+  }
+
+  function isMobile(agent) {
+    return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent)
+    );
+  }
+
+  function createEvent(event) {
+    var bubble = arguments.length <= 1 || arguments[1] === undefined ? false : arguments[1];
+    var cancel = arguments.length <= 2 || arguments[2] === undefined ? false : arguments[2];
+    var detail = arguments.length <= 3 || arguments[3] === undefined ? null : arguments[3];
+
+    var customEvent = void 0;
+    if (document.createEvent != null) {
+      // W3C DOM
+      customEvent = document.createEvent('CustomEvent');
+      customEvent.initCustomEvent(event, bubble, cancel, detail);
+    } else if (document.createEventObject != null) {
+      // IE DOM < 9
+      customEvent = document.createEventObject();
+      customEvent.eventType = event;
+    } else {
+      customEvent.eventName = event;
+    }
+
+    return customEvent;
+  }
+
+  function emitEvent(elem, event) {
+    if (elem.dispatchEvent != null) {
+      // W3C DOM
+      elem.dispatchEvent(event);
+    } else if (event in (elem != null)) {
+      elem[event]();
+    } else if ('on' + event in (elem != null)) {
+      elem['on' + event]();
+    }
+  }
+
+  function addEvent(elem, event, fn) {
+    if (elem.addEventListener != null) {
+      // W3C DOM
+      elem.addEventListener(event, fn, false);
+    } else if (elem.attachEvent != null) {
+      // IE DOM
+      elem.attachEvent('on' + event, fn);
+    } else {
+      // fallback
+      elem[event] = fn;
+    }
+  }
+
+  function removeEvent(elem, event, fn) {
+    if (elem.removeEventListener != null) {
+      // W3C DOM
+      elem.removeEventListener(event, fn, false);
+    } else if (elem.detachEvent != null) {
+      // IE DOM
+      elem.detachEvent('on' + event, fn);
+    } else {
+      // fallback
+      delete elem[event];
+    }
+  }
+
+  function getInnerHeight() {
+    if ('innerHeight' in window) {
+      return window.innerHeight;
+    }
+
+    return document.documentElement.clientHeight;
+  }
+
+  // Minimalistic WeakMap shim, just in case.
+  var WeakMap = window.WeakMap || window.MozWeakMap || function () {
+    function WeakMap() {
+      _classCallCheck(this, WeakMap);
+
+      this.keys = [];
+      this.values = [];
+    }
+
+    _createClass(WeakMap, [{
+      key: 'get',
+      value: function get(key) {
+        for (var i = 0; i < this.keys.length; i++) {
+          var item = this.keys[i];
+          if (item === key) {
+            return this.values[i];
+          }
+        }
+        return undefined;
+      }
+    }, {
+      key: 'set',
+      value: function set(key, value) {
+        for (var i = 0; i < this.keys.length; i++) {
+          var item = this.keys[i];
+          if (item === key) {
+            this.values[i] = value;
+            return this;
+          }
+        }
+        this.keys.push(key);
+        this.values.push(value);
+        return this;
+      }
+    }]);
+
+    return WeakMap;
+  }();
+
+  // Dummy MutationObserver, to avoid raising exceptions.
+  var MutationObserver = window.MutationObserver || window.WebkitMutationObserver || window.MozMutationObserver || (_temp = _class = function () {
+    function MutationObserver() {
+      _classCallCheck(this, MutationObserver);
+
+      if (typeof console !== 'undefined' && console !== null) {
+        console.warn('MutationObserver is not supported by your browser.');
+        console.warn('WOW.js cannot detect dom mutations, please call .sync() after loading new content.');
+      }
+    }
+
+    _createClass(MutationObserver, [{
+      key: 'observe',
+      value: function observe() {}
+    }]);
+
+    return MutationObserver;
+  }(), _class.notSupported = true, _temp);
+
+  // getComputedStyle shim, from http://stackoverflow.com/a/21797294
+  var getComputedStyle = window.getComputedStyle || function getComputedStyle(el) {
+    var getComputedStyleRX = /(\-([a-z]){1})/g;
+    return {
+      getPropertyValue: function getPropertyValue(prop) {
+        if (prop === 'float') {
+          prop = 'styleFloat';
+        }
+        if (getComputedStyleRX.test(prop)) {
+          prop.replace(getComputedStyleRX, function (_, _char) {
+            return _char.toUpperCase();
+          });
+        }
+        var currentStyle = el.currentStyle;
+
+        return (currentStyle != null ? currentStyle[prop] : void 0) || null;
+      }
+    };
+  };
+
+  var WOW = function () {
+    function WOW() {
+      var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+
+      _classCallCheck(this, WOW);
+
+      this.defaults = {
+        boxClass: 'wow',
+        animateClass: 'animated',
+        offset: 0,
+        mobile: true,
+        live: true,
+        callback: null,
+        scrollContainer: null,
+        resetAnimation: true
+      };
+
+      this.animate = function animateFactory() {
+        if ('requestAnimationFrame' in window) {
+          return function (callback) {
+            return window.requestAnimationFrame(callback);
+          };
+        }
+        return function (callback) {
+          return callback();
+        };
+      }();
+
+      this.vendors = ['moz', 'webkit'];
+
+      this.start = this.start.bind(this);
+      this.resetAnimation = this.resetAnimation.bind(this);
+      this.scrollHandler = this.scrollHandler.bind(this);
+      this.scrollCallback = this.scrollCallback.bind(this);
+      this.scrolled = true;
+      this.config = extend(options, this.defaults);
+      if (options.scrollContainer != null) {
+        this.config.scrollContainer = document.querySelector(options.scrollContainer);
+      }
+      // Map of elements to animation names:
+      this.animationNameCache = new WeakMap();
+      this.wowEvent = createEvent(this.config.boxClass);
+    }
+
+    _createClass(WOW, [{
+      key: 'init',
+      value: function init() {
+        this.element = window.document.documentElement;
+        if (isIn(document.readyState, ['interactive', 'complete'])) {
+          this.start();
+        } else {
+          addEvent(document, 'DOMContentLoaded', this.start);
+        }
+        this.finished = [];
+      }
+    }, {
+      key: 'start',
+      value: function start() {
+        var _this = this;
+
+        this.stopped = false;
+        this.boxes = [].slice.call(this.element.querySelectorAll('.' + this.config.boxClass));
+        this.all = this.boxes.slice(0);
+        if (this.boxes.length) {
+          if (this.disabled()) {
+            this.resetStyle();
+          } else {
+            for (var i = 0; i < this.boxes.length; i++) {
+              var box = this.boxes[i];
+              this.applyStyle(box, true);
+            }
+          }
+        }
+        if (!this.disabled()) {
+          addEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler);
+          addEvent(window, 'resize', this.scrollHandler);
+          this.interval = setInterval(this.scrollCallback, 50);
+        }
+        if (this.config.live) {
+          var mut = new MutationObserver(function (records) {
+            for (var j = 0; j < records.length; j++) {
+              var record = records[j];
+              for (var k = 0; k < record.addedNodes.length; k++) {
+                var node = record.addedNodes[k];
+                _this.doSync(node);
+              }
+            }
+            return undefined;
+          });
+          mut.observe(document.body, {
+            childList: true,
+            subtree: true
+          });
+        }
+      }
+    }, {
+      key: 'stop',
+      value: function stop() {
+        this.stopped = true;
+        removeEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler);
+        removeEvent(window, 'resize', this.scrollHandler);
+        if (this.interval != null) {
+          clearInterval(this.interval);
+        }
+      }
+    }, {
+      key: 'sync',
+      value: function sync() {
+        if (MutationObserver.notSupported) {
+          this.doSync(this.element);
+        }
+      }
+    }, {
+      key: 'doSync',
+      value: function doSync(element) {
+        if (typeof element === 'undefined' || element === null) {
+          element = this.element;
+        }
+        if (element.nodeType !== 1) {
+          return;
+        }
+        element = element.parentNode || element;
+        var iterable = element.querySelectorAll('.' + this.config.boxClass);
+        for (var i = 0; i < iterable.length; i++) {
+          var box = iterable[i];
+          if (!isIn(box, this.all)) {
+            this.boxes.push(box);
+            this.all.push(box);
+            if (this.stopped || this.disabled()) {
+              this.resetStyle();
+            } else {
+              this.applyStyle(box, true);
+            }
+            this.scrolled = true;
+          }
+        }
+      }
+    }, {
+      key: 'show',
+      value: function show(box) {
+        this.applyStyle(box);
+        box.className = box.className + ' ' + this.config.animateClass;
+        if (this.config.callback != null) {
+          this.config.callback(box);
+        }
+        emitEvent(box, this.wowEvent);
+
+        if (this.config.resetAnimation) {
+          addEvent(box, 'animationend', this.resetAnimation);
+          addEvent(box, 'oanimationend', this.resetAnimation);
+          addEvent(box, 'webkitAnimationEnd', this.resetAnimation);
+          addEvent(box, 'MSAnimationEnd', this.resetAnimation);
+        }
+
+        return box;
+      }
+    }, {
+      key: 'applyStyle',
+      value: function applyStyle(box, hidden) {
+        var _this2 = this;
+
+        var duration = box.getAttribute('data-wow-duration');
+        var delay = box.getAttribute('data-wow-delay');
+        var iteration = box.getAttribute('data-wow-iteration');
+
+        return this.animate(function () {
+          return _this2.customStyle(box, hidden, duration, delay, iteration);
+        });
+      }
+    }, {
+      key: 'resetStyle',
+      value: function resetStyle() {
+        for (var i = 0; i < this.boxes.length; i++) {
+          var box = this.boxes[i];
+          box.style.visibility = 'visible';
+        }
+        return undefined;
+      }
+    }, {
+      key: 'resetAnimation',
+      value: function resetAnimation(event) {
+        if (event.type.toLowerCase().indexOf('animationend') >= 0) {
+          var target = event.target || event.srcElement;
+          target.className = target.className.replace(this.config.animateClass, '').trim();
+        }
+      }
+    }, {
+      key: 'customStyle',
+      value: function customStyle(box, hidden, duration, delay, iteration) {
+        if (hidden) {
+          this.cacheAnimationName(box);
+        }
+        box.style.visibility = hidden ? 'hidden' : 'visible';
+
+        if (duration) {
+          this.vendorSet(box.style, { animationDuration: duration });
+        }
+        if (delay) {
+          this.vendorSet(box.style, { animationDelay: delay });
+        }
+        if (iteration) {
+          this.vendorSet(box.style, { animationIterationCount: iteration });
+        }
+        this.vendorSet(box.style, { animationName: hidden ? 'none' : this.cachedAnimationName(box) });
+
+        return box;
+      }
+    }, {
+      key: 'vendorSet',
+      value: function vendorSet(elem, properties) {
+        for (var name in properties) {
+          if (properties.hasOwnProperty(name)) {
+            var value = properties[name];
+            elem['' + name] = value;
+            for (var i = 0; i < this.vendors.length; i++) {
+              var vendor = this.vendors[i];
+              elem['' + vendor + name.charAt(0).toUpperCase() + name.substr(1)] = value;
+            }
+          }
+        }
+      }
+    }, {
+      key: 'vendorCSS',
+      value: function vendorCSS(elem, property) {
+        var style = getComputedStyle(elem);
+        var result = style.getPropertyCSSValue(property);
+        for (var i = 0; i < this.vendors.length; i++) {
+          var vendor = this.vendors[i];
+          result = result || style.getPropertyCSSValue('-' + vendor + '-' + property);
+        }
+        return result;
+      }
+    }, {
+      key: 'animationName',
+      value: function animationName(box) {
+        var aName = void 0;
+        try {
+          aName = this.vendorCSS(box, 'animation-name').cssText;
+        } catch (error) {
+          // Opera, fall back to plain property value
+          aName = getComputedStyle(box).getPropertyValue('animation-name');
+        }
+
+        if (aName === 'none') {
+          return ''; // SVG/Firefox, unable to get animation name?
+        }
+
+        return aName;
+      }
+    }, {
+      key: 'cacheAnimationName',
+      value: function cacheAnimationName(box) {
+        // https://bugzilla.mozilla.org/show_bug.cgi?id=921834
+        // box.dataset is not supported for SVG elements in Firefox
+        return this.animationNameCache.set(box, this.animationName(box));
+      }
+    }, {
+      key: 'cachedAnimationName',
+      value: function cachedAnimationName(box) {
+        return this.animationNameCache.get(box);
+      }
+    }, {
+      key: 'scrollHandler',
+      value: function scrollHandler() {
+        this.scrolled = true;
+      }
+    }, {
+      key: 'scrollCallback',
+      value: function scrollCallback() {
+        if (this.scrolled) {
+          this.scrolled = false;
+          var results = [];
+          for (var i = 0; i < this.boxes.length; i++) {
+            var box = this.boxes[i];
+            if (box) {
+              if (this.isVisible(box)) {
+                this.show(box);
+                continue;
+              }
+              results.push(box);
+            }
+          }
+          this.boxes = results;
+          if (!this.boxes.length && !this.config.live) {
+            this.stop();
+          }
+        }
+      }
+    }, {
+      key: 'offsetTop',
+      value: function offsetTop(element) {
+        // SVG elements don't have an offsetTop in Firefox.
+        // This will use their nearest parent that has an offsetTop.
+        // Also, using ('offsetTop' of element) causes an exception in Firefox.
+        while (element.offsetTop === undefined) {
+          element = element.parentNode;
+        }
+        var top = element.offsetTop;
+        while (element.offsetParent) {
+          element = element.offsetParent;
+          top += element.offsetTop;
+        }
+        return top;
+      }
+    }, {
+      key: 'isVisible',
+      value: function isVisible(box) {
+        var offset = box.getAttribute('data-wow-offset') || this.config.offset;
+        var viewTop = this.config.scrollContainer && this.config.scrollContainer.scrollTop || window.pageYOffset;
+        var viewBottom = viewTop + Math.min(this.element.clientHeight, getInnerHeight()) - offset;
+        var top = this.offsetTop(box);
+        var bottom = top + box.clientHeight;
+
+        return top <= viewBottom && bottom >= viewTop;
+      }
+    }, {
+      key: 'disabled',
+      value: function disabled() {
+        return !this.config.mobile && isMobile(navigator.userAgent);
+      }
+    }]);
+
+    return WOW;
+  }();
+
+  exports.default = WOW;
+  module.exports = exports['default'];
+});

public/webfonts/install-a-webfont.txt

@@ -0,0 +1,24 @@
+Installing Webfonts
+
+1. Upload the files from this zip to your domain.
+2. Add this code to your website:
+
+@font-face {
+    font-family: 'Playlist-Script';
+    src:url('Playlist-Script.ttf.woff') format('woff'),
+        url('Playlist-Script.ttf.svg#Playlist-Script') format('svg'),
+        url('Playlist-Script.ttf.eot'),
+        url('Playlist-Script.ttf.eot?#iefix') format('embedded-opentype'); 
+    font-weight: normal;
+    font-style: normal;
+}
+3. Integrate the fonts into your CSS:
+Add the font name to your CSS styles. For example:
+
+h1 { 
+   font-family: 'Playlist-Script';
+}  
+
+Troubleshooting Webfonts
+1. You may be using the fonts on different domain or subdomain.
+2. Check if you have link the fonts properly in the CSS.

src/App.vue

@@ -1,18 +1,19 @@
 <template>
-  <div id="app">
+  <div id="app" style="overflow-x: hidden">
     <a v-if="!isLandingPage" href="#" class="back-to-top">
       <i class="fa fa-chevron-up"></i>
     </a>
     <div v-if="!isLandingPage" class="click-closed"></div>
     <SearchTab v-if="!isLandingPage" />
     <NavBar v-if="!isLandingPage" @routerGoTo="routerGoTo" />
-    <div v-if="!isLandingPage" class="pushDown"></div>
+    <div v-if="!isLandingPage"></div>
     <router-view @setLandingPage="setLandingPage" />
-    <FooterSection v-if="!isLandingPage" class="margin-top" />
+    <FooterSection v-if="!isLandingPage" />
   </div>
 </template>
 
 <script>
+/* eslint-disable */
 import SearchTab from "./components/shared/searchTab.vue";
 import NavBar from "./components/shared/navBar.vue";
 import FooterSection from "./components/shared/footerSection.vue";
@@ -29,6 +30,7 @@ export default {
     NavBar,
     FooterSection
   },
+
   methods: {
     routerGoTo(goTo) {
       this.$router.push(goTo);
@@ -41,6 +43,7 @@ export default {
 </script>
 
 <style>
+@import "../public/css/newStyle.css";
 button:hover {
   cursor: pointer;
 }
@@ -140,7 +143,4 @@ html {
 .pushDown {
   height: 70px;
 }
-.margin-top {
-  margin-top: 50px;
-}
 </style>

src/components/about/aboutTimeshare.vue

@@ -1,74 +1,34 @@
 <template>
-  <!--/ About Star /-->
-  <section class="section-about">
-    <!-- eslint-disable max-len -->
-    <div class="container">
-      <div class="row">
-        <div class="col-sm-12">
-          <div class="about-img-box">
-            <img src="img/timeshare2.jpg" alt="About Timeshare" class="img-fluid title-img" />
-          </div>
-          <div class="sinse-box title-title">
-            <h3 class="sinse-title">Timeshare Resales</h3>
-          </div>
-        </div>
-        <div class="col-md-12 section-t8">
-          <div class="row">
-            <div class="col-lg-2 d-none d-lg-block">
-              <div class="title-vertical d-flex justify-content-start color-b">
-                <span>Uni-Vate Properties</span>
-              </div>
-            </div>
-            <div class="col-md-6 col-lg-5 section-md-t3">
-              <p class="color-text-a font-weight-bold" style="text-align:left;">
-                Uni-Vate Properties found that there was a desperate need for a reputable source for buyers and
-                sellers to turn to with their timeshare needs in South Africa. Over the
-                years, Uni-Vate has developed a treasure of networking alliances of professional
-                acquaintances and that has made timeshare resales a pleasure for both buyers and
-                sellers. We are fully equipped to assist with conventional timeshare requirements
-                and assure you of fast, efficient and personal service.
-              </p>
-              <p class="color-text-a" style="text-align:left;">
-                We strive to legitimize an industry that has fallen victim to scam artists
-                and unscrupulous sales tactics. Your best option for buying or selling a
-                timeshare resale week is through a real-estate company where an agent is
-                able to assist you with the sale from point of offer, to negotiation,
-                to conclusion, to successful payment and transfer.
-              </p>
-              <p class="color-text-a" style="text-align:left;">
-                Our goal for our sellers is to obtain the best price the market will bear
-                for their week/s. We do this by continually evaluating our marketplace,
-                educating the consumer, and encouraging sellers to price their properties
-                at competitive prices. This ensures buyers of well researched data to be able
-                to make informed decisions about their purchase which will provide their families
-                with hassle free future holidays.
-              </p>
-            </div>
-            <div class="col-md-6 col-lg-5">
-              <p class="color-text-b" style="text-align:left;">
-                Uni-Vate Properties facilitates the timeshare resale for a listing fee of
-                only R380 including VAT payable when listing your week/module. Transfer fees
-                vary per week depending on the share block but this will be confirmed on request
-                when making an offer on an interested week. Transfer fees are payable by the buyers.
-                List your week for sale or browse our already listed weeks available for easy access
-                to creating new holiday memories for the whole family.
-              </p>
-              <p>
-                <img
-                  src="img/timeshare.jpg"
-                  alt
-                  class="img-fluid"
-                  style="width:500px;height:330px; border-radius:10px"
-                />
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <!--/ About End /-->
+  <div>
+    <carouselSection />
+    <main id="main">
+      <contentSection />
+      <testimonialSection
+        data-aos="fade-up"
+        data-aos-anchor-placement="center-bottom"
+        data-aos-delay="150"
+      />
+    </main>
+  </div>
 </template>
+
 <script>
-export default {};
+/* eslint-disable */
+import carouselSection from "./aboutTimeshareCarouselSection";
+import contentSection from "./aboutTimeshareContentSection";
+import testimonialSection from "./aboutTimeshareTestimonialSection";
+import AOS from "aos";
+import "aos/dist/aos.css";
+export default {
+  created() {
+    AOS.init();
+  },
+  components: {
+    carouselSection,
+    contentSection,
+    testimonialSection
+  }
+};
 </script>
+
+<style lang="scss" scoped></style>

src/components/about/aboutTimeshareCarouselSection.vue

@@ -0,0 +1,50 @@
+<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>About Timeshare Resales</h2>
+            <p>
+              Uni-Vate Properties found that there was a desperate need for a reputable source for
+              buyers and sellers to turn to with their timeshare needs in South Africa.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <carousel
+      :nav="false"
+      :dots="false"
+      :items="1"
+      :autoplay="true"
+      :loop="true"
+      id="intro-carousel"
+      style="margin-top:-50px"
+      :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
+    >
+      <img class="item" src="../../../public/img/intro-carousel/timeshare-1.jpg" alt="" />
+      <img class="item" src="../../../public/img/intro-carousel/timeshare-2.jpg" alt="" />
+      <img class="item" src="../../../public/img/intro-carousel/timeshare-3.jpg" alt="" />
+      <img class="item" src="../../../public/img/intro-carousel/timeshare-4.jpg" alt="" />
+      <img class="item" src="../../../public/img/intro-carousel/timeshare-5.jpg" alt="" />
+      <img class="item" src="../../../public/img/intro-carousel/timeshare-6.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/about/aboutTimeshareContentSection.vue

@@ -0,0 +1,75 @@
+<template>
+  <section id="services">
+    <div class="container">
+      <div class="row">
+        <div class="col-lg-4" data-aos="fade-right">
+          <p>
+            Over the years, Uni-Vate has developed a treasure of networking alliances of
+            professional acquaintances and that has made timeshare resales a pleasure for both
+            buyers and sellers.
+          </p>
+          <h3>
+            We are fully equipped to assist with conventional timeshare requirements and assure you
+            of fast, efficient and personal service.
+          </h3>
+          <p>
+            We strive to legitimize an industry that has fallen victim to scam artists and
+            unscrupulous sales tactics. Your best option for buying or selling a timeshare resale
+            week is through a real-estate company where an agent is able to assist you with the sale
+            from point of offer, to negotiation, to conclusion, to successful payment and transfer.
+          </p>
+          <p>
+            <strong
+              >Our goal for our sellers is to obtain the best price the market will bear for their
+              week/s.</strong
+            >
+          </p>
+          <p>
+            We do this by continually evaluating our marketplace, educating the consumer, and
+            encouraging sellers to price their properties at competitive prices. This ensures buyers
+            of well researched data to be able to make informed decisions about their purchase which
+            will provide their families with hassle free future holidays.
+          </p>
+          <br />
+        </div>
+        <div class="col-lg-8" data-aos="fade-left">
+          <p>
+            <strong
+              >Transfer fees vary per week depending on the share block but this will be confirmed
+              on request when making an offer on an interested week.</strong
+            >
+          </p>
+          <img src="../../../public/img/timeshare-pic.png" width="100%" />
+          <img src="../../../public/img/strip.png" width="100%" /><br /><br />
+          <p>
+            Transfer fees are payable by the buyers. List your week for sale or browse our already
+            listed weeks available for easy access to creating new holiday memories for the whole
+            family.
+          </p>
+          <br />
+        </div>
+      </div>
+      <div class="row" data-aos="fade-down">
+        <div class="col-lg-12">
+          <h3>
+            Uni-Vate Properties facilitates the timeshare resale for a listing fee of only R380
+            including VAT payable when listing your week/module.
+          </h3>
+          <br />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import AOS from "aos";
+import "aos/dist/aos.css";
+export default {
+  created() {
+    AOS.init();
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/about/aboutTimeshareTestimonialSection.vue

@@ -0,0 +1,164 @@
+<template>
+  <section id="testimonials">
+    <div class="container">
+      <div class="section-header">
+        <h2>Testimonials</h2>
+      </div>
+
+      <carousel
+        :nav="false"
+        :dots="false"
+        :items="1"
+        :autoplay="true"
+        :loop="true"
+        id="intro-carousel"
+        style="margin-top:-50px"
+        :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
+        class="mt-3"
+      >
+        <div class="row">
+          <div class="col-lg-6">
+            <div>
+              <img src="img/testimonial-1.png" alt="" />
+            </div>
+          </div>
+
+          <div class="col-lg-6">
+            <div class="content">
+              <div class="row">
+                <div align="center" class="col">
+                  <br /><img style="width: 85px" src="img/quote.png" alt="" /><br />
+                </div>
+              </div>
+              <div class="row">
+                <div class="col">
+                  <p>
+                    Loved my stay at Crystal Springs. Appreciated the proffesionalism and
+                    friendliness of the staff. Thoroughly enjoyed the hike, game drive, jaccuzzi,
+                    heated pool, steam room and even the trampolines. Our chalet was in stellar
+                    condition. The heaters, extra blankets and fire place ensured we kept warm and
+                    toasty during the cold evenings. The food at the restaurant was delicious, and
+                    the experience was made even better by the friendly waitress who served us.
+                    Arriving to find Ferreiro Roche and Champagne in our chalet was the cherry on
+                    top. I would wholeheartedly recommend this resort any day. Well done Crystal
+                    Springs!
+                  </p>
+                  <h5>Anati Bacela</h5>
+                  <p>- on visiting Crystal Springs</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-lg-6">
+            <div>
+              <img src="img/testimonial-2.png" alt="" />
+            </div>
+          </div>
+
+          <div class="col-lg-6">
+            <div class="content">
+              <div class="row">
+                <div align="center" class="col">
+                  <br /><img style="width: 85px" src="img/quote.png" alt="" /><br />
+                </div>
+              </div>
+              <div class="row">
+                <div class="col">
+                  <p>
+                    We have been going to Ngwenya for 25 years or more. every year we have had
+                    wonderful sightings from our verandah. To me it is paradise on earth and we
+                    never grow tired of it. Wonderful play area for people of all ages, the gardens
+                    are well kept, the restaurant is good and the chalets are well maintained. Most
+                    of all what I love about Ngwenya is it's peaceful and tranquil atmosphere and
+                    the close proximity to our amazing wild life We will continue going for many
+                    more years
+                  </p>
+                  <h5>Linda Lewis</h5>
+                  <p>- on visiting Ngwenya Lodge</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-lg-6">
+            <div>
+              <img src="img/testimonial-3.2.jpg" alt="" />
+            </div>
+          </div>
+
+          <div class="col-lg-6">
+            <div class="content">
+              <div class="row">
+                <div align="center" class="col">
+                  <br /><img style="width: 85px" src="img/quote.png" alt="" /><br />
+                </div>
+              </div>
+              <div class="row">
+                <div class="col">
+                  <p>
+                    Great experience, I loved the place, so amazing and we saw many more animals.
+                    Had different kinds of visitors everyday (Impala, wild pig, monkeys, birds and
+                    more). The nature was great with all mountains and valleys and lakes. Every
+                    corner had a new moment. The staff was very friendly and helpful at all times.
+                    Thanks to the restaurant staff for helping me organizing my Husband's birthday
+                    surprise dinner. Best memories ever. Looking forward to my next visit with
+                    friends and more family members.
+                  </p>
+                  <h5>Sophie Adewale</h5>
+                  <p>- on visiting Mabalingwe Nature Reserve</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-lg-6">
+            <div>
+              <img src="img/testimonial-4.png" alt="" />
+            </div>
+          </div>
+
+          <div class="col-lg-6">
+            <div class="content">
+              <div class="row">
+                <div align="center" class="col">
+                  <br /><img style="width: 85px" src="img/quote.png" alt="" /><br />
+                </div>
+              </div>
+              <div class="row">
+                <div class="col">
+                  <p>
+                    Everything!! Little Eden is like a secret jewel no one but yourself and your
+                    very best friends should know about, but at the same time it’s like discovering
+                    something so awesome you can never keep it to yourself. You have to tell the
+                    world!!!
+                  </p>
+                  <h5>Sisna & Andries Venter</h5>
+                  <p>- on visiting Little Eden</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </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/about/aboutUsCarouselSection.vue

@@ -0,0 +1,52 @@
+<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>About Us</h2>
+            <p>
+              Uni-Vate Properties began in 2013 in Pretoria East with various properties in their
+              portfolio. Led by our Director, Delia 0' Conner, who has over 25 years of experience
+              in the timeshare industry, the move to conventional property sales and rentals was an
+              easy transition for the Uni-Vate team.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <carousel
+      :nav="false"
+      :dots="false"
+      :items="1"
+      :autoplay="true"
+      :loop="true"
+      id="intro-carousel"
+      style="margin-top:-50px"
+      :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
+    >
+      <img class="item" src="../../../public/img/intro-carousel/home-1.jpg" alt="" />
+      <img class="item" src="../../../public/img/intro-carousel/home-2.jpg" alt="" />
+      <img class="item" src="../../../public/img/intro-carousel/home-3.jpg" alt="" />
+      <img class="item" src="../../../public/img/intro-carousel/home-4.jpg" alt="" />
+      <img class="item" src="../../../public/img/intro-carousel/home-5.jpg" alt="" />
+      <img class="item" src="../../../public/img/intro-carousel/home-6.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/about/aboutUsContentSection.vue

@@ -0,0 +1,68 @@
+<template>
+  <section id="services">
+    <div class="container">
+      <div class="row">
+        <div class="col-lg-6" data-aos="fade-right">
+          <p>
+            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.
+          </p>
+          <p>
+            <strong
+              >The Uni-Vate support team consists of three highly qualified and experienced staff,
+              who have thirteen years' joint experience in the timeshare and property
+              industry.</strong
+            >
+          </p>
+          <p>
+            Owners seeking to sell their property understand the power of internet marketing and the
+            sophistication of target marketing to consumers who have shown an interest in buying
+            property. Buyers can save by purchasing from Owners advertising their property for sale
+            through Uni-Vate, using their website.
+          </p>
+          <p>
+            <strong
+              >Sellers across SA are able to list properties for a listing fee of R380 per property
+              listing which gives them exposure not only on the website, but on social media sites
+              also.</strong
+            >
+          </p>
+          <p>
+            Uni-Vate Properties is affiliated to the Estate Agents Board (EAAB) and also to the
+            Institute of Estate Agents South Africa (IEASA) and operates in compliance with the
+            Estate Agents Code of Conduct. This assures our clients of professional, ethical and
+            fair service at all times.
+          </p>
+          <br />
+        </div>
+
+        <div class="col-lg-6" data-aos="fade-left">
+          <h3>
+            Meeting the property needs of consumers is at the heart of what we do; whether it is
+            helping an Owner transition out of their property Ownership, or helping the buyer find
+            the property they have been looking for.
+          </h3>
+          <p>
+            So whether you would like to sell or rent out your: timeshare, home, industrial,
+            commercial, or vacant property or whether you would like to buy or rent a: timeshare,
+            home, industrial, commercial, or vacant property; Uni-Vate is able to assist you.
+          </p>
+          <img src="../../../public/img/logos.jpg" width="100%" /><br />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import AOS from "aos";
+import "aos/dist/aos.css";
+export default {
+  created() {
+    AOS.init();
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/about/aboutUsPage.vue

@@ -1,110 +1,22 @@
 <template>
-  <!-- eslint-disable max-len -->
-  <section class="section-about">
-    <div class="container">
-      <div class="row">
-        <div class="col-sm-12">
-          <div class="about-img-box">
-            <img src="img/slide-about-1.jpg" alt class="img-fluid title-img" />
-          </div>
-          <div class="sinse-box title-title">
-            <h3 class="sinse-title">About Us</h3>
-          </div>
-        </div>
-        <div class="col-md-12 section-t8">
-          <div class="row">
-            <div class="col-lg-2 d-none d-lg-block">
-              <div class="title-vertical d-flex justify-content-start color-b">
-                <span>Uni-Vate Properties</span>
-              </div>
-            </div>
-            <div class="col-md-6 col-lg-5 section-md-t3">
-              <p class="color-text-a font-weight-bold" style="text-align:left;">
-                Uni-Vate Properties began in 2013 in Pretoria East with various properties in their portfolio.
-                Led by our Director, Delia O' Conner, who has over 25 years of experience in the timeshare industry,
-                the move to conventional property sales and rentals was an easy transition for the Uni-Vate team.
-              </p>
-              <p class="color-text-a" style="text-align:left;">
-                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.
-                <br />
-                <br />The Uni-Vate support team consists of three highly qualified and experienced staff,
-                who have thirteen years' joint experience in the timeshare and property industry.
-              </p>
-              <p class="color-text-a" style="text-align:left;">
-                Owners seeking to sell their property understand the power of internet marketing
-                and the sophistication of target marketing to consumers who have shown an interest
-                in buying property. Buyers can save by purchasing from owners advertising their
-                property for sale through Uni-Vate, using their website.
-                <br />
-                <br />Sellers across SA are
-                able to list properties for a listing fee of R380 per property listing which gives
-                them exposure not only on the website, but on social media sites also.
-              </p>
-            </div>
-            <div class="col-md-6 col-lg-5">
-              <p class="color-text-a" style="text-align:left;">
-                Uni-Vate Properties is affiliated to the Estate Agents Board (EAAB) and also
-                to the Institute of Estate Agents South Africa (IEASA) and operates in compliance
-                with the Estate Agents Code of Conduct. This assures our clients of professional,
-                ethical and fair service at all times.
-              </p>
-              <p class="color-text-b" style="text-align:left;">
-                Meeting the property needs of consumers is at the heart of what we do;
-                whether it is helping an owner transition out of their property ownership, or
-                helping the buyer find the property they have been looking for.
-                So whether you would like to sell or rent out your: timeshare, home,
-                industrial, commercial, or vacant property or whether you would like to
-                buy or rent a: timeshare, home, industrial, commercial, or vacant property;
-                <br />
-                <strong>Uni-Vate is able to assist you.</strong>
-              </p>
-              <p>
-                <img
-                  src="img/plan2.jpg"
-                  alt
-                  class="img-fluid"
-                  style="width:450px;height:200px; border-radius:10px"
-                />
-              </p>
-            </div>
-          </div>
-          <hr />
-          <img
-            src="img/logos/nama.png"
-            alt
-            class="img-fluid"
-            style="width:140px;height:150px; border-radius:10px"
-          />
-          <img
-            src="img/logos/IEASA-logo.png"
-            alt
-            class="img-fluid"
-            style="width:380px;height:140px; border-radius:10px"
-          />
-          <img
-            src="img/logos/eaab.png"
-            alt
-            class="img-fluid"
-            style="width:180px;height:140px; border-radius:10px"
-          />
-        </div>
-      </div>
-    </div>
-    <br />
-  </section>
-  <!--/ About End /-->
+  <div>
+    <carouselSection />
+    <main id="main">
+      <contentSection />
+    </main>
+  </div>
 </template>
 
 <script>
+/* eslint-disable */
+import carouselSection from "./aboutUsCarouselSection";
+import contentSection from "./aboutUsContentSection";
 export default {
-  created: () => {},
+  components: {
+    carouselSection,
+    contentSection
+  }
 };
 </script>
 
-<style scoped>
-.colorBlueTrans {
-  padding: 15px;
-}
-</style>
+<style lang="scss" scoped></style>

src/components/admin/logs/SearchLogs.vue

@@ -1,12 +1,11 @@
 <template>
   <!-- eslint-disable max-len -->
-  <div>
+  <main id="main" style="margin-top:-20px; padding-bottom:50px">
     <div class="container">
-      <br />
       <div class="row">
         <div class="col-md-12 col-lg-8">
-          <div class="title-box-d">
-            <h1 class="title-d" style="text-align:left; font-size: 250%">Search Log</h1>
+          <div class="section-header">
+            <h2>Search Logs</h2>
           </div>
         </div>
       </div>
@@ -62,43 +61,43 @@
       </div>
     </div>
     <br />
-  </div>
+  </main>
 </template>
 
 <script>
-import { mapState, mapActions, mapGetters } from 'vuex';
-import JsonExcel from 'vue-json-excel';
-import listView from '../../shared/listView.vue';
+import { mapState, mapActions, mapGetters } from "vuex";
+import JsonExcel from "vue-json-excel";
+import listView from "../../shared/listView.vue";
 
 export default {
-  name: 'searchLog',
+  name: "searchLog",
   components: {
     listView,
-    JsonExcel,
+    JsonExcel
   },
   data() {
     return {
       exportFields: {
-        Date: 'date',
-        Time: 'time',
-        User: 'userName',
-        Type: 'type',
-        Field: 'property',
-        Value: 'value',
-      },
+        Date: "date",
+        Time: "time",
+        User: "userName",
+        Type: "type",
+        Field: "property",
+        Value: "value"
+      }
     };
   },
   methods: {
-    ...mapActions('searchLog', ['getPropertySearchLogs', 'clearFilter']),
+    ...mapActions("searchLog", ["getPropertySearchLogs", "clearFilter"])
   },
   mounted() {
     this.getPropertySearchLogs();
   },
   computed: {
-    ...mapState('searchLog', ['list', 'fields', 'filter']),
+    ...mapState("searchLog", ["list", "fields", "filter"]),
     ...mapGetters({
-      list: 'searchLog/filterList',
-    }),
-  },
+      list: "searchLog/filterList"
+    })
+  }
 };
 </script>

src/components/admin/misc/carousel.vue

@@ -1,14 +1,12 @@
 <template>
-  <div>
+  <main id="main" style="margin-top:-20px; padding-bottom:50px">
     <div class="container">
       <div class="container">
         <div class="row">
           <div class="col-md-12 col-lg-8">
-            <div class="title-box-d">
-              <br />
-              <h1 class="title-d" style="text-align:left; font-size: 250%">Carousel Item</h1>
+            <div class="section-header">
+              <h2>Carousel</h2>
             </div>
-            <br />
           </div>
         </div>
       </div>
@@ -44,7 +42,9 @@
                         class="btn btn-b-n"
                         style="width: 150px; height:40px;"
                         data-dismiss="modal"
-                      >Close</button>
+                      >
+                        Close
+                      </button>
                     </div>
                   </div>
                 </div>
@@ -74,21 +74,15 @@
                 <span>{{ bedrooms }}</span>
               </li>
               <li class="d-flex justify-content-between">
-                <strong>
-                  <i class="fa fa-users"></i>&nbsp&nbsp&nbspSleeps:
-                </strong>
+                <strong> <i class="fa fa-users"></i>&nbsp&nbsp&nbspSleeps: </strong>
                 <span>{{ sleeps }}</span>
               </li>
               <li class="d-flex justify-content-between">
-                <strong>
-                  <i class="fa fa-calendar"></i>&nbsp&nbsp&nbspCheck in:
-                </strong>
+                <strong> <i class="fa fa-calendar"></i>&nbsp&nbsp&nbspCheck in: </strong>
                 <span>{{ arrival }}</span>
               </li>
               <li class="d-flex justify-content-between">
-                <strong>
-                  <i class="fa fa-calendar"></i>&nbsp&nbsp&nbspCheck out:
-                </strong>
+                <strong> <i class="fa fa-calendar"></i>&nbsp&nbsp&nbspCheck out: </strong>
                 <span>{{ departure }}</span>
               </li>
             </ul>
@@ -118,53 +112,57 @@
             @click="SaveData()"
             class="btn btn-b-n"
             style="width: 85px; height:40px;"
-          >Save</button>
+          >
+            Save
+          </button>
           <button
             type="button"
             @click="Close()"
             class="btn btn-b-n"
             style="width: 85px; height:40px;"
-          >Close</button>
+          >
+            Close
+          </button>
         </div>
       </div>
     </div>
-  </div>
+  </main>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
-import Search from './carouselSearch.vue';
-import Images from '../../property/propertyImage.vue';
+import { mapState, mapActions } from "vuex";
+import Search from "./carouselSearch.vue";
+import Images from "../../property/propertyImage.vue";
 
 export default {
-  name: 'CarouselItem',
+  name: "CarouselItem",
   components: {
     Search,
-    Images,
+    Images
   },
   data() {
     return {
-      selectedType: 'Timeshare',
-      propDescription: '',
-      bedrooms: '',
-      sleeps: '',
+      selectedType: "Timeshare",
+      propDescription: "",
+      bedrooms: "",
+      sleeps: "",
       arrival: Date,
       departure: Date,
-      images: [],
+      images: []
     };
   },
   computed: {
-    ...mapState('carousel', ['carousel']),
-    ...mapState('property', ['propertyImages']),
+    ...mapState("carousel", ["carousel"]),
+    ...mapState("property", ["propertyImages"])
   },
   mounted() {
     this.getCarouselItem(this.$route.params.id);
   },
   methods: {
-    ...mapActions('carousel', ['saveCarouselItem', 'getCarouselItem']),
-    ...mapActions('property', ['getSavedPropertyImages']),
+    ...mapActions("carousel", ["saveCarouselItem", "getCarouselItem"]),
+    ...mapActions("property", ["getSavedPropertyImages"]),
     onSelected(item) {
-      if (this.selectedType === 'Timeshare') {
+      if (this.selectedType === "Timeshare") {
         this.carousel.header = item.resort.resortName;
         this.bedrooms = item.bedrooms;
         this.sleeps = item.maxSleep;
@@ -186,10 +184,10 @@ export default {
       this.images = values;
     },
     Close() {
-      this.$router.push('/carousel');
+      this.$router.push("/carousel");
     },
     SaveData() {
-      if (this.selectedType === 'Timeshare') {
+      if (this.selectedType === "Timeshare") {
         // eslint-disable-next-line no-plusplus
         for (let i = 0; i < this.images.length; i++) {
           this.carousel.image = this.images[i];
@@ -197,10 +195,10 @@ export default {
       }
       if (this.carousel.id === 0) {
         this.saveCarouselItem(this.carousel);
-        this.$router.push('/carousel');
+        this.$router.push("/carousel");
       }
       // Else update
-    },
-  },
+    }
+  }
 };
 </script>

src/components/admin/misc/carouselList.vue

@@ -1,13 +1,12 @@
 <template>
   <!-- eslint-disable max-len -->
-  <div>
+  <main id="main" style="padding-bottom:50px; margin-top:-20px">
     <div class="container">
       <div class="container">
         <div class="row">
           <div class="col-md-12 col-lg-8">
-            <div class="title-box-d">
-              <br />
-              <h1 class="title-d" style="text-align:left; font-size: 250%">Carousel Items</h1>
+            <div class="section-header">
+              <h2>Carousel Items</h2>
             </div>
           </div>
         </div>
@@ -24,43 +23,43 @@
         @onDelete="Delete"
       />
     </div>
-  </div>
+  </main>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
-import listView from '../../shared/listView.vue';
+import { mapState, mapActions } from "vuex";
+import listView from "../../shared/listView.vue";
 
 export default {
-  name: 'CarouselList',
+  name: "CarouselList",
   components: {
-    listView,
+    listView
   },
   data() {
     return {
-      columns: ['id', 'header', 'image'],
-      formats: ['', '', 'image'],
+      columns: ["id", "header", "image"],
+      formats: ["", "", "image"]
     };
   },
   methods: {
-    ...mapActions('carousel', ['getCarouselList', 'deleteCarousel']),
+    ...mapActions("carousel", ["getCarouselList", "deleteCarousel"]),
     New() {
-      this.$router.push('/carousel/details/0');
+      this.$router.push("/carousel/details/0");
     },
     Edit(itemID) {
       this.$router.push({
-        path: `/carousel/details/${itemID}`,
+        path: `/carousel/details/${itemID}`
       });
     },
     Delete(item) {
       this.deleteCarousel(item.id);
-    },
+    }
   },
   mounted() {
     this.getCarouselList();
   },
   computed: {
-    ...mapState('carousel', ['carouselList']),
-  },
+    ...mapState("carousel", ["carouselList"])
+  }
 };
 </script>

src/components/admin/property/propertyTypeList.vue

@@ -1,12 +1,11 @@
 <template>
   <!-- eslint-disable max-len -->
-  <div>
+  <main id="main" style="margin-top:-20px; padding-bottom: 50px">
     <div class="container">
-      <br />
       <div class="row">
         <div class="col-md-12 col-lg-8">
-          <div class="title-box-d">
-            <h1 class="title-d" style="text-align:left; font-size: 250%">Property Types</h1>
+          <div class="section-header">
+            <h2>Property Types</h2>
           </div>
         </div>
       </div>
@@ -25,42 +24,42 @@
       />
     </div>
     <br />
-  </div>
+  </main>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
-import listView from '../../shared/listView.vue';
+import { mapState, mapActions } from "vuex";
+import listView from "../../shared/listView.vue";
 
 export default {
-  name: 'PropertyTypeList',
+  name: "PropertyTypeList",
   components: {
-    listView,
+    listView
   },
   data() {
     return {
-      columns: ['propertyUsageType', 'description'],
+      columns: ["propertyUsageType", "description"]
     };
   },
   methods: {
-    ...mapActions('propertyTypes', ['getPropertyTypes', 'deletePropertyType']),
+    ...mapActions("propertyTypes", ["getPropertyTypes", "deletePropertyType"]),
     New() {
-      this.$router.push('/propertyType/new');
+      this.$router.push("/propertyType/new");
     },
     Edit(item) {
       this.$router.push({
-        path: `/propertyType/${item.id}`,
+        path: `/propertyType/${item.id}`
       });
     },
     Delete(item) {
       this.deletePropertyType(item.id);
-    },
+    }
   },
   mounted() {
     this.getPropertyTypes();
   },
   computed: {
-    ...mapState('propertyTypes', ['propertyTypes']),
-  },
+    ...mapState("propertyTypes", ["propertyTypes"])
+  }
 };
 </script>

src/components/admin/property/userDefinedGroupsPage.vue

@@ -1,14 +1,11 @@
 <template>
   <!-- eslint-disable max-len -->
-  <div>
+  <main id="main" style="margin-top:-20px; padding-bottom:50px">
     <div class="container">
-      <br />
       <div class="row">
         <div class="col-md-12 col-lg-8">
-          <div class="title-box-d">
-            <h1 class="title-d" style="text-align:left; font-size: 250%">
-              Property User Defined Groups
-            </h1>
+          <div class="section-header">
+            <h2>Property User Defined Groups</h2>
           </div>
         </div>
       </div>
@@ -29,32 +26,32 @@
       </div>
     </div>
     <br />
-  </div>
+  </main>
 </template>
 <script>
-import { mapState, mapActions } from 'vuex';
-import listView from '../../shared/listView.vue';
+import { mapState, mapActions } from "vuex";
+import listView from "../../shared/listView.vue";
 
 export default {
-  name: 'UserDefinedGroup',
+  name: "UserDefinedGroup",
   components: {
-    listView,
+    listView
   },
   data() {
     return {
-      columns: ['description', 'propertyUsageType', 'rank'],
+      columns: ["description", "propertyUsageType", "rank"]
     };
   },
   mounted() {
     this.getUserDefinedGroups();
   },
   computed: {
-    ...mapState('propertyAdmin', ['userDefinedGroups']),
+    ...mapState("propertyAdmin", ["userDefinedGroups"])
   },
   methods: {
-    ...mapActions('propertyAdmin', ['getUserDefinedGroups', 'deleteUserDefinedGroup']),
+    ...mapActions("propertyAdmin", ["getUserDefinedGroups", "deleteUserDefinedGroup"]),
     New() {
-      this.$router.push('/userDefinedGroups/userDefinedGroup');
+      this.$router.push("/userDefinedGroups/userDefinedGroup");
     },
     Edit(item) {
       this.$router.push(`/userDefinedGroups/userDefinedGroup/${item.id}`);
@@ -64,7 +61,7 @@ export default {
         this.userDefinedGroups.pop(item);
       }
       this.deleteUserDefinedGroup(item.id);
-    },
-  },
+    }
+  }
 };
 </script>

src/components/admin/status/changeLogPage.vue

@@ -1,46 +1,38 @@
 <template>
-  <!-- <section class="intro-single"> -->
-  <div class="container">
-    <br />
-    <br />
-    <br />
-    <br />
-    <div class="row">
-      <div class="col-md-12 col-lg-8">
-        <!-- <div class="title-single-box"> -->
-        <!-- <h1 class="title-single" style="text-align:left;">Change Log</h1> -->
-        <!-- </div> -->
-        <div class="title-box-d">
-          <h1 class="title-d" style="text-align:left; font-size: 250%">Change Log</h1>
+  <main id="main" style="margin-top:-20px; padding-bottom:50px">
+    <!-- <section class="intro-single"> -->
+    <div class="container">
+      <div class="row">
+        <div class="col-md-12 col-lg-8">
+          <div class="section-header">
+            <h2>Change Log</h2>
+          </div>
         </div>
-        <br />
       </div>
+      <div id="table" class="col-xs-12 table-responsive">
+        <datatable :columns="columns" :data="rows"></datatable>
+      </div>
+      <br />
     </div>
-    <div id="table" class="col-xs-12 table-responsive">
-      <datatable :columns="columns" :data="rows"></datatable>
-    </div>
-    <br />
-  </div>
 
-  <!-- </section> -->
+    <!-- </section> -->
+  </main>
 </template>
 <script>
-import { mapState, mapActions } from 'vuex';
+import { mapState, mapActions } from "vuex";
 
 export default {
-  name: 'changeLogPage',
+  name: "changeLogPage",
   created() {
     this.getchangeLogPage();
   },
   computed: {
-    ...mapState('status', ['changeLogPage']),
+    ...mapState("status", ["changeLogPage"])
   },
   methods: {
-    ...mapActions('status', ['getchangeLogPage']),
-  },
+    ...mapActions("status", ["getchangeLogPage"])
+  }
 };
 </script>
 
-
-<style>
-</style>
+<style></style>

src/components/admin/status/statusPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <main id="main" style="margin-top:-20px; padding-bottom:50px">
     <!-- <section class="intro-single"> -->
     <div class="container">
       <br />
@@ -11,8 +11,8 @@
           <!-- <div class="title-single-box"> -->
           <!-- <h2 class="title-single">Status List</h2> -->
           <!-- </div> -->
-          <div class="title-box-d">
-            <h1 class="title-d" style="text-align:left; font-size: 250%">Status List</h1>
+          <div class="section-header">
+            <h2>Status List</h2>
           </div>
           <br />
         </div>
@@ -22,27 +22,26 @@
     <div class="container">
       <ListView :items="statusList" :columnCount="4" :compact="false" :showNew="false" />
     </div>
-  </div>
+  </main>
 </template>
 <script>
-import { mapState, mapActions } from 'vuex';
-import ListView from '../../shared/listView.vue';
+import { mapState, mapActions } from "vuex";
+import ListView from "../../shared/listView.vue";
 
 export default {
-  name: 'StatusList',
+  name: "StatusList",
   components: {
-    ListView,
+    ListView
   },
   created() {
     this.getStatusList();
   },
   computed: {
-    ...mapState('status', ['statusList']),
+    ...mapState("status", ["statusList"])
   },
   methods: {
-    ...mapActions('status', ['getStatusList']),
-  },
+    ...mapActions("status", ["getStatusList"])
+  }
 };
 </script>
-<style>
-</style>
+<style></style>

src/components/admin/status/tenderWeekAdminPage.vue

@@ -1,50 +1,42 @@
 <template>
-  <!-- <section class="intro-single"> -->
-  <div class="container">
-    <br />
-    <br />
-    <br />
-    <br />
-    <div class="row">
-      <div class="col-md-12 col-lg-8">
-        <!-- <div class="title-single-box"> -->
-        <!-- <h1 class="title-single" style="text-align:left;">Tender Week Admin</h1> -->
-        <!-- </div> -->
-        <div class="title-box-d">
-          <h1 class="title-d" style="text-align:left; font-size: 250%">Tender Week Admin</h1>
+  <main id="main" style="margin-top:-20px; padding-bottom:50px">
+    <!-- <section class="intro-single"> -->
+    <div class="container">
+      <div class="row">
+        <div class="col">
+          <div class="section-header">
+            <h2>Tender Week Admin</h2>
+          </div>
         </div>
-        <br />
       </div>
+      <div id="table" class="col-xs-12 table-responsive">
+        <ListView :items="items" :showNew="false"></ListView>
+      </div>
+      <br />
     </div>
-    <div id="table" class="col-xs-12 table-responsive">
-      <ListView :items="items" :showNew="false"></listView>
-    </div>
-    <br />
-  </div>
 
-  <!-- </section> -->
+    <!-- </section> -->
+  </main>
 </template>
 <script>
-import { mapState, mapActions } from 'vuex';
-import ListView from '../../shared/listView.vue';
+import { mapState, mapActions } from "vuex";
+import ListView from "../../shared/listView.vue";
 
 export default {
-  name: 'TenderWeekAdmin',
+  name: "TenderWeekAdmin",
   created() {
     this.getItems();
   },
   components: {
-    ListView,
+    ListView
   },
   computed: {
-    ...mapState('tenderWeek', ['items']),
+    ...mapState("tenderWeek", ["items"])
   },
   methods: {
-    ...mapActions('tenderWeek', ['getItems']),
-  },
+    ...mapActions("tenderWeek", ["getItems"])
+  }
 };
 </script>
 
-
-<style>
-</style>
+<style></style>

src/components/admin/status/timeshareAdminPage.vue

@@ -1,47 +1,59 @@
-/* eslint-disable no-restricted-syntax */
-/* eslint-disable guard-for-in */
+/* eslint-disable no-restricted-syntax */ /* eslint-disable guard-for-in */
 <!-- eslint-disable max-len -->
 <template>
-  <div>
-    <br />
+  <main id="main" style="margin-top:-20px; padding-bottom:50px">
+    <div class="container">
+      <div class="row">
+        <div class="col">
+          <div class="section-header">
+            <h2>Pending Weeks</h2>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div class="row">
       <div class="offset-1 col-md-3">
         <button
           type="button"
-          :class="{'form-control btn btn-primary ': (1===1), 'my-disable': (!selectedItems || selectedItems.length === 0)}"
+          :class="{
+            'form-control btn btn-primary ': 1 === 1,
+            'my-disable': !selectedItems || selectedItems.length === 0
+          }"
           value="Verify Week(s)"
           :disabled="!(selectedItems.length > 0)"
           @click="onVerify()"
-        >{{ButtonMessage}}</button>
-        <div>{{Message}}</div>
+        >
+          {{ ButtonMessage }}
+        </button>
+        <div>{{ Message }}</div>
       </div>
       <div class="offset-1 col-md-10">
         <ListView
           :items="getNeedsVerify"
           @onRowClick="onRowClick"
           @onClearSelected="onClearSelected"
-          :title="'Pending Weeks'"
           :showNew="false"
         />
       </div>
     </div>
-  </div>
+  </main>
 </template>
 <script>
-import { mapState, mapActions, mapGetters } from 'vuex';
-import Log from '../../../assets/Log';
-import ListView from '../../shared/listView.vue';
+import { mapState, mapActions, mapGetters } from "vuex";
+import Log from "../../../assets/Log";
+import ListView from "../../shared/listView.vue";
 
 export default {
-  name: 'TimeshareAdmin',
+  name: "TimeshareAdmin",
   components: {
-    ListView,
+    ListView
   },
   data() {
     return {
       user: Log.getUser(),
       selectedItems: [],
-      showMessage: false,
+      showMessage: false
     };
   },
   mounted() {
@@ -54,36 +66,36 @@ export default {
       return selectedArray;
     },
     ButtonMessage() {
-      let msg = '';
+      let msg = "";
       if (!(this.selectedItems.length > 0)) {
-        msg = 'No Items selected';
+        msg = "No Items selected";
       } else {
-        msg = 'Verify item';
+        msg = "Verify item";
         if (this.selectedItems.length > 1) {
-          msg += 's';
+          msg += "s";
         }
       }
       return msg;
     },
     Message() {
-      let msg = '';
+      let msg = "";
       if (!(this.selectedItems.length > 0)) {
-        msg = 'Please select the item(s) to verify.';
+        msg = "Please select the item(s) to verify.";
       } else {
         msg = `${this.selectedItems.length}`;
         if (this.selectedItems.length === 1) {
-          msg += ' item ';
-        } else msg += ' items ';
-        msg += 'selected. Click to verify or select more...';
+          msg += " item ";
+        } else msg += " items ";
+        msg += "selected. Click to verify or select more...";
       }
       return msg;
     },
-    ...mapState('myWeeks', ['items']),
-    ...mapGetters({ getNeedsVerify: 'myWeeks/getNeedsVerify' }),
+    ...mapState("myWeeks", ["items"]),
+    ...mapGetters({ getNeedsVerify: "myWeeks/getNeedsVerify" })
   },
   methods: {
-    ...mapActions('myWeeks', ['getItems', 'verifyWeek']),
-    ...mapActions('alert', ['success']),
+    ...mapActions("myWeeks", ["getItems", "verifyWeek"]),
+    ...mapActions("alert", ["success"]),
     onVerify() {
       if (this.selectedItems.length > 0) {
         for (const i in this.selectedItems) {
@@ -93,8 +105,8 @@ export default {
             this.verifyWeek(item.id);
           }
         }
-        this.success('Week verified!');
-        this.$router.push('/shared/alert');
+        this.success("Week verified!");
+        this.$router.push("/shared/alert");
       }
     },
     onRowClick(items) {
@@ -105,12 +117,11 @@ export default {
     },
     onClearSelected() {
       this.selectedItems = [];
-    },
-  },
+    }
+  }
 };
 </script>
 
-
 <style>
 .my-disable {
   background-color: silver;

src/components/admin/status/userManagementPage.vue

@@ -1,98 +1,92 @@
 <template>
-  <!-- eslint-disable max-len -->
-  <div class="container">
-    <br />
-    <br />
-    <div class="row">
-      <div class="col-md-12 col-lg-8">
-        <div class="title-box-d">
-          <h1 class="title-d" style="text-align:left; font-size: 250%">User Management</h1>
+  <main id="main" style="margin-top:-20px; padding-bottom:50px">
+    <!-- eslint-disable max-len -->
+    <div class="container">
+      <br />
+      <br />
+      <div class="row">
+        <div class="col-md-12 col-lg-8">
+          <div class="section-header">
+            <h2>User Management</h2>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col-md-2 offset-1">
-        <button type="button" class="btn btn-b-n">Private Users</button>
+      <div class="row">
+        <div class="col-md-2 offset-1">
+          <button type="button" class="btn btn-b-n">Private Users</button>
+        </div>
+        <div class="col-md-2 offset-2">
+          <button
+            @click="routerGoTo('/status/agentUserManagementPage')"
+            type="button"
+            class="btn btn-b-n"
+          >
+            Agents
+          </button>
+        </div>
       </div>
-      <div class="col-md-2 offset-2">
-        <button
-          @click="routerGoTo('/status/agentUserManagementPage')"
-          type="button"
-          class="btn btn-b-n"
-        >Agents</button>
+      <div class="container">
+        <ListView
+          :items="individuals"
+          :showNew="false"
+          :editable="true"
+          :deleteable="true"
+          :showCustomAction="true"
+          :showColumnChooser="false"
+          :CustomActionHeading="'Reset Password'"
+          :displayColumns="columns"
+          :displayHeaders="headers"
+          @onEdit="Edit"
+          @onDelete="Delete"
+          @onResetPassword="PasswordReset"
+        />
+        <br />
       </div>
     </div>
-    <div class="container">
-      <ListView
-        :items="individuals"
-        :showNew="false"
-        :editable="true"
-        :deleteable="true"
-        :showCustomAction="true"
-        :showColumnChooser="false"
-        :CustomActionHeading="'Reset Password'"
-        :displayColumns="columns"
-        :displayHeaders="headers"
-        @onEdit="Edit"
-        @onDelete="Delete"
-        @onResetPassword="PasswordReset"
-      />
-      <br />
-    </div>
-  </div>
+  </main>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
+import { mapState, mapActions } from "vuex";
 // import alert from '../../shared/alert.vue';
-import ListView from '../../shared/listView.vue';
+import ListView from "../../shared/listView.vue";
 
 export default {
-  name: 'userManagementPage',
+  name: "userManagementPage",
   components: {
-    ListView,
+    ListView
     // alert,
   },
   data() {
     return {
-      columns: [
-        'id',
-        'name',
-        'surname',
-        'cellNumber',
-        'telephone',
-        'email',
-        'isDeleted',
-      ],
-      headers: ['', '', '', '', '', '', ''],
-      item: {},
+      columns: ["id", "name", "surname", "cellNumber", "telephone", "email", "isDeleted"],
+      headers: ["", "", "", "", "", "", ""],
+      item: {}
     };
   },
   props: {},
   methods: {
-    ...mapActions('register', ['getIndividuals', 'deleteIndividual']),
+    ...mapActions("register", ["getIndividuals", "deleteIndividual"]),
     routerGoTo(goTo) {
       this.$router.push(goTo);
     },
     Edit(item) {
       this.$router.push({
-        path: '/user/updateProfileInfo',
-        query: { id: item.id },
+        path: "/user/updateProfileInfo",
+        query: { id: item.id }
       });
     },
     Delete(item) {
       this.deleteIndividual(item.id);
-    },
+    }
   },
   mounted() {
     this.getIndividuals();
   },
   computed: {
-    ...mapState('register', ['individuals', 'removeIndividual']),
-  },
+    ...mapState("register", ["individuals", "removeIndividual"])
+  }
 };
 </script>
 
-
-<style>
-</style>
+<style></style>

src/components/admin/unitConfiguration/unitConfigurationPage.vue

@@ -1,21 +1,13 @@
 <template>
-  <div>
+  <main id="main" style="margin-top:-20px; padding-bottom:50px">
     <!-- eslint-disable max-len -->
     <!-- <section class="intro-single"> -->
     <div class="container">
-      <br />
-      <br />
-      <br />
-      <br />
       <div class="row">
-        <div class="col-md-12 col-lg-8">
-          <!-- <div class="title-single-box"> -->
-          <!-- <h2 class="title-single">Unit Configuration List</h2> -->
-          <!-- </div> -->
-          <div class="title-box-d">
-            <h1 class="title-d" style="text-align:left; font-size: 250%">Unit Configuration List</h1>
+        <div class="col">
+          <div class="section-header">
+            <h2>Unit Configuration List</h2>
           </div>
-          <br />
         </div>
       </div>
     </div>
@@ -23,26 +15,26 @@
     <div class="container">
       <ListView :items="unitConfigurationList" />
     </div>
-  </div>
+  </main>
 </template>
 <script>
-import { mapState, mapActions } from 'vuex';
-import ListView from '../../shared/listView.vue';
+import { mapState, mapActions } from "vuex";
+import ListView from "../../shared/listView.vue";
 
 export default {
-  name: 'UnitConfiguration',
+  name: "UnitConfiguration",
   components: {
-    ListView,
+    ListView
   },
   created() {
     this.getUnitConfigurationList();
   },
   computed: {
-    ...mapState('unitConfiguration', ['unitConfigurationList']),
+    ...mapState("unitConfiguration", ["unitConfigurationList"])
   },
   methods: {
-    ...mapActions('unitConfiguration', ['getUnitConfigurationList']),
-  },
+    ...mapActions("unitConfiguration", ["getUnitConfigurationList"])
+  }
 };
 </script>
 <style></style>

src/components/communication/templatePage.vue

@@ -1,62 +1,67 @@
 <template>
-<!-- eslint-disable max-len -->
-  <div class="container-fluid" style="margin-top:25px;">
-    <div class="row">
-      <div class="col-md-1"></div>
-      <div class="col-md-10">
-        <div class>
-          <h3 class="sinse-title">Email Templates</h3>
+  <main id="main" style="margin-top:-20px; padding-bottom:50px">
+    <!-- eslint-disable max-len -->
+    <div class="container-fluid" style="margin-top:25px;">
+      <div class="row">
+        <div class="col-md-1"></div>
+        <div class="col-md-10">
+          <div class="section-header">
+            <h2 class="sinse-title">Email Templates</h2>
+          </div>
+        </div>
+        <div class="col-md-12">
+          <hr />
         </div>
       </div>
-      <div class="col-md-12">
-        <hr />
-      </div>
-    </div>
-    <div class="row">
-      <div :class="listClass">
-        <ListView :items="list" @onRowClick="onRowClick" @onNew="onNew" :showNew="true" />
-      </div>
-      <div class="col-md-6" v-if="showDetailView">
-        <DetailView :placeHolders="detailItem ? detailItem.placeHolders : []" :item="detailItem" @onClose="onDetailClose" :editable="clickedNew" />
+      <div class="row">
+        <div :class="listClass">
+          <ListView :items="list" @onRowClick="onRowClick" @onNew="onNew" :showNew="true" />
+        </div>
+        <div class="col-md-6" v-if="showDetailView">
+          <DetailView
+            :placeHolders="detailItem ? detailItem.placeHolders : []"
+            :item="detailItem"
+            @onClose="onDetailClose"
+            :editable="clickedNew"
+          />
+        </div>
       </div>
-    </div>
 
-    <hr />
-  </div>
+      <hr />
+    </div>
+  </main>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
-import ListView from '../shared/listView.vue';
-import DetailView from './templateDetail.vue';
+import { mapState, mapActions } from "vuex";
+import ListView from "../shared/listView.vue";
+import DetailView from "./templateDetail.vue";
 
 export default {
   data() {
     return {
       detailItem: undefined,
-      clickedNew: false,
+      clickedNew: false
     };
   },
   components: {
     ListView,
-    DetailView,
+    DetailView
   },
   mounted() {
     this.getList();
   },
   computed: {
-    ...mapState('template', ['list', 'item']),
+    ...mapState("template", ["list", "item"]),
     showDetailView() {
       return this.detailItem !== undefined && this.detailItem != null;
     },
     listClass() {
-      return this.detailItem !== undefined && this.detailItem != null
-        ? 'col-md-6'
-        : 'col-md-12';
-    },
+      return this.detailItem !== undefined && this.detailItem != null ? "col-md-6" : "col-md-12";
+    }
   },
   methods: {
-    ...mapActions('template', ['getList']),
+    ...mapActions("template", ["getList"]),
     onRowClick(items) {
       if (items.length > 0) {
         const i = items[0];
@@ -73,7 +78,7 @@ export default {
     },
     onDetailClose() {
       this.detailItem = undefined;
-    },
-  },
+    }
+  }
 };
 </script>

src/components/financial/payments.vue

@@ -1,14 +1,14 @@
 <template>
   <!-- eslint-disable max-len -->
-  <div>
+  <main id="main" style="margin-top:-20px;padding-bottom:300px">
     <div class="container">
       <div class="container">
         <br />
         <br />
         <div class="row">
           <div class="col-md-12 col-lg-8">
-            <div class="title-box-d">
-              <h1 class="title-d" style="text-align:left; font-size: 250%">Payments</h1>
+            <div class="section-header">
+              <h2>Payments</h2>
             </div>
           </div>
         </div>
@@ -25,36 +25,36 @@
       />
     </div>
     <br />
-  </div>
+  </main>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
-import listView from '../shared/listView.vue';
-import Log from '../../assets/Log';
+import { mapState, mapActions } from "vuex";
+import listView from "../shared/listView.vue";
+import Log from "../../assets/Log";
 
 export default {
-  name: 'PaymentList',
+  name: "PaymentList",
   components: {
-    listView,
+    listView
   },
   data() {
     return {
-      userId: Log.getUser().Id,
+      userId: Log.getUser().Id
     };
   },
   methods: {
-    ...mapActions('Payment', ['getPayments']),
+    ...mapActions("Payment", ["getPayments"])
   },
   mounted() {
     this.getProperties(Object.assign(this.user.id));
   },
   computed: {
-    ...mapState('Payment', ['payments']),
+    ...mapState("Payment", ["payments"]),
     UserChanged() {
       this.getProperties(Object.assign(this.user.id));
       return this.user;
-    },
-  },
+    }
+  }
 };
 </script>

src/components/home/carouselSection.vue

@@ -1,88 +1,267 @@
 <template>
-  <!-- eslint-disable max-len -->
-  <carousel
-    :per-page="1"
-    :mouse-drag="false"
-    :autoplay="true"
-    :autoplayTimeout="5000"
-    :loop="true"
-    :autoplayHoverPause="false"
-  >
-    <slide
-      v-for="(car, i) in carouselList"
-      :index="i"
-      :key="i"
-      :style="{ height:'1000px', width:'100%',  backgroundImage: 'url(' + car.image + ')',  backgroundSize: 'cover', backgroundPosition: 'center center'}"
-      calss="myClass"
-    >
-      <div class="intro-content display-table">
-        <div class="table-cell">
-          <div class="container">
-            <div class="row">
-              <div class="col-lg-8">
-                <div
-                  class="price-a"
-                  style="opacity:0.7; border: white solid 3px; border-radius: 15px; background-color: white;"
+  <section id="intro">
+    <div class="container">
+      <div class="row">
+        <div align="left" class="col-sm-12 col-md-8">
+          <div class="intro-content">
+            <h2>Find your perfect Property</h2>
+
+            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
+              <li class="nav-item">
+                <a
+                  class="nav-link btn-white-border"
+                  id="timeshare-tab"
+                  data-toggle="pill"
+                  href="#timeshare"
+                  role="tab"
+                  aria-controls="timeshare"
+                  aria-selected="true"
+                  >Timeshare</a
+                >
+              </li>
+              <li class="nav-item">
+                <a
+                  class="nav-link btn-white-border"
+                  id="commercial-tab"
+                  data-toggle="pill"
+                  href="#commercial"
+                  role="tab"
+                  aria-controls="commercial"
+                  aria-selected="false"
+                  >Commercial</a
+                >
+              </li>
+              <li class="nav-item">
+                <a
+                  class="nav-link btn-white-border"
+                  id="residential-tab"
+                  data-toggle="pill"
+                  href="#residential"
+                  role="tab"
+                  aria-controls="residential"
+                  aria-selected="false"
+                  >Residential</a
                 >
-                  <h1 class="intro-title mb-4">{{ car.header }}</h1>
-                  <div class="summary-list" v-if="car.isProperty">
-                    <p v-html="car.address" />
+              </li>
+            </ul>
+            <!--========    header tabs      ==========-->
+            <div class="tab-content" id="pills-tabContent">
+              <div
+                class="tab-pane fade show active"
+                id="start"
+                role="tabpanel"
+                aria-labelledby="start-tab"
+              >
+                <p>Choose an option to start your adventure</p>
+              </div>
+
+              <div
+                class="tab-pane fade show"
+                id="timeshare"
+                role="tabpanel"
+                aria-labelledby="timeshare-tab"
+              >
+                <H4>TIMESHARE SALES</H4>
+                <p>
+                  Start exploring your posibilities
+                </p>
+                <div id="row">
+                  <!-- <div class="form-group">
+                    <input
+                      data-toggle="dropdown"
+                      name="region"
+                      class="form-control my-2"
+                      id="name"
+                      placeholder="Region"
+                      aria-haspopup="true"
+                      aria-expanded="false"
+                    />
+                    <input
+                      data-toggle="dropdown"
+                      name="resort"
+                      class="form-control my-2"
+                      id="name"
+                      placeholder="Resort"
+                      aria-haspopup="true"
+                      aria-expanded="false"
+                    />
+                  </div> -->
+                  <router-link to="/timeshare/buy" class="btn-solid-blue"
+                    ><i class="fa fa-search"></i> BUY</router-link
+                  >
+                  <router-link to="/timeshare/sell" class="btn-solid-blue"
+                    ><i class="fa chevron-circle-right"></i> SELL</router-link
+                  >
+                </div>
+              </div>
+
+              <div
+                class="tab-pane fade"
+                id="commercial"
+                role="tabpanel"
+                aria-labelledby="commercial-tab"
+              >
+                <h4>COMMERCIAL PROPERTIES</h4>
+                <p>Select the region you are looking for to start your search</p>
+                <div id="row">
+                  <div class="form-group">
+                    <autoComplete
+                      align="left"
+                      class="col-md-11 offset-1"
+                      :items="suburbList"
+                      @selection="SelectedFilter"
+                      style="width:100%; margin-left:-15px"
+                    />
                   </div>
-                  <div class="summary-list" v-else>
-                    <ul class="list">
-                      <li class="d-flex justify-content-between">
-                        <strong>
-                          <i class="fa fa-bed"></i>&nbsp&nbsp&nbspBedrooms:
-                        </strong>
-                        <span>{{ car.bedrooms }}</span>
-                      </li>
-                      <li class="d-flex justify-content-between">
-                        <strong>
-                          <i class="fa fa-users"></i>&nbsp&nbsp&nbspSleeps:
-                        </strong>
-                        <span>{{ car.sleeps }}</span>
-                      </li>
-                      <li class="d-flex justify-content-between">
-                        <strong>
-                          <i class="fa fa-calendar"></i>&nbsp&nbsp&nbspCheck in:
-                        </strong>
-                        <span>{{ car.arrival | toDate }}</span>
-                      </li>
-                      <li class="d-flex justify-content-between">
-                        <strong>
-                          <i class="fa fa-calendar"></i>&nbsp&nbsp&nbspCheck out:
-                        </strong>
-                        <span>{{ car.departure | toDate}}</span>
-                      </li>
-                    </ul>
+                  <a v-on:click="SearchClickRentComm()" class="btn-solid-blue scrollto"
+                    ><i class="fa fa-search"></i> RENT</a
+                  >
+                  <a v-on:click="SearchClickBuyComm()" class="btn-solid-blue scrollto"
+                    ><i class="fa fa-search"></i> BUY</a
+                  >
+                </div>
+              </div>
+
+              <div
+                class="tab-pane fade"
+                id="residential"
+                role="tabpanel"
+                aria-labelledby="residential-tab"
+              >
+                <h4>RESIDENTIAL PROPERTIES</h4>
+                <p>Select the region you are looking for to start your search</p>
+                <div id="row">
+                  <div class="form-group">
+                    <autoComplete
+                      align="left"
+                      class="col-md-11 offset-1"
+                      :items="suburbList"
+                      @selection="SelectedFilter"
+                      style="width:100%; margin-left:-15px"
+                    />
+                    <!-- <input
+                      data-toggle="dropdown"
+                      name="type"
+                      class="form-control my-2"
+                      id="type"
+                      placeholder="Type"
+                      aria-haspopup="true"
+                      aria-expanded="false"
+                    /> -->
                   </div>
+                  <a v-on:click="SearchClickRentRes()" class="btn-solid-blue scrollto"
+                    ><i class="fa fa-search"></i> RENT</a
+                  >
+                  <a v-on:click="SearchClickBuyRes()" class="btn-solid-blue scrollto"
+                    ><i class="fa fa-search"></i> BUY</a
+                  >
                 </div>
               </div>
             </div>
+
+            <div></div>
           </div>
         </div>
       </div>
-    </slide>
-  </carousel>
+    </div>
+
+    <carousel
+      :nav="false"
+      :dots="false"
+      :items="1"
+      :autoplay="true"
+      :loop="true"
+      id="intro-carousel"
+      style="margin-top:-50px"
+      :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
+    >
+      <img class="item" src="../../../public/img/intro-carousel/home-1.jpg" alt="" />
+      <img class="item" src="../../../public/img/intro-carousel/home-2.jpg" alt="" />
+      <img class="item" src="../../../public/img/intro-carousel/home-3.jpg" alt="" />
+      <img class="item" src="../../../public/img/intro-carousel/home-4.jpg" alt="" />
+      <img class="item" src="../../../public/img/intro-carousel/home-5.jpg" alt="" />
+      <img class="item" src="../../../public/img/intro-carousel/home-6.jpg" alt="" />
+    </carousel>
+
+    <div id="intro-carousel" class="owl-carousel"></div>
+  </section>
+  <!-- #intro -->
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
-import { Carousel, Slide } from 'vue-carousel';
-
+/* eslint-disable */
+import { mapState, mapActions } from "vuex";
+import carousel from "vue-owl-carousel";
+import autoComplete from "../shared/autoComplete";
 export default {
   components: {
-    Carousel,
-    Slide,
+    carousel,
+    autoComplete
   },
-  methods: {
-    ...mapActions('carousel', ['getCarouselList']),
+  computed: {
+    ...mapState("propertySearch", ["suburbs", "suburbList", "propertySearch"])
   },
-  mounted() {
-    this.getCarouselList();
+  data() {
+    return {
+      propertyUsageType: "Commercial",
+      salesType: "Sale",
+      searchText: "",
+      clicked: false
+    };
   },
-  computed: {
-    ...mapState('carousel', ['carouselList']),
+  methods: {
+    ...mapActions("propertySearch", ["getSuburbs", "applyFilter"]),
+    SetSalesType(value) {
+      this.salesType = value;
+    },
+    SearchClickBuyRes() {
+      const item = this.suburbs.find(s => s.display === this.searchText);
+      this.propertySearch.province = item.province;
+      this.propertySearch.city = item.city;
+      this.propertySearch.suburb = item.suburb;
+      this.propertySearch.propertyUsageType = "Residential";
+      this.propertySearch.salesType = "Sale";
+
+      this.$router.push("/property/residential/searchResult");
+    },
+    SearchClickRentRes() {
+      const item = this.suburbs.find(s => s.display === this.searchText);
+      this.propertySearch.province = item.province;
+      this.propertySearch.city = item.city;
+      this.propertySearch.suburb = item.suburb;
+      this.propertySearch.propertyUsageType = "Residential";
+      this.propertySearch.salesType = "Rent";
+
+      this.$router.push("/property/residential/searchResult");
+    },
+    SearchClickBuyComm() {
+      const item = this.suburbs.find(s => s.display === this.searchText);
+      this.propertySearch.province = item.province;
+      this.propertySearch.city = item.city;
+      this.propertySearch.suburb = item.suburb;
+      this.propertySearch.propertyUsageType = "Commercial";
+      this.propertySearch.salesType = "Sale";
+
+      this.$router.push("/property/commercial/searchResult");
+    },
+    SearchClickRentComm() {
+      const item = this.suburbs.find(s => s.display === this.searchText);
+      this.propertySearch.province = item.province;
+      this.propertySearch.city = item.city;
+      this.propertySearch.suburb = item.suburb;
+      this.propertySearch.propertyUsageType = "Commercial";
+      this.propertySearch.salesType = "Rent";
+
+      this.$router.push("/property/commercial/searchResult");
+    },
+    SelectedFilter(item) {
+      this.searchText = item;
+    }
   },
+  mounted() {
+    this.getSuburbs();
+  }
 };
 </script>
+
+<style lang="scss" scoped></style>

src/components/home/homePage.vue

@@ -1,29 +1,31 @@
 <template>
   <div>
     <CarouselSection />
-    <ServiceSection />
-    <PropertySection />
-    <NewsSection />
-    <TestimonialSection />
-    <a href="#" class="back-to-top">
-      <i class="fa fa-chevron-up"></i>
-    </a>
+    <PropertySection
+      data-aos="fade-up"
+      data-aos-anchor-placement="center-bottom"
+      data-aos-delay="150"
+    />
   </div>
 </template>
 <script>
-import CarouselSection from './carouselSection.vue';
-import ServiceSection from './serviceSection.vue';
-import PropertySection from './propertySection.vue';
-import NewsSection from './newsSection.vue';
-import TestimonialSection from './testimonialSection.vue';
-
+import CarouselSection from "./carouselSection.vue";
+//import ServiceSection from "./serviceSection.vue";
+import PropertySection from "./propertySection.vue";
+//import NewsSection from "./newsSection.vue";
+//import TestimonialSection from "./testimonialSection.vue";
+import AOS from "aos";
+import "aos/dist/aos.css";
 export default {
+  created() {
+    AOS.init();
+  },
   components: {
     CarouselSection,
-    ServiceSection,
-    PropertySection,
-    NewsSection,
-    TestimonialSection,
-  },
+    //ServiceSection,
+    PropertySection
+    //NewsSection,
+    //TestimonialSection
+  }
 };
 </script>

src/components/home/propertySection.vue

@@ -1,42 +1,48 @@
 <template>
-  <div>
-    <section class="section-property section-t8">
+  <main id="main">
+    <section id="portfolio" class="wow fadeInUp">
       <div class="container">
         <div class="row">
-          <div class="col-md-12">
-            <div class="title-wrap d-flex justify-content-between">
-              <div class="title-box">
-                <h2 class="title-a">Latest Properties</h2>
-              </div>
-            </div>
+          <div class="col-lg-12">
+            <h2>Latest Properties</h2>
+          </div>
+        </div>
+      </div>
+      <div class="contianer">
+        <div class="row">
+          <div class="col">
+            <propertyCard
+              v-if="latestProperties.length > 0"
+              name="propertyholder"
+              :properties="latestProperties"
+              :showSort="false"
+            />
           </div>
         </div>
-        <propertyCard
-          v-if="latestProperties.length > 0"
-          name="propertyholder"
-          :properties="latestProperties"
-          :showSort="false"
-        />
       </div>
     </section>
-  </div>
+    <!-- #listings -->
+  </main>
 </template>
-<script>
-import { mapState, mapActions } from 'vuex';
-import propertyCard from '../property/propertyCard.vue';
 
+<script>
+/* eslint-disable */
+import { mapState, mapActions } from "vuex";
+import propertyCard from "../property/propertyCard.vue";
 export default {
   components: {
-    propertyCard,
+    propertyCard
   },
   computed: {
-    ...mapState('propertySearch', ['latestProperties']),
+    ...mapState("propertySearch", ["latestProperties"])
   },
   methods: {
-    ...mapActions('propertySearch', ['searchLatestProperties']),
+    ...mapActions("propertySearch", ["searchLatestProperties"])
   },
   mounted() {
     this.searchLatestProperties();
-  },
+  }
 };
 </script>
+
+<style lang="scss" scoped></style>

src/components/marketing/landingPage.vue

@@ -54,7 +54,8 @@
                 role="tab"
                 aria-controls="directions"
                 aria-selected="false"
-              >Html</a>
+                >Html</a
+              >
             </li>
             <li class="nav-item">
               <a
@@ -65,7 +66,8 @@
                 role="tab"
                 aria-controls="resort-layout"
                 aria-selected="true"
-              >Preview</a>
+                >Preview</a
+              >
             </li>
           </ul>
           <div
@@ -126,7 +128,8 @@
                 role="tab"
                 aria-controls="template"
                 aria-selected="false"
-              >Html</a>
+                >Html</a
+              >
             </li>
             <li class="nav-item">
               <a
@@ -137,7 +140,8 @@
                 role="tab"
                 aria-controls="preview"
                 aria-selected="true"
-              >Preview</a>
+                >Preview</a
+              >
             </li>
           </ul>
           <div
@@ -191,11 +195,9 @@
           </label>
           <div class="d-flex">
             <div class="p-2">
-              <div
-                class="btn btn-primary myBackground"
-                @click="addClose()"
-                v-if="CanEdit"
-              >{{btnCaption}}</div>
+              <div class="btn btn-primary myBackground" @click="addClose()" v-if="CanEdit">
+                {{ btnCaption }}
+              </div>
             </div>
           </div>
         </div>
@@ -232,11 +234,9 @@
           </label>
           <div class="d-flex">
             <div class="p-2">
-              <div
-                class="btn btn-primary myBackground"
-                @click="addWeekClose()"
-                v-if="CanEditWeeks"
-              >{{btnCaptionWeek}}</div>
+              <div class="btn btn-primary myBackground" @click="addWeekClose()" v-if="CanEditWeeks">
+                {{ btnCaptionWeek }}
+              </div>
             </div>
           </div>
         </div>
@@ -270,13 +270,17 @@
             @click="SaveData()"
             class="btn btn-primary myBackground"
             style="width: 85px; height:40px;"
-          >Save</button>
+          >
+            Save
+          </button>
           <button
             type="button"
             @click="Close()"
             class="btn btn-primary myBackground"
             style="width: 85px; height:40px;"
-          >Close</button>
+          >
+            Close
+          </button>
         </div>
       </div>
       <div v-if="wait" id="preloader"></div>
@@ -342,16 +346,12 @@ export default {
             this.campaign.items[i].placeHolders &&
             this.campaign.items[i].placeHolders.length > 0
           ) {
-            this.campaign.items[
-              i
-            ].campaignItemPlaceHolder = this.campaign.items[i].placeHolders;
+            this.campaign.items[i].campaignItemPlaceHolder = this.campaign.items[i].placeHolders;
           }
         }
 
         for (let i = 0; i < this.campaign.placeHolders.length; i++) {
-          this.campaign.placeHolders[i].format = this.campaign.placeHolders[
-            i
-          ].formatTemplate;
+          this.campaign.placeHolders[i].format = this.campaign.placeHolders[i].formatTemplate;
         }
         console.log(JSON.stringify(this.campaign));
         // this.saveCampaign(this.campaign)
@@ -374,9 +374,7 @@ export default {
       this.$router.push("/landingPage/week/0");
     },
     onItemAdd(item) {
-      const myList = this.campaign.placeHolders
-        ? this.campaign.placeHolders
-        : [];
+      const myList = this.campaign.placeHolders ? this.campaign.placeHolders : [];
       myList.push({
         name: item.name,
         boundTo: item.property,
@@ -402,10 +400,7 @@ export default {
       }
     },
     onItemDelete(item) {
-      this.campaign.placeHolders = _.remove(
-        this.campaign.placeHolders,
-        x => x !== item
-      );
+      this.campaign.placeHolders = _.remove(this.campaign.placeHolders, x => x !== item);
       this.placeHolders = this.campaign.placeHolders;
     },
     // AddWeek(item) {
@@ -438,11 +433,7 @@ export default {
     }
   },
   computed: {
-    ...mapState("campaign", [
-      "campaign",
-      "campaignPlaceHolders",
-      "campaignItems"
-    ]),
+    ...mapState("campaign", ["campaign", "campaignPlaceHolders", "campaignItems"]),
     PlaceHolders() {
       if (this.campaign && this.campaign.placeHolders) {
         return this.campaign.placeHolders;
@@ -469,4 +460,4 @@ export default {
     }
   }
 };
-</script>
+</script>

src/components/marketing/landingPages.vue

@@ -1,14 +1,14 @@
 <template>
   <!-- eslint-disable max-len -->
-  <div>
+  <main id="main" style="margin-top:-20px; padding-bottom:50px">
     <div class="container">
       <div class="container">
         <br />
         <br />
         <div class="row">
           <div class="col-md-12 col-lg-8">
-            <div class="title-box-d">
-              <h1 class="title-d" style="text-align:left; font-size: 250%">Landing Pages</h1>
+            <div class="section-header">
+              <h2>Landing Pages</h2>
             </div>
           </div>
         </div>
@@ -31,7 +31,7 @@
       />
     </div>
     <br />
-  </div>
+  </main>
 </template>
 
 <script>

src/components/misc/address.vue

@@ -1,155 +1,155 @@
 <template>
-  <!-- eslint-disable max-len -->
-  <div>
-    <br />
-    <div class="col-md-12" style="text-align:centre">
-      <div class="myWell">
-        <h4>Address</h4>
-      </div>
-      <div class="form-group row"></div>
-      <div class="row" style="text-align:left">
-        <div class="col-md-6" style="margin-bottom: 1em">
-          <label>Street Number *</label>
-          <prop-field
-            :display="address.streetNumber"
-            :editType="'text'"
-            :propertyName="'streetNumber'"
-            :mayEdit="true"
-            @UpdateValue="UpdateValue"
+  <div class="form">
+    <div id="sendmessage">Your details has been sent. Thank you!</div>
+    <div id="errormessage"></div>
+    <form method="post" role="form" class="contactForm">
+      <div class="form-row">
+        <div class="form-group col-md-6">
+          <input
+            type="text"
+            name="street-nr"
+            class="form-control"
+            id="street-nr"
+            placeholder="Street Number"
+            data-rule="minlen:4"
+            data-msg="Please enter your street number"
+            v-model="address.streetNumber"
           />
+          <div class="validation"></div>
         </div>
-        <div class="col-md-6" style="margin-bottom: 1em">
-          <label>Street Name *</label>
-          <prop-field
-            :display="address.street"
-            :editType="'text'"
-            :propertyName="'street'"
-            :mayEdit="true"
-            @UpdateValue="UpdateValue"
+        <div class="form-group col-md-6">
+          <input
+            type="text"
+            class="form-control"
+            name="street"
+            id="street"
+            placeholder="Street Name"
+            data-msg="Please enter your street name"
+            v-model="address.street"
           />
+          <div class="validation"></div>
         </div>
-        <div class="col-md-6" style="margin-bottom: 1em">
-          <label>Province *</label>
-          <propField
-            :display="address.province"
-            :editType="'selector'"
-            :arrayObject="provinces"
-            :propertyName="'province'"
-            :mayEdit="true"
-            @UpdateValue="UpdateValue"
+        <div class="form-group col-md-6">
+          <input
+            type="text"
+            name="province"
+            class="form-control"
+            id="province"
+            placeholder="Province"
+            data-rule="minlen:4"
+            data-msg="Please enter your province"
+            v-model="address.province"
           />
+          <div class="validation"></div>
         </div>
-
-        <div class="col-md-6" style="margin-bottom: 1em">
-          <label>City *</label>
-          <propField
-            :display="address.city"
-            :editType="'selector'"
-            :arrayObject="cities"
-            :propertyName="'city'"
-            :mayEdit="true"
-            @UpdateValue="UpdateValue"
+        <div class="form-group col-md-6">
+          <input
+            type="text"
+            class="form-control"
+            name="city"
+            id="city"
+            placeholder="City"
+            data-rule="minlen:4"
+            data-msg="Please enter your city"
+            v-model="address.city"
           />
+          <div class="validation"></div>
         </div>
-        <div class="col-md-6" style="margin-bottom: 1em">
-          <label>Suburb *</label>
-          <propField
-            :display="address.suburb"
-            :editType="'selector'"
-            :arrayObject="suburbs"
-            :propertyName="'suburb'"
-            :mayEdit="true"
-            @UpdateValue="UpdateValue"
+        <div class="form-group col-md-6">
+          <input
+            type="text"
+            name="suburb"
+            class="form-control"
+            id="suburb"
+            placeholder="Suburb"
+            data-rule="minlen:4"
+            data-msg="Please enter your suburb"
+            v-model="address.suburb"
           />
+          <div class="validation"></div>
         </div>
-        <div class="col-md-6" style="margin-bottom: 1em">
-          <label>Postal Code *</label>
-          <propField
-            :display="address.postalCode"
-            :editType="'text'"
-            :propertyName="'postalCode'"
-            :mayEdit="true"
-            @UpdateValue="UpdateValue"
+        <div class="form-group col-md-6">
+          <input
+            type="text"
+            class="form-control"
+            name="postal"
+            id="postal"
+            placeholder="Postal Code"
+            data-msg="Please enter your postal code"
+            v-model="address.postalCode"
           />
+          <div class="validation"></div>
         </div>
       </div>
-    </div>
+    </form>
   </div>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
-import propField from '../property/propertyFieldEditor.vue';
+/* eslint-disable */
+import { mapState, mapActions } from "vuex";
+import propField from "../property/propertyFieldEditor.vue";
 
 export default {
   components: {
-    propField,
+    propField
   },
   data() {
     return {
-      propertyType: 'Residential',
+      propertyType: "Residential"
     };
   },
   props: {
-    address: {},
+    address: {}
   },
   computed: {
-    ...mapState('searchTab', ['provinces', 'cities', 'suburbs']),
+    ...mapState("searchTab", ["provinces", "cities", "suburbs"])
   },
   methods: {
-    ...mapActions('searchTab', ['getProvince', 'getCities', 'getSuburbs']),
+    ...mapActions("searchTab", ["getProvince", "getCities", "getSuburbs"]),
     ProvinceSelected(item) {
       if (item.target.options.selectedIndex > 0) {
-        this.selectedProvince = this.provinces[
-          item.target.options.selectedIndex - 1
-        ].description;
+        this.selectedProvince = this.provinces[item.target.options.selectedIndex - 1].description;
         this.getCities(Object.assign({}, { province: this.selectedProvince }));
       }
     },
     CitySelected(item) {
       if (item.target.options.selectedIndex > 0) {
-        this.selectedCity = this.cities[
-          item.target.options.selectedIndex - 1
-        ].description;
+        this.selectedCity = this.cities[item.target.options.selectedIndex - 1].description;
         this.getSuburbs(
-          Object.assign(
-            {},
-            { province: this.selectedProvince, city: this.selectedCity },
-          ),
+          Object.assign({}, { province: this.selectedProvince, city: this.selectedCity })
         );
       }
     },
     getPostalCode(item) {
-      this.address.postalCode = this.suburbs[
-        item.target.options.selectedIndex - 1
-      ].postalCode;
+      this.address.postalCode = this.suburbs[item.target.options.selectedIndex - 1].postalCode;
     },
     UpdateValue(item) {
       if (item.fieldName) {
-        if (item.fieldName === 'streetNumber') {
+        if (item.fieldName === "streetNumber") {
           this.address.streetNumber = item.value;
         }
-        if (item.fieldName === 'street') {
+        if (item.fieldName === "street") {
           this.address.street = item.value;
         }
-        if (item.fieldName === 'province') {
-          if (item.value !== '') {
+        if (item.fieldName === "province") {
+          if (item.value !== "") {
             this.address.province = item.value;
             this.getCities(Object.assign({}, { province: item.value }));
             this.address.city = null;
             this.address.suburb = null;
-            this.address.postalCode = '';
+            this.address.postalCode = "";
           } else {
             this.address.province = null;
             this.address.city = null;
             this.address.suburb = null;
-            this.address.postalCode = '';
+            this.address.postalCode = "";
             this.cities = [];
             this.suburbs = [];
           }
         }
-        if (item.fieldName === 'city') {
-          if (item.value !== '') {
+        if (item.fieldName === "city") {
+          if (item.value !== "") {
             this.address.city = item.value;
             // this.address.city = newCity;
             // this.address.cityId = newCity.id;
@@ -158,21 +158,21 @@ export default {
                 {},
                 {
                   province: item.value,
-                  city: item.value,
-                },
-              ),
+                  city: item.value
+                }
+              )
             );
             this.address.suburb = null;
-            this.address.postalCode = '';
+            this.address.postalCode = "";
           } else {
             this.address.city = null;
             this.address.suburb = null;
-            this.address.postalCode = '';
+            this.address.postalCode = "";
             this.suburbs = [];
           }
         }
-        if (item.fieldName === 'suburb') {
-          if (item.value !== '') {
+        if (item.fieldName === "suburb") {
+          if (item.value !== "") {
             // const newSuburb = this.suburbs.find(
             //   p => p.description === item.value,
             // );
@@ -183,20 +183,16 @@ export default {
             this.address.postalCode = this.address.suburb.postalCode;
           } else {
             this.address.suburb = null;
-            this.address.postalCode = '';
+            this.address.postalCode = "";
           }
         }
       }
-    },
+    }
   },
   mounted() {
     this.getProvince();
-  },
+  }
 };
 </script>
 
-<style>
-.goDown {
-  margin-top: 150px;
-}
-</style>
+<style lang="scss" scoped></style>

src/components/processFlow/makeOffer.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- eslint-disable max-len -->
-  <div style="padding-left:50px; padding-right:50px; padding-bottom:50px;">
+  <div style="padding-left:30px; padding-right:30px; padding-bottom:30px;">
     <div v-if="!isLoggedIn">
       <div class="container col-md-10">
         <p class="alert myError">Please Login to add a property</p>
@@ -34,89 +34,39 @@
         <div v-if="!isProperty">
           <div class="form-group row">
             <div style="text-align:left">
-              <div class="title-box-d">
-                <h3 class="title-d">
-                  {{ item.resort.resortName ? item.resort.resortName : item.resort }}
-                </h3>
+              <div class="intro-content">
+                <h2>{{ item.resort.resortName ? item.resort.resortName : item.resort }}</h2>
               </div>
             </div>
           </div>
           <div class="form-group row">
-            <div class="col-md-6">
-              <label for="resortunit">Unit</label>
-              <div class="input-group mb-3">
-                <div class="input-group-prepend">
-                  <span class="input-group-text" style="color: #60CBEB">
-                    <b>U#</b>
-                  </span>
-                </div>
-                <input
-                  class="form-control"
-                  type="text"
-                  id="resort"
-                  name="resortunit"
-                  disabled
-                  v-model="item.unitNumber"
-                />
-              </div>
+            <div class="col-md-12">
+              <label for="resortunit">Unit:</label>
+              <h5>{{ item.unitNumber }}</h5>
             </div>
-            <div class="col-md-6">
-              <label for="resortWeek">Module / Week Number</label>
-              <div class="input-group mb-3">
-                <div class="input-group-prepend">
-                  <span class="input-group-text" style="color: #60CBEB">
-                    <b>M</b>
-                  </span>
-                </div>
-                <input
-                  class="form-control"
-                  type="text"
-                  id="week"
-                  name="resortWeek"
-                  disabled
-                  v-model="item.weekNumber"
-                />
-              </div>
+            <div class="col-md-12">
+              <label for="resortWeek">Module / Week Number:</label>
+              <h5>{{ item.weekNumber }}</h5>
             </div>
           </div>
         </div>
         <div class="form-group row">
-          <div class="col-md-6">
-            <label>Current Price</label>
-            <div class="input-group mb-3">
-              <div class="input-group-prepend">
-                <span class="input-group-text" style="color: #60CBEB">
-                  <b>R</b>
-                </span>
-              </div>
-              <input
-                v-if="isProperty"
-                class="form-control"
-                type="number"
-                v-model="item.price"
-                disabled
-              />
-              <input v-else class="form-control" type="number" v-model="item.sellPrice" disabled />
-            </div>
+          <div class="col-md-12">
+            <label>Current Price:</label>
+            <h4>{{ item.sellPrice | toCurrency }}</h4>
           </div>
-          <div class="col-md-6">
-            <label>Offer</label>
-            <div class="input-group mb-3">
-              <div class="input-group-prepend">
-                <span class="input-group-text" style="color: #60CBEB">
-                  <b>R</b>
-                </span>
-              </div>
-              <input
-                class="form-control"
-                type="number"
-                step="any"
-                id="minPrice"
-                name="minPrice"
-                v-model="item.offer"
-                :disabled="!isMakeOffer"
-              />
-            </div>
+          <div class="col-md-12">
+            <label>Offer:</label>
+
+            <input
+              class="form-control"
+              type="number"
+              step="any"
+              id="minPrice"
+              name="minPrice"
+              v-model="item.offer"
+              :disabled="!isMakeOffer"
+            />
           </div>
         </div>
         <div class="form-group row">
@@ -132,33 +82,31 @@
         </div>
       </div>
       <div v-if="!isSaved" class="container">
-        <button
-          v-if="isMakeOffer"
-          type="button"
-          @click="SendOffer()"
-          class="btn btn-b-n"
-          style="width: 150px; height:40px;"
-        >
-          Send Offer
-        </button>
-        <button
-          v-if="!isMakeOffer && !isDecline && canEdit"
-          type="submit"
-          @click="Accept()"
-          class="btn btn-b-n"
-          style="width: 150px; height:40px;"
-        >
-          Accept
-        </button>
-        <button
-          v-if="!isMakeOffer && !isDecline && canEdit"
-          type="button"
-          @click="Decline()"
-          class="btn btn-b-n"
-          style="width: 150px; height:40px;"
-        >
-          Decline
-        </button>
+        <div class="row">
+          <div algin="center" class="col">
+            <button v-if="isMakeOffer" type="button" @click="SendOffer()" class="btn-solid-blue">
+              Send Offer
+            </button>
+            <button
+              v-if="!isMakeOffer && !isDecline && canEdit"
+              type="submit"
+              @click="Accept()"
+              class="btn btn-b-n"
+              style="width: 150px; height:40px;"
+            >
+              Accept
+            </button>
+            <button
+              v-if="!isMakeOffer && !isDecline && canEdit"
+              type="button"
+              @click="Decline()"
+              class="btn btn-b-n"
+              style="width: 150px; height:40px;"
+            >
+              Decline
+            </button>
+          </div>
+        </div>
       </div>
       <div v-if="isDecline || item.statusCode === 'E3'" class="form-group row">
         <div class="col-md-12">
@@ -203,32 +151,33 @@
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
-import Log from '../../assets/Log';
+/* eslint-disable */
+import { mapState, mapActions } from "vuex";
+import Log from "../../assets/Log";
 
 export default {
-  name: 'MakeOffer',
+  name: "MakeOffer",
   props: {
     isMakeOffer: Boolean,
     isProperty: Boolean,
     canEdit: Boolean,
     item: Object,
     bidId: Number,
-    updateItem: Function,
+    updateItem: Function
   },
   data() {
     return {
       isDecline: false,
       isSaved: false,
-      message: '',
+      message: "",
       isInfo: true,
-      isLoggedIn: Log.isLoggedIn(),
+      isLoggedIn: Log.isLoggedIn()
     };
   },
   methods: {
-    ...mapActions('bid', ['getBid', 'saveBid', 'acceptBid', 'declineBid']),
+    ...mapActions("bid", ["getBid", "saveBid", "acceptBid", "declineBid"]),
     SendOffer() {
-      alert('Under Development');
+      alert("Under Development");
       // this.getBid(0);
       // this.bidItem.id = 0;
       // this.bidItem.amount = this.item.offer;
@@ -248,7 +197,7 @@ export default {
     Accept() {
       this.acceptBid(this.item.id);
       this.isSaved = true;
-      this.message = 'Offer Accepted.';
+      this.message = "Offer Accepted.";
       this.isInfo = true;
     },
     Decline() {
@@ -259,23 +208,25 @@ export default {
 
       const decline = {
         id: this.item.id,
-        comment: this.item.declineReason,
+        comment: this.item.declineReason
       };
 
       this.declineBid(decline);
       this.isSaved = true;
-      this.message = 'Offer Declined.';
+      this.message = "Offer Declined.";
       this.isInfo = false;
-    },
+    }
   },
   computed: {
-    ...mapState('bid', ['bidIt,em']),
+    ...mapState("bid", ["bidIt,em"])
   },
   watch: {
     item() {
       this.isSaved = false;
-      this.canEdit = this.item.statusCode === 'E1';
-    },
-  },
+      this.canEdit = this.item.statusCode === "E1";
+    }
+  }
 };
 </script>
+
+<style lang="scss" scoped></style>

src/components/processFlow/offers.vue

@@ -1,11 +1,10 @@
 <template>
-  <div>
+  <main id="main" style="margin-top:-20px; padding-bottom:50px">
     <div class="container">
-      <br />
       <div class="row">
         <div class="col-md-12 col-lg-8">
-          <div class="title-box-d">
-            <h1 class="title-d" style="text-align:left; font-size: 250%">Bid Offers</h1>
+          <div class="section-header">
+            <h2>Bid Offers</h2>
           </div>
         </div>
       </div>
@@ -42,39 +41,39 @@
         </div>
       </div>
     </div>
-  </div>
+  </main>
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
-import makeOffer from './makeOffer.vue';
-import listView from '../shared/listView.vue';
+import { mapState, mapActions } from "vuex";
+import makeOffer from "./makeOffer.vue";
+import listView from "../shared/listView.vue";
 
 export default {
-  name: 'offers',
+  name: "offers",
   components: { makeOffer, listView },
   data() {
     return {
       item: {},
-      columns: ['date', 'type', 'shortDescription', 'status', 'price', 'offer', 'madeBy'],
-      formats: ['date', 'text', 'text', 'text', 'money', 'money', 'text'],
-      columnHeaders: ['', '', 'description', '', '', 'offerPrice', 'offerBy'],
+      columns: ["date", "type", "shortDescription", "status", "price", "offer", "madeBy"],
+      formats: ["date", "text", "text", "text", "money", "money", "text"],
+      columnHeaders: ["", "", "description", "", "", "offerPrice", "offerBy"]
     };
   },
   methods: {
-    ...mapActions('bid', ['getBids']),
+    ...mapActions("bid", ["getBids"]),
     Edit(item) {
       this.item = item;
 
       const element = this.$refs.MyModalForm;
-      $(element).modal('show');
-    },
+      $(element).modal("show");
+    }
   },
   computed: {
-    ...mapState('bid', ['bidItems']),
+    ...mapState("bid", ["bidItems"])
   },
   mounted() {
     this.getBids();
-  },
+  }
 };
 </script>

src/components/property/commercial/commercialCarouselSection.vue

@@ -0,0 +1,158 @@
+<template>
+  <section id="intro">
+    <div class="container">
+      <div class="row">
+        <div align="left" class="col-sm-12 col-md-8">
+          <div class="intro-content">
+            <h2>Find an Office</h2>
+
+            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
+              <li class="nav-item">
+                <a
+                  class="nav-link btn-white-border"
+                  id="buy-tab"
+                  data-toggle="pill"
+                  href="#buy"
+                  role="tab"
+                  aria-controls="buy"
+                  aria-selected="true"
+                  @click="SetSalesType('Sale')"
+                  >Buy office space</a
+                >
+              </li>
+              <li class="nav-item">
+                <a
+                  class="nav-link btn-white-border"
+                  id="rent-tab"
+                  data-toggle="pill"
+                  href="#rent"
+                  role="tab"
+                  aria-controls="rent"
+                  aria-selected="false"
+                  @click="SetSalesType('Rent')"
+                  >Rent an office</a
+                >
+              </li>
+            </ul>
+            <div class="tab-content" id="pills-tabContent">
+              <div
+                class="tab-pane fade show active"
+                id="start"
+                role="tabpanel"
+                aria-labelledby="start-tab"
+              >
+                <p></p>
+              </div>
+
+              <div class="tab-pane fade show" id="buy" role="tabpanel" aria-labelledby="buy-tab">
+                <h4>PROPERTIES FOR SALE</h4>
+                <div class="row">
+                  <div class="form-group col-md-12">
+                    <autoComplete
+                      align="left"
+                      class="col-md-11 offset-1"
+                      :items="suburbList"
+                      @selection="SelectedFilter"
+                      style="width:100%; margin-left:-15px"
+                    />
+                  </div>
+                </div>
+                <a v-on:click="SearchClick" class="btn-solid-blue"
+                  ><i class="fa fa-search"></i> SEARCH</a
+                >
+              </div>
+
+              <div class="tab-pane fade" id="rent" role="tabpanel" aria-labelledby="rent-tab">
+                <h4>RENTAL PROPERTIES</h4>
+                <div class="row">
+                  <div class="form-group col-md-12">
+                    <autoComplete
+                      align="left"
+                      class="col-md-11 offset-1"
+                      :items="suburbList"
+                      @selection="SelectedFilter"
+                      style="width:100%; margin-left:-15px"
+                    />
+                  </div>
+                </div>
+                <a v-on:click="SearchClick" class="btn-solid-blue"
+                  ><i class="fa fa-search"></i> FIND</a
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <carousel
+      :nav="false"
+      :dots="false"
+      :items="1"
+      :autoplay="true"
+      :loop="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/comm-1.jpg" alt="" />
+      <img class="item" src="img/intro-carousel/comm-2.jpg" alt="" />
+      <img class="item" src="img/intro-carousel/comm-3.jpg" alt="" />
+      <img class="item" src="img/intro-carousel/comm-4.jpg" alt="" />
+      <img class="item" src="img/intro-carousel/comm-5.jpg" alt="" />
+      <img class="item" src="img/intro-carousel/comm-6.jpg" alt="" />
+    </carousel>
+
+    <div id="intro-carousel" class="owl-carousel"></div>
+  </section>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapState, mapActions } from "vuex";
+import autoComplete from "../../shared/autoComplete";
+import carousel from "vue-owl-carousel";
+import searchResult from "./commercialSearchResults";
+export default {
+  components: {
+    carousel,
+    autoComplete,
+    searchResult
+  },
+  data() {
+    return {
+      propertyUsageType: "Commercial",
+      salesType: "Sale",
+      searchText: "",
+      clicked: false
+    };
+  },
+  computed: {
+    ...mapState("propertySearch", ["suburbs", "suburbList", "propertySearch"])
+  },
+  methods: {
+    ...mapActions("propertySearch", ["getSuburbs", "applyFilter"]),
+    SetSalesType(value) {
+      this.salesType = value;
+    },
+    SearchClick() {
+      const item = this.suburbs.find(s => s.display === this.searchText);
+      this.propertySearch.province = item.province;
+      this.propertySearch.city = item.city;
+      this.propertySearch.suburb = item.suburb;
+      this.propertySearch.propertyUsageType = this.propertyUsageType;
+      this.propertySearch.salesType = this.salesType;
+
+      this.$router.push("/property/commercial/searchResult");
+    },
+    SelectedFilter(item) {
+      this.searchText = item;
+    }
+  },
+  mounted() {
+    this.getSuburbs();
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/property/commercial/commercialContentSection.vue

@@ -0,0 +1,19 @@
+<template>
+  <section id="services">
+    <div class="container">
+      <div class="section-header">
+        <p>
+          Uni-Vate Properties seeks out professional, clean spaces for such companies and acts as
+          mediator between the landlord/-lady and the tenants. Uni-Vate Properties provides
+          value-adding service to clients and conducts business with a high standard and integrity.
+        </p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

src/components/property/commercial/commercialPage.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <carouselSection />
+    <main id="main">
+      <contentSection data-aos="fade-left" />
+      <latestListings
+        data-aos="fade-up"
+        data-aos-anchor-placement="center-bottom"
+        data-aos-delay="150"
+      />
+    </main>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import carouselSection from "./commercialCarouselSection";
+import contentSection from "./commercialContentSection";
+import latestListings from "./latestListings";
+import AOS from "aos";
+import "aos/dist/aos.css";
+export default {
+  created() {
+    AOS.init();
+  },
+  components: {
+    carouselSection,
+    contentSection,
+    latestListings
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/property/commercial/commercialSearchResults.vue

@@ -0,0 +1,109 @@
+<template>
+  <main id="main" style="margin-top:-20px; padding-bottom:50px">
+    <section>
+      <div class="container">
+        <div class="row pt-5  justify-content-md-center">
+          <h3 v-if="propertySearch.salesType === 'Sale'">COMMERCIAL PROPERTIES FOR SALE</h3>
+          <h3 v-else-if="propertySearch.salesType === 'Rent'">COMMERCIAL PROPERTIES FOR RENT</h3>
+        </div>
+        <div v-if="properties.length > 0" class="row justify-content-md-center">
+          <div
+            class="col-lg-3 col-md-6 col-sm-6"
+            v-for="currentProperty in properties"
+            :key="currentProperty.id"
+          >
+            <div>
+              <div class="portfolio-item">
+                <img style="width:255px; height:255px" :src="currentProperty.displayImage" alt="" />
+
+                <h4 class="mt-3">{{ currentProperty.suburb }}</h4>
+                <p>
+                  Opposite Monument Park Spar, Pretoria! Secure Parking. A stand-alone building,
+                  situated in the best location. Incredible bargain!
+                </p>
+                <br />
+
+                <!-- <a href="commercialproperty-page.php" class="btn-white-border">VIEW</a> -->
+                <router-link
+                  class="btn-white-border"
+                  :to="`/property/commercial/property/${currentProperty.id}`"
+                  >VIEW</router-link
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-else class="row">
+          <div align="center" class="col-md-12">
+            <img src="img/no-homes.png" />
+            <br />
+            <br />
+            <p>Sorry no listing where found matching your search</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapState, mapActions } from "vuex";
+import propertyCard from "../propertyCard";
+
+export default {
+  name: "propertysearch",
+  components: {
+    propertyCard
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    console.log(this.propertySearch.salesType);
+
+    if (typeof this.propertySearch.propertyUsageType === "undefined") {
+      this.propertySearch.propertyUsageType = "Residential";
+    }
+    if (this.user) {
+      this.propertySearch.userName = this.user.username;
+    }
+
+    this.searchProperties(this.propertySearch);
+  },
+  methods: {
+    ...mapActions("propertySearch", [
+      "searchProperties",
+      "clearProperties",
+      "updateResultsShowing"
+    ]),
+    SetType(item) {
+      this.propertySearch.propertyUsageType = item;
+    },
+    SearchPage() {
+      this.clearProperties();
+      this.$router.push("/property/search");
+    }
+  },
+  computed: {
+    ...mapState("propertySearch", ["properties", "propertySearch", "resultsShowing"]),
+    ...mapState("authentication", ["user"]),
+    ParamsChanged() {
+      console.log(JSON.stringify(this.propertySearch));
+      if (typeof this.propertySearch.propertyUsageType === "undefined") {
+        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+        this.propertySearch.propertyUsageType = "Residential";
+      }
+      this.searchProperties(this.propertySearch);
+      return null;
+    }
+  },
+  watch: {
+    ParamsChanged() {
+      return null;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/property/commercial/latestListings.vue

@@ -0,0 +1,49 @@
+<template>
+  <main id="main">
+    <section id="portfolio">
+      <div class="container">
+        <div class="row">
+          <div class="col-lg-12">
+            <h2>Latest Listings</h2>
+          </div>
+        </div>
+      </div>
+      <div class="contianer">
+        <div class="row">
+          <div class="col">
+            <propertyCard
+              v-if="properties.length > 0"
+              name="propertyholder"
+              :properties="properties"
+              :showSort="false"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapState, mapActions } from "vuex";
+import propertyCard from "../propertyCard";
+export default {
+  components: {
+    propertyCard
+  },
+  methods: {
+    ...mapActions("propertySearch", ["searchProperties"])
+  },
+  mounted() {
+    this.propertySearch.propertyUsageType = "Commercial";
+
+    this.searchProperties(this.propertySearch);
+  },
+  computed: {
+    ...mapState("propertySearch", ["properties", "propertySearch"])
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,46 @@
+<template>
+  <section id="intro">
+    <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"
+          style="object-fit:cover"
+          v-for="(image, i) in propertyImages"
+          :src="image"
+          :key="i"
+        />
+      </carousel>
+    </div>
+  </section>
+</template>
+
+<script>
+/* eslint-disable */
+
+import carousel from "vue-owl-carousel";
+export default {
+  components: {
+    carousel
+  },
+  data() {
+    return {
+      images: []
+    };
+  },
+  props: {
+    propertyImages: {}
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,146 @@
+<template>
+  <section>
+    <div class="container">
+      <div class="row" id="resort-profile">
+        <div class="col-md-4">
+          <div class="resPortfolioSection">
+            <div v-for="(image, i) in propertyImages" @click="index = i" :key="i">
+              <div v-if="i < 3">
+                <img
+                  v-if="i === 0"
+                  style="width:100%; height:201px;object-fit: cover"
+                  :src="image"
+                />
+                <div v-else-if="i !== 0">
+                  <img
+                    v-if="i % 2 === 0"
+                    style="width:50%; height:140px; float:right;"
+                    :src="image"
+                  />
+                  <img v-else style="width:50%; height:140px; float:left" :src="image" />
+                </div>
+              </div>
+            </div>
+
+            <gallery :images="propertyImages" :index="index" @close="index = null"></gallery>
+          </div>
+
+          <div class="panel-left p-5" style="margin-top:140px; margin-bottom:50px">
+            <h2>Property Detial</h2>
+            <p>{{ property.addressLine1 }}</p>
+            <p>Town, Suburb</p>
+            <p>{{ property.shortDescription }}</p>
+            <p>{{ property.price }}</p>
+            <div class="btn-white-border"><i class="fa fa-search"></i>BOOK A VIEWING</div>
+          </div>
+        </div>
+        <div class="col-md-8 p-5 resort-profile">
+          <h2>{{ property.propertyName }} / {{ property.addressLine1 }}</h2>
+          <div>
+            <table class="table table-striped">
+              <thead>
+                <tr>
+                  <th scope="col">Reference</th>
+                  <th scope="col">Size</th>
+                  <th scope="col">Location</th>
+                  <th scope="col">Kitchen</th>
+                  <th scope="col">Extras</th>
+                  <th scope="col"></th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>#123456</td>
+                  <td>#m2</td>
+                  <td>Second Floor</td>
+                  <td>yes</td>
+                  <td>open plan</td>
+                  <td><a href="#" class="btn-solid-blue">BOOK A VIEWING</a></td>
+                </tr>
+                <tr>
+                  <td>#123456</td>
+                  <td>#m2</td>
+                  <td>Top Floor</td>
+                  <td>yes</td>
+                  <td>open plan</td>
+                  <td><a href="#" class="btn-solid-blue">BOOK A VIEWING</a></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <p></p>
+
+          <div class="d-flex mt-3">
+            <iframe
+              width="100%"
+              height="200"
+              id="gmap_canvas"
+              src="https://maps.google.com/maps?q=ngwenya%20lodge&t=&z=13&ie=UTF8&iwloc=&output=embed"
+              frameborder="0"
+              scrolling="no"
+              marginheight="0"
+              marginwidth="0"
+            ></iframe>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+/* eslint-disable */
+import gallery from "../../../shared/gallerySlideShow";
+export default {
+  components: {
+    gallery
+  },
+  props: {
+    property: {},
+    propertyImages: {}
+  },
+  data() {
+    return {
+      index: null,
+      date: new Date()
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+/* Extra small devices (phones, 600px and down) */
+@media only screen and (max-width: 575px) {
+  .resPortfolioSection {
+    margin-bottom: 100px;
+  }
+}
+
+/* Small devices (portrait tablets and large phones, 600px and up) */
+@media only screen and (min-width: 576px) {
+  .resPortfolioSection {
+    margin-bottom: 140px;
+  }
+}
+
+/* Medium devices (landscape tablets, 768px and up) */
+@media only screen and (min-width: 768px) {
+  .resPortfolioSection {
+    margin-bottom: 50px;
+  }
+}
+
+/* Large devices (laptops/desktops, 992px and up) */
+@media only screen and (min-width: 992px) {
+  .resPortfolioSection {
+    margin-bottom: 60px;
+  }
+}
+
+/* Extra large devices (large laptops and desktops, 1200px and up) */
+@media only screen and (min-width: 1200px) {
+  .resPortfolioSection {
+    margin-bottom: 80px;
+  }
+}
+</style>

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

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <carouselSection v-if="propertyImages.length > 0" :propertyImages="propertyImages" />
+    <main id="main" style="margin-top:-20px">
+      <contentSection
+        v-if="propertyImages.length > 0"
+        :property="property"
+        :propertyImages="propertyImages"
+      />
+    </main>
+  </div>
+  <!-- #intro -->
+</template>
+
+<script>
+/* eslint-disable */
+
+import { mapState, mapActions } from "vuex";
+import makeOffer from "../../../processFlow/makeOffer";
+import carouselSection from "./carouselSection";
+import contentSection from "./contentSection";
+
+export default {
+  name: "property",
+  components: {
+    makeOffer,
+    carouselSection,
+    contentSection
+  },
+  data() {
+    return {
+      index: null,
+      date: new Date()
+    };
+  },
+  async mounted() {
+    await this.getProperty(this.$route.params.id);
+    await this.getPropertyImages(this.$route.params.id);
+    this.mayEditProperty(this.$route.params.id);
+  },
+  computed: {
+    ...mapState("property", ["property", "propertyImages"]),
+    ...mapState("propertyEdit", ["mayEdit"])
+  },
+  methods: {
+    ...mapActions("property", ["getProperty", "getPropertyImages", "clearPropertyImages"]),
+    ...mapActions("propertyEdit", ["mayEditProperty"]),
+    formatPrice(value) {
+      const val = (value / 1).toFixed(2);
+      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
+    },
+    formatAddress(value) {
+      if (value !== "") {
+        return `${value}<br/>`;
+      }
+      return "";
+    }
+  },
+  beforeDestroy() {
+    this.clearPropertyImages();
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/property/propertyCard.vue

@@ -1,144 +1,59 @@
 <template>
-  <!-- eslint-disable max-len -->
-  <div>
-    <div class="form-group row" v-if="showSort">
-      <button
-        type="button"
-        class="btn btn-link font-weight-bold color-b"
-        style="width: 150px; height:40px;"
-        @click="sortNewest()"
-      >Newest</button>
-      <button
-        type="button"
-        class="btn btn-link font-weight-bold color-b"
-        style="width: 150px; height:40px;"
-        @click="sortLowPrice()"
-      >Lowest Price</button>
-      <button
-        type="button"
-        class="btn btn-link font-weight-bold color-b"
-        style="width: 150px; height:40px;"
-        @click="sortHighPrice()"
-      >Highest Price</button>
-      <button
-        v-if="salesType === 'Rent'"
-        type="button"
-        class="btn btn-link font-weight-bold color-b"
-        style="width: 150px; height:40px;"
-        @click="sortDateAvailable()"
-      >Date Available</button>
-      <hr />
-    </div>
-    <div class="form-group row">
-      <div class="col-md-4" v-for="currentProperty in properties" :key="currentProperty.id">
-        <router-link :to="`/property/property/${currentProperty.id}`">
-          <div class="card-box-a card-shadow">
-            <div class="img-box-a">
-              <img
-                :src="currentProperty.displayImage"
-                alt
-                class="img-a img-fluid"
-                style="height:466px; width:350px; object-fit: cover;"
-              />
-              <p
-                v-if="!currentProperty.isSale"
-                :class="[currentProperty.hasPendingOffer ? 'top-left pendingOffer' : 'top-left normalText']"
-              >
-                <strong>{{ currentProperty.available }}</strong>
-              </p>
-              <p
-                v-if="currentProperty.isSale  && currentProperty.hasPendingOffer"
-                class="top-left pendingOffer"
-              >
-                <strong>{{ currentProperty.available }}</strong>
-              </p>
-            </div>
-            <div class="card-overlay">
-              <div class="card-overlay-a-content">
-                <div class="card-header-a">
-                  <h4 class="card-title-a">
-                    <router-link
-                      :to="`/property/property/${currentProperty.id}`"
-                      class="link-a"
-                    >{{ currentProperty.shortDescription }}</router-link>
-                    <router-link
-                      v-if="!currentProperty.isSale"
-                      :to="`/property/property/${currentProperty.id}`"
-                      class="link-a"
-                    ></router-link>
-                  </h4>
-                  <h4 class="card-title-c">
-                    <router-link :to="`/property/property/${currentProperty.id}`" class="link-a">
-                      {{ currentProperty.province }}
-                      <br />
-                      {{ currentProperty.city }}
-                      <br />
-                      {{ currentProperty.suburb }}
-                    </router-link>
-                  </h4>
-                </div>
-                <div class="card-body-a">
-                  <div class="price-box d-flex">
-                    <span
-                      v-if="currentProperty.isSale"
-                      class="price-a"
-                    >sale | {{ currentProperty.displayPrice }}</span>
-                    <span
-                      v-if="!currentProperty.isSale"
-                      class="price-a"
-                    >rent | {{ currentProperty.displayPrice }}</span>
-                  </div>
-                  <router-link :to="`/property/property/${currentProperty.id}`" class="link-a">
-                    Click here to view
-                    <span class="ion-ios-arrow-forward"></span>
-                  </router-link>
+  <section id="portfolio" class="wow fadeInUp">
+    <div class="container-fluid">
+      <div class="row">
+        <div
+          class="col-lg-3 col-md-6 col-sm-6"
+          v-for="currentProperty in properties"
+          :key="currentProperty.id"
+        >
+          <div v-if="currentProperty.propertyUsageType === 'Residential'">
+            <router-link :to="`/property/residential/property/${currentProperty.id}`">
+              <div class="portfolio-item p-4 wow fadeInUp justify-content-md-center">
+                <div class="feature-top pt-3 mb-2">
+                  <h3>{{ currentProperty.displayPrice }}</h3>
+                  <img :src="currentProperty.displayImage" alt="" />
                 </div>
-                <div class="card-footer-a" v-if="currentProperty.showFooter">
-                  <ul class="card-info d-flex justify-content-around">
-                    <li v-if="currentProperty.area !== null">
-                      <h4 class="card-info-title">
-                        <img src="../../../public/img/icons/area.png" height="16px" width="16px" />
-                        <!-- <i class="fa fa-ruler-combined"></i> -->
-                      </h4>
-                      <span v-html="currentProperty.area"></span>
-                    </li>
-                    <li v-if="currentProperty.beds !== null">
-                      <h4 class="card-info-title">
-                        <i class="fa fa-bed"></i>
-                      </h4>
-                      <span>{{ currentProperty.beds }}</span>
-                    </li>
-                    <li v-if="currentProperty.baths !== null">
-                      <h4 class="card-info-title">
-                        <i class="fa fa-bath"></i>
-                      </h4>
-                      <span>{{ currentProperty.baths }}</span>
-                    </li>
-                    <li v-if="currentProperty.garages !== null">
-                      <h4 class="card-info-title">
-                        <!-- <i class="fa fa-warehouse"></i> -->
-                        <img src="../../../public/img/icons/garage.png" height="16px" width="16px" />
-                      </h4>
-                      <span>{{ currentProperty.garages }}</span>
-                    </li>
-                  </ul>
+                <h1>{{ currentProperty.suburb }}</h1>
+                <p>
+                  <strong>Week</strong> #000 &nbsp;|&nbsp; <strong>Season</strong> Peak <br />
+                  <strong>Levy</strong> #R0000
+                </p>
+                <a href="#"> </a>
+              </div>
+            </router-link>
+          </div>
+          <div v-else-if="currentProperty.propertyUsageType === 'Commercial'">
+            <router-link :to="`/property/commercial/property/${currentProperty.id}`">
+              <div class="portfolio-item p-4 wow fadeInUp justify-content-md-center">
+                <div class="feature-top pt-3 mb-2">
+                  <h3>{{ currentProperty.displayPrice }}</h3>
+                  <img :src="currentProperty.displayImage" alt="" />
                 </div>
+                <h1>{{ currentProperty.suburb }}</h1>
+                <p>
+                  <strong>Week</strong> #000 &nbsp;|&nbsp; <strong>Season</strong> Peak <br />
+                  <strong>Levy</strong> #R0000
+                </p>
+                <a href="#"> </a>
               </div>
-            </div>
+            </router-link>
           </div>
-        </router-link>
-        <br />
+        </div>
       </div>
     </div>
-  </div>
+  </section>
+  <!-- #listings -->
 </template>
 
 <script>
+/* eslint-disable */
+
 export default {
   props: {
     properties: { type: Array, default: () => [] },
     showSort: { type: Boolean, default: true },
-    salesType: { type: String, default: 'Rent' },
+    salesType: { type: String, default: "Rent" }
   },
   methods: {
     sortHighPrice() {
@@ -176,7 +91,9 @@ export default {
       }
 
       return this.properties.sort(compare);
-    },
-  },
+    }
+  }
 };
 </script>
+
+<style lang="scss" scoped></style>

src/components/property/propertySearchResults.vue

@@ -1,45 +1,23 @@
 <template>
   <!-- eslint-disable max-len -->
-  <div class="container">
-    <br />
-    <div class="container col-md-12">
-      <div class="col-sm-12">
-        <div class="about-img-box">
-          <img
-            v-if="propertySearch.propertyUsageType === 'Residential'"
-            src="img/Pretoria-South-Africa.jpg"
-            alt="Property Listing"
-            class="img-fluid"
-            style="width:800px;height:400px; border-radius:10px"
-          />
-          <img
-            v-else
-            src="img/Johannesburg-south-africa-1.jpg"
-            alt="Property Listing"
-            class="img-fluid"
-            style="width:800px;height:400px; border-radius:10px"
-          />
-        </div>
-        <div class="sinse-box" style="opacity:0.7; border: white solid 3px; border-radius: 15px">
-          <h3 class="sinse-title">Property Listing</h3>
+  <section id="portfolio">
+    <div class="container-fluid p-0">
+      <div class="row ml-4">
+        <div class="col">
+          <h2>Search Results</h2>
         </div>
       </div>
-      <br />
-      <div>
-        <propertyCard
-          v-if="properties.length > 0"
-          name="propertyholder"
-          :properties="properties"
-          :salesType="propertySearch.salesType"
-        />
-        <!-- <div v-if="loading">
-          <img
-            class="img-fluid"
-            src="/img/kloader.gif"
-            alt="UVProp logo"
-            style="width:128px;height:128px;"
-          />
-        </div>-->
+      <div class="contianer-fluid">
+        <div class="row">
+          <div class="col">
+            <propertyCard
+              v-if="properties.length > 0"
+              name="propertyholder"
+              :properties="properties"
+              :salesType="propertySearch.salesType"
+            />
+          </div>
+        </div>
         <div v-if="properties.length === 0">
           <img src="../../../public/img/no-homes.png" />
           <br />
@@ -47,30 +25,26 @@
           <p>Sorry no listing where found matching your search</p>
         </div>
       </div>
-      <br />
-      <div class="row">
-        <div class="col-md-2 offset-5">
-          <button type="button" @click="SearchPage" class="btn btn-b-n">Back to Search</button>
-        </div>
-      </div>
     </div>
-  </div>
+  </section>
 </template>
+
 <script>
-import { mapState, mapActions } from 'vuex';
-import propertyCard from './propertyCard.vue';
+/* eslint-disable */
+import { mapState, mapActions } from "vuex";
+import propertyCard from "./propertyCard.vue";
 
 export default {
-  name: 'propertysearch',
+  name: "propertysearch",
   components: {
-    propertyCard,
+    propertyCard
   },
   data() {
     return {};
   },
   mounted() {
-    if (typeof this.propertySearch.propertyUsageType === 'undefined') {
-      this.propertySearch.propertyUsageType = 'Residential';
+    if (typeof this.propertySearch.propertyUsageType === "undefined") {
+      this.propertySearch.propertyUsageType = "Residential";
     }
     if (this.user) {
       this.propertySearch.userName = this.user.username;
@@ -79,36 +53,38 @@ export default {
     this.searchProperties(this.propertySearch);
   },
   methods: {
-    ...mapActions('propertySearch', [
-      'searchProperties',
-      'clearProperties',
-      'updateResultsShowing',
+    ...mapActions("propertySearch", [
+      "searchProperties",
+      "clearProperties",
+      "updateResultsShowing"
     ]),
     SetType(item) {
       this.propertySearch.propertyUsageType = item;
     },
     SearchPage() {
       this.clearProperties();
-      this.$router.push('/property/search');
-    },
+      this.$router.push("/property/search");
+    }
   },
   computed: {
-    ...mapState('propertySearch', ['properties', 'propertySearch', 'resultsShowing']),
-    ...mapState('authentication', ['user']),
+    ...mapState("propertySearch", ["properties", "propertySearch", "resultsShowing"]),
+    ...mapState("authentication", ["user"]),
     ParamsChanged() {
       console.log(JSON.stringify(this.propertySearch));
-      if (typeof this.propertySearch.propertyUsageType === 'undefined') {
+      if (typeof this.propertySearch.propertyUsageType === "undefined") {
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-        this.propertySearch.propertyUsageType = 'Residential';
+        this.propertySearch.propertyUsageType = "Residential";
       }
       this.searchProperties(this.propertySearch);
       return null;
-    },
+    }
   },
   watch: {
     ParamsChanged() {
       return null;
-    },
-  },
+    }
+  }
 };
 </script>
+
+<style lang="scss" scoped></style>

src/components/property/residential/latestListings.vue

@@ -0,0 +1,49 @@
+<template>
+  <main id="main">
+    <section id="portfolio">
+      <div class="container">
+        <div class="row">
+          <div class="col-lg-12">
+            <h2>Latest Listings</h2>
+          </div>
+        </div>
+      </div>
+      <div class="contianer">
+        <div class="row">
+          <div class="col">
+            <propertyCard
+              v-if="properties.length > 0"
+              name="propertyholder"
+              :properties="properties"
+              :showSort="false"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapState, mapActions } from "vuex";
+import propertyCard from "../propertyCard";
+export default {
+  components: {
+    propertyCard
+  },
+  methods: {
+    ...mapActions("propertySearch", ["searchProperties"])
+  },
+  mounted() {
+    this.propertySearch.propertyUsageType = "Residential";
+
+    this.searchProperties(this.propertySearch);
+  },
+  computed: {
+    ...mapState("propertySearch", ["properties", "propertySearch"])
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/property/residential/residentialCarouselSection.vue

@@ -0,0 +1,310 @@
+<template>
+  <div>
+    <section id="intro">
+      <div class="container">
+        <div class="row">
+          <div align="left" class="col-sm-12 col-md-8">
+            <div class="intro-content">
+              <h2>Find your Home</h2>
+
+              <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
+                <li class="nav-item">
+                  <a
+                    class="nav-link btn-white-border"
+                    id="buy-tab"
+                    data-toggle="pill"
+                    href="#buy"
+                    role="tab"
+                    aria-controls="buy"
+                    aria-selected="true"
+                    @click="SetSalesType('Sale')"
+                    >Buy</a
+                  >
+                </li>
+                <li class="nav-item">
+                  <a
+                    class="nav-link btn-white-border"
+                    id="rent-tab"
+                    data-toggle="pill"
+                    href="#rent"
+                    role="tab"
+                    aria-controls="rent"
+                    aria-selected="false"
+                    @click="SetSalesType('Rent')"
+                    >Rent</a
+                  >
+                </li>
+              </ul>
+              <div class="tab-content" id="pills-tabContent">
+                <div
+                  class="tab-pane fade show active"
+                  id="start"
+                  role="tabpanel"
+                  aria-labelledby="start-tab"
+                >
+                  <p></p>
+                </div>
+
+                <div class="tab-pane fade show" id="buy" role="tabpanel" aria-labelledby="buy-tab">
+                  <h4>PROPERTIES FOR SALE</h4>
+                  <div class="row">
+                    <div align="left" class="form-group col-md-12">
+                      <autoComplete
+                        align="left"
+                        class="col-md-11 offset-1"
+                        :items="suburbList"
+                        @selection="SelectedFilter"
+                        style="width:100%; margin-left:-15px"
+                      />
+                    </div>
+                    <!-- <div class="form-group col-md-6">
+                    <input
+                      data-toggle="dropdown"
+                      name="region"
+                      class="form-control my-2"
+                      id="name"
+                      placeholder="Region"
+                      aria-haspopup="true"
+                      aria-expanded="false"
+                    />
+                    
+                    <input
+                      data-toggle="dropdown"
+                      name="town"
+                      class="form-control my-2"
+                      id="name"
+                      placeholder="Town"
+                      aria-haspopup="true"
+                      aria-expanded="false"
+                    />
+                  </div>
+                  <div class="form-group col-md-6">
+                    <input
+                      data-toggle="dropdown"
+                      name="suburb"
+                      class="form-control my-2"
+                      id="name"
+                      placeholder="Suburb"
+                      aria-haspopup="true"
+                      aria-expanded="false"
+                    />
+                    <input
+                      data-toggle="dropdown"
+                      name="type"
+                      class="form-control my-2"
+                      id="name"
+                      placeholder="Property Type"
+                      aria-haspopup="true"
+                      aria-expanded="false"
+                    /> -->
+                    <!-- </div> -->
+                  </div>
+                  <a v-on:click="SearchClick" class="btn-solid-blue"
+                    ><i class="fa fa-search"></i> SEARCH</a
+                  >
+                </div>
+
+                <div class="tab-pane fade" id="rent" role="tabpanel" aria-labelledby="rent-tab">
+                  <h4>RENTAL PROPERTIES</h4>
+                  <div class="row">
+                    <div align="left" class="form-group col">
+                      <autoComplete
+                        align="left"
+                        class="col-md-11 offset-1"
+                        :items="suburbList"
+                        @selection="SelectedFilter"
+                        style="width:100%; margin-left:-15px"
+                      />
+                    </div>
+                    <!-- <div class="form-group col-md-6">
+                    <input
+                      data-toggle="dropdown"
+                      name="region"
+                      class="form-control my-2"
+                      id="name"
+                      placeholder="Region"
+                      aria-haspopup="true"
+                      aria-expanded="false"
+                    />
+                    <input
+                      data-toggle="dropdown"
+                      name="town"
+                      class="form-control my-2"
+                      id="name"
+                      placeholder="Town"
+                      aria-haspopup="true"
+                      aria-expanded="false"
+                    />
+                  </div>
+                  <div class="form-group col-md-6">
+                    <input
+                      data-toggle="dropdown"
+                      name="suburb"
+                      class="form-control my-2"
+                      id="name"
+                      placeholder="Suburb"
+                      aria-haspopup="true"
+                      aria-expanded="false"
+                    />
+                    <input
+                      data-toggle="dropdown"
+                      name="type"
+                      class="form-control my-2"
+                      id="name"
+                      placeholder="Property Type"
+                      aria-haspopup="true"
+                      aria-expanded="false"
+                    />
+                  </div> -->
+                  </div>
+                  <a v-on:click="SearchClick" class="btn-solid-blue"
+                    ><i class="fa fa-search"></i> FIND</a
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <carousel
+        :nav="false"
+        :dots="false"
+        :items="1"
+        :autoplay="true"
+        :loop="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/residential-1.jpg" alt="" />
+        <img class="item" src="img/intro-carousel/residential-2.jpg" alt="" />
+        <img class="item" src="img/intro-carousel/residential-3.jpg" alt="" />
+        <img class="item" src="img/intro-carousel/residential-4.jpg" alt="" />
+        <img class="item" src="img/intro-carousel/residential-5.jpg" alt="" />
+        <img class="item" src="img/intro-carousel/residential-6.jpg" alt="" />
+      </carousel>
+    </section>
+    <main id="main" style="margin-top:-20px">
+      <div class="container-fluid">
+        <div class="row">
+          <div
+            ref="searchRes"
+            :class="{ 'searchRes--clicked': clicked }"
+            class="col-sm-12 searchRes"
+          >
+            <searchResult
+              :class="{ 'searchComponent--clicked ': clicked }"
+              class="searchComponent"
+            />
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapState, mapActions } from "vuex";
+import autoComplete from "../../shared/autoComplete";
+import carousel from "vue-owl-carousel";
+import searchResult from "../propertySearchResults";
+export default {
+  components: {
+    carousel,
+    autoComplete,
+    searchResult
+  },
+  data() {
+    return {
+      propertyUsageType: "Residential",
+      salesType: "Sale",
+      searchText: "",
+      clicked: false
+    };
+  },
+  computed: {
+    ...mapState("propertySearch", ["suburbs", "suburbList", "propertySearch"])
+  },
+  methods: {
+    ...mapActions("propertySearch", ["getSuburbs", "applyFilter"]),
+    SetSalesType(value) {
+      this.salesType = value;
+    },
+    SearchClick() {
+      const item = this.suburbs.find(s => s.display === this.searchText);
+      this.propertySearch.province = item.province;
+      this.propertySearch.city = item.city;
+      this.propertySearch.suburb = item.suburb;
+      this.propertySearch.propertyUsageType = this.propertyUsageType;
+      this.propertySearch.salesType = this.salesType;
+
+      //this.clicked = true;
+      this.$router.push("/property/residential/searchResult");
+    },
+    SelectedFilter(item) {
+      this.searchText = item;
+    }
+  },
+  mounted() {
+    this.getSuburbs();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.searchRes {
+  will-change: transform;
+  transition: height 500ms;
+  height: 0px;
+}
+
+.searchRes--clicked {
+  height: 75vh;
+}
+
+@media only screen and (max-width: 575px) {
+  .searchRes--clicked {
+    height: 100vh;
+  }
+}
+
+@media only screen and (min-width: 576px) {
+  .searchRes--clicked {
+    height: 60vh;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .searchRes--clicked {
+    height: 75vh;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .searchRes--clicked {
+    height: 60vh;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .searchRes--clicked {
+    height: 70vh;
+  }
+}
+
+.searchComponent {
+  will-change: transform;
+  transition: opacity 0.2s ease-in-out;
+  transition-delay: 0.5s;
+  margin-bottom: 80px;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  opacity: 0;
+}
+
+.searchComponent--clicked {
+  opacity: 1;
+}
+</style>

src/components/property/residential/residentialContentSection.vue

@@ -0,0 +1,19 @@
+<template>
+  <section id="services">
+    <div class="container">
+      <div class="section-header">
+        <p>
+          Uni-Vate Properties seeks out professional, clean spaces for such companies and acts as
+          mediator between the landlord/-lady and the tenants. Uni-Vate Properties provides
+          value-adding service to clients and conducts business with a high standard and integrity.
+        </p>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped></style>

src/components/property/residential/residentialPage.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <carouselSection />
+    <main id="main">
+      <contentSection data-aos="fade-left" />
+      <latestListings
+        data-aos="fade-up"
+        data-aos-anchor-placement="center-bottom"
+        data-aos-delay="150"
+      />
+    </main>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import carouselSection from "./residentialCarouselSection";
+import contentSection from "./residentialContentSection";
+import latestListings from "./latestListings";
+import AOS from "aos";
+import "aos/dist/aos.css";
+export default {
+  created() {
+    AOS.init();
+  },
+  components: {
+    carouselSection,
+    contentSection,
+    latestListings
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>