update home page

content/navigation/navigation.md

@@ -2,29 +2,10 @@
 id: navigation
 navLinks:
   - name: PRODUCTS
-    link: ''
+    link: '/products'
     external: false
-    expandable: true
+    expandable: false
-    submenu:
-      - title: Be The Internet
-        path: /farming
-        external: true
 
-      - title: P2P Cloud
-        path: /cloud
-        external: true
-
-      - title: P2P Marketplace
-        path: /marketplace
-        external: true
-
-      - title: Digital Twin
-        path: /twin
-        external: true
-
-      - title: ThreeFold Token
-        path: /farming/token
-        external: true
 
   - name: LEARN
     link: '' # /dropdown

content/page/home/cta/cta.md

@@ -1,7 +1,7 @@
 ---
 id: home_cta
 title: JOIN THE MOVEMENT
-button: Support Us By Purchasing Tokens
+button: Buy TFT
 link: https://threefold.io/info/threefold#/how_to_buy_and_sell
 button2: Stay Updated
 link2: https://t.me/threefoldnews

content/page/home/cta2/cta2.md

@@ -0,0 +1,18 @@
+---
+id: home_cta2
+title: ''
+button: Watch Our Video
+link: https://vimeo.com/438190961
+button2: ''
+link2: ''
+button3: ''
+link3: ''
+
+---
+
+Get to Know the threeFold Vision better.
+
+<!-- button2: Spread our Message
+link: ''
+button3: Join our Community
+link: '' -->

content/page/home/cta3/cta3.md

@@ -0,0 +1,26 @@
+---
+id: home_cta3
+title1: 'The internet is too'
+title2: 'broken to be fixed'
+button: ''
+link: ''
+button2: ''
+link2: ''
+button3: ''
+link3: ''
+
+---
+
+The Internet is controlled by large corporations.
+<br>
+
+This centralized approach is highly inefficient, extremely costly, and unsustainable.
+
+<br>
+
+Our data isn't owned by us, and it isn't safe.
+
+<!-- button2: Spread our Message
+link: ''
+button3: Join our Community
+link: '' -->

content/page/home/cta4/cta4.md

@@ -0,0 +1,23 @@
+---
+id: home_cta4
+title1: 'is the'
+title2: 'only solution'
+slogan : 'this'
+subtitle : 'the threefold grid' 
+button: ''
+link: ''
+button2: ''
+link2: ''
+button3: ''
+link3: ''
+
+---
+
+Welcome to a better internet. Data is not decentralized and distributed to the world's
+<br>
+largest Peer-to-Peer grid,allowing you to truly be the master of you digital identity.
+
+<!-- button2: Spread our Message
+link: ''
+button3: Join our Community
+link: '' -->

content/page/home/cta5/cta5.md

@@ -0,0 +1,18 @@
+---
+id: home_cta5
+title: ''
+button: 'know more'
+link: 'https://threefold.io/info/threefold#/threefold__grid_why'
+button2: 'live stats'
+link2: 'https://explorer.threefold.io/'
+button3: ''
+link3: ''
+
+---
+
+
+
+<!-- button2: Spread our Message
+link: ''
+button3: Join our Community
+link: '' -->

content/page/home/home.md

@@ -5,17 +5,24 @@ header_title: ARE THE NEW INTERNET
 header_image: ./home_header.png
 header_altImg: threefold
 header_excerpt: Welcome to the world’s largest peer-to-peer internet, formed by people who want to make a difference, by people who care, by people just like you.
-button: ''
+button: 'Take Part'
-link: ''
+link: '#take_part'
 productsMain: product
-productData: [farming, cloud, marketplace, twin, tech, aci]
+productData: [cloud, farming, marketplace]
 logos: [logo1, logo2, logo3, logo4, logo5, logo6]
 brandPanel: fix_internet
 comparisonMain: comparison
 comparisonSecs: [section1, section2, section3]
 inTheNews: in_the_news
 solution_image: ./cta_image.svg
+solution_image2: ./video_play.png
+solution_image3: ./bg3.png
 cta: home_cta
+cta2: home_cta2
+cta3: home_cta3
+cta4: home_cta4
+cta5: home_cta5
+
 ---
 
 <!-- header: home_header

content/page/home/productData/product1/farming.md

@@ -1,7 +1,7 @@
 ---
 id: farming
 title: ''
-image : ./farming.png
+image : ./nodes.png
 url : /farming
 ---
 

content/page/home/productData/product2/cloud.md

@@ -1,7 +1,7 @@
 ---
 id: cloud
 title: ''
-image : ./cloud.png
+image : ./tokens.png
-url : /cloud
+url : /token
 ---
 

