init video panel part

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