Convert why page hardcoded imgs

content/page/why/brandPanel/brandPanel.md

@@ -0,0 +1,10 @@
+---
+id: better_solution
+title: A better solution for our planet.
+subtitle:
+sourceUrl:
+btnTxt: Learn More
+image: better_solution.png
+---
+
+The current Internet consumes about 10% of the world’s energy. Data unnecessarily travels to (and is stored in) centralized data centers, which then use tremendous power to cool servers down. In ThreeFold’s peer-to-peer model, between 50-99% power savings can be achieved.

content/page/why/productData/better_solution/better_solution.md

@@ -1,6 +0,0 @@
----
-id: better_solution
-title: ""
-image: ./better_solution.png
-link: https://threefold.io/threefold/blog/post/for_our_planet/
----

content/page/why/productData/internet_available/internet_available.md

@@ -1,6 +1,9 @@
 ---
 id: internet_available
-title: ""
+title: An Internet available to everyone
 image: ./internet_available.png
+button: Learn More
 link: https://threefold.io/threefold/blog/post/more_inclusive_internet/
 ---
+
+Only 57% of the world is connected to the Internet today, despite Internet access being a human right. This is not acceptable, as digital access represents a gateway to information, knowledge, and economic opportunities. We bring a more affordable and accessible Internet solution to the world.

content/page/why/productData/peer_to_peer/peer_to_peer.md

@@ -1,6 +1,9 @@
 ---
 id: peer_to_peer
-title: ""
+title: Peer-to-peer puts people back in control
 image: ./peer_to_peer.png
+button: Learn More
 link: https://threefold.io/threefold/blog/post/what_is_peer_to_peer/
 ---
+
+Blockchain and edge computing gave birth to the era of decentralization. ThreeFold's peer-to-peer architecture is the next step in that evolution, bringing an extremely simple, super efficient and ultra secure end-to-end environment. This means users have 100% ownership and access rights over their data.

content/page/why/why.md

@@ -7,11 +7,12 @@ header_altImg: threefold
 header_excerpt: Our mission is to accelerate the transition of the data economy to a decentralized P2P model and make it possible for every person to learn, partake and succeed.
 solution_image: ./404.png
 cta: why_cta
-appsMain: product_main
+productsMain: product_main
-appData: [peer_to_peer, internet_available, better_solution]
+productData: [peer_to_peer, internet_available]
 partenershipsMain: partenerships_main
 partnerships: [solidaridad, tag, kleos, threefold]
 cta2: why_cta2
+brandPanel: better_solution
 ---
 
 <!-- header: home_header

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

@@ -1,6 +1,7 @@
 <template>
   <div class="">
     <div class="max-w-screen-xl mx-auto py-24">
+      <!-- token -->
       <div
         v-if="id == 'token'"
         class="brandpanel rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
@@ -36,6 +37,40 @@
         </div>
       </div>
 
+      <!-- why -->
+      <div
+        v-else-if="id == 'why'"
+        class="whybrand brandpanel 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-15"
+        >
+          <div class="lg:self-center text-center">
+            <h2
+              class="text-5xl leading-9 font-semibold text-black 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 mx-4 text-black" v-html="brand.content"></div>
+            <a
+              :href="brand.sourceUrl"
+              class="bg-gray-700 text-sm learn-button hover:bg-57EEF8-400 text-white px-12 py-2 mr-3 shadow rounded-full"
+              >{{ brand.btnTxt }}</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
         v-else
         class="brandpanel bg-gray-900 rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4"
@@ -83,4 +118,10 @@ export default {
     },
   },
 };
-</script>
+</script>
+
+<style scoped>
+.whybrand {
+  background-image: linear-gradient(#c2aeef, #82f3fe);
+}
+</style>

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

@@ -12,6 +12,7 @@
       </p>
     </div>
 
+    <!-- token -->
     <div
       class="grid grid-cols-1 gap-4 sm:grid-cols-3 text-center"
       v-if="id == 'token'"
@@ -31,6 +32,7 @@
       </a>
     </div>
 
+    <!-- universe -->
     <div
       class="grid grid-cols-1 gap-4 sm:grid-cols-2 text-center"
       v-else-if="id == 'universe'"
@@ -70,6 +72,46 @@
       </div>
     </div>
 
+    <!-- why -->
+    <div
+      class="grid grid-cols-1 gap-4 sm:grid-cols-2 text-center"
+      v-else-if="id == 'why'"
+    >
+      <div
+        v-for="(product, idx) in products"
+        target="_blank"
+        :key="idx"
+        :href="product.link"
+        class="m-auto rounded overflow-hidden transition duration-500"
+      >
+        <div>
+          <g-image :src="img(product.image)" />
+          <div class="product font-bold text-2xl pt-5">
+            {{ product.title }}
+          </div>
+          <div
+            v-html="product.content"
+            class="product p-5 text-gray-600"
+          ></div>
+          <div v-if="product.button" class="product mb-3 py-5 text-center">
+            <a
+              v-if="product.link.includes('http')"
+              target="_blank"
+              :href="product.link"
+              class="bg-gray-800 text-sm learn-button border-gray-900 text-white px-12 py-2 mr-5 shadow rounded-full"
+              >{{ product.button }}</a
+            >
+            <g-link
+              v-else
+              :href="product.link"
+              class="bg-gray-800 text-sm learn-button border-gray-900 text-white px-12 py-2 mr-5 shadow rounded-full"
+              >{{ product.button }}</g-link
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 text-center" v-else>
       <a
         v-for="(product, idx) in products"
@@ -121,9 +163,6 @@ export default {
       return image;
     },
   },
-  mounted() {
-    console.log(this.products);
-  },
 };
 </script>
 
@@ -131,4 +170,7 @@ export default {
 .bannerFondo {
   height: 400px;
 }
+.product {
+  background-color: #ebfefd;
+}
 </style>

src/templates/MarkdownPage.vue

@@ -71,6 +71,11 @@
         :main="$page.markdownPage.productsMain"
         :products="$page.markdownPage.productData"
       />
+      <BrandPanel
+        :id="$page.markdownPage.id"
+        :brand="$page.markdownPage.brandPanel"
+        v-if="$page.markdownPage.brandPanel"
+      />
       <Partenerships
         v-if="
           $page.markdownPage.partnerships &&
@@ -79,11 +84,7 @@
         :main="$page.markdownPage.partenershipsMain"
         :partnerships="$page.markdownPage.partnerships"
       />
-      <BrandPanel
+
-        :id="$page.markdownPage.id"
-        :brand="$page.markdownPage.brandPanel"
-        v-if="$page.markdownPage.brandPanel"
-      />
       <CallToAction
         :id="$page.markdownPage.id"
         v-if="$page.markdownPage.cta3"