From e3d32148d05c10700e3cd17c962ad0a9c8918ed6 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Sun, 23 May 2021 17:48:00 +0200
Subject: [PATCH] Add blogs

---
 content/page/home/blogs/blog1/index.md        | 13 +++
 content/page/home/blogs/blog2/index.md        | 13 +++
 content/page/home/blogs/blog3/index.md        | 13 +++
 content/page/home/blogs/main/main.md          |  5 ++
 content/page/home/home.md                     |  2 +
 gridsome.config.js                            | 19 +++-
 .../sections/blog-sections/3_column_cards.vue | 86 +++++++++++++++++++
 src/pages/Index.vue                           | 30 +++++--
 8 files changed, 175 insertions(+), 6 deletions(-)
 create mode 100644 content/page/home/blogs/blog1/index.md
 create mode 100644 content/page/home/blogs/blog2/index.md
 create mode 100644 content/page/home/blogs/blog3/index.md
 create mode 100644 content/page/home/blogs/main/main.md
 create mode 100644 src/components/marketing/sections/blog-sections/3_column_cards.vue

diff --git a/content/page/home/blogs/blog1/index.md b/content/page/home/blogs/blog1/index.md
new file mode 100644
index 000000000..3e242e758
--- /dev/null
+++ b/content/page/home/blogs/blog1/index.md
@@ -0,0 +1,13 @@
+---
+id: blog1
+image: https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80
+tagUrl: '#'
+tag: Blog
+blogUrl: '#'
+title: Boost your conversion rate
+authorUrl: '#'
+authorImg: https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80
+author: Roel Aufderhar
+---
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.
diff --git a/content/page/home/blogs/blog2/index.md b/content/page/home/blogs/blog2/index.md
new file mode 100644
index 000000000..1cb256614
--- /dev/null
+++ b/content/page/home/blogs/blog2/index.md
@@ -0,0 +1,13 @@
+---
+id: blog2
+image: https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80
+tagUrl: '#'
+tag: Video
+blogUrl: '#'
+title: How to use search engine optimization to drive sales
+authorUrl: '#'
+authorImg: https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80
+author: Brenna Goyette
+---
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit facilis asperiores porro quaerat doloribus, eveniet dolore. Adipisci tempora aut inventore optio animi., tempore temporibus quo laudantium.
diff --git a/content/page/home/blogs/blog3/index.md b/content/page/home/blogs/blog3/index.md
new file mode 100644
index 000000000..f2da046b7
--- /dev/null
+++ b/content/page/home/blogs/blog3/index.md
@@ -0,0 +1,13 @@
+---
+id: blog3
+image: https://images.unsplash.com/photo-1492724441997-5dc865305da7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80
+tagUrl: '#'
+tag: Case Study
+blogUrl: '#'
+title: Improve your customer experience
+authorUrl: '#'
+authorImg: https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80
+author: Daniela Metz
+---
+
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint harum rerum voluptatem quo recusandae magni placeat saepe molestiae, sed excepturi cumque corporis perferendis hic.
diff --git a/content/page/home/blogs/main/main.md b/content/page/home/blogs/main/main.md
new file mode 100644
index 000000000..3ef2ee10a
--- /dev/null
+++ b/content/page/home/blogs/main/main.md
@@ -0,0 +1,5 @@
+---
+id: blog_main
+title: Discover what makes ThreeFold work
+---
+Our core team holds 20+ years experience in the tech industry. After many successful exits, we realized that the only way to achieve a planet positive and data sovereign Internet was to start from scratch. So we did. 
diff --git a/content/page/home/home.md b/content/page/home/home.md
index 03671de3f..b9729d929 100644
--- a/content/page/home/home.md
+++ b/content/page/home/home.md
@@ -41,6 +41,8 @@ features2:
   ]
 partenershipsMain: home_partenerships_main
 partnerships: [solidaridad, tag, threefold]
+BlogsMain: blog_main
+blogs: [blog1, blog2, blog3]
 ---
 
 <!-- header: home_header
diff --git a/gridsome.config.js b/gridsome.config.js
index d202a8b60..dbd83c9b5 100644
--- a/gridsome.config.js
+++ b/gridsome.config.js
@@ -253,6 +253,21 @@ module.exports = {
             }
         },
 
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'Blogs',
+                path: './content/page/**/blogs/**/*.md',
+            }
+        },
+
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'BlogsMain',
+                path: './content/page/**/blogs/main/*.md',
+            }
+        },
 
         {
             use: '@gridsome/source-filesystem',
@@ -297,7 +312,9 @@ module.exports = {
                     partenershipsMain: 'PartenershipsMain',
                     partnerships: 'Partenerships',
                     stats: 'Stats',
-                    videoPanel: 'VideoPanel'
+                    videoPanel: 'VideoPanel',
+                    blogs: 'Blogs',
+                    BlogsMain: "BlogsMain"
                 }
             }
         },
