Fix brandPanel && replace hard coded imgs of token page

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

@@ -67,7 +67,7 @@
         <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="img(brand.img)"
+            :src="image"
             :alt="brand.title"
           />
         </div>
@@ -79,11 +79,11 @@
 <script>
 export default {
   props: ["brand", "id"],
-  methods: {
-    img(image) {
-      if (!image) return "";
-      if (image.src) return image.src;
-      return image;
+  computed: {
+    image() {
+      return this.brand.image.src
+        ? this.brand.image.src
+        : require(`!!assets-loader!@images/brandPanel/${this.brand.image}`);
     },
   },
 };

src/components/marketing/sections/team-sections/with_large_images.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="bg-white">
+    <div class="mx-auto py-12 px-4 max-w-screen-xl sm:px-6 lg:px-8 lg:py-24">
+      <div class="space-y-12">
+        <div
+          class="space-y-5 text-center sm:space-y-4 md:max-w-xl lg:max-w-3xl xl:max-w-none"
+        >
+          <h2
+            class="text-3xl leading-9 font-extrabold tracking-tight sm:text-4xl"
+          >
+            {{ main.title }}
+          </h2>
+          <p class="text-xl leading-7 text-black-500">
+            {{ main.description }}
+          </p>
+        </div>
+        <div
+          class="space-y-12 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-12 sm:space-y-0 lg:grid-cols-3 lg:gap-x-8"
+        >
+          <div
+            v-for="(section, index) in sections"
+            :key="index"
+            class="tft_fuel space-y-4 p-5"
+            :class="{ active: index % 2 !== 0 }"
+          >
+            <div class="relative pb-2/3">
+              <g-image
+                class="object-cover mb-8 h-full w-full"
+                :src="img(section.svg)"
+                :alt="section.title"
+              />
+            </div>
+
+            <div class="space-y-2">
+              <div class="text-center leading-6 space-y-1">
+                <h4 class="text-xl font-normal">{{ section.title }}</h4>
+                <div v-html="section.content"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="text-center">
+          <a
+            v-if="main.link.includes('http')"
+            target="_blank"
+            :href="main.link"
+            class="bg-blue-900 uppercase text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 shadow rounded-full"
+            >{{ main.button }}</a
+          >
+          <g-link
+            v-else
+            :href="main.link"
+            class="bg-blue-900 uppercase text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 shadow rounded-full"
+            >{{ main.button }}</g-link
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["main", "sections"],
+  methods: {
+    img(image) {
+      if (!image) return "";
+      if (image.src) return image.src;
+      return image;
+    },
+  },
+};
+</script>
+<style scoped>
+.tft_fuel {
+  background-color: #66efc5;
+  border-radius: 20px;
+}
+.active {
+  background-color: #ff8acf;
+  border-radius: 20px;
+}
+</style>