Add comparison sec & logos showcase sec

src/components/marketing/sections/blog-sections/3_column_cards.vue

@@ -1,5 +1,78 @@
 <template>
-  <div class="relative pt-16 lg:pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
+  <div
+    v-if="id == 'cloud'"
+    class="relative lg:py-28 py-10 px-4 sm:px-6 lg:px-8"
+  >
+    <div class="absolute inset-0">
+      <div class="bg-white h-1/3 sm:h-2/3"></div>
+    </div>
+    <div class="relative max-w-7xl mx-auto">
+      <div class="text-center" v-if="main">
+        <h2
+          class="
+            text-5xl
+            leading-tight
+            mb-6
+            font-bold font-heading
+            uppercase
+            sm:leading-10
+          "
+        >
+          {{ main.title }}
+        </h2>
+        <div
+          class="mt-3 max-w-2xl mx-auto text-gray-700 sm:mt-4"
+          v-html="main.content"
+        ></div>
+      </div>
+      <div
+        class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none"
+      >
+        <div
+          class="flex flex-col text-center overflow-hidden"
+          v-for="blog in blogs"
+          :key="blog.id"
+        >
+          <div class="flex-shrink-0">
+            <g-image
+              class="w-full object-cover"
+              :src="img(blog.image)"
+              alt=""
+            />
+          </div>
+          <div class="flex-1 bg-white p-6 flex flex-col justify-between">
+            <div class="flex-1">
+              <h2
+                class="
+                  text-3xl
+                  uppercase
+                  mb-6
+                  leading-none
+                  font-black font-heading
+                "
+              >
+                {{ blog.title }}
+              </h2>
+              <div
+                v-html="blog.content"
+                class="
+                  mt-3
+                  text-base text-xl
+                  lg:text-2xl
+                  leading-normal
+                  text-gray-800
+                "
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    v-else
+    class="relative pt-16 lg:pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8"
+  >
     <div class="absolute inset-0">
       <div class="bg-white h-1/3 sm:h-2/3"></div>
     </div>
@@ -45,9 +118,11 @@
                 </a>
               </p> -->
               <a
-              target="_blank"
-              v-if="path(blog).includes('http')"
-              :href="path(blog)" class="block">
+                target="_blank"
+                v-if="path(blog).includes('http')"
+                :href="path(blog)"
+                class="block"
+              >
                 <h3 class="mt-2 text-2xl leading-7 font-semibold text-gray-900">
                   {{ blog.title }}
                 </h3>
@@ -56,10 +131,7 @@
                   class="mt-3 text-base leading-6 text-gray-700 text-xl"
                 ></div>
               </a>
-               <a 
-              
-              v-else
-              :href="path(blog)" class="block">
+              <a v-else :href="path(blog)" class="block">
                 <h3 class="mt-2 text-2xl leading-7 font-semibold text-gray-900">
                   {{ blog.title }}
                 </h3>
