feat: add blog page

src/components/mixins/BlogsMixin.vue

@@ -7,12 +7,12 @@ export default {
           id: 1,
           title: "Thinking about an investment property in Portugal.",
           date: "Jun 12, 2022",
-          image: "img/blogs/blog1.png",
+          image: "/img/blogs/blog1.png",
           content: `
           House prices in Lisbon, Cascais and other selected areas of Portigal have grown annually in double digits over the last five years. Nevertheless, Lisbon is still Western Europe’s second cheapest capital city. This has led to exceptional returns from investments in tourism, residential, commercial and agriculture. Our network can offer you access to a wide array of proprietary opportunities.<br><br>
 For existing investments, our management team will handle the daily tasks, including monitoring, producing investment reports, financial updates and attending shareholder meetings<br><br>
 Thinking about an investment property in Portugal? Our dedicated team assists in the many duties of property management which extend to addressing issues with short term properties (airbnb and alojamento local sites), long term rental agreements, utility contracts and attending condominium meetings. If any problem pops up, our team is ready to assist you as they work closely with reliable suppliers
-<br><img src="/img/blogs/blog1_1.png" alt=""/><br>
+<br><img class="my-6 mx-auto" src="/img/blogs/blog1_1.png" alt=""/><br>
 House prices in Lisbon, Cascais and other selected areas of Portigal have grown annually in double digits over the last five years. Nevertheless, Lisbon is still Western Europe’s second cheapest capital city. This has led to exceptional returns from investments in tourism, residential, commercial and agriculture. Our network can offer you access to a wide array of proprietary opportunities.<br><br>
 For existing investments, our management team will handle the daily tasks, including monitoring, producing investment reports, financial updates and attending shareholder meetings<br><br>
 Thinking about an investment property in Portugal? Our dedicated team assists in the many duties of property management which extend to addressing issues with short term properties (airbnb and alojamento local sites), long term rental agreements, utility contracts and attending condominium meetings. If any problem pops up, our team is ready to assist you as they work closely with reliable suppliers
@@ -22,12 +22,12 @@ Thinking about an investment property in Portugal? Our dedicated team assists in
           id: 2,
           title: "Thinking about an investment property in Portugal.",
           date: "Jun 12, 2022",
-          image: "img/blogs/blog2.png",
+          image: "/img/blogs/blog2.png",
           content: `
           House prices in Lisbon, Cascais and other selected areas of Portigal have grown annually in double digits over the last five years. Nevertheless, Lisbon is still Western Europe’s second cheapest capital city. This has led to exceptional returns from investments in tourism, residential, commercial and agriculture. Our network can offer you access to a wide array of proprietary opportunities.<br><br>
 For existing investments, our management team will handle the daily tasks, including monitoring, producing investment reports, financial updates and attending shareholder meetings<br><br>
 Thinking about an investment property in Portugal? Our dedicated team assists in the many duties of property management which extend to addressing issues with short term properties (airbnb and alojamento local sites), long term rental agreements, utility contracts and attending condominium meetings. If any problem pops up, our team is ready to assist you as they work closely with reliable suppliers
-<br><img src="/img/blogs/blog1_1.png" alt=""/><br>
+<br><img class="my-6 mx-auto" src="/img/blogs/blog1_1.png" alt=""/><br>
 House prices in Lisbon, Cascais and other selected areas of Portigal have grown annually in double digits over the last five years. Nevertheless, Lisbon is still Western Europe’s second cheapest capital city. This has led to exceptional returns from investments in tourism, residential, commercial and agriculture. Our network can offer you access to a wide array of proprietary opportunities.<br><br>
 For existing investments, our management team will handle the daily tasks, including monitoring, producing investment reports, financial updates and attending shareholder meetings<br><br>
 Thinking about an investment property in Portugal? Our dedicated team assists in the many duties of property management which extend to addressing issues with short term properties (airbnb and alojamento local sites), long term rental agreements, utility contracts and attending condominium meetings. If any problem pops up, our team is ready to assist you as they work closely with reliable suppliers
@@ -37,12 +37,12 @@ Thinking about an investment property in Portugal? Our dedicated team assists in
           id: 3,
           title: "Thinking about an investment property in Portugal.",
           date: "Jun 12, 2022",
-          image: "img/blogs/blog3.png",
+          image: "/img/blogs/blog3.png",
           content: `
           House prices in Lisbon, Cascais and other selected areas of Portigal have grown annually in double digits over the last five years. Nevertheless, Lisbon is still Western Europe’s second cheapest capital city. This has led to exceptional returns from investments in tourism, residential, commercial and agriculture. Our network can offer you access to a wide array of proprietary opportunities.<br><br>
 For existing investments, our management team will handle the daily tasks, including monitoring, producing investment reports, financial updates and attending shareholder meetings<br><br>
 Thinking about an investment property in Portugal? Our dedicated team assists in the many duties of property management which extend to addressing issues with short term properties (airbnb and alojamento local sites), long term rental agreements, utility contracts and attending condominium meetings. If any problem pops up, our team is ready to assist you as they work closely with reliable suppliers
-<br><img src="/img/blogs/blog1_1.png" alt=""/><br>
+<br><img class="my-6 mx-auto" src="/img/blogs/blog1_1.png" alt=""/><br>
 House prices in Lisbon, Cascais and other selected areas of Portigal have grown annually in double digits over the last five years. Nevertheless, Lisbon is still Western Europe’s second cheapest capital city. This has led to exceptional returns from investments in tourism, residential, commercial and agriculture. Our network can offer you access to a wide array of proprietary opportunities.<br><br>
 For existing investments, our management team will handle the daily tasks, including monitoring, producing investment reports, financial updates and attending shareholder meetings<br><br>
 Thinking about an investment property in Portugal? Our dedicated team assists in the many duties of property management which extend to addressing issues with short term properties (airbnb and alojamento local sites), long term rental agreements, utility contracts and attending condominium meetings. If any problem pops up, our team is ready to assist you as they work closely with reliable suppliers
@@ -52,12 +52,12 @@ Thinking about an investment property in Portugal? Our dedicated team assists in
           id: 4,
           title: "Thinking about an investment property in Portugal.",
           date: "Jun 12, 2022",
-          image: "img/blogs/blog4.png",
+          image: "/img/blogs/blog4.png",
           content: `
           House prices in Lisbon, Cascais and other selected areas of Portigal have grown annually in double digits over the last five years. Nevertheless, Lisbon is still Western Europe’s second cheapest capital city. This has led to exceptional returns from investments in tourism, residential, commercial and agriculture. Our network can offer you access to a wide array of proprietary opportunities.<br><br>
 For existing investments, our management team will handle the daily tasks, including monitoring, producing investment reports, financial updates and attending shareholder meetings<br><br>
 Thinking about an investment property in Portugal? Our dedicated team assists in the many duties of property management which extend to addressing issues with short term properties (airbnb and alojamento local sites), long term rental agreements, utility contracts and attending condominium meetings. If any problem pops up, our team is ready to assist you as they work closely with reliable suppliers
-<br><img src="/img/blogs/blog1_1.png" alt=""/><br>
+<br><img class="my-6 mx-auto" src="/img/blogs/blog1_1.png" alt=""/><br>
 House prices in Lisbon, Cascais and other selected areas of Portigal have grown annually in double digits over the last five years. Nevertheless, Lisbon is still Western Europe’s second cheapest capital city. This has led to exceptional returns from investments in tourism, residential, commercial and agriculture. Our network can offer you access to a wide array of proprietary opportunities.<br><br>
 For existing investments, our management team will handle the daily tasks, including monitoring, producing investment reports, financial updates and attending shareholder meetings<br><br>
 Thinking about an investment property in Portugal? Our dedicated team assists in the many duties of property management which extend to addressing issues with short term properties (airbnb and alojamento local sites), long term rental agreements, utility contracts and attending condominium meetings. If any problem pops up, our team is ready to assist you as they work closely with reliable suppliers
@@ -67,12 +67,12 @@ Thinking about an investment property in Portugal? Our dedicated team assists in
           id: 5,
           title: "Thinking about an investment property in Portugal.",
           date: "Jun 12, 2022",
-          image: "img/blogs/blog5.png",
+          image: "/img/blogs/blog5.png",
           content: `
           House prices in Lisbon, Cascais and other selected areas of Portigal have grown annually in double digits over the last five years. Nevertheless, Lisbon is still Western Europe’s second cheapest capital city. This has led to exceptional returns from investments in tourism, residential, commercial and agriculture. Our network can offer you access to a wide array of proprietary opportunities.<br><br>
 For existing investments, our management team will handle the daily tasks, including monitoring, producing investment reports, financial updates and attending shareholder meetings<br><br>
 Thinking about an investment property in Portugal? Our dedicated team assists in the many duties of property management which extend to addressing issues with short term properties (airbnb and alojamento local sites), long term rental agreements, utility contracts and attending condominium meetings. If any problem pops up, our team is ready to assist you as they work closely with reliable suppliers
-<br><img src="/img/blogs/blog1_1.png" alt=""/><br>
+<img class="my-6 mx-auto" src="/img/blogs/blog1_1.png" alt=""/>
 House prices in Lisbon, Cascais and other selected areas of Portigal have grown annually in double digits over the last five years. Nevertheless, Lisbon is still Western Europe’s second cheapest capital city. This has led to exceptional returns from investments in tourism, residential, commercial and agriculture. Our network can offer you access to a wide array of proprietary opportunities.<br><br>
 For existing investments, our management team will handle the daily tasks, including monitoring, producing investment reports, financial updates and attending shareholder meetings<br><br>
 Thinking about an investment property in Portugal? Our dedicated team assists in the many duties of property management which extend to addressing issues with short term properties (airbnb and alojamento local sites), long term rental agreements, utility contracts and attending condominium meetings. If any problem pops up, our team is ready to assist you as they work closely with reliable suppliers

src/pages/BlogPage.vue

+<template>
+  <div>
+    <HeaderComponent current-page="blogs" :with-shadow="scroll > 50"></HeaderComponent>
+    <div class="overflow-hidden relative">
+      <section class="relative z-10 px-[6.7%] mt-6">
+        <router-link to="/blogs" class="text-dark hover:text-gray-600 flex items-center leading-6 text-lg font-light">
+          <LeftArrow class="inline w-6 h-6 mr-1"></LeftArrow>
+          Back to all articles
+        </router-link>
+        
+        
+        <h1 class="text-dark text-5xl mt-11 leading-[3.32.rem]">
+          {{ blog.title }}
+        </h1>
+        <p class="mt-5 leading-5 text-gray-400">
+          <small>{{ blog.date }}</small>
+        </p>
+
+       <img :src="blog.image" alt="Title image" class="w-full mt-5">
+       <p class="mt-6 text-gray-600 text-xl leading-7" v-html="blog.content">
+
+       </p>
+
+       
+      </section>
+      <div
+          class="absolute bg-gray-bg blur-[58px] rounded-[190px] w-[238px] h-[238px] z-0 -left-[91px] top-[50%]"
+        ></div>
+      <FooterComponent class="mt-[92px]"></FooterComponent>
+    </div>
+  </div>
+</template>
+
+<script>
+import HeaderComponent from "../components/HeaderComponent.vue";
+import LeftArrow from "../components/svg/LeftArrow.vue";
+import BlogsMixin from "../components/mixins/BlogsMixin.vue";
+import FooterComponent from "../components/FooterComponent.vue";
+
+export default {
+  name: "BlogsPage",
+  data() {
+    return {
+      scroll: window.scrollY,
+      blog: {}
+    };
+  },
+  mounted() {
+    window.addEventListener('scroll', this.onScroll);
+
+    if(!this.$route.params.id || !this.blogs[this.$route.params.id - 1]){
+      this.$router.push('/blogs');
+      return;
+    }
+
+    this.blog = this.blogs[this.$route.params.id - 1];
+  },
+  beforeDestroy() {
+    window.removeEventListener("scroll", this.onScroll);
+  },
+  methods: {
+    onScroll(){
+      this.scroll = window.scrollY;
+    },
+  },
+  components: { HeaderComponent, FooterComponent, LeftArrow },
+  mixins: [BlogsMixin],
+};
+</script>

src/pages/BlogsPage.vue

@@ -14,7 +14,7 @@
           <li v-for="blog in blogs" :key="blog.id" >
             <article class="p-4 mt-6 rounded-2xl bg-white shadow-3x28">
               <img :src="blog.image" alt="Title image" class="w-full mb-4">
-              <router-link :to="`/blogs/${blog.id}`" class="font-medium text-xl text-dark leading-[1.66rem] hover:text-blue-text">
+              <router-link :to="`/blogs/${blog.id}`" class="font-medium text-xl text-dark leading-[1.66rem] hover:text-blue-text transition-colors">
                 {{ blog.title }}
               </router-link>
               <p class="mt-2 leading-5 text-gray-text">

src/plugins/router.js

@@ -3,6 +3,7 @@ import VueRouter from "vue-router";
 import HomePage from "../pages/HomePage";
 import ServicesPage from "../pages/ServicesPage";
 import BlogsPage from "../pages/BlogsPage";
+import BlogPage from "../pages/BlogPage";
 
 Vue.use(VueRouter);
 const router = new VueRouter({
@@ -19,6 +20,10 @@ const router = new VueRouter({
             path: "/blogs",
             component: BlogsPage,
         },
+        {
+            path: "/blogs/:id",
+            component: BlogPage,
+        },
     ],
     mode: "history",
 });

tailwind.config.js

@@ -36,6 +36,7 @@ module.exports = {
         200: "#F9FBFF",
         bg: "#F2F6FF",
         300: "rgb(0 0 0 / 35%)",
+        400: "#7A7A7A",
         DEFAULT: "#757575",
         text: "#B3B3B3",
         600: "#454953",