From 049cb0cd15e04e1bde0eb37e185454cabb0d34e6 Mon Sep 17 00:00:00 2001
From: ehab-hassan <hassane@codescalers.com>
Date: Tue, 9 Feb 2021 13:33:19 +0200
Subject: [PATCH] update headers

---
 src/assets/scss/main.scss                         |  4 ++++
 src/components/custom/sections/CallToAction.vue   | 10 ++++++----
 .../custom/sections/header/HeaderSection.vue      | 11 ++++++-----
 .../marketing/sections/cta-sections/Header.vue    | 15 ++++++++++++---
 src/templates/MarkdownPage.vue                    |  4 ++--
 src/templates/NewsPost.vue                        |  8 ++++----
 6 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 10e7b4812..ee230e678 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -113,6 +113,10 @@ button:focus {
   
 }
 
+.text-8xl {
+  font-size: 5rem;
+  line-height: 1;
+}
 @media (min-width: 768px) {
   .with-large > .flex-post:nth-child(5n),
   .with-large > .flex-post:nth-child(5n-1) {
diff --git a/src/components/custom/sections/CallToAction.vue b/src/components/custom/sections/CallToAction.vue
index 60bae6d21..6c7b651a8 100644
--- a/src/components/custom/sections/CallToAction.vue
+++ b/src/components/custom/sections/CallToAction.vue
@@ -1,13 +1,15 @@
 <template>
   <section class="py-12 px-4 text-center">
     <div class="w-full max-w-2xl mx-auto">
-      <h2 class="text-5xl leading-tight font-semibold font-heading">
+      <h2 class="text-4xl leading-tight font-semibold font-heading">
         {{ cta.title }}
       </h2>
-      <p class="mt-6 mb-8 text-gray-600 leading-relaxed">
-        {{ cta.excerpt }}
-      </p>
+      <div
+        v-html="cta.content"
+        class="mt-6 mb-8 text-gray-700 leading-relaxed"
+      ></div>
       <g-link
+        v-if="cta.button"
         class="bg-gray-900 learn-button hover:bg-gray-700 text-gray-100 px-5 py-3 mr-3 font-semibold rounded shadow"
         :to="cta.link"
         >{{ cta.button }}</g-link
diff --git a/src/components/custom/sections/header/HeaderSection.vue b/src/components/custom/sections/header/HeaderSection.vue
index c3d04953e..8b8924253 100644
--- a/src/components/custom/sections/header/HeaderSection.vue
+++ b/src/components/custom/sections/header/HeaderSection.vue
@@ -2,12 +2,13 @@
   <section class="py-12 px-4 text-center">
     <div class="w-full max-w-2xl mx-auto">
       <span class="text-sm font-semibold">{{ header.title }}</span>
-      <h2 class="text-5xl mt-2 mb-6 leading-tight font-semibold font-heading">
+      <h2 class="text-4xl mt-2 mb-6 leading-tight font-heading">
         {{ header.subtitle }}
       </h2>
-      <p class="mb-8 text-gray-600 leading-relaxed">
-        {{ header.excerpt }}
-      </p>
+      <div
+        v-html="header.content"
+        class="mb-8 text-gray-700 leading-relaxed"
+      ></div>
       <div>
         <g-link
           class="bg-gray-900 learn-button hover:bg-gray-700 text-gray-100 px-5 py-3 mr-3 font-semibold rounded shadow"
@@ -29,4 +30,4 @@
 export default {
   props: ["header"],
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/marketing/sections/cta-sections/Header.vue b/src/components/marketing/sections/cta-sections/Header.vue
index 999d0e5bb..7e7354548 100644
--- a/src/components/marketing/sections/cta-sections/Header.vue
+++ b/src/components/marketing/sections/cta-sections/Header.vue
@@ -2,12 +2,21 @@
   <section class="py-12 px-4">
     <div class="flex flex-wrap items-center text-center lg:text-left -mx-2">
       <div class="lg:w-1/2 px-2 lg:pr-10 mt-10 lg:mt-0 order-1 lg:order-none">
-        <h2 class="text-4xl mb-6 leading-tight font-semibold font-heading">
+        <h2 class="text-8xl mb-6 leading-tight font-semibold font-heading">
           {{ title }}
         </h2>
-        <p class="mb-8 text-gray-700 leading-relaxed">{{ excerpt }}</p>
+        <div class="mb-8 text-gray-700 leading-relaxed" v-html="excerpt"></div>
         <div v-if="button">
           <a
+            v-if="link.includes('http')"
+            target="_blank"
+            class="inline-block py-4 px-8 mr-6 leading-none text-white bg-gray-900 hover:bg-gray-700 font-semibold rounded shadow"
+            :href="link"
+            >{{ button }}</a
+          >
+
+          <a
+            v-else
             class="inline-block py-4 px-8 mr-6 leading-none text-white bg-gray-900 hover:bg-gray-700 font-semibold rounded shadow"
             :href="link"
             >{{ button }}</a
@@ -15,7 +24,7 @@
           <!-- <a class="text-gray-600 hover:underline" href="#">Learn more</a> -->
         </div>
       </div>
-      <div class="lg:w-1/2 px-2"><img :src="img" :alt="altImg" /></div>
+      <div class="lg:w-1/2 px-2"><g-image :src="img" :alt="altImg" /></div>
     </div>
   </section>
 </template>
diff --git a/src/templates/MarkdownPage.vue b/src/templates/MarkdownPage.vue
index 5deccaa0c..61a04c5b1 100644
--- a/src/templates/MarkdownPage.vue
+++ b/src/templates/MarkdownPage.vue
@@ -148,7 +148,7 @@
        header{
          title
          subtitle
-         excerpt
+         content
          btn1
          link1
          btn2
@@ -205,7 +205,7 @@
         cta{
           id
           title
-          excerpt
+          content
           button
           link
         }
diff --git a/src/templates/NewsPost.vue b/src/templates/NewsPost.vue
index 523495675..97baa478f 100644
--- a/src/templates/NewsPost.vue
+++ b/src/templates/NewsPost.vue
@@ -34,7 +34,7 @@
             <div class="pl-3 flex flex-col text-xs leading-none uppercase">
               <p>
                 <span
-                  v-for="(author, index) in $page.news.author"
+                  v-for="(author, index) in $page.news.authors"
                   :key="author.id"
                 >
                   <g-link
@@ -43,7 +43,7 @@
                     class="hover:underline"
                     >{{ author.name }}</g-link
                   >
-                  <span v-if="index < $page.news.author.length - 1">,</span>
+                  <span v-if="index < $page.news.authors.length - 1">,</span>
                 </span>
               </p>
               <p class="text-gray-700">
@@ -53,7 +53,7 @@
                   }}</time>
                 </g-link>
                 <!-- &nbsp;&middot;&nbsp; {{ $page.news.timeToRead }} min read -->
-                &nbsp;&middot;&nbsp;
+                <!-- &nbsp;&middot;&nbsp; -->
                 <g-link :to="$page.news.path">
                   <time :datetime="$page.news.datetime">{{
                     $page.news.startDate
@@ -68,7 +68,7 @@
         <g-image :src="$page.news.image"></g-image>
       </section>
 
-      <div class="">
+      <div class="py-12">
         <section
           class="post-content container mx-auto relative font-serif text-gray-700"
         >