convert better internet sec

content/page/home/comparison/main/main.md

@@ -2,6 +2,6 @@
 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
+#button: Our Values
+#link: https://threefold.io/aci/about #add button link here
 ---

content/page/home/comparison/section1/section1.md

@@ -1,5 +1,8 @@
 ---
-id: section1
-svg: ./private.svg
-title: ''
+id: private
+svg: ./private.png
+title: IT IS PRIVATE
+link:
 ---
+
+A tamper-proof experience that allows security to coexist with efficiency.

content/page/home/comparison/section2/section2.md

@@ -1,6 +1,8 @@
 ---
-id: section2
-svg: ./equal.svg
-title: ''
+id: equal
+svg: ./equal.png
+title: IT IS EQUAL
+link:
 ---
 
+Scalable everywhere and to everyone.

content/page/home/comparison/section3/section3.md

@@ -1,6 +1,8 @@
 ---
-id: section3
-svg: ./sustainable.svg
-title: ''
+id: sustainable
+svg: ./sustainable.png
+title: IT IS SUSTAINABLE
+link:
 ---
 
+We must rethink our resource consumption if we want to save our planet.

content/page/home/home.md

@@ -18,7 +18,7 @@ cta4: home_cta4
 solution_image3: ./bg3.png
 cta5: home_cta5
 comparisonMain: comparison
-comparisonSecs: [section1, section2, section3]
+comparisonSecs: [private, equal, sustainable]
 logos: [logo1, logo2, logo3, logo4, logo5, logo6]
 inTheNews: in_the_news
 solution_image: ./cta_image.svg

src/components/custom/sections/Comparison.vue

@@ -4,7 +4,36 @@
       {{ main.title }}
     </h2>
     <p class="text-gray-600">{{ main.description }}</p>
-    <div class="flex flex-wrap items-center -mx-8 mt-12 mb-2">
+    <div class="flex flex-wrap -mx-8 mt-12 mb-2" v-if="id == 'home'">
+      <div
+        class="lg:w-1/3 px-6 mb-10"
+        v-for="(section, index) in sections"
+        :key="index"
+      >
+        <g-link :to="section.link">
+          <g-image
+            class="mx-auto"
+            :src="section.svg.src"
+            :alt="section.title"
+          />
+          <div class="part py-1">
+            <h3 class="text-2xl font-semibold font-heading">
+              <!-- <span
+            class="inline-flex items-center justify-center h-12 w-12 mr-2 border rounded-full"
+            >{{ index + 1 }}</span
+          > -->
+              {{ section.title }}
+            </h3>
+            <div
+              class="mb-4 px-5 text-black-700"
+              v-html="section.content"
+            ></div>
+          </div>
+        </g-link>
+      </div>
+    </div>
+
+    <div class="flex flex-wrap items-center -mx-8 mt-12 mb-2" v-else>
       <div
         class="lg:w-1/3 px-6 mb-2"
         v-for="(section, index) in sections"
@@ -25,25 +54,19 @@
         <div class="text-gray-700" v-html="section.content"></div>
       </div>
     </div>
-    <div>
-      <!-- <a
-        v-if="main.button"
-        class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 rounded shadow rounded-full"
-        :href="main.link"
-        >{{ main.button }}</a
-      > -->
 
+    <div v-if="main.button">
       <a
         v-if="main.link.includes('http')"
         target="_blank"
         :href="main.link"
-        class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 rounded shadow rounded-full"
+        class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 shadow rounded-full"
         >{{ main.button }}</a
       >
       <g-link
         v-else
         :href="main.link"
-        class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 rounded shadow rounded-full"
+        class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 shadow rounded-full"
         >{{ main.button }}</g-link
       >
     </div>
@@ -52,6 +75,15 @@
 
 <script>
 export default {
-  props: ["main", "sections"],
+  props: ["main", "sections", "id"],
 };
-</script>
+</script>
+
+<style scoped>
+.part {
+  height: 160px;
+  background-color: #66efc5;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+</style>

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

@@ -25,19 +25,21 @@
           <h3 class="font-bold text-2xl">{{ product.title }}</h3>
           <div v-html="product.content" class="pb-8 px-5 text-gray-600"></div>
 
-          <a
-            v-if="product.url.includes('http')"
-            target="_blank"
-            :href="product.url"
-            class="bg-gray-800 text-lg text-bold learn-button hover:bg-gray-700 text-gray-100 px-12 py-2 mr-5 shadow rounded-full transition duration-500 ease-in-out"
-            >{{ product.button }}</a
-          >
-          <g-link
-            v-else
-            :href="product.url"
-            class="bg-gray-800 text-lg text-bold learn-button hover:bg-gray-700 text-gray-100 px-12 py-2 mr-5 shadow rounded-full transition duration-500 ease-in-out"
-            >{{ product.button }}</g-link
-          >
+          <div v-if="product.button">
+            <a
+              v-if="product.url.includes('http')"
+              target="_blank"
+              :href="product.url"
+              class="bg-gray-800 text-lg text-bold learn-button hover:bg-gray-700 text-gray-100 px-12 py-2 mr-5 shadow rounded-full transition duration-500 ease-in-out"
+              >{{ product.button }}</a
+            >
+            <g-link
+              v-else
+              :href="product.url"
+              class="bg-gray-800 text-lg text-bold learn-button hover:bg-gray-700 text-gray-100 px-12 py-2 mr-5 shadow rounded-full transition duration-500 ease-in-out"
+              >{{ product.button }}</g-link
+            >
+          </div>
         </div>
       </a>
     </div>

src/pages/Index.vue

@@ -73,6 +73,7 @@
           $page.markdownPage.comparisonSecs &&
           $page.markdownPage.comparisonSecs.length > 0
         "
+        :id="$page.markdownPage.id"
         :main="$page.markdownPage.comparisonMain"
         :sections="$page.markdownPage.comparisonSecs"
       />
@@ -238,6 +239,7 @@
           id
           svg
           title
+          link
           content
         }
         brandPanel{