Add last cta & brandpanel secs

content/page/cloud/cloud.md

@@ -15,15 +15,15 @@ header_link2: /compute
 button: '' #Learn More
 link: '' #link for button
 blogs: [storage, compute, network]
-cta: home_cta
+#cta: cloud_cta
 brandPanel: limitless_possibilities
 brandPanel2: explore
 features: [digithree, own_cloud, hpe, solidaridad]
 workloadsMain: workloadMain
 workloads: [workload1, workload2, workload3, workload4]
 stats: stats
-cta2: home_cta2
+cta2: cloud_cta2
-cta3: cloud_cta
+cta3: cloud_cta3
 logos: [logo1, logo7, logo8, logo4, logo2, logo3, logo5, logo6]
 
 # signup: home_signup

content/page/cloud/cta/cta.md

@@ -1,4 +1,4 @@
 ---
-id: home_cta
+id: cloud_cta
 image: ./cloud_icons.png
 ---

content/page/cloud/cta2/index.md

@@ -1,5 +1,5 @@
 ---
-id: home_cta2
+id: cloud_cta2
 title: TAKE THREEFOLD CLOUD ON A 
 subtitle: TEST DRIVE
 button: GET STARTED

content/page/cloud/cta3/cta.md

@@ -1,5 +1,5 @@
 ---
-id: cloud_cta
+id: cloud_cta3
 title: Introducing Zero-OS 
 image: ./zero_os.png
 button: Learn More

src/components/custom/sections/CallToAction.vue

@@ -5,6 +5,7 @@
       pink: id == 'home' && !lastCta,
       green: id == 'mission' && lastCta,
       gray: id == 'developer',
+      'to-black': id == 'cloud' && textOnly,
     }"
   >
     <!-- mission -->
@@ -1291,7 +1292,7 @@
     <div
       id="zero_os"
       class="w-full max-w-3xl mx-auto lg:py-20"
-      v-else-if="id == 'grid' || id == 'cloud'"
+      v-else-if="id == 'grid' || (id == 'cloud' && !textOnly)"
     >
       <g-image :src="cta.image" class="mx-auto lg:w-1/3 my-10" />
       <h2
@@ -1774,6 +1775,57 @@
       >
     </div>
 
+    <div
+      v-else-if="id == 'cloud' && textOnly"
+      class="w-full py-20 max-w-3xl mx-auto"
+    >
+      <h2 class="text-5xl text-white leading-tight font-semibold font-heading">
+        {{ cta.title }}
+        <span class="text-pink">{{ cta.subtitle }}</span>
+      </h2>
+      <div
+        v-html="cta.content"
+        class="text-2xl text-white leading-normal py-10"
+      ></div>
+      <a
+        v-if="cta.link.includes('http')"
+        target="_blank"
+        :href="cta.link"
+        class="
+          green
+          bg-green-300
+          lg:text-2xl
+          text-lg
+          font-extrabold
+          px-12
+          hover:bg-green-200
+          rounded-lg
+          py-4
+          mb-4
+          shadow
+        "
+        >{{ cta.button }}</a
+      >
+      <a
+        v-else
+        :href="cta.link"
+        class="
+          green
+          bg-green-300
+          lg:text-2xl
+          text-lg
+          font-extrabold
+          px-12
+          hover:bg-green-200
+          rounded-lg
+          py-4
+          mb-4
+          shadow
+        "
+        >{{ cta.button }}</a
+      >
+    </div>
+
     <div class="w-full max-w-7xl mx-auto" v-else>
       <h2
         v-if="cta.title"
@@ -1944,4 +1996,25 @@ export default {
   -webkit-filter: grayscale(0%);
   filter: grayscale(0%);
 }
+.to-black {
+  background: #000;
+  background: -webkit-linear-gradient(to right, #000, #323232);
+  background: linear-gradient(to right, #000, #323232);
+}
+.to-black-bottom {
+  background: #000;
+  background: -webkit-linear-gradient(to bottom, #000, #323232);
+  background: linear-gradient(to bottom, #000, #323232);
+}
+.bg-gray {
+  background-color: #e6e6e6;
+}
+
+.green {
+  /* background-color: #70dfc9; */
+  font-family: "Orbitron", sans-serif !important;
+}
+.text-pink {
+  color: #ea1ff7;
+}
 </style>

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

@@ -1436,6 +1436,89 @@
         </div>
       </div>
 
+      <div v-else-if="id == 'cloud' && lastBrand">
+        <div class="max-w-screen-3xl mx-auto py-16">
+          <div
+            class="rounded-lg overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
+          >
+            <div
+              class="
+                flex
+                content-center
+                pb-12
+                px-6
+                sm:px-16
+                lg:pr-0
+                xl:py-10 xl:px-20
+              "
+            >
+              <div class="lg:self-center">
+                <h2 class="lg:text-5xl leading-none text-black">
+                  {{ brand.title }}
+                </h2>
+                <div
+                  class="mt-4 text-xl lg:text-2xl leading-normal text-black"
+                  v-html="brand.content"
+                ></div>
+                <div class="my-10">
+                  <a
+                    :href="brand.link"
+                    v-if="brand.button"
+                    class="
+                      text-center
+                      inline-block
+                      green
+                      bg-green-300
+                      lg:text-2xl
+                      text-lg
+                      font-extrabold
+                      px-12
+                      hover:bg-green-200
+                      rounded-lg
+                      py-4
+                      mb-4
+                      lg:mr-4
+                      shadow
+                    "
+                    >{{ brand.button }}</a
+                  >
+                  <a
+                    :href="brand.link2"
+                    v-if="brand.button2"
+                    class="
+                      text-center
+                      inline-block
+                      green
+                      bg-green-300
+                      lg:text-2xl
+                      text-lg
+                      font-extrabold
+                      px-12
+                      hover:bg-green-200
+                      rounded-lg
+                      py-4
+                      mb-4
+                      shadow
+                    "
+                    >{{ brand.button2 }}</a
+                  >
+                </div>
+              </div>
+            </div>
+            <div class="relative lg:mt-14">
+              <g-image
+                class="inset-0 mx-auto object-cover"
+                :class="{
+                  'w-3/4': id == 'cloud',
+                }"
+                :src="image"
+                :alt="brand.title"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div
         v-else
         class="

src/templates/MarkdownPage.vue

@@ -122,7 +122,8 @@
           $page.markdownPage.id !== 'tft' &&
           $page.markdownPage.id !== 'farm' &&
           $page.markdownPage.id !== 'community' &&
-          $page.markdownPage.id !== 'conversations'
+          $page.markdownPage.id !== 'conversations' &&
+          $page.markdownPage.id !== 'cloud'
         "
         :cta="$page.markdownPage.cta2"
         :textOnly="true"
@@ -261,6 +262,20 @@
         v-if="$page.markdownPage.stats"
         :info="$page.markdownPage.stats"
       />
+      <CallToAction
+        v-if="$page.markdownPage.cta2"
+        :id="$page.markdownPage.id"
+        :cta="$page.markdownPage.cta2"
+        :textOnly="true"
+      />
+
+      <BrandPanel
+        class="my-20"
+        :brand="$page.markdownPage.brandPanel2"
+        :id="$page.markdownPage.id"
+        v-if="$page.markdownPage.brandPanel2"
+        :lastBrand="true"
+      />
     </div>
     <div class="container mx-auto">
       <ConversationSec
@@ -766,6 +781,10 @@
          sourceUrl2
          content
          image
+         button
+         link
+         button2
+         link2
        } 
        brandPanel3{
          id