development_new changes

2021-09-28 18:25:13 +02:00
parent 71be9fa1f8
commit fef00e8e77
110 changed files with 1033 additions and 468 deletions
--- a/src/assets/images/brandPanel/about_globe_big.png
+++ b/src/assets/images/brandPanel/about_globe_big.png
--- a/src/assets/images/brandPanel/about_logos_big.png
+++ b/src/assets/images/brandPanel/about_logos_big.png
--- a/src/assets/images/brandPanel/about_value_big.png
+++ b/src/assets/images/brandPanel/about_value_big.png
--- a/src/assets/images/brandPanel/burn_token_big.jpg
+++ b/src/assets/images/brandPanel/burn_token_big.jpg
--- a/src/assets/images/brandPanel/scarce_token_big.jpg
+++ b/src/assets/images/brandPanel/scarce_token_big.jpg
--- a/src/assets/images/brandPanel/stake_token_big.jpg
+++ b/src/assets/images/brandPanel/stake_token_big.jpg
--- a/src/components/custom/HorizontalScroll.vue
+++ b/src/components/custom/HorizontalScroll.vue
@@ -1,10 +1,10 @@
 <template>
  <div class="lg:my-20 flex flex-col mt-5 p-auto">
-    <h2 class="flex py-2 mx-auto uppercase font-bold text-5xl">
+    <h2 class="flex py-2 mx-auto uppercase font-bold lg:text-6xl">
      {{ team.title }}
    </h2>
    <div
-      class="max-w-x2 text-xl text-center mb-8 mx-auto leading-relaxed"
+      class="lg:max-w-6xl text-2xl text-center mb-8 mx-auto leading-relaxed"
      v-html="team.content"
    ></div>
    <div class="flex overflow-x-scroll pb-10 scrollable">
--- a/src/components/custom/MarketInfo.vue
+++ b/src/components/custom/MarketInfo.vue
@@ -1,30 +1,28 @@
 <template>
-  <div class="flex flex-wrap -mx-auto">
+  <div class="flex flex-wrap -mx-auto lg:my-20">
    <div class="text-center mx-auto my-4">
-      <h1
+      <h2
        class="
          text-md
-          lg:text-5xl
-          text-gray-900
+          lg:text-6xl
          font-bold
-          sm:text-9xl
          leading-tight
-          lg:max-w-2xl
+          lg:max-w-3xl
        "
      >
        {{ main.title }}
-      </h1>
+      </h2>
      <div
-        class="my-5 max-w-2xl text-lg lg:text-xl mx-auto text-gray-900 sm:mt-4"
+        class="my-5 max-w-2xl text-lg lg:text-2xl mx-auto text-gray-900 sm:mt-4"
        v-html="main.content"
      ></div>
    </div>
-    <div class="flex flex-col my-1 lg:px-4 lg:w-1/2 overflow-hidden">
-      <g-image :src="mainItem.image" class="w-3/4 mx-auto" />
+    <div class="flex flex-col my-1 lg:w-1/2 overflow-hidden">
+      <g-image :src="mainItem.image" class="w-1/2 mx-auto" />
      <div class="flex-1 bg-white p-6 flex flex-col justify-between">
        <div class="flex-1">
          <div
-            class="mt-3 text-lg lg:text-xl leading-tight text-gray-800"
+            class="mt-3 lg:text-xl max-w-xl mx-auto leading-tight text-gray-800 text-center"
            v-html="mainItem.content"
          ></div>
        </div>
@@ -32,12 +30,12 @@
    </div>

    <!-- Column Content -->
-    <div class="flex flex-col my-1 px-4 lg:w-1/2 overflow-hidden">
-      <div class="flex my-10" v-for="info in marketInfo" :key="info.id">
+    <div class="flex flex-col my-1 lg:w-1/2 overflow-hidden lg:px-20">
+      <div class="flex my-4 px-2" v-for="info in marketInfo" :key="info.id">
        <div class="flex-shrink-0">
-          <g-image :src="info.image" class="h-28 w-28" />
+          <g-image :src="info.image" class="h-32 w-32" />
        </div>
-        <div class="ml-4">
+        <div class="lg:mx-20">
          <div
            class="mt-5 lg:mx-10 text-xl leading-6 text-gray-900"
            v-html="info.content"
--- a/src/components/custom/Navbar/Getintouch.vue
+++ b/src/components/custom/Navbar/Getintouch.vue
@@ -3,17 +3,17 @@
    <div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8">
      <div class="grid grid-cols-1 gap-16">
        <div class="lg:grid lg:grid-cols-3 lg:gap-8">
-          <h2 class="text-4xl mb-6 leading-tight font-semibold font-heading">
+          <h2 class="lg:text-6xl mb-6 leading-tight font-semibold font-heading">
            E-mail us
          </h2>
          <div
            class="mt-8 grid grid-cols-1 gap-12 sm:grid-cols-2 sm:gap-x-8 sm:gap-y-12 lg:mt-0 lg:col-span-2"
          >
            <div v-for="(contact, idx) in contacts" :key="idx">
-              <h4 class="text-lg leading-6 font-medium text-gray-700">
+              <h4 class="text-2xl leading-6 font-medium text-gray-900">
                {{ contact.title }}
              </h4>
-              <div class="mt-2 text-base leading-6 text-gray-500">
+              <div class="mt-2 text-xl leading-6 text-gray-500">
                <div>
                  {{ contact.mail }}
                </div>
--- a/src/components/custom/Roadmap.vue
+++ b/src/components/custom/Roadmap.vue
@@ -4,7 +4,7 @@
      <g-image class="lg:w-3/4 mx-auto" :src="roadmap.image" />
      <div
        v-html="roadmap.content"
-        class="mt-10 mb-8 lg:text-xl text-gray-900"
+        class="mt-10 mb-8 lg:text-2xl text-gray-900"
      ></div>
    </div>
  </section>
--- a/src/components/custom/SplitWithForm.vue
+++ b/src/components/custom/SplitWithForm.vue
@@ -15,15 +15,15 @@
          text-center
        "
      >
-        <h1
+        <h2
          class="
-            text-5xl uppercase mb-0 leading-tight font-semibold font-heading
+            lg:text-6xl uppercase mb-0 leading-tight font-semibold font-heading
          "
        >
          {{ subscribe.title }}
-        </h1>
+        </h2>
        <div
-          class="my-8 lg:text-xl"
+          class="my-8 lg:text-2xl"
          v-html="subscribe.content"
        ></div>
        <div class="flex w-full md:justify-start justify-center items-end">
--- a/src/components/custom/SplitWithImage.vue
+++ b/src/components/custom/SplitWithImage.vue
@@ -28,8 +28,7 @@
              font-bold
              text-gray-900
              sm:leading-none
-              lg:text-5xl
-              max-w-2xl
+              lg:text-6xl
            "
          >
            {{ tft.title }}
@@ -40,8 +39,7 @@
            class="
              mt-3
              max-w-md
-              text-lg text-gray-900
-              sm:text-xl
+              text-2xl text-gray-900
              md:mt-5
              md:max-w-xl
            "
@@ -50,6 +48,7 @@
          <div class="mt-10 sm:flex sm:justify-center lg:justify-start">
            <a
              :href="tft.link"
+              target="_blank"
              class="
                inline-block
                bg-white
--- a/src/components/custom/sections/CallToAction.vue
+++ b/src/components/custom/sections/CallToAction.vue
@@ -8,13 +8,13 @@
  >
    <!-- about-us -->
    <div
-      class="w-full max-w-2xl mx-auto lg:py-20"
+      class="w-full mx-auto lg:py-20"
      v-if="id == 'about-us' && !textOnly && !lastCta"
    >
      <h2
        v-if="cta.title"
        class="
