Add brandPanel3

content/page/home/brandPanel3/brandPanel3.md

@@ -0,0 +1,10 @@
+---
+id: zero_os
+title: POWERED BY A 
+subtitle: NEW OPERATING SYSTEM
+sourceUrl: '#'
+btnTxt: Know More
+image: zero_os.jpg # src/assets/brandPanel/..
+---
+
+Zero-OS is an autonomous open-source operating system that supports the peer-to-peer cloud and the deployment of infinitely scalable digital workloads with unparalleled levels of security and privacy

content/page/home/home.md

@@ -16,6 +16,7 @@ productsMain: product
 productData: [nodes_home, tokens_home, storage_home]
 brandPanel: fix_internet
 brandPanel2: p4p
+brandPanel3: zero_os
 cta3: home_cta3
 cta4: home_cta4
 cta5: home_cta5

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

@@ -165,7 +165,7 @@
 
       <!-- home -->
       <div
-        v-else-if="id == 'home' && !brandPanel2"
+        v-else-if="id == 'home' && !brandPanel2 && !brandPanel3"
         class="flex flex-wrap lg:text-left text-center lg:pt-16 lg:px-16"
       >
         <div class="lg:w-1/2 lg:px-6 self-center">
@@ -325,6 +325,80 @@
         </div>
       </div>
 
+      <div
+        v-else-if="id == 'home' && brandPanel3"
+        class="flex flex-wrap lg:text-left text-center lg:pt-16 lg:px-16"
+      >
+        <div class="lg:w-1/2 lg:px-10 order-1 lg:order-none lg:self-center">
+          <div class="text-center">
+            <h2
+              class="
+                lg:text-5xl
+                mb-8
+                font-light
+                uppercase
+                leading-none
+                font-heading
+              "
+            >
+              {{ brand.title }}
+              <span class="block font-bold" v-if="brand.subtitle">{{
+                brand.subtitle
+              }}</span>
+            </h2>
+            <div
+              class="pb-6 text-xl leading-tight tracking-wide"
+              v-html="brand.content"
+            ></div>
+            <a
+              v-if="brand.btnTxt.includes('http')"
+              target="_blank"
+              :href="brand.sourceUrl"
+              class="
+                inline-block
+                bg-white
+                lg:text-lg
+                learn-button
+                hover:bg-gray-400
+                bo
+                px-12
+                py-1
+                mr-5
+                mb-4
+                border-2
+                shadow
+                border-black
+              "
+              >{{ brand.btnTxt }}</a
+            >
+
+            <a
+              v-else
+              :href="brand.sourceUrl"
+              class="
+                inline-block
+                bg-white
+                lg:text-lg
+                learn-button
+                hover:bg-gray-400
+                bo
+                px-12
+                py-1
+                lg:mr-5
+                mb-4
+                border-2
+                shadow
+                border-black
+              "
+              >{{ brand.btnTxt }}</a
+            >
+          </div>
+        </div>
+        <div class="lg:w-1/2 lg:px-6 self-center">
+          <g-image class="mx-auto" :src="image" :alt="brand.title" />
+        </div>
+      </div>
+
       <!-- About us -->
       <div
         v-else-if="id == 'about-us' && !brandPanel2 && !brandPanel3"

src/pages/Index.vue

@@ -32,6 +32,13 @@
         :brandPanel2="true"
       />
 
+      <BrandPanel
+        :brand="$page.markdownPage.brandPanel3"
+        :id="$page.markdownPage.id"
+        v-if="$page.markdownPage.brandPanel3"
+        :brandPanel3="true"
+      />
+
       <Map v-if="$page.markdownPage.map" :section="$page.markdownPage.map" />
       <ShowcaseProducts
         v-if="
@@ -271,6 +278,15 @@
          btnTxt
          image
        }
+      brandPanel3{
+         id
+         title
+         subtitle
+         content
+         sourceUrl
+         btnTxt
+         image
+       }
         logosMain {
           id
           title