Add link from contact us page

src/router/index.js

@@ -250,12 +250,12 @@ const routes = [
     },
   },
   {
-    path: "/products/residency",
+    path: "/residency",
     name: "Residency",
     component: () =>
       import(/* webpackChunkName: "CNAP" */ "@/views/Residency.vue"),
     meta: {
-      title: "Platform One | Products | Residency",
+      title: "Platform One | Residency",
       bodyClass: "Residency-page",
       breadcrumb: "Residency",
     },

src/views/ContactUs.vue

 <template>
-  <div class="contact-us mb-5">
+  <div class="contact-us">
     <PageHeader title="Contact Us" />
     <v-container class="px-8">
       <v-form v-model="valid" ref="form">
@@ -171,15 +171,41 @@
         If you have a tech issue, please visit the Platform One Support Hub.
       </a>
     </v-container>
+    <Wave :bottom="false" class="mt-10">
+      <div class="container">
+        <div class="row justify-content-center">
+          <div class="col-md-6">
+            <h2 class="mx-auto">
+              Looking for the Residency Program sign up?
+            </h2>
+          </div>
+        </div>
+        <div class="row justify-content-center">
+          <div :class="$vuetify.breakpoint.smAndDown ? 'text-center' : ''">
+            <v-btn
+              :class="
+                $vuetify.breakpoint.smAndDown
+                  ? 'my-3 my-md-6 mx-3'
+                  : 'my-6 mr-6'
+              "
+              color="primary"
+              href="/#/residency"
+              >Residency Program</v-btn
+            >
+          </div>
+        </div>
+      </div>
+    </Wave>
   </div>
 </template>
 <script>
 import PageHeader from "@/components/PageHeader";
+import Wave from "@/components/Wave";
 import { mask } from "vue-the-mask";
 
 export default {
   name: "ContactUs",
-  components: { PageHeader },
+  components: { PageHeader, Wave },
   methods: {
     async doPost() {
       // this is the `action` attribute of your Google Forms form
@@ -203,7 +229,7 @@ export default {
         "entry.1003081443": this.phone || "",
         "entry.1603166847": this.organization || "",
         "entry.1644077708": this.sector || "",
-        emailAddress: this.email
+        emailAddress: this.email,
       };
       // google expects each form attr to be encoded
       const body = Object.entries(bodyParts)
@@ -216,9 +242,9 @@ export default {
         method: "POST",
         mode: "no-cors",
         headers: {
-          "Content-Type": "application/x-www-form-urlencoded"
+          "Content-Type": "application/x-www-form-urlencoded",
         },
-        body
+        body,
       });
     },
     async submit() {
@@ -240,7 +266,7 @@ export default {
         // add a fake wait
         if (duration < minWait) {
           // add wait
-          await new Promise(resolve => {
+          await new Promise((resolve) => {
             console.log("add wait", minWait - duration);
 
             let wait = setTimeout(() => {
@@ -263,7 +289,7 @@ export default {
       } finally {
         this.isBusy = false;
       }
-    }
+    },
   },
   directives: { mask },
   data: () => ({
@@ -286,81 +312,81 @@ export default {
       {
         value: 0,
         text:
-          "I'm interested in learning more about job opportunities within Platform One"
+          "I'm interested in learning more about job opportunities within Platform One",
       },
       { value: 1, text: "I'm a prospective customer within the government" },
       {
         value: 2,
         text:
-          "I'm a vendor and would like to learn more about how we can support you"
+          "I'm a vendor and would like to learn more about how we can support you",
       },
       {
         value: 3,
         text:
-          "I'm interested in an internship, residency, or a detail to Platform One"
+          "I'm interested in an internship, residency, or a detail to Platform One",
       },
-      { value: 4, text: "Other", showDetails: true }
+      { value: 4, text: "Other", showDetails: true },
     ],
     hearTopics: [
       {
         value: 0,
         text: "A government organization",
-        showDetails: "the Government organization"
+        showDetails: "the Government organization",
       },
       {
         value: 1,
         text: "An industry organization",
-        showDetails: "the industry organization"
+        showDetails: "the industry organization",
       },
       {
         value: 2,
-        text: "A current employee of Platform One"
+        text: "A current employee of Platform One",
       },
       {
         value: 3,
         text: "A software factory within DoD",
-        showDetails: "the software factory"
+        showDetails: "the software factory",
       },
       {
         value: 4,
-        text: "My management/leadership"
+        text: "My management/leadership",
       },
       {
         value: 5,
-        text: "Google"
+        text: "Google",
       },
       {
         value: 6,
-        text: "LinkedIn"
+        text: "LinkedIn",
       },
       {
         value: 7,
-        text: "Medium"
+        text: "Medium",
       },
       {
         value: 8,
         text: "Other",
-        showDetails: "how you heard about Platform One"
-      }
+        showDetails: "how you heard about Platform One",
+      },
     ],
     showHelpDetails: false,
     showHearDetails: false,
 
     emailRules: [
-      v => !!v || "Email is required",
-      v => /.+@.+/.test(v) || "Email must be valid"
+      (v) => !!v || "Email is required",
+      (v) => /.+@.+/.test(v) || "Email must be valid",
     ],
     textareaRules: [
-      v => {
+      (v) => {
         // allow empty
         if (!v) {
           return true;
         }
 
         return v.length <= 2000 || "Maximum response size is 2000 characters";
-      }
-    ]
-  })
+      },
+    ],
+  }),
 };
 </script>
 <style lang="scss">

src/views/Residency.vue

@@ -366,21 +366,12 @@
         </div>
       </div>
     </Wave>
-    <vue-easy-lightbox
-      escDisabled
-      moveDisabled
-      :visible="lightbox.visible"
-      :imgs="lightbox.imgs"
-      :index="lightbox.index"
-      @hide="handleHide"
-    ></vue-easy-lightbox>
   </div>
 </template>
 <script>
 import PageHeader from "@/components/PageHeader";
 import ServicesSummary from "@/components/ServicesSummary";
 import Wave from "@/components/Wave";
-import VueEasyLightbox from "vue-easy-lightbox";
 // import DownloadButton from "@/components/Base/DownloadButton";
 
 export default {
@@ -388,31 +379,12 @@ export default {
   components: {
     PageHeader,
     Wave,
-    VueEasyLightbox,
     ServicesSummary,
     // DownloadButton,
   },
-  methods: {
-    showImg(index) {
-      this.lightbox.index = index;
-      this.lightbox.visible = true;
-    },
-    handleHide() {
-      this.lightbox.visible = false;
-    },
-    getImageUrl(filename) {
-      return require(`@/assets/images/${filename}`);
-    },
-  },
+  methods: {},
   data: function() {
-    return {
-      // lightbox state
-      lightbox: {
-        visible: false,
-        index: 0, // default: 0
-        imgs: [require("@/assets/images/logos/CNAP_logo.svg")],
-      },
-    };
+    return {};
   },
 };
 </script>