From 405b0d4b5fbaf6be09c182a961a4227d8357dbbb Mon Sep 17 00:00:00 2001
From: ehab-hassan <hassane@codescalers.com>
Date: Sun, 4 Apr 2021 16:54:12 +0200
Subject: [PATCH] updae style for 404

---
 content/page/why/cta/cta.md                   |  6 +-
 .../custom/sections/CallToAction.vue          | 61 +++++++++++++++++--
 src/templates/MarkdownPage.vue                |  2 +-
 3 files changed, 62 insertions(+), 7 deletions(-)

diff --git a/content/page/why/cta/cta.md b/content/page/why/cta/cta.md
index 6326cd311..4239ea50a 100644
--- a/content/page/why/cta/cta.md
+++ b/content/page/why/cta/cta.md
@@ -12,4 +12,8 @@ link3: ""
 
 The Internet is controlled by large corporations.
 
-This centralized approach is highly ineffucient, extermrly costly, and unsustainable. Our data isn't owned by us, and it isn't safe.
+This centralized approach is highly ineffucient, 
+
+extermrly costly, and unsustainable. Our data 
+
+isn't owned by us, and it isn't safe.
diff --git a/src/components/custom/sections/CallToAction.vue b/src/components/custom/sections/CallToAction.vue
index 836550925..24471eb69 100644
--- a/src/components/custom/sections/CallToAction.vue
+++ b/src/components/custom/sections/CallToAction.vue
@@ -1,9 +1,57 @@
 <template>
   <section class="pb-20 px-4 bg-cover text-center">
-    <br />
-    <br />
-    <br />
-    <div class="w-full max-w-7xl mx-auto">
+   
+    <div class="w-full max-w-7xl mx-auto"
+    v-if="id == 'why'"
+    >
+      <h2
+        v-if="cta.title"
+        class="text-5xl text-center uppercase mb-0 leading-none font-light font-heading"
+      >
+        {{ cta.title }}
+      </h2>
+       <span
+          class="text-center uppercase mb-6 leading-none text-5xl font-black font-heading"
+        >
+          {{ cta.slogan }}
+        </span>
+      <div
+        v-html="cta.content"
+        class="mb-8 text-center text-md mt-4 text-gray-800"
+      ></div>
+      <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"
+          >{{ cta.video_button }}</a
+        >
+      </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>
+
+    
+
+
+
+     <div class="w-full max-w-7xl mx-auto" v-else>
       <h2
         v-if="cta.title"
         class="text-4xl leading-tight font-semibold font-heading"
@@ -53,7 +101,7 @@
 import Modal from "~/components/custom/Modal.vue";
 
 export default {
-  props: ["cta"],
+  props: ["cta" , "id"],
   data() {
     return {
       showModal: false,
@@ -70,5 +118,8 @@ export default {
       this.showModal = false;
     },
   },
+  mounted(){
+    console.log(this.id)
+  }
 };
 </script>
diff --git a/src/templates/MarkdownPage.vue b/src/templates/MarkdownPage.vue
index 090b82e6d..0a4d7f0ee 100644
--- a/src/templates/MarkdownPage.vue
+++ b/src/templates/MarkdownPage.vue
@@ -37,6 +37,7 @@
       />
 
       <CallToAction
+        :id="$page.markdownPage.id"
         v-if="$page.markdownPage.cta"
         :cta="$page.markdownPage.cta"
       />
@@ -96,7 +97,6 @@
           image
         }
         cta{
-          id
           title
           slogan
           content