updated internet is broken / grid solution section

src/components/custom/sections/Comparison.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="py-12 px-4 text-center">
+  <section class="py-24 px-4 text-center">
     <h2 class="text-4xl mb-2 leading-tight font-semibold font-heading">
       {{ main.title }}
     </h2>

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

@@ -0,0 +1,58 @@
+<template>
+  <div class="">
+    <div class="max-w-screen-xl mx-auto py-2">
+      <div
+        class="brandpanel bg-white rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
+      >
+        <div
+          class="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-10"
+        >
+          <div class="lg:self-center">
+            <h2
+              class="text-3xl leading-9 font-extrabold sm:leading-10"
+            >
+              <span class="block">{{ brand.title }}</span>
+              <span class="block" v-if="brand.subtitle">{{
+                brand.subtitle
+              }}</span>
+            </h2>
+            <div
+              class="py-6 mt-4 text-lg leading-6"
+              v-html="brand.content"
+            ></div>
+            <a
+              :href="brand.sourceUrl"
+              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"
+              >{{ brand.btnTxt }}</a
+            >
+            <a
+              :href="brand.sourceUrl2"
+              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"
+              >{{ brand.btnTxt2 }}</a
+            >
+          </div>
+        </div>
+        <div class="relative pb-3/5 -mt-6 md:pb-1/2">
+          <g-image
+            class="absolute brandpanel inset-0 w-full h-full transform translate-x-0 translate-y-6 rounded-md object-fill object-left-top sm:translate-x-0 lg:translate-y-20"
+            :src="image"
+            :alt="brand.title"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["brand"],
+  computed: {
+    image() {
+      return this.brand.image.src
+        ? this.brand.image.src
+        : require(`!!assets-loader!@images/brandPanel/${this.brand.image}`);
+    },
+  },
+};
+</script>

src/pages/Index.vue

@@ -35,31 +35,35 @@
         "
       />
 
-       <CallToActionbg1
+      <!-- <CallToActionbg1
         v-if="$page.markdownPage.cta3"
         :cta="$page.markdownPage.cta3"
-      />
+      /> -->
 
-       <CallToActionbg2
+      <!-- <CallToActionbg2
         v-if="$page.markdownPage.cta4"
         :cta="$page.markdownPage.cta4"
-      />
+      /> -->
 
-         <g-image
+      <!-- <g-image
         v-if="$page.markdownPage.solution_image3"
         :src="$page.markdownPage.solution_image3.src"
-      />
+      /> -->
 
-      <CallToAction
+      <!-- <CallToAction
         v-if="$page.markdownPage.cta5"
         :cta="$page.markdownPage.cta5"
-      />
-     
+      /> -->
 
-      <!-- <BrandPanel
+      <BrandPanel
         :brand="$page.markdownPage.brandPanel"
         v-if="$page.markdownPage.brandPanel"
-      /> -->
+      />
+
+      <BrandPanel2
+        :brand="$page.markdownPage.brandPanel2"
+        v-if="$page.markdownPage.brandPanel2"
+      />
 
       <Comparison
         v-if="
@@ -237,6 +241,17 @@
          sourceUrl
          btnTxt
          image
+       }
+        brandPanel2{
+         id
+         title
+         subtitle
+         content
+         sourceUrl
+         btnTxt
+         sourceUrl2
+         btnTxt2
+         image
        }
         logos{
           id
@@ -275,6 +290,7 @@ import ShowcaseProducts from "~/components/marketing/sections/cta-sections/Showc
 import Comparison from "~/components/custom/sections/Comparison.vue";
 import NewCard from "~/components/marketing/sections/cta-sections/NewCard.vue";
 import BrandPanel from "~/components/marketing/sections/cta-sections/BrandPanel.vue";
+import BrandPanel2 from "~/components/marketing/sections/cta-sections/BrandPanel2.vue";
 import CallToAction from "~/components/custom/sections/CallToAction.vue";
 import CallToActionbg1 from "~/components/custom/sections/CallToActionbg1.vue";
 import CallToActionbg2 from "~/components/custom/sections/CallToActionbg2.vue";
@@ -290,6 +306,7 @@ export default {
     Comparison,
     NewCard,
     BrandPanel,
+    BrandPanel2,
     logoShowcase,
     CallToAction,
     CallToActionbg1,