content/page/home/productData/product3/marketplace.md

@@ -1,7 +1,7 @@
 ---
 id: marketplace
 title: ''
-image : ./marketplace.png
+image : ./storage.png
-url : /marketplace
+url : /cloud
 ---
 

content/page/products/comparison/main/main.md

@@ -0,0 +1,7 @@
+---
+id: comparison
+title: GIVE THE WORLD A BETTER INTERNET
+description: The current Internet is centralized to tech giants that build power-hungry data centers and exploit user data. ThreeFold looks at updating the current $3.9 Billion IT with a new paradigm that serves people and our planet.
+button: Our Values
+link: https://threefold.io/aci/about #add button link here
+---

content/page/products/comparison/section1/section1.md

@@ -0,0 +1,5 @@
+---
+id: section1
+svg: ./private.svg
+title: ''
+---

content/page/products/comparison/section2/section2.md

@@ -0,0 +1,6 @@
+---
+id: section2
+svg: ./equal.svg
+title: ''
+---
+

content/page/products/comparison/section3/section3.md

@@ -0,0 +1,6 @@
+---
+id: section3
+svg: ./sustainable.svg
+title: ''
+---
+

content/page/products/productData/main/main.md

@@ -0,0 +1,5 @@
+---
+id: product
+title: TAKE PART
+subtitle: Start your P2P journey and help expand the network.
+---

content/page/products/productData/product1/farming.md

@@ -0,0 +1,7 @@
+---
+id: farming
+title: ''
+image : ./farming.png
+url : /farming
+---
+

content/page/products/productData/product2/cloud.md

@@ -0,0 +1,7 @@
+---
+id: cloud
+title: ''
+image : ./cloud.png
+url : /token
+---
+

content/page/products/productData/product3/marketplace.md

@@ -0,0 +1,7 @@
+---
+id: marketplace
+title: ''
+image : ./marketplace.png
+url : /cloud
+---
+

content/page/products/productData/product4/twin.md

@@ -0,0 +1,7 @@
+---
+id: twin
+title: ''
+image : ./twin.png
+url : /twin
+---
+

content/page/products/productData/product5/tech.md

@@ -0,0 +1,7 @@
+---
+id: tech
+title: ''
+image : ./tech.png
+url : https://threefold.tech
+---
+

content/page/products/productData/product6/aci.md

@@ -0,0 +1,7 @@
+---
+id: aci
+title: ''
+image : ./aci.png
+url : /aci
+---
+

content/page/products/products.md

@@ -0,0 +1,8 @@
+---
+id: products
+productsMain: product
+productData: [farming, cloud, marketplace, twin, tech, aci]
+
+---
+
+

gridsome.config.js

