Narrow Carousel & ContactUs

public/css/newStyle.css

@@ -287,7 +287,8 @@ h3 {
 }
 
 #intro #intro-carousel .item {
-  height: 700px;
+  height: 550px;
+  object-fit: cover;
   display: block;
   background-size: center;
   background-position: center center;
@@ -296,6 +297,35 @@ h3 {
   transition-property: opacity;
 }
 
+/* Extra small devices (phones, 600px and down) */
+@media only screen and (max-width: 600px) {
+  #intro #intro-carousel .item {
+    height: 750px;
+  }
+}
+
+/* Small devices (portrait tablets and large phones, 600px and up) */
+@media only screen and (min-width: 600px) {
+  #intro #intro-carousel .item {
+    height: 660px;
+  }
+}
+
+/* Medium devices (landscape tablets, 768px and up) */
+@media only screen and (min-width: 768px) {
+  #intro #intro-carousel .item {
+    height: 550px;
+  }
+}
+
+/* Large devices (laptops/desktops, 992px and up) */
+@media only screen and (min-width: 992px) {
+}
+
+/* Extra large devices (large laptops and desktops, 1200px and up) */
+@media only screen and (min-width: 1200px) {
+}
+
 /*--------------------------------------------------------------
 # Buttons
 --------------------------------------------------------------*/

src/components/about/aboutTimeshareCarouselSection.vue

@@ -24,12 +24,42 @@
       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="" />
+      <img
+        class="item"
+        src="/img/intro-carousel/timeshare-1.jpg"
+        style="object-fit: cover"
+        alt=""
+      />
+      <img
+        class="item"
+        src="/img/intro-carousel/timeshare-2.jpg"
+        style="object-fit: cover"
+        alt=""
+      />
+      <img
+        class="item"
+        src="/img/intro-carousel/timeshare-3.jpg"
+        style="object-fit: cover"
+        alt=""
+      />
+      <img
+        class="item"
+        src="/img/intro-carousel/timeshare-4.jpg"
+        style="object-fit: cover"
+        alt=""
+      />
+      <img
+        class="item"
+        src="/img/intro-carousel/timeshare-5.jpg"
+        style="object-fit: cover"
+        alt=""
+      />
+      <img
+        class="item"
+        src="/img/intro-carousel/timeshare-6.jpg"
+        style="object-fit: cover"
+        alt=""
+      />
     </carousel>
 
     <div id="intro-carousel" class="owl-carousel"></div>

src/components/about/aboutUsCarouselSection.vue

@@ -26,12 +26,12 @@
       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="" />
+      <img class="item" src="/img/intro-carousel/home-1.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-2.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-3.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-4.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-5.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-6.jpg" style="object-fit: cover" alt="" />
     </carousel>
 
     <div id="intro-carousel" class="owl-carousel"></div>

src/components/home/carouselSection.vue

@@ -2,10 +2,9 @@
   <section id="intro">
     <div class="container">
       <div class="row">
-        <div align="left" class="col-sm-12 col-md-8">
-          <div class="intro-content">
+        <div align="left" class="col-sm-12 col-md-12 col-lg-8">
+          <div class="intro-content introContentAdjust">
             <h2>Find your perfect Property</h2>
-
             <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
               <li class="nav-item">
                 <a
@@ -175,12 +174,12 @@
       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="" />
+      <img class="item" src="/img/intro-carousel/home-1.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-2.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-3.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-4.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-5.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-6.jpg" style="object-fit: cover" alt="" />
     </carousel>
 
     <div id="intro-carousel" class="owl-carousel"></div>
@@ -264,4 +263,36 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+/* Extra small devices (phones, 600px and down) */
+@media only screen and (max-width: 600px) {
+  .introContentAdjust {
+    margin-top: -35px !important;
+  }
+}
+
+/* Small devices (portrait tablets and large phones, 600px and up) */
+@media only screen and (min-width: 600px) {
+  .introContentAdjust {
+    margin-top: -15px !important;
+  }
+}
+
+/* Medium devices (landscape tablets, 768px and up) */
+@media only screen and (min-width: 768px) {
+}
+
+/* Large devices (laptops/desktops, 992px and up) */
+@media only screen and (min-width: 992px) {
+  .introContentAdjust {
+    margin-top: 25px !important;
+  }
+}
+
+/* Extra large devices (large laptops and desktops, 1200px and up) */
+@media only screen and (min-width: 1200px) {
+  .introContentAdjust {
+    margin-top: 0px !important;
+  }
+}
+</style>

src/components/misc/privacyPolicy/carouselSection.vue

@@ -25,12 +25,12 @@
       style="margin-top:-50px"
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
     >
-      <img class="item" src="/img/intro-carousel/home-1.jpg" alt="" />
-      <img class="item" src="/img/intro-carousel/home-2.jpg" alt="" />
-      <img class="item" src="/img/intro-carousel/home-3.jpg" alt="" />
-      <img class="item" src="/img/intro-carousel/home-4.jpg" alt="" />
-      <img class="item" src="/img/intro-carousel/home-5.jpg" alt="" />
-      <img class="item" src="/img/intro-carousel/home-6.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/home-1.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-2.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-3.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-4.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-5.jpg" style="object-fit: cover" alt="" />
+      <img class="item" src="/img/intro-carousel/home-6.jpg" style="object-fit: cover" alt="" />
     </carousel>
 
     <div id="intro-carousel" class="owl-carousel"></div>

