updated internet is broken / grid solution section

content/page/home/brandPanel2/brandPanel2.md

@@ -0,0 +1,17 @@
+---
+id: grid_solution
+title: THE THREEFOLD GRID IS THE ONLY TRUE SOLUTION
+subtitle: ''
+sourceUrl: https://threefold.io/info/threefold#/threefold__grid_why
+btnTxt: Know More
+sourceUrl2: https://explorer.threefold.io/
+btnTxt2: Live Stats
+image: grid_solution.png # src/assets/brandPanel/..
+---
+
+We did what nobody else has done. We rebuilt the architecture from the ground up – a unique stateless operating system and an automation layer to remove all intermediaries and enable anyone to connect hardware, anywhere around the world. A real, long-lasting solution, not just a bandaid approach.
+
+<br/>
+Without the ThreeFold Grid, the peer-to-peer Internet the world needs is not possible.
+
+<!--  to remove all intermediaries and enable anyone to connect hardware, anywhere around the world. A real, long-lasting solution, not just a bandaid approach. -->

content/page/home/home.md

@@ -11,6 +11,8 @@ solution_image2: ./video_play.png
 cta2: home_cta2
 productsMain: product
 productData: [nodes_home, tokens_home, storage_home]
+brandPanel: fix_internet
+brandPanel2: grid_solution
 cta3: home_cta3
 cta4: home_cta4
 solution_image3: ./bg3.png
@@ -25,4 +27,4 @@ cta: home_cta
 
 <!-- header: home_header
 solution_image: ./home_header.png -->
-<!-- brandPanel: fix_internet -->
+<!--  -->

gridsome.config.js

@@ -197,6 +197,14 @@ module.exports = {
             }
         },
 
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'BrandPanel2',
+                path: './content/page/**/brandPanel2/*.md',
+            }
+        },
+
         {
             use: '@gridsome/source-filesystem',
             options: {
@@ -239,6 +247,7 @@ module.exports = {
                     plans: 'Plans',
                     inTheNews: 'InTheNews',
                     brandPanel: 'BrandPanel',
+                    brandPanel2: 'BrandPanel2',
                     allSlides: 'About'
                 }
             }

src/components/custom/sections/Comparison.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="py-12 px-4 text-center">
+  <section class="py-24 px-4 text-center">
     <h2 class="text-4xl mb-2 leading-tight font-semibold font-heading">
       {{ main.title }}
     </h2>

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

@@ -0,0 +1,58 @@
+<template>
+  <div class="">
+    <div class="max-w-screen-xl mx-auto py-2">
+      <div
+        class="brandpanel bg-white rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
+      >
+        <div
+          class="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-10"
+        >
+          <div class="lg:self-center">
+            <h2
+              class="text-3xl leading-9 font-extrabold sm:leading-10"
+            >
+              <span class="block">{{ brand.title }}</span>
+              <span class="block" v-if="brand.subtitle">{{
+                brand.subtitle
+              }}</span>
+            </h2>
+            <div
+              class="py-6 mt-4 text-lg leading-6"
+              v-html="brand.content"
+            ></div>
+            <a
+              :href="brand.sourceUrl"
+              class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+              >{{ brand.btnTxt }}</a
+            >
+            <a
+              :href="brand.sourceUrl2"
+              class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+              >{{ brand.btnTxt2 }}</a
+            >
+          </div>
+        </div>
+        <div class="relative pb-3/5 -mt-6 md:pb-1/2">
+          <g-image
+            class="absolute brandpanel inset-0 w-full h-full transform translate-x-0 translate-y-6 rounded-md object-fill object-left-top sm:translate-x-0 lg:translate-y-20"
+            :src="image"
+            :alt="brand.title"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["brand"],
+  computed: {
+    image() {
+      return this.brand.image.src
+        ? this.brand.image.src
+        : require(`!!assets-loader!@images/brandPanel/${this.brand.image}`);
+    },
+  },
+};
+</script>

src/pages/Index.vue

@@ -35,31 +35,35 @@
         "
       />
 
-       <CallToActionbg1
+      <!-- <CallToActionbg1
         v-if="$page.markdownPage.cta3"
         :cta="$page.markdownPage.cta3"
-      />
+      /> -->
 
-       <CallToActionbg2
+      <!-- <CallToActionbg2
         v-if="$page.markdownPage.cta4"
         :cta="$page.markdownPage.cta4"
-      />
+      /> -->
 
-         <g-image
+      <!-- <g-image
         v-if="$page.markdownPage.solution_image3"
         :src="$page.markdownPage.solution_image3.src"
-      />
+      /> -->
 
-      <CallToAction
+      <!-- <CallToAction
         v-if="$page.markdownPage.cta5"
         :cta="$page.markdownPage.cta5"
-      />
+      /> -->
 
-
+      <BrandPanel
-      <!-- <BrandPanel
         :brand="$page.markdownPage.brandPanel"
         v-if="$page.markdownPage.brandPanel"
-      /> -->
+      />
+
+      <BrandPanel2
+        :brand="$page.markdownPage.brandPanel2"
+        v-if="$page.markdownPage.brandPanel2"
+      />
 
       <Comparison
         v-if="
@@ -237,6 +241,17 @@
          sourceUrl
          btnTxt
          image
+       }
+        brandPanel2{
+         id
+         title
+         subtitle
+         content
+         sourceUrl
+         btnTxt
+         sourceUrl2
+         btnTxt2
+         image
        }
         logos{
           id
@@ -275,6 +290,7 @@ import ShowcaseProducts from "~/components/marketing/sections/cta-sections/Showc
 import Comparison from "~/components/custom/sections/Comparison.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";
 import CallToAction from "~/components/custom/sections/CallToAction.vue";
 import CallToActionbg1 from "~/components/custom/sections/CallToActionbg1.vue";
 import CallToActionbg2 from "~/components/custom/sections/CallToActionbg2.vue";
@@ -290,6 +306,7 @@ export default {
     Comparison,
     NewCard,
     BrandPanel,
+    BrandPanel2,
     logoShowcase,
     CallToAction,
     CallToActionbg1,