Merge branch 'development' of github.com:threefoldfoundation/www_threefold_io into development

content/page/home/features2/empty/index.md

@@ -0,0 +1,3 @@
+---
+id: empty
+---

content/page/home/features2/feature1/feature1.md

@@ -0,0 +1,7 @@
+---
+id: decentralize_the_internet
+svg: 
+title: Decentralize the internet
+---
+
+Bring capacity to new locations. No larger than a shoebox, the 3Node fits inside any home or office.

content/page/home/features2/feature2/feature2.md

@@ -0,0 +1,7 @@
+---
+id: connect_the_world
+svg: 
+title: Connect the world
+---
+
+Enable a more accessible, affordable, and sustainable Internet by creating shorter bridges between people and capacity.

content/page/home/features2/feature3/feature3.md

@@ -0,0 +1,5 @@
+---
+id: make_data_safe
+svg: ./titan_v2.png
+title: 
+---

content/page/home/features2/feature4/feature4.md

@@ -0,0 +1,7 @@
+---
+id: earn_passive_income
+svg: 
+title: Make Data Safe
+---
+
+Give people unbreakable storage for their data, while they keep full ownership and access rights.

content/page/home/features2/feature5/feature5.md

@@ -0,0 +1,7 @@
+---
+id: features2_sustainability
+svg: 
+title: Earn Income
+---
+
+Simply plug in your 3Node to electricity and network, and start earning ThreeFold Tokens.

content/page/home/features2/main/main.md

@@ -0,0 +1,7 @@
+---
+id: Features_home_2
+title: INTRODUCING THE TITAN V2 3NODE
+subtitle: Work with technology that can truly help change the world.
+btn: Know More
+link: https://threefold.io/info/threefold#/threefold__farming_hardware_overview?id=plug-amp-farm-3nodes
+---

content/page/home/home.md

@@ -1,14 +1,14 @@
 ---
 id: home
 metaTitle: ThreeFold | Home
-metaDesc: 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.
+metaDesc: ThreeFold is the engine for a planet positive and data sovereign Internet. A collaborative movement of people who care about a better future.
 metaImg: ./home_header.png
-header_slogan: YOU
+header_slogan: BE
-header_title: ARE THE NEW INTERNET
+header_title: THE 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: "Take Part"
+button: "We invite you to join in!"
 link: "#home"
 solution_image2: ./video_play.png
 cta2: home_cta2
@@ -26,6 +26,18 @@ inTheNews: in_the_news
 solution_image: ./cta_image.svg
 cta: home_cta
 videoPanel: home_videoPanel
+featuresMain2: Features_home_2
+features2:
+  [
+
+    decentralize_the_internet,
+    make_data_safe,
+    earn_passive_income,
+    connect_the_world,
+    empty,
+    features2_sustainability
+
+  ]
 ---
 
 <!-- header: home_header

gridsome.config.js

