add 3Node section

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

@@ -25,6 +25,18 @@ logos: [logo1, logo2, logo3, logo4, logo5, logo6]
 inTheNews: in_the_news
 solution_image: ./cta_image.svg
 cta: home_cta
+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: {
@@ -250,6 +257,8 @@ module.exports = {
                     appData: 'Product',
                     featuresMain: 'Features',
                     features: 'Features',
+                    featuresMain2: 'Features2',
+                    features2: 'Features2',
                     logos: 'Logo',
                     cta: 'Cta',
                     cta2: 'Cta',

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

@@ -59,6 +59,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"
@@ -232,6 +238,20 @@
           link2
           link3
         }
+        featuresMain2{
+          id
+          title 
+          subtitle
+          btn 
+          link
+          content
+        }
+        features2{
+          id
+          title 
+          svg
+          content
+        }
         comparisonMain{
           id
           title
@@ -308,6 +328,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";
@@ -321,6 +342,7 @@ import SignUp from "~/components/custom/sections/SignUp.vue";
 export default {
   components: {
     Header,
+    Features,
     SolutionsHeader,
     ShowcaseProducts,
     Comparison,