last cta

content/page/about-us/about-us.md

@@ -16,5 +16,6 @@ brandPanel2: about_brandPanel2
 brandPanel3: about_brandPanel3
 cta: about_cta
 cta2: about_cta2
+cta3: about_cta3
 roadmap: about_roadmap
 ---

content/page/about-us/cta3/index.md

@@ -0,0 +1,10 @@
+---
+id: about_cta3
+title: WHAT ARE YOU WAITING FOR?
+subtitle: JOIN THE MOVEMENT 
+button:  Join The Movement
+link: '#'
+---
+Meet our community, join our conversations and 
+<br />
+collaborate with our value-driven and collaborative teams.

src/components/custom/sections/CallToAction.vue

@@ -3,12 +3,13 @@
     class="pb-10 px-4 bg-cover text-center"
     :class="{
       pink: id == 'home',
+      green: id == 'about-us' && lastCta,
     }"
   >
     <!-- about-us -->
     <div
       class="w-full max-w-2xl mx-auto py-12"
-      v-if="id == 'about-us' && !textOnly"
+      v-if="id == 'about-us' && !textOnly && !lastCta"
     >
       <h2
         v-if="cta.title"
@@ -29,7 +30,7 @@
       ></div>
       <g-image :src="cta.image" class="my-10" />
 
-      <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
+      <!-- <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
         <a
           @click="toggleModal"
           class="
@@ -48,7 +49,7 @@
           "
           >{{ cta.video_button }}</a
         >
-      </div>
+      </div> -->
       <a
         class="
           inline-block
@@ -114,6 +115,82 @@
       ></div>
     </div>
 
+    <div
+      class="w-full max-w-3xl mx-auto py-20"
+      v-else-if="id == 'about-us' && lastCta"
+    >
+      <h2
+        v-if="cta.title"
+        class="
+          lg:text-5xl
+          text-center
+          uppercase
+          mb-2
+          leading-none
+          font-bold font-heading
+        "
+      >
+        {{ cta.title }}
+      </h2>
+      <h2
+        v-if="cta.subtitle"
+        class="
+          lg:text-5xl
+          text-center
+          uppercase
+          mb-2
+          leading-none
+          font-bold font-heading
+        "
+      >
+        {{ cta.subtitle }}
+      </h2>
+      <div
+        v-html="cta.content"
+        class="mt-6 mb-8 lg:text-2xl text-gray-800"
+      ></div>
+      <a
+        class="
+          inline-block
+          bg-white
+          text-sm
+          learn-button
+          hover:bg-gray-400
+          px-12
+          py-1
+          mr-5
+          my-4
+          border-2
+          shadow
+          border-black
+        "
+        target="_blank"
+        v-if="cta.button && cta.link.includes('http')"
+        :href="cta.link"
+        >{{ cta.button }}</a
+      >
+
+      <a
+        class="
+          inline-block
+          bg-white
+          text-sm
+          learn-button
+          hover:bg-gray-400
+          px-12
+          py-1
+          mr-5
+          my-4
+          border-2
+          shadow
+          border-black
+        "
+        v-else
+        :href="cta.link"
+        >{{ cta.button }}</a
+      >
+    </div>
+
     <!-- home -->
 
     <div class="w-full mx-auto mt-10 py-16" v-else-if="id == 'home'">
@@ -629,7 +706,7 @@
 import Modal from "~/components/custom/Modal.vue";
 
 export default {
-  props: ["cta", "id", "textOnly"],
+  props: ["cta", "id", "textOnly", "lastCta"],
   data() {
     return {
       showModal: false,
@@ -652,4 +729,8 @@ export default {
 .pink {
   background-color: #ea1ff7;
 }
+
+.green {
+  background-color: #70dfc9;
+}
 </style>

src/templates/MarkdownPage.vue

@@ -98,6 +98,12 @@
         v-if="$page.markdownPage.roadmap"
         :roadmap="$page.markdownPage.roadmap"
       />
+      <CallToAction
+        :id="$page.markdownPage.id"
+        v-if="$page.markdownPage.cta3"
+        :cta="$page.markdownPage.cta3"
+        :lastCta="true"
+      />
     </div>
     <!-- <g-image
       v-if="
@@ -107,90 +113,7 @@
       :src="$page.markdownPage.solution_image.src"
     /> -->
 
-    <!-- tft page -->
-    <div
-      class="container_tft sm:pxi-0 mx-auto overflow-x-hidden py-5"
-      v-if="$page.markdownPage.id == 'tft'"
-    >
-      <Header
-        v-if="
-          $page.markdownPage.header_title &&
-          $page.markdownPage.header_title != ''
-        "
-        :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"
-      />
-
-      <BrandPanel
-        :id="$page.markdownPage.id"
-        :brand="$page.markdownPage.brandPanel"
-        v-if="$page.markdownPage.brandPanel"
-        :diveInto="false"
-      />
-
-      <Slider
-        v-if="$page.markdownPage.carousel"
-        :slides="$page.markdownPage.carousel"
-        :main="$page.markdownPage.sliderMain"
-      />
-
-      <TFTFuel
-        v-if="$page.markdownPage.tftUses.length > 0"
-        :id="$page.markdownPage.id"
-        :main="$page.markdownPage.useTftMain"
-        :sections="$page.markdownPage.tftUses"
-        :farmingProcess="false"
-      />
-
-      <TFTFuel
-        v-if="$page.markdownPage.farmingProcess.length > 0"
-        :id="$page.markdownPage.id"
-        :main="$page.markdownPage.farmingMain"
-        :sections="$page.markdownPage.farmingProcess"
-        :farmingProcess="true"
-      />
-
-      <TFTFuel
-        v-if="$page.markdownPage.cultivationProcess.length > 0"
-        :id="$page.markdownPage.id"
-        :main="$page.markdownPage.cultivationMain"
-        :sections="$page.markdownPage.cultivationProcess"
-        :cultivationProcess="true"
-      />
-
-      <g-image
-        class="lg:py-10"
-        v-if="$page.markdownPage.solution_image"
-        :src="$page.markdownPage.solution_image"
-      />
-
-      <BrandPanel
-        :id="$page.markdownPage.id"
-        :brand="$page.markdownPage.brandPanel2"
-        v-if="$page.markdownPage.brandPanel2"
-        :diveInto="true"
-      />
-
-      <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">
-      <CallToAction
-        :id="$page.markdownPage.id"
-        v-if="$page.markdownPage.cta && $page.markdownPage.id == 'why'"
-        :cta="$page.markdownPage.cta"
-      />
-
       <AppListItem
         v-if="
           $page.markdownPage.appData && $page.markdownPage.appData.length > 0
@@ -224,13 +147,6 @@
         :faqs="$page.markdownPage.faqContent"
       />
 
-      <CallToAction
-        class="mt-20"
-        :id="$page.markdownPage.id"
-        v-if="$page.markdownPage.cta3"
-        :cta="$page.markdownPage.cta3"
-      />
-
       <ShowcaseProducts
         class="my-20"
         v-if="
@@ -410,6 +326,7 @@
         }
         cta3{
           title
+          subtitle
           content
           button
           link