diff --git a/src/components/marketing/sections/blog-sections/3_column_cards.vue b/src/components/marketing/sections/blog-sections/3_column_cards.vue
new file mode 100644
index 000000000..86719f727
--- /dev/null
+++ b/src/components/marketing/sections/blog-sections/3_column_cards.vue
@@ -0,0 +1,86 @@
+<template>
+  <div
+    class="relative bg-gray-50 pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8"
+  >
+    <div class="absolute inset-0">
+      <div class="bg-white h-1/3 sm:h-2/3"></div>
+    </div>
+    <div class="relative max-w-7xl mx-auto">
+      <div class="text-center">
+        <h2
+          class="text-3xl leading-9 tracking-tight font-extrabold text-gray-900 sm:text-4xl sm:leading-10"
+        >
+          {{ main.title }}
+        </h2>
+        <div
+          class="mt-3 max-w-2xl mx-auto text-xl leading-7 text-gray-600 sm:mt-4"
+          v-html="main.content"
+        ></div>
+      </div>
+      <div
+        class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none"
+      >
+        <div
+          class="flex flex-col rounded-lg shadow-lg overflow-hidden"
+          v-for="blog in blogs"
+          :key="blog.id"
+        >
+          <div class="flex-shrink-0">
+            <g-image
+              class="h-48 w-full object-cover"
+              :src="blog.image"
+              alt=""
+            />
+          </div>
+          <div class="flex-1 bg-white p-6 flex flex-col justify-between">
+            <div class="flex-1">
+              <p class="text-sm leading-5 font-medium text-indigo-600">
+                <a :href="blog.tagUrl" class="hover:underline">
+                  {{ blog.tag }}
+                </a>
+              </p>
+              <a :href="blog.blogUrl" class="block">
+                <h3 class="mt-2 text-xl leading-7 font-semibold text-gray-900">
+                  {{ blog.title }}
+                </h3>
+                <div
+                  v-html="blog.content"
+                  class="mt-3 text-base leading-6 text-gray-500"
+                ></div>
+              </a>
+            </div>
+            <div class="mt-6 flex items-center">
+              <div class="flex-shrink-0">
+                <a :href="blog.autherUrl">
+                  <g-image
+                    class="h-10 w-10 rounded-full"
+                    :src="blog.authorImg"
+                    alt=""
+                  />
+                </a>
+              </div>
+              <div class="ml-3">
+                <p class="text-sm leading-5 font-medium text-gray-900">
+                  <a :href="blog.autherUrl" class="hover:underline">
+                    {{ blog.author }}
+                  </a>
+                </p>
+                <!-- <div class="flex text-sm leading-5 text-gray-500">
+                  <time datetime="2020-03-16"> Mar 16, 2020 </time>
+                  <span class="mx-1"> &#xB7; </span>
+                  <span> 6 min read </span>
+                </div> -->
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["main", "blogs"],
+};
+</script>
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 097198302..c764fdc5c 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -65,16 +65,17 @@
         :id="$page.markdownPage.id"
       />
 
+      <Blogs
+        v-if="$page.markdownPage.blogs || $page.markdownPage.BlogsMain"
+        :main="$page.markdownPage.BlogsMain"
+        :blogs="$page.markdownPage.blogs"
+      />
+
       <InTheNews
         v-if="$page.markdownPage.inTheNews"
         :news="$page.markdownPage.inTheNews"
       />
 
-      <!-- <SignUp
-      v-if="$page.markdownPage.signup"
-      :signup="$page.markdownPage.signup"
-      /> -->
-
       <g-image
         class="m-auto w-3/4 mt-8"
         v-if="$page.markdownPage.solution_image"
@@ -307,6 +308,23 @@
           link
           image
         }
+        BlogsMain{
+          id
+          title
+          content
+        }
+        blogs{
+          id
+          image
+          tagUrl
+          tag
+          blogUrl
+          title
+          authorUrl
+          authorImg
+          author
+          content
+        }
     }  
   }
 
@@ -337,6 +355,7 @@ import InTheNews from "~/components/marketing/sections/logo-clouds/off_white_gri
 import SignUp from "~/components/custom/sections/SignUp.vue";
 import VideoPanel from "~/components/custom/VideoPanel.vue";
 import Partenerships from "~/components/marketing/sections/team-sections/grid_with_large_round_images.vue";
+import Blogs from "~/components/marketing/sections/blog-sections/3_column_cards.vue";
 
 export default {
   components: {
@@ -357,6 +376,7 @@ export default {
     SignUp,
     VideoPanel,
     Partenerships,
+    Blogs,
   },
   computed: {
     getImg() {