Update cta & brandpanel secs

content/page/cloud/cloud.md

@@ -23,6 +23,7 @@ workloadsMain: workloadMain
 workloads: [workload1, workload2, workload3, workload4]
 stats: stats
 cta2: home_cta2
+cta3: cloud_cta
 logos: [logo1, logo7, logo8, logo4, logo2, logo3, logo5, logo6]
 
 # signup: home_signup

content/page/cloud/cta3/cta.md

@@ -0,0 +1,10 @@
+---
+id: cloud_cta
+title: Introducing Zero-OS 
+image: ./zero_os.png
+button: Learn More
+link: /tech
+button2: Expand The Grid
+link2: /farm
+---
+A decentralized autonomous OS designed to dedicate hardware capacity to the People’s Internet via the ThreeFold Blockchain. Zero-OS can be booted on most modern computers to host anything that runs on Linux in a decentralized way.

src/components/custom/sections/CallToAction.vue

@@ -1291,7 +1291,7 @@
     <div
       id="zero_os"
       class="w-full max-w-3xl mx-auto lg:py-20"
-      v-else-if="id == 'grid'"
+      v-else-if="id == 'grid' || id == 'cloud'"
     >
       <g-image :src="cta.image" class="mx-auto lg:w-1/3 my-10" />
       <h2

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

@@ -8,7 +8,86 @@
       gry3: id == 'community' && brandPanel3,
     }"
   >
-    <div class="mx-auto py-10">
+    <div v-if="id == 'cloud' && !lastBrand" class="to-black">
+      <div class="max-w-screen-2xl mx-auto py-20">
+        <div class="rounded-lg overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4">
+          <div
+            class="
+              pt-10
+              pb-12
+              px-6
+              sm:pt-16 sm:px-16
+              lg:py-16 lg:pr-0
+              xl:py-20 xl:px-10
+            "
+          >
+            <div class="lg:self-center">
+              <h2
+                class="leading-none font-extrabold mb-10 text-white"
+                :class="{
+                  'lg:text-5xl leading-none': id == 'home',
+                  'lg:text-5xl ': id == 'network',
+                }"
+              >
+                {{ brand.title }}
+              </h2>
+              <div
+                class="mt-4 lg:text-2xl text-xl leading-normal text-white"
+                v-html="brand.content"
+              ></div>
+              <div class="my-10" v-if="brand.button">
+                <a
+                  v-if="brand.link.includes('http')"
+                  target="_blank"
+                  :href="brand.link"
+                  class="
+                    inline-block
+                    green
+                    uppercase
+                    text-2xl text-black
+                    font-extrabold
+                    px-8
+                    py-3
+                    mr-5
+                    my-2
+                    shadow
+                    rounded-lg
+                  "
+                  >{{ brand.button }}</a
+                >
+                <a
+                  v-else
+                  :href="brand.link"
+                  class="
+                    inline-block
+                    green
+                    uppercase
+                    text-2xl text-black
+                    font-extrabold
+                    px-8
+                    py-3
+                    mr-5
+                    my-2
+                    shadow
+                    rounded-lg
+                  "
+                  >{{ brand.button }}</a
+                >
+              </div>
+            </div>
+          </div>
+          <div class="relative">
+            <g-image
+              class="inset-0 mx-auto object-cover"
+              :class="{ 'w-3/4': id == 'network' }"
+              :src="image"
+              :alt="brand.title"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else class="mx-auto py-10">
       <!-- oldtft -->
       <div
         v-if="id == 'oldtft'"
@@ -453,7 +532,7 @@
           </div>
         </div>
         <div class="lg:w-1/2 px-2 self-top text-right">
-          <g-image class=" mx-auto" :src="image" :alt="brand.title" />
+          <g-image class="mx-auto" :src="image" :alt="brand.title" />
         </div>
       </div>
 
