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'
                 }
             }
         },

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() {