init video panel part

content/page/home/home.md

@@ -25,6 +25,7 @@ logos: [logo1, logo2, logo3, logo4, logo5, logo6]
 inTheNews: in_the_news
 solution_image: ./cta_image.svg
 cta: home_cta
+videoPanel: home_videoPanel
 ---
 
 <!-- header: home_header

content/page/home/videoPanel/index.md

@@ -0,0 +1,6 @@
+---
+id: home_videoPanel
+video: https://www.youtube.com/embed/5DtVU66Z74s
+title:  More than an Internet, a new paradigm
+---
+ThreeFold started from the ground up to build secure and sustainable peer-to-peer Internet infrastructure and technologies that can scale anywhere and empower you, your business and your community with data sovereignty.

gridsome.config.js

@@ -231,6 +231,14 @@ module.exports = {
             }
         },
 
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'VideoPanel',
+                path: './content/page/**/videoPanel/*.md',
+            }
+        },
+
         {
             use: '@gridsome/source-filesystem',
             options: {
@@ -270,7 +278,8 @@ module.exports = {
                     brandPanel2: 'BrandPanel2',
                     allSlides: 'About',
                     partenershipsMain: 'PartenershipsMain',
-                    partnerships: 'Partenerships'
+                    partnerships: 'Partenerships',
+                    videoPanel: 'VideoPanel'
                 }
             }
         },
@@ -394,34 +403,34 @@ module.exports = {
             options: {
                 searchFields: ['title', 'name', 'content', 'status', 'linkedin', 'excerpt', 'cities', 'countries', 'websites'],
                 collections: [{
-                        typeName: 'Blog',
-                        indexName: 'Blog',
-                        fields: ['path']
-                    },
+                    typeName: 'Blog',
+                    indexName: 'Blog',
+                    fields: ['path']
+                },
 
-                    {
-                        typeName: 'Project',
-                        indexName: 'Project',
-                        fields: ['path']
-                    },
+                {
+                    typeName: 'Project',
+                    indexName: 'Project',
+                    fields: ['path']
+                },
 
-                    {
-                        typeName: 'Person',
-                        indexName: 'Person',
-                        fields: ['path']
-                    },
+                {
+                    typeName: 'Person',
+                    indexName: 'Person',
+                    fields: ['path']
+                },
 
-                    {
-                        typeName: 'News',
-                        indexName: 'News',
-                        fields: ['path']
-                    },
+                {
+                    typeName: 'News',
+                    indexName: 'News',
+                    fields: ['path']
+                },
 
-                    {
-                        typeName: 'MarkdownPage',
-                        indexName: 'MarkdownPage',
-                        fields: ['path']
-                    },
+                {
+                    typeName: 'MarkdownPage',
+                    indexName: 'MarkdownPage',
+                    fields: ['path']
+                },
 
                 ]
             }
@@ -499,19 +508,19 @@ module.exports = {
             pathPrefix: "threefold",
             plugins: [
                 ['gridsome-plugin-remark-prismjs-all', {
-                        highlightClassName: "gridsome-highlight",
-                        codeTitleClassName: "gridsome-code-title",
-                        classPrefix: 'language-',
-                        aliases: {},
-                        noInlineHighlight: false,
-                        showLineNumbers: false, //  `require("prismjs/plugins/line-numbers/prism-line-numbers.css");`
-                        languageExtensions: [],
-                        prompt: { //  `require("prismjs/plugins/command-line/prism-command-line.css");`
-                            user: `root`,
-                            host: `localhost`,
-                            global: false,
-                        }
-                    },
+                    highlightClassName: "gridsome-highlight",
+                    codeTitleClassName: "gridsome-code-title",
+                    classPrefix: 'language-',
+                    aliases: {},
+                    noInlineHighlight: false,
+                    showLineNumbers: false, //  `require("prismjs/plugins/line-numbers/prism-line-numbers.css");`
+                    languageExtensions: [],
+                    prompt: { //  `require("prismjs/plugins/command-line/prism-command-line.css");`
+                        user: `root`,
+                        host: `localhost`,
+                        global: false,
+                    }
+                },
                     // '@noxify/gridsome-remark-table-align', ['@noxify/gridsome-remark-classes', {
                     //     'table': 'table table-striped',
                     //     'tableCell[align=center]': 'text-center',

src/components/custom/VideoPanel.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="lg:py-12 lg:flex lg:justify-center flex flex-col">
+    <div class="bg-white lg:flex lg:max-w-5xl lg:rounded-lg">
+      <div class="lg:w-1/2">
+        <div class="aspect-w-16 aspect-h-9">
+          <iframe
+            width="560"
+            height="315"
+            :src="card.video"
+            title="YouTube video player"
+            frameborder="0"
+            allowfullscreen
+          ></iframe>
+        </div>
+      </div>
+      <div class="py-6 px-6 max-w-xl lg:max-w-5xl lg:w-1/2">
+        <h2 class="text-2xl text-gray-700 font-bold">{{ card.title }}</h2>
+        <div class="mt-4 text-gray-700" v-html="card.content"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["card"],
+};
+</script>

src/pages/Index.vue

@@ -13,7 +13,7 @@
       />
     </div>
     <div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
-      <g-image
+      <!-- <g-image
         class="m-auto w-2/4 lg:mt-20"
         v-if="$page.markdownPage.solution_image2"
         :src="$page.markdownPage.solution_image2.src"
@@ -22,7 +22,8 @@
       <CallToAction
         v-if="$page.markdownPage.cta2"
         :cta="$page.markdownPage.cta2"
-      />
+      /> -->
+      <VideoPanel :card="$page.markdownPage.videoPanel" />
 
       <!-- <g-image
         class="m-auto w-2/4 lg:mt-20"
@@ -291,6 +292,12 @@
           button2
           link2
         }
+        videoPanel {
+          id
+          video
+          title
+          content
+        }
     }  
   }
 
@@ -317,6 +324,7 @@ import CallToActionbg2 from "~/components/custom/sections/CallToActionbg2.vue";
 import logoShowcase from "~/components/marketing/sections/cta-sections/logoShowcase.vue";
 import InTheNews from "~/components/marketing/sections/logo-clouds/off_white_grid.vue";
 import SignUp from "~/components/custom/sections/SignUp.vue";
+import VideoPanel from "~/components/custom/VideoPanel.vue";
 
 export default {
   components: {
@@ -333,6 +341,7 @@ export default {
     CallToActionbg2,
     InTheNews,
     SignUp,
+    VideoPanel,
   },
   computed: {
     getImg() {