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

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

@@ -1,5 +1,8 @@
 ---
-id: section1
+id: private
-svg: ./private.svg
+svg: ./private.png
-title: ''
+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
+id: equal
-svg: ./equal.svg
+svg: ./equal.png
-title: ''
+title: IT IS EQUAL
+link:
 ---
 
+Scalable everywhere and to everyone.

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

@@ -1,6 +1,8 @@
 ---
-id: section3
+id: sustainable
-svg: ./sustainable.svg
+svg: ./sustainable.png
-title: ''
+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>
+
+<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,6 +25,7 @@
           <h3 class="font-bold text-2xl">{{ product.title }}</h3>
           <div v-html="product.content" class="pb-8 px-5 text-gray-600"></div>
 
+          <div v-if="product.button">
             <a
               v-if="product.url.includes('http')"
               target="_blank"
@@ -39,6 +40,7 @@
               >{{ product.button }}</g-link
             >
           </div>
+        </div>
       </a>
     </div>
   </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{