@@ -101,7 +173,7 @@
 
 <script>
 export default {
-  props: ["main", "blogs"],
+  props: ["id", "main", "blogs"],
   methods: {
     path(blog) {
       if (this.pathPrefix) return this.pathPrefix + "/" + blog.id;

src/components/marketing/sections/cta-sections/logoShowcase.vue

@@ -1,17 +1,15 @@
 <template>
   <section class="lg:py-20 pb-8 px-4 text-center">
     <div class="mx-auto mb-4" v-if="main">
-      <h2
-        class="lg:text-6xl uppercase leading-tight mb-0 font-light"
-      >
+      <h2 class="lg:text-6xl uppercase leading-tight mb-0 font-light">
         {{ main.title }}
       </h2>
-      <h2
-        class="lg:text-6xl uppercase leading-tight mt-0 mb-4 font-bold"
-      >
+      <h2 class="lg:text-6xl uppercase leading-tight mt-0 mb-4 font-bold">
         {{ main.title2 }}
       </h2>
-      <p class="text-xl leading-tight tracking-wide mb-10">{{ main.subtitle }}</p>
+      <p class="text-xl leading-tight tracking-wide mb-10">
+        {{ main.subtitle }}
+      </p>
 
       <g-image :src="img(main.image)" class="lg:w-3/4 mx-auto" />
     </div>
@@ -49,6 +47,25 @@
         </a>
       </div>
     </div> -->
+
+    <div class="pt-8 px-4 text-center" v-else-if="id == 'cloud'">
+      <div class="max-w-2xl mx-auto mb-8" v-if="main">
+        <h2 class="text-4xl leading-tight mb-6 font-semibold font-heading">
+          {{ title }}
+        </h2>
+        <p class="text-gray-400 leading-relaxed"></p>
+      </div>
+      <div class="flex flex-wrap -mx-8">
+        <g-link
+          v-for="(logo, idx) in logos"
+          :key="idx"
+          :to="logo.url"
+          class="md:w-1/4 px-8 mb-5"
+        >
+          <g-image :src="img(logo.image)" />
+        </g-link>
+      </div>
+    </div>
     <div v-else class="flex flex-wrap -mx-8">
       <g-image
         class="mx-auto"
@@ -57,7 +74,7 @@
         :src="img(logo.image)"
       />
     </div>
-    <div v-if="main.button" class="my-4">
+    <div v-if="main" class="my-4">
       <a
         class="
           inline-block
@@ -72,7 +89,7 @@
           shadow
           border-black
         "
-        v-if="main.button"
+        v-if="main"
         :href="main.link"
         >{{ main.button }}</a
       >

src/templates/MarkdownPage.vue

@@ -25,6 +25,12 @@
         :linkheader2="$page.markdownPage.header_link2"
       />
 
+      <Blogs
+        v-if="$page.markdownPage.blogs"
+        :id="$page.markdownPage.id"
+        :blogs="$page.markdownPage.blogs"
+      />
+
       <BrandPanel
         :id="$page.markdownPage.id"
         v-if="
@@ -246,6 +252,11 @@
         "
         :cta="$page.markdownPage.cta2"
       />
+      <LogoShowcase
+        v-if="$page.markdownPage.logos.length > 0"
+        :id="$page.markdownPage.id"
+        :logos="$page.markdownPage.logos"
+      />
     </div>
     <g-image
       v-if="
@@ -479,8 +490,11 @@
         :header="$page.markdownPage.header3"
       />
 
-      <logoShowcase
-        v-if="$page.markdownPage.logos.length > 0"
+      <LogoShowcase
+        v-if="
+          $page.markdownPage.logos.length > 0 &&
+          $page.markdownPage.id !== 'cloud'
+        "
         :id="$page.markdownPage.id"
         :logos="$page.markdownPage.logos"
         :main="$page.markdownPage.logosMain"
@@ -911,6 +925,12 @@
       link
       image
       }
+    blogs{
+      id
+      image
+      title
+      content
+      }
     }
     allCustomCta {
       edges {
@@ -936,7 +956,7 @@ import SolutionsHeader from "~/components/custom/sections/header/HeaderSection.v
 import HowItWorks from "~/components/custom/sections/HowItWorks.vue";
 import Features from "~/components/custom/sections/Features.vue";
 import InTheNews from "~/components/marketing/sections/logo-clouds/off_white_grid.vue";
-import logoShowcase from "~/components/marketing/sections/cta-sections/logoShowcase.vue";
+import LogoShowcase from "~/components/marketing/sections/cta-sections/logoShowcase.vue";
 import CallToAction from "~/components/custom/sections/CallToAction.vue";
 import CallToActionbg1 from "~/components/custom/sections/CallToActionbg1.vue";
 import SignUp from "~/components/custom/sections/SignUp.vue";
@@ -957,6 +977,7 @@ import LinkTable from "~/components/marketing/sections/cta-sections/Link_Table.v
 import SplitWithImage from "~/components/custom/SplitWithImage.vue";
 import ConversationSec from "~/components/custom/ConversationSec.vue";
 import SplitWithForm from "~/components/custom/SplitWithForm.vue";
+import Blogs from "~/components/marketing/sections/blog-sections/3_column_cards.vue";
 
 export default {
   components: {
@@ -970,7 +991,7 @@ export default {
     HowItWorks,
     Features,
     InTheNews,
-    logoShowcase,
+    LogoShowcase,
     CallToAction,
     CallToActionbg1,
     SignUp,
@@ -990,6 +1011,7 @@ export default {
     SplitWithImage,
     ConversationSec,
     SplitWithForm,
+    Blogs,
   },
   computed: {
     getImg() {