update GET TFT section

content/page/tft/cta4/index.md

@@ -0,0 +1,15 @@
+---
+id: tft_cta4
+title1: GET
+title2: TFT
+button: Get TFT
+link: /
+---
+
+Visit Binance Smart
+<br>
+Chain to get your TFT
+
+
+
+

content/page/tft/tft.md

@@ -12,6 +12,7 @@ solution_image: ./tft_limited.jpg
 button: Get TFT
 link: /
 cta: tft_cta
+cta4: tft_cta4
 brandPanel: tft_brandPanel
 card: tft_card
 carousel: [slide1, slide2, slide3, slide4, slide5, slide6 , slide7 , slide8 , slide9 , slide10]

package.json

@@ -19,7 +19,7 @@
     "axios": "^0.21.1",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
-    "gridsome": "^0.7.3",
+    "gridsome": "^0.7.23",
     "gridsome-plugin-matomo": "^0.1.0",
     "gridsome-plugin-remark-prismjs-all": "^0.3.5",
     "gridsome-plugin-tailwindcss": "^3.0.1",

src/assets/scss/main.scss

@@ -42,6 +42,11 @@ h1, h2 {
   font-size: 4rem;
 }
 
+tft_section2{
+  font-family: 'Oswald', sans-serif !important;
+  font-size: 5rem;
+}
+
 .tft_section h3{
   font-family: 'Oswald', sans-serif !important;
   font-size: 3rem;

src/components/custom/sections/CallToActionbg1.vue

@@ -1,33 +1,69 @@
 <template>
-  <section class="pt-10 pb-10 px-4 bg-cover bg-hero text-center">
+  <section class="py-4 px-4 text-center tft_section2">
  
-    <div class="w-full  py-10 max-w-7xl mx-auto">
-      <h2 class="text-4xl text-white leading-tight font-semibold font-heading uppercase">
+    <div class="w-full max-w-7xl mx-auto">
+      <h1 class="text-9xl mb-2 mt-20 leading-none font-heading mx-auto">
         {{ cta.title1 }} 
         <br>
         {{ cta.title2 }}
-      </h2>
+      </h1>
       <div
         v-html="cta.content"
-        class="mt-6 mb-20 text-white leading-relaxed "
+        class="mb-8 text-gray-800 text-2xl tft_subtitle"
       ></div>
 
 
        <a
-          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" 
+          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-wide" 
           target="_blank"
           v-if="cta.button"
           :href="cta.link"
           >{{ cta.button }}</a
         >
         <g-link
-          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"
+          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-wide"
           v-if="cta.button2"
           :to="cta.link2"
           >{{ cta.button2 }}</g-link
         >
          <g-link
-          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"
+          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-wide"
           v-if="cta.button3"
           :to="cta.link3"
           >{{ cta.button3 }}</g-link
@@ -43,8 +79,3 @@ export default {
   props: ["cta"],
 };
 </script>
-<style scoped>
-.bg-hero {
-        background-image: url("~@/assets/images/bg1.png");
-    }
-</style>

src/templates/MarkdownPage.vue

@@ -147,6 +147,12 @@
         :src="$page.markdownPage.solution_image"
       />
 
+       <CallToActionbg1
+        v-if="$page.markdownPage.cta4"
+        :cta="$page.markdownPage.cta4"
+        :id="$page.markdownPage.id"
+      /> 
+
       </div>
 
     <div class="container sm:pxi-0 mx-auto py-5 overflow-visible">
@@ -433,6 +439,15 @@
           button
           link
         }
+         cta4{
+          title1
+          title2
+          slogan
+          content
+          button
+          link
+        }
+
         brandPanel{
          id
          title
@@ -581,6 +596,7 @@ import HowItWorks from "~/components/custom/sections/HowItWorks.vue";
 import Features from "~/components/custom/sections/Features.vue";
 import logoShowcase from "~/components/marketing/sections/cta-sections/logoShowcase.vue";
 import CallToAction from "~/components/custom/sections/CallToAction.vue";
+import CallToActionbg1 from "~/components/custom/sections/CallToActionbg1.vue";
 import SignUp from "~/components/custom/sections/SignUp.vue";
 import Comparison from "~/components/custom/sections/Comparison.vue";
 import TFTFuel from "~/components/marketing/sections/team-sections/with_large_images.vue";
@@ -606,6 +622,7 @@ export default {
     Features,
     logoShowcase,
     CallToAction,
+    CallToActionbg1,
     SignUp,
     Comparison,
     TFTFuel,