Make video pop up

content/page/home/cta2/cta2.md

@@ -1,13 +1,12 @@
 ---
 id: home_cta2
-title: ''
-button: Watch Our Video
-link: https://vimeo.com/438190961
-button2: ''
-link2: ''
-button3: ''
-link3: ''
-
+title: ""
+video_button: Watch Our Video
+video_link: https://player.vimeo.com/video/438190961
+button: ""
+link: ""
+button2: ""
+link2: ""
 ---
 
 Get to know the ThreeFold vision better.

src/components/custom/Modal.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <div
+      v-if="showModal"
+      class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex"
+    >
+      <div class="relative w-auto my-6 mx-auto max-w-6xl">
+        <button
+          class="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
+          @click="handleClose"
+        >
+          <span
+            class="bg-transparent text-white opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none"
+          >
+            ×
+          </span>
+        </button>
+        <div
+          class="border-0 rounded-lg relative flex flex-col w-full outline-none focus:outline-none"
+        >
+          <div class="relative flex-auto">
+            <iframe
+              width="800"
+              height="450"
+              :src="link"
+              frameborder="0"
+              allow="accelerometer; autoplay; encrypted-media; gyroscope;
+            picture-in-picture"
+              allowfullscreen
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="showModal" class="opacity-75 fixed inset-0 z-40 bg-black"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Modal",
+  props: ["showModal", "link"],
+  methods: {
+    handleClose() {
+      this.$emit("onClose");
+    },
+  },
+};
+</script>

src/components/custom/Navbar/Navbar.vue

@@ -173,7 +173,7 @@
           <a
             v-else-if="element.external"
             :href="element.link"
-            @click.native="clicked"
+            @click="clicked"
             target="_blank"
             class="inline-flex sm:flex uppercase p-2 mr-4 animated-link"
             >{{ element.name }}</a
@@ -181,7 +181,7 @@
           <a
             v-else
             :href="element.link"
-            @click.native="clicked"
+            @click="clicked"
             class="inline-flex sm:flex uppercase p-2 mr-4 animated-link"
             >{{ element.name }}</a
           >

src/components/custom/sections/CallToAction.vue

@@ -1,45 +1,74 @@
 <template>
   <section class="pb-20 px-4 bg-cover text-center">
-    <br>
-    <br
-    <br>
+    <br />
+    <br />
+    <br />
     <div class="w-full max-w-7xl mx-auto">
-      <h2 class="text-4xl leading-tight font-semibold font-heading">
+      <h2
+        v-if="cta.title"
+        class="text-4xl leading-tight font-semibold font-heading"
+      >
         {{ cta.title }}
       </h2>
       <div
         v-html="cta.content"
         class="mt-6 mb-8 text-gray-700 leading-relaxed"
       ></div>
-
-
-       <a
-          class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full" 
-          target="_blank"
-          v-if="cta.button"
-          :href="cta.link"
-          >{{ cta.button }}</a
-        >
-        <g-link
+      <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
+        <a
+          @click="toggleModal"
           class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
-          v-if="cta.button2"
-          :to="cta.link2"
-          >{{ cta.button2 }}</g-link
+          >{{ cta.video_button }}</a
         >
-         <g-link
-          class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
-          v-if="cta.button3"
-          :to="cta.link3"
-          >{{ cta.button3 }}</g-link
-        >
-      
-      
+      </div>
+      <a
+        class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+        target="_blank"
+        v-if="cta.button"
+        :href="cta.link"
+        >{{ cta.button }}</a
+      >
+      <g-link
+        class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+        v-if="cta.button2"
+        :to="cta.link2"
+        >{{ cta.button2 }}</g-link
+      >
+      <g-link
+        class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+        v-if="cta.button3"
+        :to="cta.link3"
+        >{{ cta.button3 }}</g-link
+      >
     </div>
+    <Modal
+      :link="cta.video_link"
+      :showModal="showModal"
+      @onClose="handleClose"
+    />
   </section>
 </template>
 
 <script>
+import Modal from "~/components/custom/Modal.vue";
+
 export default {
   props: ["cta"],
+  data() {
+    return {
+      showModal: false,
+    };
+  },
+  components: {
+    Modal,
+  },
+  methods: {
+    toggleModal() {
+      this.showModal = !this.showModal;
+    },
+    handleClose() {
+      this.showModal = false;
+    },
+  },
 };
 </script>

src/pages/Index.vue

@@ -175,6 +175,8 @@
           id
           title
           content
+          video_button
+          video_link
           button
           button2
           button3