@@ -88,6 +88,13 @@ module.exports = {
                 path: './content/page/**/features/**/*.md',
             }
         },
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'Features2',
+                path: './content/page/**/features2/**/*.md',
+            }
+        },
         {
             use: '@gridsome/source-filesystem',
             options: {
@@ -258,6 +265,8 @@ module.exports = {
                     appData: 'Product',
                     featuresMain: 'Features',
                     features: 'Features',
+                    featuresMain2: 'Features2',
+                    features2: 'Features2',
                     logos: 'Logo',
                     cta: 'Cta',
                     cta2: 'Cta',

package.json

@@ -15,6 +15,7 @@
     "@gridsome/transformer-remark": "^0.6.2",
     "@noxify/gridsome-remark-classes": "^1.0.0",
     "@noxify/gridsome-remark-table-align": "^1.0.0",
+    "axios": "^0.21.1",
     "babel-runtime": "^6.26.0",
     "core-js": "^3.6.5",
     "gridsome": "^0.7.3",

src/components/custom/sections/Features.vue

@@ -1,8 +1,52 @@
 <template>
-  <section class="py-12 px-4">
+  <section class="py-12 px-4 text-center" v-if="id == 'home'">
-    <h2 class="text-4xl text-center mb-12 font-semibold font-heading">
+    <h2 class="text-4xl font-normal leading-tight font-heading">
       {{ main.title }}
     </h2>
+    <p v-if="main.subtitle" class="mb-6 text-2xl text-gray-800">
+      {{ main.subtitle }}
+    </p>
+    <div class="flex flex-wrap items-center -mx-4 mb-6">
+      <div
+        v-for="(feature, index) in features"
+        :key="index"
+        class="lg:w-1/3 mt-5 lg:mt-0 feature px-4 text-center"
+      >
+        <div v-if="index == 1">
+          <div class="w-1/2 lg:w-full lg:h-full mx-auto px-2 order-1">
+            <g-image :src="feature.svg" :alt="feature.title" />
+          </div>
+        </div>
+
+        <div v-else>
+          <span v-if="index !== 4" class="img-border"></span>
+          <h2 class="text-x2 mt-5 mb-3 font-normal font-heading leading-9">
+            {{ feature.title }}
+          </h2>
+          <div
+            v-html="feature.content"
+            class="text-lg text-gray-700 leading-relaxed"
+          ></div>
+        </div>
+      </div>
+    </div>
+    <div class="border-wrap mx-auto mt-20" v-if="main.btn">
+      <g-link
+        class="inline-block py-2 module px-2 leading-none text-white hover:bg-gray-700 rounded shadow"
+        :to="main.link"
+        >{{ main.btn }}</g-link
+      >
+      <!-- <div v-html="main.content" class="text-sm text-gray-400 mt-5"></div> -->
+    </div>
+  </section>
+
+  <section class="py-12 px-4" v-else>
+    <h2 class="text-4xl text-center mb-12 font-normal font-heading">
+      {{ main.title }}
+    </h2>
+     <p v-if="main.subtitle" class="mb-6 text-2xl text-center font-ligh text-gray-800">
+      {{ main.subtitle }}
+    </p>
     <div class="flex flex-wrap -mx-4 mb-6">
       <div
         v-for="feature in features"
@@ -10,17 +54,17 @@
         class="lg:w-1/2 px-4 mb-6 text-center"
       >
         <g-image
-          class="w-10 h-10 mx-auto"
+          class="w-1/3 mx-auto"
           v-if="feature.svg"
           :src="feature.svg.src"
           :alt="feature.svg"
         ></g-image>
-        <h3 class="text-xl my-3 font-semibold font-heading">
+        <h2 class="text-3xl mt-5 mb-3 font-normal font-heading">
           {{ feature.title }}
-        </h3>
+        </h2>
         <div
           v-html="feature.content"
-          class="text-sm text-gray-700 leading-relaxed"
+          class="text-lg text-gray-700 leading-relaxed"
         ></div>
       </div>
     </div>
@@ -37,6 +81,36 @@
 
 <script>
 export default {
-  props: ["main", "features"],
+  props: ["id", "main", "features"],
 };
 </script>
+
+<style scoped>
+.img-border {
+  display: block;
+  width: 50px;
+  margin: auto;
+  height: 5px;
+  background: linear-gradient(to right, #b8a5e9, #2e3192);
+}
+
+.border-wrap {
+  max-width: 250px;
+  padding: 1rem;
+  position: relative;
+  background: linear-gradient(to right, #b8a5e9, #23256e);
+  padding: 3px;
+  border-radius: 20px;
+}
+
+.module {
+  width: 245px;
+  background: #252e6e;
+  color: white;
+  text-align: center;
+  border-radius: 20px;
+}
+.feature {
+  max-height: 315px !important;
+}
+</style>

src/pages/Index.vue

@@ -36,14 +36,14 @@
         :header="$page.markdownPage.header"
       /> -->
 
-      <ShowcaseProducts
+      <!-- <ShowcaseProducts
         :main="$page.markdownPage.productsMain"
         :products="$page.markdownPage.productData"
         v-if="
           $page.markdownPage.productData &&
           $page.markdownPage.productData.length > 0
         "
-      />
+      /> -->
 
       <!-- <CallToActionbg1
         v-if="$page.markdownPage.cta3"
@@ -60,6 +60,12 @@
         :cta="$page.markdownPage.cta5"
       /> -->
 
+      <Features
+        :id="$page.markdownPage.id"
+        :main="$page.markdownPage.featuresMain2"
+        :features="$page.markdownPage.features2"
+      />
+
       <BrandPanel
         :brand="$page.markdownPage.brandPanel"
         v-if="$page.markdownPage.brandPanel"
@@ -233,6 +239,20 @@
           link2
           link3
         }
+        featuresMain2{
+          id
+          title 
+          subtitle
+          btn 
+          link
+          content
+        }
+        features2{
+          id
+          title 
+          svg
+          content
+        }
         comparisonMain{
           id
           title
@@ -315,6 +335,7 @@ import Header from "~/components/marketing/sections/cta-sections/Header.vue";
 import SolutionsHeader from "~/components/custom/sections/header/HeaderSection.vue";
 import ShowcaseProducts from "~/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue";
 import Comparison from "~/components/custom/sections/Comparison.vue";
+import Features from "~/components/custom/sections/Features.vue";
 import NewCard from "~/components/marketing/sections/cta-sections/NewCard.vue";
 import BrandPanel from "~/components/marketing/sections/cta-sections/BrandPanel.vue";
 import BrandPanel2 from "~/components/marketing/sections/cta-sections/BrandPanel2.vue";
@@ -329,6 +350,7 @@ import VideoPanel from "~/components/custom/VideoPanel.vue";
 export default {
   components: {
     Header,
+    Features,
     SolutionsHeader,
     ShowcaseProducts,
     Comparison,