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>
@@ -44,28 +117,27 @@
                   {{ blog.tag }}
                 </a>
               </p> -->
-              <a 
-              target="_blank"
-              v-if="path(blog).includes('http')"
-              :href="path(blog)" class="block">
+              <a
+                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>
                 <div
                   v-html="blog.excerpt"
-                  class="mt-3 text-base leading-6 text-gray-700 text-xl" 
+                  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>
                 <div
                   v-html="blog.excerpt"
-                  class="mt-3 text-base leading-6 text-gray-700 text-xl" 
+                  class="mt-3 text-base leading-6 text-gray-700 text-xl"
                 ></div>
               </a>
             </div>
@@ -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
       >