init cta

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

@@ -14,4 +14,5 @@ link: "#"
 brandPanel: about_brandPanel
 brandPanel2: about_brandPanel2
 brandPanel3: about_brandPanel3
+cta: about_cta
 ---

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

@@ -0,0 +1,10 @@
+---
+id: about_cta
+title: JOIN OUR JOURNEY
+image: ./about_join.png
+button: Join Us
+link: "#"
+---
+Join us on our journey to build the digital 
+<br />
+infrastructure that will connect humanity

src/components/custom/sections/CallToAction.vue

@@ -5,32 +5,27 @@
       pink: id == 'home',
     }"
   >
-    <!-- why -->
-    <div class="w-full max-w-2xl mx-auto py-12" v-if="id == 'why'">
+    <!-- about-us -->
+    <div class="w-full max-w-2xl mx-auto py-12" v-if="id == 'about-us'">
       <h2
         v-if="cta.title"
         class="
-          text-4xl text-center
+          lg:text-5xl
+          text-center
           uppercase
           mb-2
           leading-none
-          font-light font-heading
+          font-bold font-heading
         "
       >
         {{ cta.title }}
       </h2>
-      <span
-        class="
-          text-center
-          uppercase
-          leading-none
-          text-4xl text-gray-800
-          font-black font-heading
-        "
-      >
-        {{ cta.slogan }}
-      </span>
-      <div v-html="cta.content" class="mt-6 mb-8 text-gray-600"></div>
+      <div
+        v-html="cta.content"
+        class="mt-6 mb-8 lg:text-2xl text-gray-800"
+      ></div>
+      <g-image :src="cta.image" class="my-10" />
+
       <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
         <a
           @click="toggleModal"
@@ -45,73 +40,51 @@
             py-2
             mr-5
             mb-4
-            rounded
             shadow
             rounded-full
           "
           >{{ cta.video_button }}</a
         >
       </div>
-      <g-link
+      <a
         class="
           inline-block
-          bg-blue-900
-          text-md
+          bg-white
+          text-sm
           learn-button
-          hover:bg-blue-800
-          text-gray-100
+          hover:bg-gray-400
           px-12
-          py-2
+          py-1
           mr-5
-          mb-4
-          rounded
+          my-4
+          border-2
           shadow
-          rounded-full
+          border-black
         "
         target="_blank"
-        v-if="cta.button"
-        :to="cta.link"
-        >{{ cta.button }}</g-link
+        v-if="cta.button && cta.link.includes('http')"
+        :href="cta.link"
+        >{{ cta.button }}</a
       >
-      <g-link
+
+      <a
         class="
           inline-block
-          bg-blue-900
+          bg-white
           text-sm
           learn-button
-          hover:bg-blue-800
-          text-gray-100
+          hover:bg-gray-400
           px-12
-          py-2
+          py-1
           mr-5
-          mb-4
-          rounded
+          my-4
+          border-2
           shadow
-          rounded-full
+          border-black
         "
-        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
-        "
-        v-if="cta.button3"
-        :to="cta.link3"
-        >{{ cta.button3 }}</g-link
+        v-else
+        :href="cta.link"
+        >{{ cta.button }}</a
       >
     </div>
 

src/templates/MarkdownPage.vue

@@ -55,6 +55,11 @@
       </div> -->
     </div>
     <div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
+      <CallToAction
+        :id="$page.markdownPage.id"
+        v-if="$page.markdownPage.id == 'about-us'"
+        :cta="$page.markdownPage.cta"
+      />
       <!-- <SignUp
         v-if="$page.markdownPage.signup"
         :signup="$page.markdownPage.signup"
@@ -105,11 +110,6 @@
         :button="$page.markdownPage.button"
         :link="$page.markdownPage.link"
       />
-      <CallToAction
-        :id="$page.markdownPage.id"
-        v-if="$page.markdownPage.id == 'tft'"
-        :cta="$page.markdownPage.cta"
-      />
 
       <BrandPanel
         :id="$page.markdownPage.id"
@@ -387,8 +387,8 @@
         }
         cta{
           title
-          slogan
           content
+          image
           button
           link
         }