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

src/components/custom/sections/Features.vue

@@ -1,8 +1,52 @@
 <template>
-  <section class="py-12 px-4">
-    <h2 class="text-4xl text-center mb-12 font-semibold font-heading">
+  <section class="py-12 px-4 text-center" v-if="id == 'home'">
+    <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>
+</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,