-          lg:text-5xl
+          lg:text-6xl
          text-center
          uppercase
          mb-2
@@ -26,9 +26,9 @@
      </h2>
      <div
        v-html="cta.content"
-        class="mt-6 mb-8 lg:text-xl text-gray-800"
+        class="mt-6 mb-8 lg:text-2xl text-gray-800"
      ></div>
-      <g-image :src="cta.image" class="my-10" />
+      <g-image :src="cta.image" class="my-10 mx-auto" />

      <!-- <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
        <a
@@ -93,13 +93,13 @@
    </div>

    <div
-      class="w-full max-w-2xl mx-auto py-12"
+      class="w-full max-w-3xl mx-auto py-12"
      v-else-if="id == 'about-us' && textOnly"
    >
      <h2
        v-if="cta.title"
        class="
-          lg:text-5xl
+          lg:text-6xl
          text-center
          uppercase
          mb-2
@@ -111,7 +111,7 @@
      </h2>
      <div
        v-html="cta.content"
-        class="mt-6 mb-8 lg:text-xl text-gray-800"
+        class="mt-6 mb-8 lg:text-2xl text-gray-800"
      ></div>
    </div>

@@ -122,7 +122,7 @@
      <h2
        v-if="cta.title"
        class="
-          lg:text-5xl
+          lg:text-6xl
          text-center
          uppercase
          mb-2
@@ -135,7 +135,7 @@
      <h2
        v-if="cta.subtitle"
        class="
-          lg:text-5xl
+          lg:text-6xl
          text-center
          uppercase
          mb-2
@@ -147,7 +147,7 @@
      </h2>
      <div
        v-html="cta.content"
-        class="mt-6 mb-8 lg:text-xl text-gray-800"
+        class="mt-6 mb-8 lg:text-2xl text-gray-800"
      ></div>
      <a
        class="
@@ -199,14 +199,14 @@
    >
      <h2
        v-if="cta.title"
-        class="text-5xl uppercase mb-0 leading-tight font-semibold font-heading"
+        class="lg:text-6xl uppercase mb-0 leading-tight font-semibold font-heading"
      >
        {{ cta.title }}
      </h2>

      <h2
        v-if="cta.subtitle"
-        class="text-5xl uppercase mt-0 leading-tight font-semibold font-heading"
+        class="lg:text-6xl uppercase mt-0 leading-tight font-semibold font-heading"
      >
        {{ cta.subtitle }}
      </h2>
@@ -238,7 +238,7 @@
          class="
            inline-block
            bg-white
-            text-sm
+            text-lg
            learn-button
            hover:bg-gray-400
            bo
@@ -259,7 +259,7 @@
          class="
            inline-block
            bg-white
-            text-sm
+            text-lg
            learn-button
            hover:bg-gray-400
            bo
@@ -279,7 +279,7 @@
          class="
            inline-block
            bg-white
-            text-sm
+            text-lg
            learn-button
            hover:bg-gray-400
            bo
@@ -300,7 +300,7 @@
          class="
            inline-block
            bg-white
-            text-sm
+            text-lg
            learn-button
            hover:bg-gray-400
            bo
@@ -320,7 +320,7 @@
          class="
            inline-block
            bg-white
-            text-sm
+            text-lg
            learn-button
            hover:bg-gray-400
            bo
@@ -341,7 +341,7 @@
          class="
            inline-block
            bg-white
-            text-sm
+            text-lg
            learn-button
            hover:bg-gray-400
            bo
@@ -361,7 +361,7 @@
          class="
            inline-block
            bg-white
-            text-sm
+            text-lg
            learn-button
            hover:bg-gray-400
            bo
@@ -382,7 +382,7 @@
          class="
            inline-block
            bg-white
-            text-sm
+            text-lg
            learn-button
            hover:bg-gray-400
            bo
@@ -403,7 +403,7 @@
          class="
            inline-block
            bg-white
-            text-sm
+            text-lg
            learn-button
            hover:bg-gray-400
            bo
@@ -424,7 +424,7 @@
          class="
            inline-block
            bg-white
-            text-sm
+            text-lg
            learn-button
            hover:bg-gray-400
            bo
@@ -445,7 +445,7 @@
          class="
            inline-block
            bg-white
-            text-sm
+            text-lg
            learn-button
            hover:bg-gray-400
            bo
@@ -459,14 +459,14 @@
          "
          target="_blank"
          v-if="cta.button6 && cta.link6.includes('http')"
-          :href="cta.link4"
+          :href="cta.link6"
          >{{ cta.button6 }}</a
        >
        <a
          class="
            inline-block
            bg-white
-            text-sm
+            text-lg
            learn-button
            hover:bg-gray-400
            bo
@@ -486,17 +486,17 @@
    </div>

    <div
-      class="w-full max-w-7xl mx-auto mt-10 px-16"
+      class="w-full max-w-7xl mx-auto mt-10 px-2"
      v-else-if="id == 'home' && lastCta"
    >
-      <g-image :src="cta.image" />
+      <g-image class="mx-auto" :src="cta.image" />
      <h2
        v-if="cta.title"
-        class="text-5xl mb-2 uppercase leading-tight font-semibold font-heading"
+        class="lg:text-6xl mb-2 uppercase leading-tight font-semibold font-heading"
      >
        {{ cta.title }}
      </h2>
-      <div v-html="cta.content" class="mt-6 mb-8 text-gray-800"></div>
+      <div v-html="cta.content" class="mt-6 mb-8 mx-auto text-2xl text-gray-800"></div>
      <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
        <a
          @click="toggleModal"
@@ -504,7 +504,7 @@
            inline-block
            cursor-pointer
            bg-blue-900
-            text-sm
+            text-lg
            learn-button
            hover:bg-blue-800
            text-gray-100
@@ -522,7 +522,7 @@
        class="
          inline-block
          bg-white
-          text-sm
+          text-lg
          learn-button
          hover:bg-gray-400
          bo
@@ -543,7 +543,7 @@
        class="
          inline-block
          bg-white
-          text-sm
+          text-lg
          learn-button
          hover:bg-gray-400
          bo
@@ -563,7 +563,7 @@
        class="
          inline-block
          bg-white
-          text-sm
+          text-lg
          learn-button
          hover:bg-gray-400
          bo
@@ -584,7 +584,7 @@
        class="
          inline-block
          bg-white
-          text-sm
+          text-lg
          learn-button
          hover:bg-gray-400
          bo
@@ -604,7 +604,7 @@
        class="
          inline-block
          bg-white
-          text-sm
+          text-lg
          learn-button
          hover:bg-gray-400
          bo
@@ -625,7 +625,7 @@
        class="
          inline-block
          bg-white
-          text-sm
+          text-lg
          learn-button
          hover:bg-gray-400
          bo
@@ -645,7 +645,7 @@
        class="
          inline-block
          bg-white
-          text-sm
+          text-lg
          learn-button
          hover:bg-gray-400
          bo
@@ -666,7 +666,7 @@
        class="
          inline-block
          bg-white
-          text-sm
+          text-lg
          learn-button
          hover:bg-gray-400
          bo
@@ -685,12 +685,12 @@
    </div>

    <!-- grid -->
-    <div class="w-full max-w-3xl mx-auto py-12" v-else-if="id == 'grid'">
+    <div id="zero_os" class="w-full max-w-3xl mx-auto py-12" v-else-if="id == 'grid'">
      <g-image :src="cta.image" class="mx-auto lg:w-1/3 my-10" />
      <h2
        v-if="cta.title"
        class="
-          lg:text-5xl
+          lg:text-6xl
          text-center
          uppercase
          my-2
@@ -702,7 +702,7 @@
      </h2>
      <div
        v-html="cta.content"