src/components/property/residential/residentialCarouselSection.vue

@@ -177,12 +177,42 @@
         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="" />
+        <img
+          class="item"
+          src="img/intro-carousel/residential-1.jpg"
+          style="object-fit: cover"
+          alt=""
+        />
+        <img
+          class="item"
+          src="img/intro-carousel/residential-2.jpg"
+          style="object-fit: cover"
+          alt=""
+        />
+        <img
+          class="item"
+          src="img/intro-carousel/residential-3.jpg"
+          style="object-fit: cover"
+          alt=""
+        />
+        <img
+          class="item"
+          src="img/intro-carousel/residential-4.jpg"
+          style="object-fit: cover"
+          alt=""
+        />
+        <img
+          class="item"
+          src="img/intro-carousel/residential-5.jpg"
+          style="object-fit: cover"
+          alt=""
+        />
+        <img
+          class="item"
+          src="img/intro-carousel/residential-6.jpg"
+          style="object-fit: cover"
+          alt=""
+        />
       </carousel>
     </section>
     <main id="main" style="margin-top:-20px">

src/components/propertyManagement/carouselSection.vue

@@ -24,16 +24,17 @@
       :items="1"
       :autoplay="true"
       :loop="true"
+      :autoHeight="true"
       id="intro-carousel"
-      style="margin-top:-50px"
+      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/16.jpg" alt="" />
-      <img class="item" src="../../../public/img/intro-carousel/comm-1.jpg" alt="" />
-      <img class="item" src="../../../public/img/intro-carousel/comm-4.jpg" alt="" />
-      <img class="item" src="../../../public/img/intro-carousel/3.jpg" alt="" />
-      <img class="item" src="../../../public/img/intro-carousel/home-5.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/home-1.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/16.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/comm-1.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/comm-4.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/3.jpg" alt="" />
+      <img class="item" src="/img/intro-carousel/home-5.jpg" alt="" />
     </carousel>
 
     <div id="intro-carousel" class="owl-carousel"></div>

src/components/shared/contactUsSection.vue

