init tft page

content/page/tft/brandPanel/index.md

@@ -0,0 +1,13 @@
+---
+id: tft_brandPanel
+title: decentralized DATA NEEDED A CURRENCY
+subtitle: IT NOW HAS ONE
+sourceUrl: ''
+btnTxt: 
+image: tft_decentralized.jpg # src/assets/brandPanel/..
+---
+The ThreeFold Token (TFT) is a utility token that allows you to hold current and future Internet capacity on the fully DECENTRALIZED THREEFOLD GRID, the fastest growing P2P network on the planet.
+
+<br />
+
+With rising demand for Internet infrastructure to hold the most valuable asset on earth, data --  TFT is your gateway to enter the largest and fastest growing economy in the world.

content/page/tft/card/index.md

@@ -0,0 +1,8 @@
+---
+id: tft_card
+title: EXPANDING FAST
+img: ./tft_expanding.jpg
+button: Know the TF Grid
+link: /
+---
+Visionary organisations and developers are already building on the ThreeFold Grid as it is the most empowering infrastructure ever built. Anyone can finally store their data and build applications autonomously, without any intermediaries.

content/page/tft/cta/index.md

@@ -0,0 +1,12 @@
+---
+id: tft_cta
+title: INTERNET REIMAGINED... AND REBUILT
+button: Know More
+link: /
+---
+
+The ThreeFold Grid is an open system which allows anyone to provide and utilize Internet resources without any intermediaries. This revolutionary infrastructure can host any digital workload including blockchain, IoT, decentralized organizations and applications.
+
+<br />
+
+**This model is quickly replacing the centralized infrastructure of the internet**

content/page/tft/tft.md

@@ -0,0 +1,16 @@
+---
+id: tft
+metaTitle: THE WORLD IS USING A NEW INTERNET
+metaDesc: It runs on TFT
+metaImg: ./tft_header.jpg
+header_slogan: 
+header_title: THE WORLD IS USING A NEW INTERNET
+header_image: ./tft_header.jpg
+header_altImg: TFT
+header_excerpt: It runs on TFT
+button: Get TFT
+link: /
+cta: tft_cta
+brandPanel: tft_brandPanel
+card: tft_card
+---

gridsome.config.js

@@ -363,6 +363,14 @@ module.exports = {
             }
         },
 
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'Card',
+                path: './content/page/**/card/*.md',
+            }
+        },
+
         {
             use: '@gridsome/source-filesystem',
             options: {
@@ -420,7 +428,8 @@ module.exports = {
                     faqContent: 'FAQContent',
                     jobs: 'Jobs',
                     customCTA: 'CustomCTA',
-                    pageHeader: 'PageHeader'
+                    pageHeader: 'PageHeader',
+                    card: 'Card'
                 }
             }
         },

src/components/custom/sections/CallToAction.vue

@@ -4,12 +4,24 @@
     <div class="w-full max-w-2xl mx-auto py-12" v-if="id == 'why'">
       <h2
         v-if="cta.title"
-        class="text-4xl text-center uppercase mb-2 leading-none font-light font-heading"
+        class="
+          text-4xl text-center
+          uppercase
+          mb-2
+          leading-none
+          font-light font-heading
+        "
       >
         {{ cta.title }}
       </h2>
       <span
-        class="text-center uppercase leading-none text-4xl text-gray-800 font-black font-heading"
+        class="
+          text-center
+          uppercase
+          leading-none
+          text-4xl text-gray-800
+          font-black font-heading
+        "
       >
         {{ cta.slogan }}
       </span>
@@ -17,25 +29,81 @@
       <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
         <a
           @click="toggleModal"
-          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-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
+          "
           >{{ cta.video_button }}</a
         >
       </div>
       <g-link
-        class="inline-block bg-blue-900 text-md 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-blue-900
+          text-md
+          learn-button
+          hover:bg-blue-800
+          text-gray-100
+          px-12
+          py-2
+          mr-5
+          mb-4
+          rounded
+          shadow
+          rounded-full
+        "
         target="_blank"
         v-if="cta.button"
         :to="cta.link"
         >{{ cta.button }}</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-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
+        "
         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-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
+        "
         v-if="cta.button3"
         :to="cta.link3"
         >{{ cta.button3 }}</g-link
@@ -55,32 +123,213 @@
       <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
         <a
           @click="toggleModal"
-          class="inline-block cursor-pointer 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
+            cursor-pointer
+            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
+          "
           >{{ cta.video_button }}</a
         >
       </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-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
+        "
         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-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
+        "
         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-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
+        "
         v-if="cta.button3"
         :to="cta.link3"
         >{{ cta.button3 }}</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-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
