Update navbar && header

content/navigation/navigation.md

@@ -11,8 +11,8 @@ navLinks:
     external: false
     expandable: false
 
-  - name: Grid
-    link: /grid
+  - name: Cloud
+    link: /cloud
     external: false
     expandable: false
 

content/page/cloud/blogs/compute/index.md

@@ -0,0 +1,6 @@
+---
+id: compute
+title: COMPUTE
+image: ./compute.jpg
+---
+Native support for containers and virtual machines. Migrate existing applications effortlessly or build from scratch in a cutting-edge computing environment.

content/page/cloud/blogs/network/index.md

@@ -0,0 +1,9 @@
+---
+id: network
+title: NETWORK
+image: ./network.jpg
+---
+
+Private overlay networks and global end-to-end encryption minimize attack surface.
+<br/>
+Handle inbound traffic with uniquely secure web gateways.

content/page/cloud/blogs/storage/index.md

@@ -0,0 +1,6 @@
+---
+id: storage
+title: STORAGE
+image: ./storage.jpg
+---
+Plug in standard tools and protocols to the most resilient and versatile storage system ever created, or access raw disk on the location of your choice.

content/page/cloud/brandPanel/brandPanel.md

@@ -0,0 +1,7 @@
+---
+id: limitless_possibilities
+title: LIMITLESS POSSIBILITIES
+image: limitless.png # src/assets/brandPanel/..
+---
+
+Optimized for efficient and affordable hosting of cloud alternatives, blockchains, IoT networks, and decentralized applications with seamless migration.

content/page/cloud/brandPanel2/brandPanel.md

@@ -0,0 +1,11 @@
+---
+id: explore
+title: EXPLORE COMPUTE AND STORAGE
+image: compute_and_storage.jpg # src/assets/brandPanel/..
+button: BUILD
+link: /compute
+button2: STORAGE
+link2: /storage
+---
+
+Run native Kubernetes and VMs or store your data using an unbreakable filesystem on the most comprehensive peer-to-peer cloud.

content/page/cloud/cloud.md

@@ -0,0 +1,48 @@
+---
+id: cloud
+metaTitle: ThreeFold P2P Cloud | Scale Limitlessly
+metaDesc: Deploy any workload with unprecedented security, scalability, and efficiency, on a fully comprehensive peer-to-peer digital infrastructure. Discover a cloud like no other
+metaImg: ./cloud_header_seprated.png
+header_title: THE NEXT GENERATION 
+header_title2: OF CLOUD COMPUTING
+header_image: ./cloud_header_seprated.png
+header_altImg: tfcloud
+header_excerpt: Deploy any workload with unprecedented security, scalability, and efficiency, on a fully comprehensive peer-to-peer digital infrastructure. Discover a cloud like no other
+header_link1_txt: STORE
+header_link1: /storage
+header_link2_txt: BUILD
+header_link2: /compute
+button: '' #Learn More
+link: '' #link for button
+blogs: [storage, compute, network]
+cta: home_cta
+brandPanel: limitless_possibilities
+brandPanel2: explore
+features: [digithree, own_cloud, hpe, solidaridad]
+workloadsMain: workloadMain
+workloads: [workload1, workload2, workload3, workload4]
+stats: stats
+cta2: home_cta2
+logos: [logo1, logo7, logo8, logo4, logo2, logo3, logo5, logo6]
+
+# signup: home_signup
+
+# solution_image2: ./carbon_neutral.png
+
+# header: header
+
+# cards: [card1]
+
+# cardLefts: [cardLeft1]
+
+# solution_image: ./home_cta.png
+
+# cards2: [marketplace]
+
+# cardLefts2: [iac]
+
+# pricing_plansMain: pricing
+
+# pricingPlans: [plan1, plan2, plan3, plan4]
+
+---

content/page/cloud/cta/cta.md

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

content/page/cloud/cta2/index.md

@@ -0,0 +1,8 @@
+---
+id: home_cta2
+title: TAKE THREEFOLD CLOUD ON A 
+subtitle: TEST DRIVE
+button: GET STARTED
+link: https://t.me/threefoldtesting 
+---
+Ready to try the future cloud? Drop us a line, and we'll provide everything you need to launch your first deployments, at no cost to you.

content/page/cloud/features/feature1/index.md

@@ -0,0 +1,6 @@
+---
+id: digithree
+title: DIGITHREE
+image: ./digicrop.jpg
+---
+DigiThree Labs builds on DigiByte’s trusted blockchain technology and ThreeFold’s peer-to-peer Internet infrastructure to provide the most secure future-proof products and services to the enterprise market.