@@ -102,6 +102,38 @@ module.exports = {
             }
         },
 
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'Cta',
+                path: './content/page/**/cta2/*.md',
+            }
+        },
+
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'Cta',
+                path: './content/page/**/cta3/*.md',
+            }
+        },
+
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'Cta',
+                path: './content/page/**/cta4/*.md',
+            }
+        },
+
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'Cta',
+                path: './content/page/**/cta5/*.md',
+            }
+        },
+
         {
             use: '@gridsome/source-filesystem',
             options: {
@@ -192,6 +224,10 @@ module.exports = {
                     features: 'Features',
                     logos: 'Logo',
                     cta: 'Cta',
+                    cta2: 'Cta',
+                    cta3: 'Cta',
+                    cta4: 'Cta',
+                    cta5: 'Cta',
                     signup: 'SignUp',
                     comparisonMain: 'ComparisonMain',
                     comparisonSecs: 'Comparison',

src/components/custom/sections/CallToAction.vue

@@ -43,8 +43,3 @@ export default {
   props: ["cta"],
 };
 </script>
-<style scoped>
-.bg-hero {
-        background-image: url("~@/assets/images/bottom_cta.png");
-    }
-</style>

src/components/custom/sections/CallToActionbg1.vue

@@ -0,0 +1,50 @@
+<template>
+  <section class="pt-10 pb-10 px-4 bg-cover bg-hero text-center">
+ 
+    <div class="w-full  py-10 max-w-7xl mx-auto">
+      <h2 class="text-4xl text-white leading-tight font-semibold font-heading uppercase">
+        {{ cta.title1 }} 
+        <br>
+        {{ cta.title2 }}
+      </h2>
+      <div
+        v-html="cta.content"
+        class="mt-6 mb-20 text-white leading-relaxed "
+      ></div>
+
+
+       <a
+          class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full" 
+          target="_blank"
+          v-if="cta.button"
+          :href="cta.link"
+          >{{ cta.button }}</a
+        >
+        <g-link
+          class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+          v-if="cta.button2"
+          :to="cta.link2"
+          >{{ cta.button2 }}</g-link
+        >
+         <g-link
+          class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+          v-if="cta.button3"
+          :to="cta.link3"
+          >{{ cta.button3 }}</g-link
+        >
+      
+      
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: ["cta"],
+};
+</script>
+<style scoped>
+.bg-hero {
+        background-image: url("~@/assets/images/bg1.png");
+    }
+</style>

src/components/custom/sections/CallToActionbg2.vue

@@ -0,0 +1,54 @@
+<template>
+  <section class="pb-20 px-4 bg-cover bg-hero text-center">
+    <br>
+    <br>
+    <br>
+    <div class="w-full max-w-7xl mx-auto">
+      <h3 class="uppercase">{{ cta.subtitle }}</h3>
+     <h2 class="text-6xl mb-6 leading-none font-extrabold font-heading uppercase">
+          <span class="text-blue-600">{{ cta.slogan }}</span
+          > {{ cta.title1 }}
+          <br>
+          {{ cta.title2 }}
+        </h2>
+      <div
+        v-html="cta.content"
+        class="mt-6 mb-8 text-gray-700 leading-relaxed"
+      ></div>
+
+
+       <a
+          class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full" 
+          target="_blank"
+          v-if="cta.button"
+          :href="cta.link"
+          >{{ cta.button }}</a
+        >
+        <g-link
+          class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+          v-if="cta.button2"
+          :to="cta.link2"
+          >{{ cta.button2 }}</g-link
+        >
+         <g-link
+          class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+          v-if="cta.button3"
+          :to="cta.link3"
+          >{{ cta.button3 }}</g-link
+        >
+      
+      
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: ["cta"],
+};
+</script>
+<style scoped>
+.bg-hero {
+        background-image: url("~@/assets/images/bg2.png");
+    }
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="py-12 mb-5">
+  <div class="py-12 mb-5" id="take_part">
     <div class="w-full text-center">
       <h2 v-if="main !== null" class="text-4xl font-semibold leading-tight font-heading">
         {{ main.title }} 
@@ -7,7 +7,7 @@
       <p v-if="main !== null" class="mb-6 text-m tracking-widest text-gray-800">{{ main.subtitle }}</p>
     </div> 
 
-    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
 
         <a
         v-for="(product, idx) in products"

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

@@ -0,0 +1,50 @@
+<template>
+  <div class="py-12 mb-5">
+    <div class="w-full text-center">
+      <h2 v-if="main !== null" class="text-4xl font-semibold leading-tight font-heading">
+        {{ main.title }} 
+      </h2>
+      <p v-if="main !== null" class="mb-6 text-m tracking-widest text-gray-800">{{ main.subtitle }}</p>
+    </div> 
+
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+
+        <a
+        v-for="(product, idx) in products"
+        target="_blank"
+        :key="idx"
+        :href="product.url"
+          class="m-auto rounded overflow-hidden transition duration-500"
+        >
+        
+          <div class="px-2 py-2">
+            <g-image class="py-4" :src="img(product.image)" />
+            <!-- <div class="font-bold text-xl mb-2">{{ product.title }}</div> -->
+            <p v-html="product.content" class="text-gray-700 text-base"></p>
+          </div>
+          
+        </a>
+      
+    </div>
+  </div>
+</template>
+
+
+<script>
+export default {
+  props: ["products", "main"],
+  methods: {
+    img(image) {
+      if (!image) return "";
+      if (image.src) return image.src;
+      return image;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.bannerFondo {
+  height: 400px;
+}
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <section class="pt-8 px-4 text-center">
+  <section class="py-8 pb-20 px-4 text-center">
     <div class="max-w-2xl mx-auto mb-8">
       <h2 class="text-4xl leading-tight mb-6 font-bold font-heading">
         WORK WITH AWESOME PARTNERS

src/pages/Index.vue

@@ -16,6 +16,16 @@
         :link="$page.markdownPage.link"
       />
 
+      <g-image class="m-auto w-2/4"
+        v-if="$page.markdownPage.solution_image2"
+        :src="$page.markdownPage.solution_image2.src"
+      />
+
+       <CallToAction
+        v-if="$page.markdownPage.cta2"
+        :cta="$page.markdownPage.cta2"
+      />
+
       <ShowcaseProducts
         :main="$page.markdownPage.productsMain"
         :products="$page.markdownPage.productData"
@@ -25,15 +35,31 @@
         "
       />
 
-      <logoShowcase
+       <CallToActionbg1
-        v-if="$page.markdownPage.logos.length > 0"
+        v-if="$page.markdownPage.cta3"
-        :logos="$page.markdownPage.logos"
+        :cta="$page.markdownPage.cta3"
       />
 
-      <BrandPanel
+       <CallToActionbg2
+        v-if="$page.markdownPage.cta4"
+        :cta="$page.markdownPage.cta4"
+      />
+
+         <g-image
+        v-if="$page.markdownPage.solution_image3"
+        :src="$page.markdownPage.solution_image3.src"
+      />
+
+      <CallToAction
+        v-if="$page.markdownPage.cta5"
+        :cta="$page.markdownPage.cta5"
+      />
+     
+
+      <!-- <BrandPanel
         :brand="$page.markdownPage.brandPanel"
         v-if="$page.markdownPage.brandPanel"
-      />
+      /> -->
 
       <Comparison
         v-if="
@@ -65,7 +91,12 @@
       :signup="$page.markdownPage.signup"
       /> -->
 
-      <g-image
+       <logoShowcase
+        v-if="$page.markdownPage.logos.length > 0"
+        :logos="$page.markdownPage.logos"
+      />
+
+      <g-image class="m-auto w-3/4"
         v-if="$page.markdownPage.solution_image"
         :src="$page.markdownPage.solution_image.src"
       />
@@ -91,6 +122,8 @@
         button
         link
         solution_image
+        solution_image2
+        solution_image3
         header{
          title
          subtitle
@@ -133,6 +166,56 @@
           link2
           link3
         }
+
+        cta2{
+          id
+          title
+          content
+          button
+          button2
+          button3
+          link
+          link2
+          link3
+        }
+        cta3{
+          id
+          title1
+          title2
+          content
+          button
+          button2
+          button3
+          link
+          link2
+          link3
+        }
+        cta4{
+          id
+          title1
+          title2
+          subtitle
+          slogan
+          content
+          button
+          button2
+          button3
+          link
+          link2
+          link3
+        }
+
+        cta5{
+          id
+          title
+          content
+          button
+          button2
+          button3
+          link
+          link2
+          link3
+        }
         comparisonMain{
           id
           title
@@ -193,6 +276,8 @@ import Comparison from "~/components/custom/sections/Comparison.vue";
 import NewCard from "~/components/marketing/sections/cta-sections/NewCard.vue";
 import BrandPanel from "~/components/marketing/sections/cta-sections/BrandPanel.vue";
 import CallToAction from "~/components/custom/sections/CallToAction.vue";
+import CallToActionbg1 from "~/components/custom/sections/CallToActionbg1.vue";
+import CallToActionbg2 from "~/components/custom/sections/CallToActionbg2.vue";
 import logoShowcase from "~/components/marketing/sections/cta-sections/logoShowcase.vue";
 import InTheNews from "~/components/marketing/sections/logo-clouds/off_white_grid.vue";
 import SignUp from "~/components/custom/sections/SignUp.vue";
@@ -207,6 +292,8 @@ export default {
     BrandPanel,
     logoShowcase,
     CallToAction,
+    CallToActionbg1,
+    CallToActionbg2,
     InTheNews,
     SignUp,
   },

src/templates/MarkdownPage.vue

@@ -36,6 +36,15 @@
         v-if="$page.markdownPage.solution_image"
         :src="$page.markdownPage.solution_image.src"
       />
+
+       <ShowcaseProducts
+        :main="$page.markdownPage.productsMain"
+        :products="$page.markdownPage.productData"
+        v-if="
+          $page.markdownPage.productData &&
+          $page.markdownPage.productData.length > 0
+        "
+      />
     </div>
   </Layout>
 </template>
@@ -51,10 +60,18 @@
         header_title
         header_image
         solution_image
+       productsMain{
+          id
+          title
+          subtitle
+       #  image
+        }
        productData{
          id
          title
+         content
          image
+         url
        }
         comparisonMain{
           id
@@ -99,6 +116,7 @@ import NewCard from "~/components/marketing/sections/cta-sections/NewCard.vue";
 import Header from "~/components/marketing/sections/cta-sections/Header.vue";
 import VerticalNav from "~/components/custom/Navbar/VerticalNav.vue";
 import GetInTouch from "~/components/custom/Navbar/Getintouch.vue";
+import ShowcaseProducts from "~/components/marketing/sections/cta-sections/ShowcaseProducts.vue";
 import SolutionsHeader from "~/components/custom/sections/header/HeaderSection.vue";
 import HowItWorks from "~/components/custom/sections/HowItWorks.vue";
 import Features from "~/components/custom/sections/Features.vue";
@@ -118,6 +136,7 @@ export default {
     VerticalNav,
     GetInTouch,
     SolutionsHeader,
+    ShowcaseProducts,
     HowItWorks,
     Features,
     logoShowcase,