@@ -1421,7 +1500,14 @@
 
 <script>
 export default {
-  props: ["brand", "id", "brandPanel2", "brandPanel3"],
+  props: [
+    "brand",
+    "id",
+    "brandPanel2",
+    "brandPanel3",
+    "lastBrand",
+    "textFirst",
+  ],
   computed: {
     image() {
       return this.brand.image.src
@@ -1449,4 +1535,14 @@ export default {
 .gry3 {
   background: #f2f2f2;
 }
+
+.to-black {
+  background: #000;
+  background: -webkit-linear-gradient(to right, #000, #323232);
+  background: linear-gradient(to right, #000, #323232);
+}
+.green {
+  /* background-color: #70dfc9; */
+  font-family: "Orbitron", sans-serif !important;
+}
 </style>

src/templates/MarkdownPage.vue

@@ -38,7 +38,8 @@
           $page.markdownPage.id !== 'tft' &&
           $page.markdownPage.brandPanel &&
           $page.markdownPage.id !== 'farm' &&
-          $page.markdownPage.id !== 'developer'
+          $page.markdownPage.id !== 'developer' &&
+          $page.markdownPage.id !== 'cloud'
         "
         :brand="$page.markdownPage.brandPanel"
       />
@@ -52,7 +53,8 @@
           $page.markdownPage.brandPanel2 &&
           $page.markdownPage.id !== 'farm' &&
           $page.markdownPage.id !== 'developer' &&
-          $page.markdownPage.id !== 'community'
+          $page.markdownPage.id !== 'community' &&
+          $page.markdownPage.id !== 'cloud'
         "
         :brandPanel2="true"
       />
@@ -66,7 +68,8 @@
           $page.markdownPage.brandPanel3 &&
           $page.markdownPage.id !== 'farm' &&
           $page.markdownPage.id !== 'developer' &&
-          $page.markdownPage.id !== 'community'
+          $page.markdownPage.id !== 'community' &&
+          $page.markdownPage.id !== 'cloud'
         "
         :brandPanel3="true"
       />
@@ -184,11 +187,24 @@
         :main="$page.markdownPage.networkMain"
         :features="$page.markdownPage.network"
       />
-
+    </div>
+    <div class="container mx-auto">
+      <LogoShowcase
+        v-if="$page.markdownPage.logos.length > 0"
+        :id="$page.markdownPage.id"
+        :logos="$page.markdownPage.logos"
+      />
+    </div>
+    <div class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden">
       <BrandPanel
         :id="$page.markdownPage.id"
         :brand="$page.markdownPage.brandPanel"
-        v-if="$page.markdownPage.brandPanel && $page.markdownPage.id == 'tft'"
+        v-if="
+          $page.markdownPage.brandPanel &&
+          $page.markdownPage.id == 'tft' &&
+          $page.markdownPage.id !== 'cloud'
+        "
+        :lastBrand="false"
       />
 
       <BrandPanel
@@ -216,6 +232,12 @@
         :cta="$page.markdownPage.cta2"
         :lastCta="true"
       />
+      <BrandPanel
+        :id="$page.markdownPage.id"
+        :brand="$page.markdownPage.brandPanel"
+        :lastBrand="false"
+        v-if="$page.markdownPage.brandPanel && $page.markdownPage.id == 'cloud'"
+      />
 
       <CallToAction
         :id="$page.markdownPage.id"
@@ -252,11 +274,6 @@
         "
         :cta="$page.markdownPage.cta2"
       />
-      <LogoShowcase
-        v-if="$page.markdownPage.logos.length > 0"
-        :id="$page.markdownPage.id"
-        :logos="$page.markdownPage.logos"
-      />
     </div>
     <g-image
       v-if="
@@ -292,7 +309,12 @@
       <BrandPanel
         :id="$page.markdownPage.id"
         :brand="$page.markdownPage.brandPanel"
-        v-if="$page.markdownPage.brandPanel && $page.markdownPage.id == 'farm'"
+        :lastBrand="false"
+        v-if="
+          $page.markdownPage.brandPanel &&
+          $page.markdownPage.id == 'farm' &&
+          $page.markdownPage.id !== 'cloud'
+        "
       />
 
       <BrandPanel