content/page/cloud/features/feature2/index.md

@@ -0,0 +1,6 @@
+---
+id: own_cloud
+title: OWN CLOUD
+image: ./owncloud.png
+---
+ownCloud, an open-source file sync, share and content collaboration software trusted by 100 million users worldwide is partnering with ThreeFold to deliver a data sovereign, privet, and ultra-secure solution for their customers.

content/page/cloud/features/feature3/index.md

@@ -0,0 +1,6 @@
+---
+id: hpe
+title: HPE
+image: ./hpe.png
+---
+HPE is developing transformative solutions to improve connectivity and performance, while reducing the environmental footprint of IT infrastructure globally with ThreeFold Cloud.

content/page/cloud/features/feature4/index.md

@@ -0,0 +1,6 @@
+---
+id: solidaridad
+title: Solidaridad
+image: ./solidaridad.png
+---
+Solidaridad and ThreeFold are working on transparant supply chain solution to accelerate the digital transformation in developing countires in ways that empower communities universally.

content/page/cloud/logos/sec1/index.md

@@ -0,0 +1,5 @@
+---
+id: logo1
+image: ./qss.png
+url: /storage
+---

content/page/cloud/logos/sec2/index.md

@@ -0,0 +1,5 @@
+---
+id: logo2
+image: ./kubernetes.png
+url: /compute/#block_2
+---

content/page/cloud/logos/sec3/index.md

@@ -0,0 +1,5 @@
+---
+id: logo3
+image: ./terraform.png
+url: ''
+---

content/page/cloud/logos/sec4/index.md

@@ -0,0 +1,5 @@
+---
+id: logo4
+image: ./app_platform.png
+url: /apps
+---

content/page/cloud/logos/sec5/index.md

@@ -0,0 +1,5 @@
+---
+id: logo5
+image: ./docker.png
+url: /compute/#block_4
+---

content/page/cloud/logos/sec6/index.md

@@ -0,0 +1,5 @@
+---
+id: logo6
+image: ./virtual_machine.png
+url: /compute/#block_3
+---

content/page/cloud/logos/sec7/index.md

@@ -0,0 +1,5 @@
+---
+id: logo7
+image: ./zflist.png
+url: /compute/#block_4
+---

content/page/cloud/logos/sec8/index.md

@@ -0,0 +1,5 @@
+---
+id: logo8
+image: ./planetary_network.png
+url: /network
+---

content/page/cloud/stats/index.md

@@ -0,0 +1,7 @@
+---
+id: stats
+title: A GLOBAL EDGE INFRASTRUCTURE
+button: EXPLORE CAPACITY
+link: https://explorer.dev.grid.tf/
+---
+

content/page/cloud/workloads/main/index.md

@@ -0,0 +1,6 @@
+---
+id: workloadMain
+title: DESIGNED FOR DEMANDING WORKLOADS
+button: LEARN MORE
+link: https://library.threefold.me/info/threefold#/cloud/threefold__cloud_home
+---

content/page/cloud/workloads/section1/index.md

@@ -0,0 +1,6 @@
+---
+id: workload1
+title: EDGE CAPACITY
+image: ./capacity.png
+---
+Achieve low latencies and bandwidth efficiency by reserving capacity locally. 

content/page/cloud/workloads/section2/index.md

@@ -0,0 +1,6 @@
+---
+id: workload2
+title: SECURE
+image: ./secure.png
+---
+Open-source system built from the ground-up for a fully transparent and auditable stack. 

content/page/cloud/workloads/section3/index.md

@@ -0,0 +1,6 @@
+---
+id: workload3
+title: SCALABLE
+image: ./scalable.png
+---
+An autonomous infrastructure that grows naturally with demand, where and when it is needed.

content/page/cloud/workloads/section4/index.md

@@ -0,0 +1,6 @@
+---
+id: workload4
+title: EFFICIENT
+image: ./effecient.png
+---
+A carefully designed collection of lightweight components that minimize overheads.

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

@@ -592,12 +592,10 @@
       class="w-full max-w-6xl mx-auto lg:my-10"
       v-else-if="id == 'conversations'"
     >
-      <g-image
-        class="mx-auto lg:w-4/6 my-2 px-4"
-        :src="img"
-        :alt="altImg"
-      />
-      <div class="px-3 lg:mt-5 order-1 lg:order-none mx-auto text-center lg:mb-20">
+      <g-image class="mx-auto lg:w-4/6 my-2 px-4" :src="img" :alt="altImg" />
+      <div
+        class="px-3 lg:mt-5 order-1 lg:order-none mx-auto text-center lg:mb-20"
+      >
         <h2 class="md:text-6xl uppercase mb-2 mt-4 leading-none font-heading">
           {{ title }}
         </h2>
