Brand panel3 sec

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="">
+  <div :class="{ 'bg-about': id == 'about-us' && brandPanel3 }">
     <div class="max-w-screen-xl mx-auto py-10">
       <!-- token -->
       <div
@@ -253,7 +253,7 @@
 
       <!-- About us -->
       <div
-        v-else-if="id == 'about-us' && !brandPanel2"
+        v-else-if="id == 'about-us' && !brandPanel2 && !brandPanel3"
         class="flex flex-wrap text-left"
       >
         <div class="lg:w-1/2 px-2 self-center">
@@ -343,6 +343,50 @@
         </div>
       </div>
 
+      <div
+        v-else-if="id == 'about-us' && brandPanel3"
+        class="flex flex-wrap lg:text-left lg:pt-16 px-4"
+      >
+        <div class="lg:w-1/2 px-2 self-center">
+          <g-image  :src="image" :alt="brand.title" />
+        </div>
+        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none">
+          <div class="lg:self-center">
+            <h2 class="text-3xl mb-8 uppercase leading-none font-heading">
+              <span class="block">{{ brand.title }}</span>
+              <span class="block" v-if="brand.subtitle">{{
+                brand.subtitle
+              }}</span>
+            </h2>
+            <div
+              class="pb-6 text-gray-900 text-2xl leading-tight tracking-wide"
+              v-html="brand.content"
+            ></div>
+            <a
+              v-if="brand.btnTxt"
+              target="_blank"
+              :href="brand.sourceUrl"
+              class="
+                inline-block
+                bg-gray-900
+                text-2xl
+                learn-button
+                hover:bg-gray-800
+                text-gray-100
+                px-16
+                py-1
+                mb-4
+                shadow
+                rounded-full
+                tft_subtitle
+                tracking-widev
+              "
+              >{{ brand.btnTxt }}</a
+            >
+          </div>
+        </div>
+      </div>
+
       <div
         v-else
         class="
@@ -411,7 +455,7 @@
 
 <script>
 export default {
-  props: ["brand", "id", "brandPanel2"],
+  props: ["brand", "id", "brandPanel2", "brandPanel3"],
   computed: {
     image() {
       return this.brand.image.src
@@ -423,7 +467,9 @@ export default {
 </script>
 
 <style scoped>
-.whybrand {
-  background-image: linear-gradient(#c2aeef, #82f3fe);
+.bg-about {
+  background: #70dfc9;
+  background: -webkit-linear-gradient(to right, #70dfc9, #ea1ff7);
+  background: linear-gradient(to right, #70dfc9, #ea1ff7);
 }
 </style>