add implementation of contact page

frontend/src/pages/public/Blogs.vue

@@ -1,6 +1,11 @@
 <template>
   <div v-if="blogs" class="blogs_containter">
-    <div class="blog_containter" v-for="(blog, index) in blogs" :key="index" @click="view_blog(blog)">
+    <div
+      class="blog_containter"
+      v-for="(blog, index) in blogs"
+      :key="index"
+      @click="view_blog(blog)"
+    >
       <h2>{{ blog.blog_name }}</h2>
       <img class="blog_cover_image" :src="blog.cover_picture" />
       <p v-text="retrieve_summary(blog)"></p>

frontend/src/pages/public/Career.vue

@@ -1,8 +1,18 @@
 <template>
   <div class="directories_containter">
-    <div class="directory_container" v-for="(directory, index) in directories" :key="index" @click="view_link(directory)">
-      <p class="directory_title_txt" v-tooltip :title="directory.summary_text" delay='{"show":"500", "hide":"100"}'><u>{{
-        directory.title_text }}</u>
+    <div
+      class="directory_container"
+      v-for="(directory, index) in directories"
+      :key="index"
+      @click="view_link(directory)"
+    >
+      <p
+        class="directory_title_txt"
+        v-tooltip
+        :title="directory.summary_text"
+        delay='{"show":"500", "hide":"100"}'
+      >
+        <u>{{ directory.title_text }}</u>
       </p>
     </div>
   </div>
@@ -35,7 +45,6 @@ export default {
       directories: null
     }
   }
-
 }
 </script>
 <style scoped lang="scss">
@@ -48,5 +57,6 @@ export default {
   cursor: pointer;
 }
 
-.directory_title_txt {}
+.directory_title_txt {
+}
 </style>

frontend/src/pages/public/Contact.vue

@@ -1,11 +1,53 @@
 <template>
-  <div class="">Contact</div>
+  <div class="directories_containter">
+    <div class="directory_container" v-for="(directory, index) in directories" :key="index">
+      <img class="directory_cover_image" :src="directory.cover_picture" />
+      <div v-html="directory.content_html"></div>
+    </div>
+  </div>
 </template>
 <script>
+import { ContentApi } from '../../utils/index'
 export default {
   name: 'Contact',
   components: {},
   computed: {},
-  methods: {}
+  mounted() {
+    this.retrieve_directories()
+  },
+  methods: {
+    retrieve_directories() {
+      ContentApi.retrieve_contact_directories()
+        .then((response) => {
+          this.directories = response.data
+        })
+        .catch((error) => {
+          this.mnx_backendErrorHandler(error)
+        })
+    }
+  },
+  data() {
+    return {
+      directories: null
+    }
+  }
 }
 </script>
+<style scoped lang="scss">
+.directories_containter {
+  @extend .container;
+}
+
+.directory_container {
+  @extend .container;
+  cursor: pointer;
+}
+
+.directory_cover_image {
+  height: 20vh;
+}
+
+.directory_content_html {
+  @extend .text-start;
+}
+</style>

frontend/src/utils/backend/content.js

@@ -23,5 +23,9 @@ class ContentApi {
     const request = backendAxios.post('/api/content/retrieve-career-directories', {}, {})
     return request
   }
+  static retrieve_contact_directories() {
+    const request = backendAxios.post('/api/content/retrieve-contact-directories', {}, {})
+    return request
+  }
 }
 export { ContentApi }