@@ -788,6 +786,51 @@
         <g-image :src="img" :alt="altImg" />
       </div>
     </div>
+    <div
+      class="flex flex-wrap text-center mx-4 lg:pt-4 pb-10"
+      v-else-if="id == 'cloud'"
+    >
+      <div class="px-3 lg:mt-5 order-1 lg:order-none mx-auto text-center">
+        <h2
+          class="
+            lg:text-5xl
+            uppercase
+            mb-6
+            leading-none
+            font-black font-heading
+          "
+        >
+          {{ title }}
+          <br />
+          <span>{{ title2 }}</span>
+        </h2>
+        <div
+          class="mb-8 mx-auto lg:text-2xl text-xl lg:max-w-4xl leading-normal"
+          v-html="excerpt"
+        ></div>
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-3 mx-auto items-center">
+        <div class="w-full mb-4 border-b border-gray-600">
+          <div class="arrow_up"></div>
+          <g-link :to="link1" class="text-5xl font-extrabold">{{
+            text1
+          }}</g-link>
+        </div>
+        <div class="mb-4">
+          <g-image
+            class="mx-auto sm:w-1/2 lg:w-full"
+            :src="img"
+            :alt="altImg"
+          />
+        </div>
+        <div class="w-full mb-4 border-b border-gray-600">
+          <g-link :to="linkheader2" class="text-5xl font-extrabold">{{
+            text2
+          }}</g-link>
+          <div class="arrow_down"></div>
+        </div>
+      </div>
+    </div>
   </section>
 </template>
 
@@ -811,6 +854,10 @@ export default {
     "link3",
     "buttonImg",
     "buttonImg2",
+    "text1",
+    "link1",
+    "text2",
+    "linkheader2",
   ],
   computed: {
     img: function () {
@@ -867,6 +914,33 @@ export default {
   filter: grayscale(0%);
 }
 
+.arrow_up,
+.arrow_down {
+  display: inline-block;
+  margin-right: 10px;
+  width: 0;
+  height: 0;
+  border-width: 0 12.5px 30px 12.5px;
+  border-color: transparent transparent #000000 transparent;
+  border-style: solid;
+}
+.arrow_down {
+  margin-left: 10px;
+
+  border-width: 35px 12.5px 0 12.5px;
+  border-color: #000000 transparent transparent transparent;
+}
+
+a {
+  font-family: "Orbitron", sans-serif !important;
+}
+hr {
+  height: 1px;
+  border-width: 0;
+  color: gray;
+  background-color: gray;
+}
+
 @media (max-width: 640px) {
   .bg-home {
     background-position: center !important;

src/pages/Index.vue

@@ -144,21 +144,21 @@
         cta{
           id
           title
-          subtitle
+        #  subtitle
           image
           content
           button
           button2
           button3
-          button4
-          button5
-          button6
+        #  button4
+        #  button5
+        #  button6
           link
           link2
           link3
-          link4
-          link5
-          link6
+        #  link4
+        #  link5
+        #  link6
         }
         BlogsMain{
           id
@@ -184,11 +184,11 @@
           button
           button2
           button3
-          button4
+        #  button4
           link
           link2
           link3
-          link4
+        #  link4
         }
         cta3{
           id

src/templates/MarkdownPage.vue

@@ -19,6 +19,10 @@
         :link2="$page.markdownPage.link2"
         :buttonImg="$page.markdownPage.buttonImg"
         :buttonImg2="$page.markdownPage.buttonImg2"
+        :text1="$page.markdownPage.header_link1_txt"
+        :link1="$page.markdownPage.header_link1"
+        :text2="$page.markdownPage.header_link2_txt"
+        :linkheader2="$page.markdownPage.header_link2"
       />
 
       <BrandPanel
@@ -79,7 +83,8 @@
           $page.markdownPage.id !== 'developer' &&
           $page.markdownPage.id !== 'tft' &&
           $page.markdownPage.id !== 'community' &&
-          $page.markdownPage.id !== 'conversations'
+          $page.markdownPage.id !== 'conversations' &&
+          $page.markdownPage.id !== 'cloud'
         "
         :id="$page.markdownPage.id"
         :title="$page.markdownPage.header_title"
@@ -543,6 +548,10 @@
         link2
         solution_image
         solution_image2
+        header_link1_txt
+        header_link1
+        header_link2_txt
+        header_link2
         header{
          title
          subtitle