Brand panel2 sec

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

@@ -12,4 +12,6 @@ solution_image:
 button: The Digital Future
 link: "#"
 brandPanel: about_brandPanel
+brandPanel2: about_brandPanel2
+brandPanel3: about_brandPanel3
 ---

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

@@ -0,0 +1,9 @@
+---
+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.

gridsome.config.js

@@ -170,6 +170,14 @@ module.exports = {
             }
         },
 
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'BrandPanel3',
+                path: './content/page/**/brandPanel3/*.md',
+            }
+        },
+
         {
             use: '@gridsome/source-filesystem',
             options: {

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

@@ -251,8 +251,11 @@
         </div>
       </div>
 
-      <!-- tft -->
+      <!-- About us -->
-      <div v-else-if="id == 'about-us'" class="flex flex-wrap text-left">
+      <div
+        v-else-if="id == 'about-us' && !brandPanel2"
+        class="flex flex-wrap text-left"
+      >
         <div class="lg:w-1/2 px-2 self-center">
           <g-image class="mx-auto" :src="image" :alt="brand.title" />
         </div>
@@ -297,28 +300,19 @@
       </div>
 
       <div
-        v-else-if="id == 'tft' && diveInto"
+        v-else-if="id == 'about-us' && brandPanel2"
-        class="flex flex-wrap tft_section lg:text-left lg:pt-16 px-4"
+        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-6xl mb-8 uppercase leading-none font-heading">
+            <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="
+              class="pb-6 text-gray-900 text-2xl leading-tight tracking-wide"
-                pb-6
-                text-gray-900 text-2xl
-                leading-tight
-                tft_subtitle
-                tracking-wide
-              "
               v-html="brand.content"
             ></div>
             <a
@@ -344,6 +338,9 @@
             >
           </div>
         </div>
+        <div class="lg:w-1/2 px-2 self-center">
+          <g-image class="mx-auto" :src="image" :alt="brand.title" />
+        </div>
       </div>
 
       <div
@@ -414,7 +411,7 @@
 
 <script>
 export default {
-  props: ["brand", "id", "diveInto"],
+  props: ["brand", "id", "brandPanel2"],
   computed: {
     image() {
       return this.brand.image.src

src/templates/MarkdownPage.vue

@@ -28,6 +28,13 @@
         :brand="$page.markdownPage.brandPanel"
         v-if="$page.markdownPage.brandPanel"
       />
+
+      <BrandPanel
+        :id="$page.markdownPage.id"
+        :brand="$page.markdownPage.brandPanel2"
+        v-if="$page.markdownPage.brandPanel2"
+        :brandPanel2="true"
+      />
       <!-- <CustomCTA
         :header="true"
         :image="$page.markdownPage.pageHeader.image"