@@ -0,0 +1,132 @@
+<template>
+  <div>
+    <h4 align="left" class="contactHeader">Send us a message</h4>
+    <div class="form">
+      <div id="sendmessage">Your message has been sent. Thank you!</div>
+      <div id="errormessage"></div>
+      <div class="form-row">
+        <div class="form-group col-md-6">
+          <input
+            type="text"
+            name="name"
+            class="form-control"
+            id="name"
+            placeholder="Name"
+            data-rule="minlen:4"
+            data-msg="Please enter your name"
+            v-model="name"
+          />
+          <div class="validation"></div>
+        </div>
+        <div class="form-group col-md-6">
+          <input
+            type="email"
+            class="form-control"
+            name="email"
+            id="email"
+            placeholder="Email"
+            data-rule="email"
+            data-msg="Please enter a valid email"
+            v-model="email"
+          />
+          <div class="validation"></div>
+        </div>
+        <div class="form-group col-md-6">
+          <input
+            type="text"
+            name="phone"
+            class="form-control"
+            id="phone"
+            placeholder="Phone"
+            data-rule="minlen:10"
+            data-msg="Please enter at least 10 numbers"
+            v-model="phone"
+          />
+          <div class="validation"></div>
+        </div>
+        <div class="form-group col-md-6">
+          <input
+            type="text"
+            class="form-control"
+            name="property"
+            id="property"
+            placeholder="Property"
+            data-msg="Please enter the property you are interested in"
+            v-model="property"
+          />
+          <div class="validation"></div>
+        </div>
+      </div>
+      <div class="form-group">
+        <textarea
+          class="form-control"
+          name="message"
+          rows="5"
+          data-rule="required"
+          data-msg="Please write something for us"
+          placeholder="Message"
+          v-model="message"
+        ></textarea>
+        <div class="validation"></div>
+      </div>
+      <div class="text-center">
+        <button class="btn-solid-blue" @click="sendMail()">SEND</button>
+      </div>
+      <div v-if="boolSent">
+        <alert :text="alertMsg" :type="'SUCCESS'" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import axios from "axios";
+import alert from "../shared/alert";
+
+export default {
+  components: {
+    alert
+  },
+  data() {
+    return {
+      alertMsg: "Sent! You can expect a reply soon!",
+      name: null,
+      email: null,
+      phone: null,
+      property: null,
+      message: null,
+      boolSent: false
+    };
+  },
+  mounted() {
+    this.boolSent = false;
+  },
+  methods: {
+    async sendMail() {
+      var mailObj = {
+        toAddress: "jlouw365@gmail.com",
+        fromAddress: "jlouw365@gmail.com",
+        name: this.name,
+        email: this.email,
+        phone: this.phone,
+        property: this.property,
+        message: this.message
+      };
+
+      const response = await axios.post("/api/mail/0", mailObj);
+
+      if (response.status === 200) {
+        this.boolSent = true;
+      } else {
+        console.log("Error");
+      }
+    },
+    countDownChanged(dismissCountDown) {
+      this.dismissCountDown = dismissCountDown;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/shared/footerSection.vue

@@ -47,79 +47,7 @@
                 </p>
               </div>
               <div class="col-md-8">
-                <h4 align="left" class="contactHeader">Send us a message</h4>
-                <div class="form">
-                  <div id="sendmessage">Your message has been sent. Thank you!</div>
-                  <div id="errormessage"></div>
-                  <form
-                    action="mailto:jlouw365@gmail.com"
-                    method="post"
-                    role="form"
-                    class="contactForm"
-                  >
-                    <div class="form-row">
-                      <div class="form-group col-md-6">
-                        <input
-                          type="text"
-                          name="name"
-                          class="form-control"
-                          id="name"
-                          placeholder="Name"
-                          data-rule="minlen:4"
-                          data-msg="Please enter your name"
-                        />
-                        <div class="validation"></div>
-                      </div>
-                      <div class="form-group col-md-6">
-                        <input
-                          type="email"
-                          class="form-control"
-                          name="email"
-                          id="email"
-                          placeholder="Email"
-                          data-rule="email"
-                          data-msg="Please enter a valid email"
-                        />
-                        <div class="validation"></div>
-                      </div>
-                      <div class="form-group col-md-6">
-                        <input
-                          type="text"
-                          name="phone"
-                          class="form-control"
-                          id="phone"
-                          placeholder="Phone"
-                          data-rule="minlen:10"
-                          data-msg="Please enter at least 10 numbers"
-                        />
-                        <div class="validation"></div>
-                      </div>
-                      <div class="form-group col-md-6">
-                        <input
-                          type="text"
-                          class="form-control"
-                          name="property"
-                          id="property"
-                          placeholder="Property"
-                          data-msg="Please enter the property you are interested in"
-                        />
-                        <div class="validation"></div>
-                      </div>
-                    </div>
-                    <div class="form-group">
-                      <textarea
-                        class="form-control"
-                        name="message"
-                        rows="5"
-                        data-rule="required"
-                        data-msg="Please write something for us"
-                        placeholder="Message"
-                      ></textarea>
-                      <div class="validation"></div>
-                    </div>
-                    <div class="text-center"><button type="submit">SEND</button></div>
-                  </form>
-                </div>
+                <contactUsSection />
               </div>
             </div>
           </div>
@@ -188,9 +116,13 @@
 /* eslint-disable */
 import { mapState, mapActions } from "vuex";
 import Log from "../../assets/Log";
+import contactUsSection from "./contactUsSection";
 import AOS from "aos";
 import "aos/dist/aos.css";
 export default {
+  components: {
+    contactUsSection
+  },
   created() {
     AOS.init();
   },

src/components/timeshare/buy/carouselSection.vue

@@ -3,7 +3,7 @@
     <div class="container">
       <div class="row">
         <div align="left" class="col-sm-12 col-md-8">
-          <div class="intro-content box">
+          <div class="intro-content box" style="margin-top:-5px">
             <h2>Find your Timeshare</h2>
             <p>
               Please specify one or more details to view the available weeks and then select the
@@ -67,12 +67,42 @@
       style="margin-top:-50px"
       :responsive="{ 0: { items: 1, nav: false }, 600: { items: 1, nav: false } }"
     >
-      <img class="item" src="/img/intro-carousel/timeshare-1.jpg" alt="" />
-      <img class="item" src="/img/intro-carousel/timeshare-2.jpg" alt="" />
-      <img class="item" src="/img/intro-carousel/timeshare-3.jpg" alt="" />
-      <img class="item" src="/img/intro-carousel/timeshare-4.jpg" alt="" />
-      <img class="item" src="/img/intro-carousel/timeshare-5.jpg" alt="" />
-      <img class="item" src="/img/intro-carousel/timeshare-6.jpg" alt="" />
+      <img
+        class="item"
+        src="/img/intro-carousel/timeshare-1.jpg"
+        style="object-fit: cover"
+        alt=""
+      />
+      <img
+        class="item"
+        src="/img/intro-carousel/timeshare-2.jpg"
+        style="object-fit: cover"
+        alt=""
+      />
+      <img
+        class="item"
+        src="/img/intro-carousel/timeshare-3.jpg"
+        style="object-fit: cover"
+        alt=""
+      />
+      <img
+        class="item"
+        src="/img/intro-carousel/timeshare-4.jpg"
+        style="object-fit: cover"
+        alt=""
+      />
+      <img
+        class="item"
+        src="/img/intro-carousel/timeshare-5.jpg"
+        style="object-fit: cover"
+        alt=""
+      />
+      <img
+        class="item"
+        src="/img/intro-carousel/timeshare-6.jpg"
+        style="object-fit: cover"
+        alt=""
+      />
     </carousel>
 
     <div id="intro-carousel" class="owl-carousel"></div>