Brand panel3 sec

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

@@ -1,9 +1,6 @@
 ---
 id: about_brandPanel
 title: A DIGITAL INFRASTRUCTURE SUPPORTING AN INTERCONNECTED WORLD
-subtitle:
-sourceUrl: ''
-btnTxt: 
 image: about_globe.png # src/assets/brandPanel/..
 ---
 Internet access is a human right and represents the biggest source of information and communication. Our technology was designed to scale to anywhere electricity and  bandwidth can be found to meet local digital infrastructure needs, especially the global south, to empower the unconnected and support a shared vision of an interconnected world.

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

@@ -1,9 +1,6 @@
 ---
 id: about_brandPanel2
 title: OUR CUTTING-EDGE TECHNOLOGY ALLOWS PEOPLE TO OWN THEIR DATA
-subtitle:
-sourceUrl: ''
-btnTxt: 
 image: about_logos.png # src/assets/brandPanel/..
 ---
 Using a variety of innovative technologies including autonomous IT, blockchain and peer-to-peer networking, we allow people to own 100% of their data. On our system censorship, user tracking and privacy breaches are just not possible, not even for ThreeFold. People own 100% of their data. All our code is open source and available for everyone to review or use as they see fit.

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

@@ -0,0 +1,6 @@
+---
+id: about_brandPanel3
+title: OUR VALUES INFORM EVERYTHING, WHO WE ARE  AND WHAT WE DO
+image: about_value.png # src/assets/brandPanel/..
+---
+By making our technology actionable, we enable a collective approach to have an impact together. We unify our practices, partnerships, and products around a single mission - empowering humanity and regenerating our  planet. We commit to be carbon negative by  2022.

gridsome.config.js

@@ -389,6 +389,7 @@ module.exports = {
                     inTheNews: 'InTheNews',
                     brandPanel: 'BrandPanel',
                     brandPanel2: 'BrandPanel2',
+                    brandPanel3: 'BrandPanel3',
                     partenershipsMain: 'PartenershipsMain',
                     partnerships: 'Partenerships',
                     stats: 'Stats',

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="">
+  <div :class="{ 'bg-about': id == 'about-us' && brandPanel3 }">
     <div class="max-w-screen-xl mx-auto py-10">
       <!-- token -->
       <div
@@ -253,7 +253,7 @@
 
       <!-- About us -->
       <div
-        v-else-if="id == 'about-us' && !brandPanel2"
+        v-else-if="id == 'about-us' && !brandPanel2 && !brandPanel3"
         class="flex flex-wrap text-left"
       >
         <div class="lg:w-1/2 px-2 self-center">
@@ -343,6 +343,50 @@
         </div>
       </div>
 
+      <div
+        v-else-if="id == 'about-us' && brandPanel3"
+        class="flex flex-wrap lg:text-left lg:pt-16 px-4"
+      >
+        <div class="lg:w-1/2 px-2 self-center">
+          <g-image  :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-3xl 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-2xl leading-tight tracking-wide"
+              v-html="brand.content"
+            ></div>
+            <a
+              v-if="brand.btnTxt"
+              target="_blank"
+              :href="brand.sourceUrl"
+              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-widev
+              "
+              >{{ brand.btnTxt }}</a
+            >
+          </div>
+        </div>
+      </div>
+
       <div
         v-else
         class="
@@ -411,7 +455,7 @@
 
 <script>
 export default {
-  props: ["brand", "id", "brandPanel2"],
+  props: ["brand", "id", "brandPanel2", "brandPanel3"],
   computed: {
     image() {
       return this.brand.image.src
@@ -423,7 +467,9 @@ export default {
 </script>
 
 <style scoped>
-.whybrand {
+.bg-about {
-  background-image: linear-gradient(#c2aeef, #82f3fe);
+  background: #70dfc9;
+  background: -webkit-linear-gradient(to right, #70dfc9, #ea1ff7);
+  background: linear-gradient(to right, #70dfc9, #ea1ff7);
 }
 </style>

src/templates/MarkdownPage.vue

@@ -35,6 +35,12 @@
         v-if="$page.markdownPage.brandPanel2"
         :brandPanel2="true"
       />
+      <BrandPanel
+        :id="$page.markdownPage.id"
+        :brand="$page.markdownPage.brandPanel3"
+        v-if="$page.markdownPage.brandPanel3"
+        :brandPanel3="true"
+      />
       <!-- <CustomCTA
         :header="true"
         :image="$page.markdownPage.pageHeader.image"
@@ -411,19 +417,19 @@
         brandPanel{
          id
          title
-         subtitle
          content
-         sourceUrl
-         btnTxt
          image
        }
         brandPanel2{
          id
          title
-         subtitle
          content
-         sourceUrl
+         image
-         btnTxt
+       } 
+       brandPanel3{
+         id
+         title
+         content
          image
        }         
        partenershipsMain{