init CTA

content/page/home/home.md

@@ -5,8 +5,8 @@ header_title: ARE THE NEW INTERNET
 header_image: ./home_header.png
 header_altImg: threefold
 header_excerpt: Welcome to the world’s largest peer-to-peer internet, formed by people who want to make a difference, by people who care, by people just like you.
-button: 'Take Part'
-link: ''
+button: "Take Part"
+link: "#home"
 solution_image2: ./video_play.png
 cta2: home_cta2
 productsMain: product

content/page/why/why.md

@@ -7,10 +7,11 @@ header_altImg: threefold
 header_excerpt: Our mission is 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
-productsMain: "product_main"
-productData: [peer_to_peer, internet_available, better_solution]
+appsMain: product_main
+appData: [peer_to_peer, internet_available, better_solution]
 partenershipsMain: partenerships_main
 partnerships: [solidaridad, tag, kleos, threefold]
+cta2: why_cta2
 ---
 
 <!-- header: home_header

gridsome.config.js

@@ -244,6 +244,8 @@ module.exports = {
                     howItWorksMain: 'HowItWorks',
                     productsMain: 'ProductTitle',
                     productData: 'Product',
+                    appsMain: 'ProductTitle',
+                    appData: 'Product',
                     featuresMain: 'Features',
                     features: 'Features',
                     logos: 'Logo',

src/components/custom/sections/CallToAction.vue

@@ -1,56 +1,49 @@
 <template>
   <section class="pb-20 px-4 bg-cover text-center">
-   
-    <div class="w-full max-w-7xl mx-auto"
-    v-if="id == 'why'"
-    >
+    <div class="w-full max-w-2xl mx-auto" v-if="id == 'why'">
       <h2
         v-if="cta.title"
-        class="text-5xl text-center uppercase mb-0 leading-none font-light font-heading"
+        class="text-6xl text-center uppercase mb-2 leading-none font-light font-heading"
       >
         {{ cta.title }}
       </h2>
       <span
-          class="text-center uppercase mb-6 leading-none text-5xl font-black font-heading"
+        class="text-center uppercase leading-none text-5xl text-gray-800 font-black font-heading"
       >
         {{ cta.slogan }}
       </span>
       <div
         v-html="cta.content"
-        class="mb-8 text-center text-lg text-gray-800"
+        class="mb-8 mt-10 text-center text-lg text-gray-800"
       ></div>
       <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
         <a
           @click="toggleModal"
-          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"
+          class="inline-block bg-gray-900 text-sm learn-button hover:bg-gray-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
           >{{ cta.video_button }}</a
         >
       </div>
       <a
-        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"
+        class="inline-block bg-gray-900 text-sm learn-button hover:bg-gray-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
         target="_blank"
         v-if="cta.button"
         :href="cta.link"
         >{{ cta.button }}</a
       >
       <g-link
-        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"
+        class="inline-block bg-gray-900 text-sm learn-button hover:bg-gray-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
         v-if="cta.button2"
         :to="cta.link2"
         >{{ cta.button2 }}</g-link
       >
       <g-link
-        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"
+        class="inline-block bg-gray-900 text-sm learn-button hover:bg-gray-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
         v-if="cta.button3"
         :to="cta.link3"
         >{{ cta.button3 }}</g-link
       >
     </div>
 
-    
-
-
-
     <div class="w-full max-w-7xl mx-auto" v-else>
       <h2
         v-if="cta.title"
@@ -119,7 +112,7 @@ export default {
     },
   },
   mounted() {
-    console.log(this.id)
-  }
+    console.log(this.id);
+  },
 };
 </script>

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

@@ -1,14 +1,18 @@
 <template>
   <div class="py-12 mb-5">
     <div class="w-full text-center">
-      <h2 v-if="main !== null" class="text-4xl font-semibold leading-tight font-heading">
+      <h2
+        v-if="main !== null"
+        class="text-4xl font-semibold leading-tight font-heading"
+      >
         {{ main.title }}
       </h2>
-      <p v-if="main !== null" class="mb-6 text-m tracking-widest text-gray-800">{{ main.subtitle }}</p>
+      <p v-if="main !== null" class="mb-6 text-m tracking-widest text-gray-800">
+        {{ main.subtitle }}
+      </p>
     </div>
 
     <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-
       <a
         v-for="(product, idx) in products"
         target="_blank"
@@ -16,15 +20,12 @@
         :href="product.url"
         class="m-auto rounded overflow-hidden transition duration-500"
       >
-        
         <div class="px-2 py-2">
           <g-image class="py-4" :src="img(product.image)" />
           <!-- <div class="font-bold text-xl mb-2">{{ product.title }}</div> -->
           <p v-html="product.content" class="text-gray-700 text-base"></p>
         </div>
-          
       </a>
-      
     </div>
   </div>
 </template>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="py-12 mb-5">
+  <div class="py-12 mb-5" id="home">
     <div class="w-full text-center">
       <h2 v-if="main !== null" class="text-4xl font-semibold leading-tight font-heading">
         {{ main.title }} 

src/templates/MarkdownPage.vue

@@ -45,11 +45,10 @@
       <div class="container sm:pxi-0 mx-auto mt-8 overflow-x-hidden">
         <AppListItem
           v-if="
-            $page.markdownPage.productData &&
-            $page.markdownPage.productData.length > 0
+            $page.markdownPage.appData && $page.markdownPage.appData.length > 0
           "
-          :products="$page.markdownPage.productData"
-          :main="$page.markdownPage.productsMain"
+          :products="$page.markdownPage.appData"
+          :main="$page.markdownPage.appsMain"
         />
       </div>
       <Partenerships
@@ -62,7 +61,13 @@
       />
     </div>
 
-    <!-- <div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
+    <CallToAction
+      :id="$page.markdownPage.id"
+      v-if="$page.markdownPage.cta2"
+      :cta="$page.markdownPage.cta2"
+    />
+
+    <div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
       <ShowcaseProducts
         v-if="
           $page.markdownPage.productData &&
@@ -71,7 +76,7 @@
         :main="$page.markdownPage.productsMain"
         :products="$page.markdownPage.productData"
       />
-    </div> -->
+    </div>
   </Layout>
 </template>
 
@@ -90,7 +95,7 @@
        productsMain{
           id
           title
-          slogan
+          subtitle
           content
        #  image
         }
@@ -101,6 +106,21 @@
          image
          link
        }
+
+      appsMain{
+          id
+          title
+          slogan
+          content
+       #  image
+        }
+       appData{
+         id
+         title
+         content
+         image
+         link
+       }
         comparisonMain{
           id
           title
@@ -125,6 +145,13 @@
           button
           link
         }
+        cta2{
+          title
+          slogan
+          content
+          button
+          link
+        }
         brandPanel{
          id
          title