-        class="mt-6 mb-8 lg:text-xl text-gray-800"
+        class="mt-6 mb-8 lg:text-2xl text-gray-800"
      ></div>
      <a
        class="
@@ -787,13 +787,13 @@

    <!-- token -->
    <div
-      class="w-full max-w-6xl mx-auto py-12"
+      class="w-full max-w-6xl mx-auto lg:my-20"
      v-else-if="id == 'token' && !lastCta"
    >
      <h2
        v-if="cta.title"
        class="
-          lg:text-5xl
+          lg:text-6xl
          max-w-3xl
          mx-auto
          text-center
@@ -807,7 +807,7 @@
      </h2>
      <div
        v-html="cta.content"
-        class="mt-6 mb-8 max-w-3xl mx-auto lg:text-xl text-gray-800"
+        class="mt-6 mb-8 max-w-3xl mx-auto lg:text-2xl text-gray-800"
      ></div>
      <g-image :src="cta.image" class="mx-auto w-full my-10" />
      <a
@@ -857,7 +857,7 @@
        class="
          max-w-2xl
          mx-auto
-          lg:text-5xl
+          lg:text-6xl
          text-center
          uppercase
          mb-2
@@ -869,7 +869,7 @@
      </h2>
      <div
        v-html="cta.content"
-        class="mt-6 mb-8 lg:text-xl text-gray-800"
+        class="mt-6 mb-8 lg:text-2xl text-gray-800"
      ></div>

      <a
--- a/src/components/custom/sections/CustomCTA.vue
+++ b/src/components/custom/sections/CustomCTA.vue
@@ -2,7 +2,7 @@
  <div>
    <div class="header section banner" v-if="header">
      <div class="center">
-        <h1 class="text-8xl">
+        <h1 class="text-8xl uppercase">
          <strong>{{ title }}</strong>
        </h1>
      </div>
--- a/src/components/custom/sections/Features.vue
+++ b/src/components/custom/sections/Features.vue
@@ -316,7 +316,7 @@
  <section class="py-24 px-4 text-center" v-else-if="id == 'token'">
    <h2
      class="
-        text-5xl
+        lg:text-6xl
        mx-auto
        leading-tight
        mb-6
@@ -327,7 +327,7 @@
    >
      {{ main.title }}
    </h2>
-    <div class="flex flex-wrap items-center -mx-4 mb-6">
+    <div class="flex flex-wrap items-center -mx-4 lg:mb-20">
      <div
        v-for="(feature, index) in features"
        :key="index"
--- a/src/components/custom/sections/header/HeaderSection.vue
+++ b/src/components/custom/sections/header/HeaderSection.vue
@@ -1,31 +1,32 @@
 <template>
  <section class="py-12 px-4 text-center">
-    <div class="w-full mx-auto">
+    <div class="w-full mx-auto lg:max-w-6xl">
      <span class="text-sm font-semibold">{{ header.title }}</span>
-      <h2 class="text-4xl mt-2 mb-6 leading-tight font-heading">
+      <h2 class="lg:text-5xl mt-2 uppercase mb-6 leading-tight font-heading">
        {{ header.subtitle }}
      </h2>
      <div
        v-if="header.content"
        v-html="header.content"
-        class="post-content mb-8 text-gray-700 leading-relaxed"
+        class="post-content mb-8 text-xl leading-relaxed"
      ></div>
      <div>
        <g-link
          class="
            inline-block
            bg-green-500
-            text-sm text-white
+            text-lg
+            text-white
            learn-button
-            hover:bg-green-600
-            px-8
-            py-2
-            mr-2
-            my-0
-            rounded
+            hover:bg-green-400
+            bo
+            px-12
+            py-1
+            mr-5
+            mb-4
+            border-2
            shadow
-            rounded-full
-            active--exact active
+            border-black
          "
          v-if="header.btn1"
          :to="header.link1"
--- a/src/components/marketing/sections/blog-sections/3_column_cards.vue
+++ b/src/components/marketing/sections/blog-sections/3_column_cards.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
+  <div 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>
@@ -7,12 +7,12 @@
      <div class="text-center">
        <h2
          class="
-            text-5xl
+            lg:text-6xl
            leading-tight
-            mb-6
            font-bold font-heading
            uppercase
            sm:leading-10
+            lg:pb-10
          "
        >
          {{ main.title }}
@@ -45,12 +45,12 @@
                </a>
              </p> -->
              <a :href="path(blog)" class="block">
-                <h3 class="mt-2 text-xl leading-7 font-semibold text-gray-900">
+                <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-500"
+                  class="mt-3 text-base leading-6 text-gray-700 text-xl" 
                ></div>
              </a>
            </div>
--- a/src/components/marketing/sections/cta-sections/BrandPanel.vue
+++ b/src/components/marketing/sections/cta-sections/BrandPanel.vue
@@ -1,6 +1,6 @@
 <template>
  <div :class="{ 'bg-about': id == 'about-us' && brandPanel3 }">
-    <div class="max-w-screen-xl mx-auto py-10">
+    <div class="mx-auto py-10">
      <!-- oldtoken -->
      <div
        v-if="id == 'oldtoken'"
@@ -168,19 +168,19 @@
        v-else-if="id == 'home'"
        class="flex flex-wrap lg:text-left lg:pt-16 px-4"
      >
-        <div class="lg:w-1/3 lg:px-6 self-center">
+        <div class="lg:w-1/2 lg:px-6 self-center">
          <g-image :src="image" :alt="brand.title" />
        </div>
-        <div class="lg:w-2/3 lg:px-10 order-1 lg:order-none">
-          <div class="lg:self-center">
-            <h2 class="text-5xl mb-8 uppercase leading-none font-heading">
+        <div class="lg:w-1/2 lg:px-10 order-1 lg:order-none lg:self-center">
+          <div class="">
+            <h2 class="lg:text-6xl 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-xl leading-tight tracking-wide"
+              class="pb-6 text-gray-900 text-2xl leading-tight tracking-wide"
              v-html="brand.content"
            ></div>
            <a
@@ -190,7 +190,7 @@
              class="
                inline-block
                bg-white
-                text-sm
+                text-lg
                learn-button
                hover:bg-gray-400
                bo
@@ -212,7 +212,7 @@
              class="
                inline-block
                bg-white
-                text-sm
+                text-lg
                learn-button
                hover:bg-gray-400
                bo
@@ -233,7 +233,7 @@
              class="
                inline-block
                bg-white
-                text-sm
+                text-lg
                learn-button
                hover:bg-gray-400
                bo
@@ -254,21 +254,21 @@
      <!-- About us -->
      <div
        v-else-if="id == 'about-us' && !brandPanel2 && !brandPanel3"
-        class="flex flex-wrap text-left lg:my-10"
+        class="flex flex-wrap text-left lg:my-10 lg:px-20"
      >
        <div class="lg:w-1/2 px-2 self-center">
-          <g-image class="mx-auto" :src="image" :alt="brand.title" />
+          <g-image class="lg:w-2/3 mx-auto" :src="image" :alt="brand.title" />
        </div>
-        <div class="lg:w-1/2 lg:mt-10 order-1 lg:order-none text-left">
+        <div class="lg:w-1/2 lg:mt-10 order-1 lg:order-none text-left px-4">
          <div class="lg:self-center">
-            <h2 class="text-5xl mb-6 uppercase leading-none font-heading">
+            <h2 class="lg:text-6xl 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="py-6 mt-4 text-xl leading-tight tracking-wide"
+              class="py-6 mt-4 text-2xl leading-tight tracking-wide"
              v-html="brand.content"
            ></div>
            <a
@@ -295,18 +295,18 @@

      <div
        v-else-if="id == 'about-us' && brandPanel2"