+        "
+        v-if="cta.button4"
+        :to="cta.link4"
+        >{{ cta.button4 }}</g-link
+      >
+    </div>
+
+    <!-- tft -->
+    <div class="w-full max-w-7xl mx-auto mt-10 px-16" v-else-if="id == 'tft'">
+      <h2
+        v-if="cta.title"
+        class="text-4xl mb-2 uppercase leading-tight font-semibold font-heading"
+      >
+        {{ cta.title }}
+      </h2>
+      <div v-html="cta.content" class="mt-6 mb-8 text-2xl text-gray-800"></div>
+      <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
+        <a
+          @click="toggleModal"
+          class="
+            inline-block
+            cursor-pointer
+            bg-blue-900
+            text-sm
+            learn-button
+            hover:bg-blue-800
+            text-gray-100
+            px-12
+            py-2
+            mr-5
+            mb-4
+            shadow
+            rounded-full
+          "
+          >{{ cta.video_button }}</a
+        >
+      </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
+          shadow
+          rounded-full
+        "
+        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
+          shadow
+          rounded-full
+        "
+        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
+          shadow
+          rounded-full
+        "
+        v-if="cta.button3"
+        :to="cta.link3"
+        >{{ cta.button3 }}</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
+          shadow
+          rounded-full
+        "
         v-if="cta.button4"
         :to="cta.link4"
         >{{ cta.button4 }}</g-link
@@ -98,25 +347,82 @@
       <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
         <a
           @click="toggleModal"
-          class="inline-block cursor-pointer 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
+            cursor-pointer
+            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
+          "
           >{{ cta.video_button }}</a
         >
       </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-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
+        "
         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-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
+        "
         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-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
+        "
         v-if="cta.button3"
         :to="cta.link3"
         >{{ cta.button3 }}</g-link

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

@@ -4,21 +4,55 @@
       <!-- token -->
       <div
         v-if="id == 'token'"
-        class="brandpanel rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
+        class="
+          brandpanel
+          rounded-lg
+          shadow-xl
+          overflow-hidden
+          lg:grid lg:grid-cols-2
+          lg:gap-4
+        "
       >
         <div class="relative pb-3/5 -mt-6 md:pb-1/2">
           <g-image
-            class="absolute brandpanel inset-0 w-full h-full translate-x-0 translate-y-center rounded-md object-fill object-left-top sm:translate-x-0 lg:translate-y-20"
+            class="
+              absolute
+              brandpanel
+              inset-0
+              w-full
+              h-full
+              translate-x-0 translate-y-center
+              rounded-md
+              object-fill object-left-top
+              sm:translate-x-0
+              lg:translate-y-20
+            "
             :src="image"
             :alt="brand.title"
           />
         </div>
         <div
-          class="pt-10 pb-10 px-6 sm:pt-16 sm:px-10 lg:py-16 lg:pr-0 xl:py-20 xl:px-15"
+          class="
+            pt-10
+            pb-10
+            px-6
+            sm:pt-16
+            sm:px-10
+            lg:py-16
+            lg:pr-0
+            xl:py-20
+            xl:px-15
+          "
         >
           <div class="lg:self-center">
             <h2
