grid brandpanel

content/page/grid/brandPanel/index.md

@@ -0,0 +1,8 @@
+---
+id: grid_brandPanel
+title: AN ENDLESSLY SCALABLE DIGITAL NETWORK
+btnTxt: Learn about TFT
+sourceUrl: '#'
+image: endless.png # src/assets/brandPanel/..
+---
+By connecting compute, storage and network capacity to the ThreeFold Grid, anyone can join an open and inclusive Internet ecosystem that supports the realization of a truly inter-connected world, and earn income in the form of TFT

content/page/grid/grid.md

@@ -11,4 +11,5 @@ header_excerpt: The ThreeFold Grid is an open system which allows anyone to beco
 solution_image: 
 button: Take Part
 link: "#"
+brandPanel: grid_brandPanel
 ---

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

@@ -387,6 +387,57 @@
         </div>
       </div>
 
+      <!-- grid -->
+      <div
+        v-else-if="id == 'grid' && !brandPanel2 && !brandPanel3"
+        class="flex flex-wrap text-left"
+      >
+        <div class="lg:w-1/2 px-2 lg:mt-10 order-1 lg:order-none text-left">
+          <div class="lg:self-center">
+            <h2 class="text-3xl mb-6 uppercase leading-none 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-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-white
+                text-sm
+                learn-button
+                hover:bg-gray-400
+                bo
+                px-12
+                py-1
+                mr-5
+                mb-4
+                border-2
+                shadow
+                border-black
+              "
+              >{{ brand.btnTxt }}</a
+            >
+          </div>
+        </div>
+        <div class="lg:w-1/2 px-2">
+          <g-image class="mx-auto" :src="image" :alt="brand.title" />
+        </div>
+      </div>
+
       <div
         v-else
         class="

src/templates/MarkdownPage.vue

@@ -323,6 +323,8 @@
         brandPanel{
          id
          title
+         btnTxt
+         sourceUrl
          content
          image
        }