-        class="flex flex-wrap lg:text-left lg:pt-16 px-4 lg:mb-20"
+        class="flex flex-wrap lg:text-left lg:pt-16 px-4 lg:mb-20 lg:px-20"
      >
        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none">
          <div class="lg:self-center">
-            <h2 class="text-5xl mb-8 uppercase leading-none font-heading">
+            <h2 class="lg:text-6xl 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-xl leading-tight tracking-wide"
+              class="pb-6 text-gray-900 text-2xl leading-tight tracking-wide"
              v-html="brand.content"
            ></div>
            <a
@@ -333,27 +333,27 @@
          </div>
        </div>
        <div class="lg:w-1/2 px-2 self-center">
-          <g-image class="mx-auto" :src="image" :alt="brand.title" />
+          <g-image class="lg:w-2/3 mx-auto" :src="image" :alt="brand.title" />
        </div>
      </div>

      <div
        v-else-if="id == 'about-us' && brandPanel3"
-        class="flex flex-wrap lg:text-left lg:py-12 px-4"
+        class="flex flex-wrap lg:text-left lg:p-20 px-4"
      >
        <div class="lg:w-1/2 px-2 self-center">
-          <g-image :src="image" :alt="brand.title" />
+          <g-image class="lg:w-2/3 mx-auto" :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-5xl mb-8 uppercase leading-none font-heading">
+            <h2 class="lg:text-6xl 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-xl leading-tight tracking-wide"
+              class="pb-6 text-gray-900 text-2xl leading-tight tracking-wide"
              v-html="brand.content"
            ></div>
            <a
@@ -382,13 +382,14 @@
      </div>

      <!-- grid -->
+      
      <div
        v-else-if="id == 'grid' && !brandPanel2 && !brandPanel3"
        class="flex flex-wrap text-left"
      >