-              class="text-4xl mb-2 uppercase leading-tight font-semibold font-heading"
+              class="
+                text-4xl
+                mb-2
+                uppercase
+                leading-tight
+                font-semibold font-heading
+              "
             >
               <span class="block">{{ brand.title }}</span>
               <span class="block" v-if="brand.subtitle">{{
@@ -30,7 +64,18 @@
               v-if="brand.btnTxt"
               target="_blank"
               :href="brand.sourceUrl"
-              class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-white px-12 py-2 mr-3 shadow rounded-full"
+              class="
+                bg-blue-900
+                text-sm
+                learn-button
+                hover:bg-blue-800
+                text-white
+                px-12
+                py-2
+                mr-3
+                shadow
+                rounded-full
+              "
               >{{ brand.btnTxt }}</a
             >
           </div>
@@ -40,14 +85,38 @@
       <!-- why -->
       <div
         v-else-if="id == 'why'"
-        class="whybrand brandpanel rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
+        class="
+          whybrand
+          brandpanel
+          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-15"
+          class="
+            pt-10
+            pb-12
+            px-6
+            sm:pt-16
+            sm:px-16
+            lg:py-16
+            lg:pr-0
+            xl:py-20
+            xl:px-15
+          "
         >
           <div class="lg:self-center text-center">
             <h2
-              class="text-4xl mb-2 uppercase leading-tight font-semibold font-heading"
+              class="
+                text-4xl
+                mb-2
+                uppercase
+                leading-tight
+                font-semibold font-heading
+              "
             >
               <span class="block">{{ brand.title }}</span>
               <span class="block" v-if="brand.subtitle">{{
@@ -57,27 +126,66 @@
             <div class="py-6 mt-4 mx-4 text-black" v-html="brand.content"></div>
             <a
               :href="brand.sourceUrl"
-              class="bg-gray-700 text-sm learn-button hover:bg-57EEF8-400 text-white px-12 py-2 mr-3 shadow rounded-full"
+              class="
+                bg-gray-700
+                text-sm
+                learn-button
+                hover:bg-57EEF8-400
+                text-white
+                px-12
+                py-2
+                mr-3
+                shadow
+                rounded-full
+              "
               >{{ brand.btnTxt }}</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"
+            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>
 
+      <!-- home -->
       <div v-else-if="id == 'home'" class="brandpanel lg:grid lg:grid-cols-2">
         <div
-          class="py-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-15"
+          class="
+            py-12
+            px-6
+            sm:pt-16
+            sm:px-16
+            lg:py-16
+            lg:pr-0
+            xl:py-20
+            xl:px-15
+          "
         >
           <div class="lg:self-center">
             <h2
-              class="text-4xl leading-tight mb-6 font-bold font-heading uppercase"
+              class="
+                text-4xl
+                leading-tight
+                mb-6
+                font-bold font-heading
+                uppercase
+              "
             >
               <span class="block">{{ brand.title }}</span>
               <span class="block" v-if="brand.subtitle">{{
@@ -92,13 +200,35 @@
               v-if="brand.sourceUrl.includes('http')"
               :href="brand.sourceUrl"
               target="_blank"
-              class="bg-teal-300 text-sm learn-button hover:bg-57EEF8-400 text-gray-900 px-12 py-2 mr-3 shadow rounded-full"
+              class="
+                bg-teal-300
+                text-sm
+                learn-button
+                hover:bg-57EEF8-400
+                text-gray-900
+                px-12
+                py-2
+                mr-3
+                shadow
+                rounded-full
+              "
               >{{ brand.btnTxt }}</a
             >
             <a
               v-else
               :href="brand.sourceUrl"
-              class="bg-teal-300 text-sm learn-button hover:bg-57EEF8-400 text-gray-900 px-12 py-2 mr-3 shadow rounded-full"
+              class="
+                bg-teal-300
+                text-sm
+                learn-button
+                hover:bg-57EEF8-400
+                text-gray-900
+                px-12
+                py-2
+                mr-3
+                shadow
+                rounded-full
+              "
               >{{ brand.btnTxt }}</a
             >
           </div>
@@ -112,12 +242,111 @@
         </div>
       </div>
 
+      <!-- tft -->
+      <div
+        v-else-if="id == 'tft'"
+        class="
+          brandpanel
+          rounded-lg
+          overflow-hidden
+          lg:grid lg:grid-cols-2
+          lg:gap-4
+        "
+      >
+        <div class="relative pb-3/5 -mt-6 md:pb-1/2">
+          <g-image
+            class="
+              absolute
+              brandpanel
+              inset-0
+              w-full
+              h-full
+              sm:h-auto
+              translate-x-0 translate-y-center
+              rounded-md
+              object-fill object-left-top
+              sm:translate-x-0
+              lg:translate-y-20
+            "
+            :src="image"
+            :alt="brand.title"
+          />
+        </div>
+        <div
+          class="
+            pt-10
+            pb-10
+            px-6
+            sm:pt-16
+            sm:px-10
+            lg:py-16
+            lg:pr-0
+            xl:py-20
+            xl:px-15
+          "
+        >
+          <div class="lg:self-center">
+            <h2
+              class="
+                text-4xl
+                mb-2
+                uppercase
+                leading-tight
+                font-semibold 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-gray-600" v-html="brand.content"></div>
+            <a
+              v-if="brand.btnTxt"
+              target="_blank"
+              :href="brand.sourceUrl"
+              class="
+                bg-blue-900
+                text-sm
+                learn-button
+                hover:bg-blue-800
+                text-white
+                px-12
+                py-2
+                mr-3
+                shadow
+                rounded-full
+              "
+              >{{ brand.btnTxt }}</a
+            >
+          </div>
+        </div>
+      </div>
+
       <div
         v-else
-        class="brandpanel bg-gray-900 rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
+        class="
+          brandpanel
+          bg-gray-900
+          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-15"
+          class="
+            pt-10
+            pb-12
+            px-6
+            sm:pt-16
+            sm:px-16
+            lg:py-16
+            lg:pr-0
+            xl:py-20
+            xl:px-15
+          "
         >
           <div class="lg:self-center">
             <h2
@@ -138,7 +367,19 @@
         </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"
+            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"
           />

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

@@ -161,6 +161,63 @@
       <div class="lg:w-1/2 px-2"><g-image :src="img" :alt="altImg" /></div>
     </div>
 
+    <div
+      class="flex flex-wrap text-center lg:text-left lg:mt-10 lg:pt-10 -mx-2"
+      v-else-if="id == 'tft'"
+    >
+      <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 leading-none font-heading">
+          {{ title }}
+        </h2>
+        <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
+              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
+              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">
+        <g-image :src="img" :alt="altImg" />
+      </div>
+    </div>
+
     <div
       class="flex flex-wrap text-center lg:text-left lg:mt-10 lg:pt-10 -mx-2"
       v-else

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

@@ -1,11 +1,63 @@
 <template>
-  <div>
   <div class="lg:py-12 lg:flex lg:justify-center flex flex-col">
     <div
+      v-if="id == 'tft'"
+      class="bg-white lg:mx-8 lg:flex lg:max-w-5xl lg:rounded-lg"
+    >
+      <div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2">
+        <h2 class="text-3xl text-gray-700 font-bold">{{ card.title }}</h2>
+        <div class="mt-4 text-gray-700" v-html="card.content"></div>
+        <div class="mt-8" v-if="card.button">
+          <a
+            v-if="card.link.includes('http')"
+            target="_blank"
+            :href="card.link"
+            class="
+              bg-blue-900
+              learn-button
+              hover:bg-blue-700
+              text-gray-100
+              px-5
+              py-3
+              font-semibold
+              rounded
+            "
+            >{{ card.button }}</a
+          >
+          <a
+            v-else
+            :href="card.link"
+            class="
+              bg-blue-900
+              learn-button
+              hover:bg-blue-700
+              text-gray-100
+              px-5
+              py-3
+              font-semibold
+              rounded
+            "
+            >{{ card.button }}</a
+          >
+        </div>
+      </div>
+      <div class="lg:w-1/2">
+        <div
+          class="h-64 bg-cover lg:rounded-lg lg:h-full"
+          :style="{ 'background-image': 'url(' + img(card.img) + ')' }"
+        ></div>
+      </div>
+    </div>
+
+    <div
+      v-else
       class="bg-white lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg"
     >
       <div class="lg:w-1/2">
-          <div class="h-64 bg-cover lg:rounded-lg lg:h-full" :style="img"></div>
+        <div
+          class="h-64 bg-cover lg:rounded-lg lg:h-full"
+          :style="{ 'background-image': 'url(' + img(card.img) + ')' }"
+        ></div>
       </div>
       <div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2">
         <h2 class="text-3xl text-gray-700 font-bold">{{ card.title }}</h2>
@@ -15,32 +67,48 @@
             v-if="card.link.includes('http')"
             target="_blank"
             :href="card.link"
-              class="bg-gray-900 learn-button hover:bg-gray-700 text-gray-100 px-5 py-3 font-semibold rounded"
+            class="
+              bg-gray-900
+              learn-button
+              hover:bg-gray-700
+              text-gray-100
+              px-5
+              py-3
+              font-semibold
+              rounded
+            "
             >{{ card.button }}</a
           >
           <a
             v-else
             :href="card.link"
-              class="bg-gray-900 learn-button hover:bg-gray-700 text-gray-100 px-5 py-3 font-semibold rounded"
+            class="
+              bg-gray-900
+              learn-button
+              hover:bg-gray-700
+              text-gray-100
+              px-5
+              py-3
+              font-semibold
+              rounded
+            "
             >{{ card.button }}</a
           >
         </div>
       </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script>
 export default {
-  computed: {
-    img: function () {
-      if (this.card.image.src)
-        return "background-image:url(" + this.card.image.src + ")";
-      return this.card.image;
+  props: ["id", "card"],
+  methods: {
+    img(image) {
+      if (!image) return "";
+      if (image.src) return image.src;
+      return image;
     },
   },
-
-  props: ["card"],
 };
 </script>

src/templates/MarkdownPage.vue

@@ -75,7 +75,10 @@
     <div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
       <CallToAction
         :id="$page.markdownPage.id"
-        v-if="$page.markdownPage.cta && $page.markdownPage.id == 'why'"
+        v-if="
+          ($page.markdownPage.cta && $page.markdownPage.id == 'why') ||
+          $page.markdownPage.id == 'tft'
+        "
         :cta="$page.markdownPage.cta"
       />
 
@@ -100,6 +103,12 @@
         :brand="$page.markdownPage.brandPanel"
         v-if="$page.markdownPage.brandPanel"
       />
+
+      <NewCard
+        v-if="$page.markdownPage.card"
+        :id="$page.markdownPage.id"
+        :card="$page.markdownPage.card"
+      />
       <Partenerships
         v-if="
           $page.markdownPage.partnerships &&
@@ -425,6 +434,15 @@
       title
       image
      }
+
+     card{
+       id
+       img
+       title
+       content
+       button
+       link
+     }
     }
     allCustomCta {
       edges {
@@ -487,9 +505,6 @@ export default {
     CenteredAccordion,
     CustomCTA,
   },
-  mounted() {
-    console.log(this.$page.markdownPage.careersHeader);
-  },
   computed: {
     getImg() {
       let img = "";