-        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none text-left">
-          <div class="px-2 lg:self-center">
-            <h2 class="text-5xl mb-6 uppercase leading-none font-heading">
+        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none text-left lg:self-center lg:px-32">
+          <div class="px-2">
+            <h2 class="lg:text-6xl mb-6 uppercase leading-none font-heading">
              <span class="block">{{ brand.title }}</span>
              <span class="block" v-if="brand.subtitle">{{
                brand.subtitle
@@ -398,16 +399,14 @@
              class="
                py-6
                mt-4
-                text-gray-900 text-xl
+                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-white
@@ -422,29 +421,52 @@
                shadow
                border-black
              "
+              v-if="brand.btnTxt && brand.sourceUrl.includes('http')"
+              target="_blank"
+              :href="brand.sourceUrl"
+              >{{ brand.btnTxt }}</a
+            >
+            <a
+              
+              class="
+                inline-block
+                bg-white
+                text-lg
+                learn-button
+                hover:bg-gray-400
+                px-12
+                py-1
+                mr-5
+                mb-4
+                border-2
+                shadow
+                border-black
+              "
+              v-else
+              :href="brand.sourceUrl"
              >{{ brand.btnTxt }}</a
            >
          </div>
        </div>
-        <div class="lg:w-1/2 px-2">
-          <g-image class="mx-auto lg:w-3/4" :src="image" :alt="brand.title" />
+        <div class="lg:w-1/2">
+          <g-image class="mx-auto" :src="image" :alt="brand.title" />
        </div>
      </div>

      <div
        v-else-if="id == 'grid' && brandPanel2"
-        class="flex flex-wrap lg:text-left lg:pt-16 px-4"
+        class="flex flex-wrap lg:text-left lg:pt-16 px-2"
      >
-        <div class="lg:w-1/2 px-2 self-center">
-          <g-image class="lg:w-3/4" :src="image" :alt="brand.title" />
+        <div class="lg:w-1/2 self-center">
+          <g-image class="" :src="image" :alt="brand.title" />
        </div>
-        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none">
-          <div class="px-2 lg:self-center">
-            <h2 class="lg:text-5xl mb-8 uppercase leading-none font-heading">
+        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:px-32 lg:self-center">
+          <div class="px-2">
+            <h2 class="lg:text-6xl mb-8 uppercase leading-none font-heading">
              {{ brand.title }}
            </h2>
            <div
-              class="pb-6 text-gray-900 text-xl leading-tight tracking-wide"
+              class="pb-6 text-gray-900 text-2xl leading-tight tracking-wide"
              v-html="brand.content"
            ></div>
            <a
@@ -473,15 +495,15 @@

      <div
        v-else-if="id == 'grid' && brandPanel3"
-        class="flex flex-wrap lg:text-left lg:pt-16 px-4"
+        class="flex flex-wrap lg:text-left lg:pt-16 px-2"
      >
-        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none">
-          <div class="lg:self-center">
-            <h2 class="lg:text-5xl mb-8 uppercase leading-none font-heading">
+        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:px-32 lg:self-center">
+          <div class="">
+            <h2 class="lg:text-6xl mb-8 uppercase leading-none font-heading">
              {{ brand.title }}
            </h2>
            <div
-              class="pb-6 text-gray-900 text-xl leading-tight tracking-wide"
+              class="pb-6 text-gray-900 text-2xl leading-tight tracking-wide"
              v-html="brand.content"
            ></div>
            <a
@@ -504,10 +526,88 @@
              "
              >{{ brand.btnTxt }}</a
            >
+             <a
+              v-if="brand.btnTxt2"
+              target="_blank"
+              :href="brand.sourceUrl2"
+              class="
+                inline-block
+                bg-white
+                text-lg
+                learn-button
+                hover:bg-gray-400
+                px-12
+                py-1
+                mr-5
+                mb-4
+                border-2
+                shadow
+                border-black
+              "
+              >{{ brand.btnTxt2 }}</a
+            >
          </div>
        </div>
        <div class="lg:w-1/2 px-2 self-center">
-          <g-image class="mx-auto lg:w-3/4" :src="image" :alt="brand.title" />
+          <g-image class="mx-auto" :src="image" :alt="brand.title" />
+        </div>
+      </div>
+
+       <div
+        v-else-if="id == 'grid' && brandPanel4"
+        class="flex flex-wrap lg:text-left lg:pt-16 px-2"
+      >
+        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:px-32 lg:self-center">
+          <div class="">
+            <h2 class="lg:text-6xl mb-8 uppercase leading-none font-heading">
+              {{ brand.title }}
+            </h2>
+            <div
+              class="pb-6 text-gray-900 text-2xl leading-tight tracking-wide"
+              v-html="brand.content"
+            ></div>
+            <a
+              v-if="brand.btnTxt"
+              :href="brand.sourceUrl"
+              class="
+                inline-block
+                bg-white
+                text-lg
+                learn-button
+                hover:bg-gray-400
+                px-12
+                py-1
+                mr-5
+                mb-4
+                border-2
+                shadow
+                border-black
+              "
+              >{{ brand.btnTxt }}</a
+            >
+             <a
+              v-if="brand.btnTxt2"
+              :href="brand.sourceUrl2"
+              class="
+                inline-block
+                bg-white
+                text-lg
+                learn-button
+                hover:bg-gray-400
+                px-12
+                py-1
+                mr-5
+                mb-4
+                border-2
+                shadow
+                border-black
+              "
+              >{{ brand.btnTxt2 }}</a
+            >
+          </div>
+        </div>
+        <div class="lg:w-1/2 px-2 self-center">
+          <g-image class="mx-auto" :src="image" :alt="brand.title" />
        </div>
      </div>

@@ -516,9 +616,9 @@
        v-else-if="id == 'token' && !brandPanel2 && !brandPanel3"
        class="flex flex-wrap text-left mt-24"
      >
-        <div class="lg:w-1/2 px-2 lg:mt-5 order-1 lg:order-none text-left">
-          <div class="px-2 lg:self-center">
-            <h2 class="lg:text-5xl mb-6 uppercase leading-none font-heading">
+        <div class="lg:w-1/2 lg:px-32 lg:mt-5 order-1 lg:order-none text-left lg:self-center">
+          <div class="px-2">
+            <h2 class="lg:text-6xl mb-6 uppercase leading-none font-heading">
              <span class="block">{{ brand.title }}</span>
              <span class="block" v-if="brand.subtitle">{{
                brand.subtitle
@@ -529,7 +629,7 @@
                py-6
                mt-4
                max-w-md
-                text-gray-900 text-xl
+                text-gray-900 text-2xl
                leading-tight
                tracking-wide
              "
@@ -537,8 +637,8 @@
            ></div>
          </div>
        </div>
-        <div class="lg:w-1/2 px-2">
-          <g-image class="mx-auto lg:w-3/4" :src="image" :alt="brand.title" />
+        <div class="lg:w-1/2">
+          <g-image class="mx-auto" :src="image" :alt="brand.title" />
        </div>
      </div>

@@ -546,16 +646,16 @@
        v-else-if="id == 'token' && brandPanel2"
        class="flex flex-wrap lg:text-left lg:pt-16 px-4"
      >
-        <div class="lg:w-1/2 px-2 self-center">
-          <g-image class="lg:w-3/4" :src="image" :alt="brand.title" />
+        <div class="lg:w-1/2 self-center">
+          <g-image class="" :src="image" :alt="brand.title" />
        </div>
-        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none">
-          <div class="px-2 lg:self-center">
-            <h2 class="lg:text-5xl mb-8 uppercase leading-none font-heading">
+        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:px-32 lg:self-center">
+          <div class="px-2">
+            <h2 class="lg:text-6xl mb-8 uppercase leading-none font-heading">
              {{ brand.title }}
            </h2>
            <div
-              class="pb-6 text-gray-900 text-xl leading-tight tracking-wide"
+              class="pb-6 text-gray-900 text-2xl leading-tight tracking-wide"
              v-html="brand.content"
            ></div>
            <a
@@ -584,15 +684,15 @@

      <div
        v-else-if="id == 'token' && brandPanel3"
-        class="flex flex-wrap lg:text-left lg:pt-16 px-4"
+        class="flex flex-wrap lg:text-left lg:pt-16 px-2"
      >
-        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none">
-          <div class="lg:self-center">
-            <h2 class="lg:text-5xl mb-8 uppercase leading-none font-heading">
+        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none lg:self-center lg:px-32">
+          <div class="">
+            <h2 class="lg:text-6xl mb-8 uppercase leading-none font-heading">
              {{ brand.title }}
            </h2>
            <div
-              class="pb-6 text-gray-900 text-xl leading-tight tracking-wide"
+              class="pb-6 text-gray-900 text-2xl leading-tight tracking-wide"
              v-html="brand.content"
            ></div>
            <a
@@ -618,7 +718,7 @@
          </div>
        </div>
        <div class="lg:w-1/2 px-2 self-center">
-          <g-image class="mx-auto lg:w-3/4" :src="image" :alt="brand.title" />
+          <g-image class="mx-auto" :src="image" :alt="brand.title" />
        </div>
      </div>

--- a/src/components/marketing/sections/cta-sections/Header.vue
+++ b/src/components/marketing/sections/cta-sections/Header.vue
@@ -116,7 +116,7 @@
            mb-8
            px-10
            text-center
-            text-xl
+            text-2xl
            text-extrabold
            leading-tight
            lg:max-w-2xl
@@ -268,7 +268,7 @@
          {{ title }}
        </h2> -->

-        <div class="mb-8 text-xl leading-relaxed" v-html="excerpt"></div>
+        <div class="mb-8 text-2xl leading-relaxed" v-html="excerpt"></div>

        <a
          v-if="link.includes('http')"
@@ -276,7 +276,7 @@
          class="
            inline-block
            bg-white
-            text-sm
+            text-lg
            learn-button
            hover:bg-gray-400
            bo
@@ -296,7 +296,7 @@
          class="
            inline-block
            bg-white
-            text-sm
+            text-lg
            learn-button
            hover:bg-gray-400
            bo
@@ -315,7 +315,7 @@
          class="
            inline-block
            bg-white
-            text-sm
+            text-lg
            learn-button
            hover:bg-gray-400
            bo
@@ -334,7 +334,7 @@
          class="
            inline-block
            bg-white
-            text-sm
+            text-lg
            learn-button
            hover:bg-gray-400
            bo
@@ -380,7 +380,7 @@
          {{ title }}
        </h2>
        <div
-          class="mb-8 mx-auto text-xl max-w-xl leading-relaxed"
+          class="mb-8 mx-auto text-2xl max-w-xl"
          v-html="excerpt"
        ></div>

@@ -426,101 +426,63 @@
      </div>
      <g-image class="order-2 lg:order-none" :src="img" :alt="altImg" />
    </div>
-    <div class="flex flex-wrap text-center lg:text-left lg:pt-10 -mx-2" v-else>
-      <div
-        class="px-2 lg:py-40 lg:mt-10 order-1 lg:order-none mx-auto text-center"
-      >
-        <h2 class="text-8xl uppercase mb-6 mt-20 leading-none font-heading">
-          <span class="">{{ slogan }}</span
-          ><br />
-          {{ title }}
+    <div
+      class="flex flex-wrap text-center lg:text-left lg:mt-10 lg:pt-10 -mx-2"
+      v-else
+    >
+      <div class="lg:w-2/5 px-2 lg:pr-20 lg:mt-10 order-1 lg:order-none">
+        <h2 class="text-6xl mb-6 mt-20 uppercase leading-none font-heading">
+          <span class="text-blue-600">{{ slogan }}</span> {{ title }}
        </h2>
-        <div class="mb-8 text-lg leading-relaxed" v-html="excerpt"></div>
-
-        <a
-          v-if="link.includes('http')"
-          target="_blank"
-          class="
-            inline-block
-            bg-white
-            text-sm
-            learn-button
-            hover:bg-gray-400
-            bo
-            px-12
-            py-1
-            mr-5
-            mb-4
-            border-2
-            shadow
-            border-black
-          "
-          :href="link"
-          >{{ button }}</a
-        >
-        <a
-          v-else
-          class="
-            inline-block
-            bg-white
-            text-sm
-            learn-button
-            hover:bg-gray-400
-            bo
-            px-12
-            py-1
-            mr-5
-            mb-4
-            border-2
-            shadow
-            border-black
-          "
-          :href="link"
-          >{{ button }}</a
-        >
-        <a
-          class="
-            inline-block
-            bg-white
-            text-sm
-            learn-button
-            hover:bg-gray-400
-            bo
-            px-12
-            py-1
-            mr-5
-            mb-4
-            border-2
-            shadow
-            border-black
-          "
-          :href="link2"
-          >{{ button2 }}</a
-        >
-        <a
-          class="
-            inline-block
-            bg-white
-            text-sm
-            learn-button
-            hover:bg-gray-400
-            bo
-            px-12
-            py-1
-            mr-5
-            mb-4
-            border-2
-            shadow
-            border-black
-          "
-          :href="link3"
-          >{{ button3 }}</a
-        >
-        <!-- <a class="text-gray-600 hover:underline" href="#">Learn more</a> -->
+        <div class="mb-8 text-gray-700 leading-relaxed" v-html="excerpt"></div>
+        <div v-if="button">
+          <a
+            v-if="link.includes('http')"
+            target="_blank"
+            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
+            "
+            :href="link"
+            >{{ button }}</a
+          >
+          <a
+            v-else
+            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
+            "
+            :href="link"
+            >{{ button }}</a
+          >
+          <!-- <a class="text-gray-600 hover:underline" href="#">Learn more</a> -->
+        </div>
      </div>
-      <!-- <div class="lg:w-3/5 px-2 self-center">
+      <div class="lg:w-3/5 px-2 self-center">
        <g-image :src="img" :alt="altImg" />
-      </div> -->
+      </div>
    </div>
  </section>
 </template>
--- a/src/components/marketing/sections/cta-sections/Map.vue
+++ b/src/components/marketing/sections/cta-sections/Map.vue
@@ -1,13 +1,13 @@
 <template>
  <section
-    class="px-2 h-auto bg-center bg-contain"
+    class="px-2 h-auto bg-center bg-contain bg-no-repeat"
    :style="{ 'background-image': 'url(' + img(section.image) + ')' }"
  >
-    <div class="flex flex-wrap p-12 text-center -mx-auto t">
+    <div class="flex flex-wrap lg:p-12 text-center -mx-auto">
      <div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
        <h2
          class="
-            text-2xl text-black
+            text-3xl text-black
            leading-tight
            font-light font-heading
            uppercase
@@ -17,7 +17,7 @@
        </h2>
        <h2
          class="
-            text-5xl text-black
+            lg:text-6xl text-black
            leading-tight
            font-bold font-heading
            uppercase
@@ -26,7 +26,7 @@
          {{ section.subtitle }}
        </h2>

-        <div class="my-10 grid grid-cols-3 gap-4">
+        <div class="my-10 grid lg:grid-cols-3 lg:gap-8">
          <div class="..."></div>
          <div class="...">
            <!-- capacity -->
@@ -42,8 +42,8 @@
            <div
              class="
                rounded-full
-                h-60
-                w-60
+                h-60 
+                w-60 
                inline-flex
                items-center
                justify-center
--- a/src/components/marketing/sections/cta-sections/ShowcaseProducts.vue
+++ b/src/components/marketing/sections/cta-sections/ShowcaseProducts.vue
@@ -12,11 +12,14 @@
    <div class="w-full text-center" v-else>
      <h2
        v-if="main !== null && main.title"
-        class="text-5xl font-semibold leading-tight font-heading"
+        class="lg:text-6xl uppercase font-semibold leading-tight font-heading"
      >
        {{ main.title }}
      </h2>
-      <p v-if="main !== null && main.subtitle" class="mb-6 text-gray-600">
+      <p
+        v-if="main !== null && main.subtitle"
+        class="mb-6 text-2xl max-w-2xl mx-auto"
+      >
        {{ main.subtitle }}
      </p>
    </div>
@@ -220,17 +223,19 @@
              target="_blank"
              :href="product.link"
              class="
-                bg-blue-900
-                text-sm
+                inline-block
+                bg-white
+                text-lg
                learn-button
-                hover:bg-blue-800
-                text-gray-100
+                hover:bg-gray-400
+                bo
                px-12
-                py-2
+                py-1
                mr-5
-                rounded
+                mb-4
+                border-2
                shadow
-                rounded-full
+                border-black
              "
              >{{ product.button }}</a
            >
@@ -238,17 +243,19 @@
              v-else
              :href="product.link"
              class="
-                bg-blue-900
-                text-sm
+                inline-block
+                bg-white
+                text-lg
                learn-button
-                hover:bg-blue-800
-                text-gray-100
+                hover:bg-gray-400
+                bo
                px-12
-                py-2
+                py-1
                mr-5
-                rounded
+                mb-4
+                border-2
                shadow
-                rounded-full
+                border-black
              "
              >{{ product.button }}</a
            >
--- a/src/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue
+++ b/src/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue
@@ -1,13 +1,13 @@
 <template>
  <div class="py-10 mb-5" id="home">
-    <div class="w-full max-w-7xl mx-auto mt-10 px-16 text-center">
+    <div class="w-full max-w-7xl mx-auto mt-10 px-4 text-center">
      <h2
        v-if="main !== null"
-        class="text-5xl font-semibold leading-tight font-heading"
+        class="lg:text-6xl font-semibold leading-tight font-heading"
      >
        {{ main.title }}
      </h2>
-      <p v-if="main !== null" class="mb-6 text-xl">
+      <p v-if="main !== null" class="mb-6 text-2xl">
        {{ main.subtitle }}
      </p>
    </div>
@@ -21,9 +21,9 @@
        class="m-auto rounded overflow-hidden transition duration-500"
      >
        <div class="part text-center pb-8 my-5" :class="{ active: idx !== 1 }">
-          <g-image :src="img(product.image)" />
+          <g-image class="mx-auto" :src="img(product.image)" />
          <h3 class="font-bold text-2xl">{{ product.title }}</h3>
-          <div v-html="product.content" class="pb-4 px-5"></div>
+          <div v-html="product.content" class="text-xl pb-4 px-5"></div>

          <div v-if="product.button">
            <a
@@ -32,7 +32,7 @@
              :href="product.url"
              class="
                bg-white
-                text-sm
+                text-lg
                learn-button
                hover:bg-gray-400
                px-12
@@ -48,7 +48,7 @@
              :href="product.url"
              class="
                bg-white
-                text-sm
+                text-lg
                learn-button
                hover:bg-gray-400
                px-12
--- a/src/components/marketing/sections/cta-sections/logoShowcase.vue
+++ b/src/components/marketing/sections/cta-sections/logoShowcase.vue
@@ -1,10 +1,11 @@
 <template>
  <section class="py-10 pb-8 px-4 text-center">
-    <div class="max-w-2xl mx-auto mb-16" v-if="main">
-      <h2 class="text-5xl uppercase leading-tight mb-6 font-bold font-heading">
+    <div class="max-w-2xl mx-auto mb-4" v-if="main">
+      <h2 class="lg:text-6xl uppercase leading-tight mb-6 font-bold font-heading">
        {{ main.title }}
      </h2>
      <p class="text-gray-400 leading-relaxed"></p>
+       
    </div>
    <div
      v-if="id == 'support' || id == 'community'"
@@ -29,11 +30,31 @@
        v-for="(logo, idx) in logos"
        :key="idx"
        :href="logo.url"
-        class="px-8 mb-8"
+        class="px-8 mb-8 mx-auto"
      >
        <g-image :src="img(logo.image)" />
      </a>
    </div>
+   <a
+        class="
+          inline-block
+          bg-white
+          text-lg
+          learn-button
+          hover:bg-gray-400
+          px-12
+          py-1
+          mr-5
+          my-4
+          border-2
+          shadow
+          border-black
+        "
+        v-if="main.button"
+        :href="main.link"
+        >{{ main.button }}</a
+      >
+    
  </section>
 </template>

--- a/src/components/marketing/sections/pricing/four_tiers_with_toggle.vue
+++ b/src/components/marketing/sections/pricing/four_tiers_with_toggle.vue
@@ -51,7 +51,14 @@
          "
        >
          <div class="p-6">
-            <h2 class="text-lg leading-6 font-medium font-extrabold text-gray-900">
+            <h2
+              class="
+                text-xl
+                leading-8
+                font-medium font-extrabold
+                text-gray-900
+              "
+            >
              {{ plan.title }}
            </h2>
            <p class="mb-8 text-gray-600 leading-relaxed">
@@ -68,7 +75,20 @@
            <g-link
              type="button"
              :to="plan.link"
-              class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-8 py-2 mr-2 my-0 rounded shadow rounded-full"
+              class="
+                inline-block
+                bg-white
+                text-lg
+                learn-button
+                hover:bg-gray-400
+                px-12
+                py-1
+                mr-5
+                my-4
+                border-2
+                shadow
+                border-black
+              "
            >
              {{ plan.button }}
            </g-link>
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -18,7 +18,7 @@
      />
    </div>

-    <div class="container mx-auto sm:pxi-0 overflow-x-hidden">
+    <div class="container_tft mx-auto sm:pxi-0 overflow-x-hidden">
      <Map v-if="$page.markdownPage.map" :section="$page.markdownPage.map" />
      <!-- <VideoPanel :card="$page.markdownPage.videoPanel" /> -->

@@ -65,8 +65,9 @@
      />
    </div>

-    <div class="container mx-auto sm:pxi-0 overflow-x-hidden">
-      <BrandPanel class="my-20"
+    <div class="container_tft mx-auto sm:pxi-0 overflow-x-hidden">
+      <BrandPanel
+        class="my-20"
        :brand="$page.markdownPage.brandPanel"
        :id="$page.markdownPage.id"
        v-if="$page.markdownPage.brandPanel"
@@ -320,6 +321,8 @@
       logosMain {
          id
          title
+          button
+          link
        }
        logos{
          id
--- a/src/templates/Info.vue
+++ b/src/templates/Info.vue
@@ -0,0 +1,268 @@
+<template>
+  <Layout :hideHeader="true" :disableScroll="true">
+    <div
+      class="container sm:pxi-0 mx-auto overflow-x-hidden pt-6 px-4 text-center"
+    >
+      <!-- <div class="pt-8">
+        <Alert v-if="showAlert" @clicked="linkCopied" />
+        <section class="post-header container mx-auto px-0 mb-4 border-b">
+          <h1 class="text-5xl font-medium leading-none mt-0">
+            {{ $page.info.title }}
+          </h1>
+          <div
+            class="text-2xl pt-4 pb-10 text-gray-700"
+            v-html="$page.info.excerpt"
+          ></div>
+        </section>
+        <section class="post-author-list mb-10 mx-0">
+          <div class="flex items-center">
+            <div class="flex justify-between items-center">
+              <ul class="list-none flex author-list m-0">
+                <li
+                  v-for="author in $page.info.authors"
+                  :key="author.id"
+                  class="author-list-item"
+                >
+                  <g-link :to="author.path" v-tooltip="author.name">
+                    <g-image
+                      :src="author.image"
+                      :alt="author.name"
+                      class="
+                        h-8
+                        w-8
+                        sm:h-10
+                        sm:w-10
+                        rounded-full
+                        bg-gray-200
+                        border-2 border-white
+                      "
+                    />
+                  </g-link>
+                </li>
+              </ul>
+            </div>
+
+            <div class="pl-3 flex flex-col text-xs leading-none uppercase">
+              <p>
+                <span
+                  v-for="(author, index) in $page.info.authors"
+                  :key="author.id"
+                >
+                  <g-link
+                    :to="author.path"
+                    v-tooltip="author.name"
+                    class="hover:underline"
+                    >{{ author.name }}</g-link
+                  >
+                  <span v-if="index < $page.info.authors.length - 1">,</span>
+                </span>
+              </p>
+              <p class="text-gray-700">
+                <g-link :to="$page.info.path">
+                  <time :datetime="$page.info.datetime">{{
+                    $page.info.humanTime
+                  }}</time>
+                </g-link>
+                &nbsp;&middot;&nbsp; {{ $page.info.timeToRead }} min read
+                &nbsp;&middot;&nbsp;
+                <g-link :to="$page.info.path">
+                  <time :datetime="$page.info.datetime">{{
+                    $page.info.startDate
+                  }}</time>
+                </g-link>
+              </p>
+            </div>
+
+            <share-it
+              icons
+              :targets="['twitter', 'linkedin', 'facebook']"
+              class="ml-auto"
+            />
+
+            <font-awesome
+              :icon="['fas', 'link']"
+              class="cursor-pointer"
+              @click="copyLink"
+            />
+          </div>
+        </section>
+      </div> -->
+      <!-- <section class="post-image mx-auto w-full">
+        <g-image :src="$page.info.image"></g-image>
+      </section> -->
+
+      <div class="py-12">
+        <section
+          class="
+            post-content
+            container
+            mx-auto
+            relative
+            font-serif
+            text-gray-900 text-center
+          "
+        >
+          <g-image class="mx-auto w-full" :src="$page.info.image"></g-image>
+
+          <div
+            class="post-content-text text-xl text-center mx-auto"
+            v-html="$page.info.content"
+          ></div>
+        </section>
+
+        <a
+          class="
+            inline-block
+            bg-white
+            text-lg
+            learn-button
+            hover:bg-gray-400
+            px-12
+            py-1
+            mr-5
+            my-8
+            border-2
+            shadow
+            border-black
+          "
+          :href="$page.info.link"
+          >{{ $page.info.button }}</a
+        >
+
+        <!-- <section class="post-tags container mx-auto relative py-10">
+          <g-link
+            v-for="tag in $page.info.tags"
+            :key="tag.id"
+            :to="tag.path"
+            class="
+              text-xs
+              bg-transparent
+              hover:text-blue-700
+              py-2
+              px-4
+              mr-2
+              border
+              hover:border-blue-500
+              border-gray-600
+              text-gray-700
+              rounded-full
+            "
+            >{{ tag.title }}</g-link
+          >
+        </section> -->
+      </div>
+    </div>
+  </Layout>
+</template>
+
+<page-query>
+  query($id: ID!) {
+    info(id: $id) {
+      id
+     content
+     image
+     button
+     link
+    }
+    metadata {
+      siteUrl
+    }
+  }
+</page-query>
+
+<script>
+import PostListItem from "~/components/custom/Cards/PostListItem.vue";
+import Alert from "~/components/custom/Alert.vue";
+export default {
+  components: {
+    PostListItem,
+    Alert,
+  },
+  data() {
+    return {
+      showAlert: false,
+    };
+  },
+  methods: {
+    copyLink() {
+      const el = document.createElement("input");
+      el.value = window.location.href;
+      document.body.appendChild(el);
+      el.select();
+      document.execCommand("copy");
+      document.body.removeChild(el);
+      this.showAlert = true;
+    },
+    linkCopied(val) {
+      this.showAlert = val;
+    },
+    img(image) {
+      if (!image) return "";
+      if (image.src) return image.src;
+      return image;
+    },
+  },
+  computed: {
+    getCoverImage() {
+      let coverImage = "";
+      const cover = this.$page.info.image;
+      if (cover != null) {
+        coverImage = `${this.getBaseUrl}${this.$page.info.image.src}`;
+      }
+      return coverImage;
+    },
+    getBaseUrl() {
+      return this.$page.metadata.siteUrl;
+    },
+  },
+  metaInfo() {
+    return {
+      title: "",
+      titleTemplate: `ThreeFold | ${this.$page.info.title}`,
+      meta: [
+        {
+          key: "description",
+          name: "description",
+          content: this.$page.info.excerpt,
+        },
+        {
+          key: "og:title",
+          property: "og:title",
+          content: this.$page.info.title,
+        },
+        {
+          key: "og:description",
+          property: "og:description",
+          content: this.$page.info.excerpt,
+        },
+        {
+          key: "og:image",
+          property: "og:image",
+          content: this.getCoverImage,
+        },
+        {
+          name: "twitter:description",
+          property: "twitter:description",
+          content: this.$page.info.excerpt,
+        },
+        {
+          name: "twitter:image",
+          property: "twitter:image",
+          content: this.getCoverImage,
+        },
+        {
+          name: "twitter:title",
+          property: "twitter:title",
+          content: this.$page.info.title,
+        },
+        {
+          name: "twitter:card",
+          property: "twitter:card",
+          content: "summary_large_image",
+        },
+      ],
+    };
+  },
+};
+</script>
+
--- a/src/templates/MarkdownPage.vue
+++ b/src/templates/MarkdownPage.vue
@@ -4,7 +4,8 @@
      <Header
        v-if="
          $page.markdownPage.header_title &&
-          $page.markdownPage.header_title != ''
+          $page.markdownPage.header_title != '' &&
+          $page.markdownPage.id !== 'support'
        "
        :id="$page.markdownPage.id"
        :title="$page.markdownPage.header_title"
@@ -32,6 +33,7 @@
        "
        :brandPanel2="true"
      />
+
      <BrandPanel
        :id="$page.markdownPage.id"
        :brand="$page.markdownPage.brandPanel3"
@@ -40,8 +42,37 @@
        "
        :brandPanel3="true"
      />
+
+    
+
+      <CustomCTA
+        :header="true"
+        v-if="$page.markdownPage.pageHeader"
+        :image="$page.markdownPage.pageHeader.image"
+        :title="$page.markdownPage.pageHeader.title"
+      />
+
+    
    </div>
-    <div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
+    <div class="container_tft sm:pxi-0 mx-auto overflow-x-hidden py-5">
+      <Header
+        v-if="
+          $page.markdownPage.id !== 'contact' &&
+          $page.markdownPage.header_title &&
+          $page.markdownPage.header_title != '' &&
+          $page.markdownPage.id !== 'about-us' &&
+          $page.markdownPage.id !== 'grid' &&
+          $page.markdownPage.id !== 'token'
+        "
+        :id="$page.markdownPage.id"
+        :title="$page.markdownPage.header_title"
+        :slogan="$page.markdownPage.header_slogan"
+        :image="$page.markdownPage.header_image"
+        :altImg="$page.markdownPage.header_altImg"
+        :excerpt="$page.markdownPage.header_excerpt"
+        :button="$page.markdownPage.button"
+        :link="$page.markdownPage.link"
+      />
      <CallToAction
        :id="$page.markdownPage.id"
        v-if="
@@ -98,6 +129,15 @@
        "
        :cta="$page.markdownPage.cta"
      />
+
+          <BrandPanel
+        :id="$page.markdownPage.id"
+        :brand="$page.markdownPage.brandPanel4"
+        v-if="
+          $page.markdownPage.brandPanel4 && $page.markdownPage.id !== 'token'
+        "
+        :brandPanel4="true"
+      />
      <SplitWithImage
        v-if="$page.markdownPage.tft"
        :id="$page.markdownPage.id"
@@ -152,28 +192,15 @@
        :lastCta="true"
      />
    </div>
-    <!-- <g-image
+    <g-image
      v-if="
        $page.markdownPage.id !== 'careers' && $page.markdownPage.solution_image
      "
      class="mx-auto mt-10"
      :src="$page.markdownPage.solution_image.src"
-    /> -->
+    />

-    <div class="container sm:pxi-0 mx-auto py-5 overflow-visible">
-      <logoShowcase
-        v-if="$page.markdownPage.logos.length > 0"
-        :id="$page.markdownPage.id"
-        :logos="$page.markdownPage.logos"
-        :main="$page.markdownPage.logosMain"
-      />
-      <!-- <AppListItem
-        v-if="
-          $page.markdownPage.appData && $page.markdownPage.appData.length > 0
-        "
-        :products="$page.markdownPage.appData"
-        :main="$page.markdownPage.appsMain"
-      /> -->
+    <div class="container_tft sm:pxi-0 mx-auto py-5 overflow-visible">
      <ShowcaseProducts
        v-if="
          $page.markdownPage.productData &&
@@ -183,8 +210,15 @@
        :main="$page.markdownPage.productsMain"
        :products="$page.markdownPage.productData"
      />
+      <AppListItem
+        v-if="
+          $page.markdownPage.appData && $page.markdownPage.appData.length > 0
+        "
+        :products="$page.markdownPage.appData"
+        :main="$page.markdownPage.appsMain"
+      />

-      <!-- <Partenerships
+      <Partenerships
        v-if="
          $page.markdownPage.partnerships &&
          $page.markdownPage.partnerships.length > 0
@@ -192,13 +226,13 @@
        :id="$page.markdownPage.id"
        :main="$page.markdownPage.partenershipsMain"
        :partnerships="$page.markdownPage.partnerships"
-      /> -->
+      />

-      <!-- <CenteredAccordion
+      <CenteredAccordion
        v-if="$page.markdownPage.faqContent && $page.markdownPage.id == 'faq'"
        :main="$page.markdownPage.faqMain"
        :faqs="$page.markdownPage.faqContent"
-      /> -->
+      />

      <!-- <ShowcaseProducts
        class="my-20"
@@ -210,59 +244,68 @@
        :main="$page.markdownPage.productsMain"
        :products="$page.markdownPage.productData"
      /> -->
-
-      <!-- <SolutionsHeader
+      <SolutionsHeader
        class="mt-0"
        v-if="$page.markdownPage.header"
        :header="$page.markdownPage.header"
-      /> -->
-
-      <!-- <g-image
+      />
+      <g-image
        v-if="$page.markdownPage.solution_image2"
        :src="$page.markdownPage.solution_image2.src"
-      /> -->
-
-      <!-- <SolutionsHeader
+      />
+      <SolutionsHeader
        v-if="$page.markdownPage.header2"
        :header="$page.markdownPage.header2"
-      /> -->
+      />

-      <!-- <SolutionsHeader
+      <SolutionsHeader
        v-if="$page.markdownPage.header3"
        :header="$page.markdownPage.header3"
-      /> -->
+      />

-      <!-- <logoShowcase
+      <logoShowcase
        v-if="$page.markdownPage.logos.length > 0"
        :id="$page.markdownPage.id"
        :logos="$page.markdownPage.logos"
        :main="$page.markdownPage.logosMain"
-      /> -->
+      />

-      <!-- <FourTiersWithToggle
+      <FourTiersWithToggle
        v-if="$page.markdownPage.jobs.length > 0"
        :pricingPlans="$page.markdownPage.jobs"
        :main="$page.markdownPage.jobsMain"
-      /> -->
+      />

-      <!-- <SolutionsHeader
+      <SolutionsHeader
        class="mt-0"
        v-if="$page.markdownPage.header4"
        :header="$page.markdownPage.header4"
-      /> -->
+      />

-      <!-- <GetInTouch
+      <GetInTouch
        v-if="
          $page.markdownPage.contactData &&
          $page.markdownPage.contactData.length > 0
        "
        :contacts="$page.markdownPage.contactData"
-      /> -->
+      />

-      <!-- <SignUp
+      <SignUp
        v-if="$page.markdownPage.signup"
        :signup="$page.markdownPage.signup"
-      /> -->
+      />
+    </div>
+    <div
+      class="container-fluid mx-auto"
+      v-for="edge in $page.allCustomCta.edges"
+      :key="edge.node.id"
+    >
+      <CustomCTA
+        v-if="edge.node.id == $page.markdownPage.id"
+        :title="edge.node.title"
+        :link="edge.node.link"
+        :image="edge.node.image"
+      />
    </div>
  </Layout>
 </template>
@@ -347,6 +390,8 @@
        logosMain {
          id
          title
+          button
+          link
        }
        logos{
          id
@@ -406,9 +451,21 @@
         title
         btnTxt
         sourceUrl
+         btnTxt2
+         sourceUrl2
         content
         image
-       }         
+       } 
+        brandPanel4{
+         id
+         title
+         btnTxt
+         sourceUrl
+         btnTxt2
+         sourceUrl2
+         content
+         image
+       }                 
       partenershipsMain{
         id
         title