update products

content/page/contact/contact.md

@@ -9,6 +9,7 @@ slides:
     digital_sovereignty_for_everyone,
     a_new_internet_for_our_planet,
   ]
-productMain: contact_product
+productData: [img_1, img_2, img_3, img_4, img_5, img_6]
+productsMain: graph_home
 contactData: [collaborate, support, press, join]
 ---

content/page/contact/productData/main/main.md

@@ -1,5 +1,6 @@
 ---
-id: contact_product
+id: graph_home
-subtitle: subtitle
+title: 'Products'
-title: title
+subtitle: 'subtitle'
----
+image : ./tech_infogram.png
+---

content/page/contact/productData/product1/product1.md

@@ -1,6 +1,6 @@
 ---
-id: contact_product1
+id: img_1
-title: myproducts
+title: ''
-content: ayklamdsf
+excerpt: ''
-
+image : ./img_1.png
 ---

content/page/contact/productData/product2/product2.md

@@ -1,6 +1,6 @@
 ---
-id: contact_product2
+id: img_2
-title: myproducts2
+title: ''
-content: ayklamdsf2
+excerpt: ''
-
+image : ./img_2.png
 ---

content/page/contact/productData/product3/product3.md

@@ -1,6 +1,6 @@
 ---
-id: contact_product3
+id: img_3
-title: myproducts
+title: ''
-content: ayklamdsf
+excerpt: ''
-
+image : ./img_3.png
 ---

content/page/contact/productData/product4/product4.md

@@ -0,0 +1,6 @@
+---
+id: img_4
+title: ''
+excerpt: ''
+image : ./img_4.png
+---

content/page/contact/productData/product5/product5.md

@@ -0,0 +1,6 @@
+---
+id: img_5
+title: ''
+excerpt: ''
+image : ./img_5.png
+---

content/page/contact/productData/product6/product6.md

@@ -0,0 +1,6 @@
+---
+id: img_6
+title: ''
+excerpt: ''
+image : ./img_6.png
+---

gridsome.config.js

@@ -64,7 +64,13 @@ module.exports = {
                 path: './content/page/**/productData/**/*.md',
             }
         },
-
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'ProductTitle',
+                path: './content/page/**/productData/**/*.md',
+            }
+        },
         {
             use: '@gridsome/source-filesystem',
             options: {
@@ -163,8 +169,8 @@ module.exports = {
                     header: 'Header',
                     howItWorks: 'HowItWorks',
                     howItWorksMain: 'HowItWorks',
+                    productsMain: 'ProductTitle',
                     productData: 'Product',
-                    productMain: 'Product',
                     featuresMain: 'Features',
                     features: 'Features',
                     logos: 'Logo',

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

@@ -1,35 +1,26 @@
 <template>
-  <div>
+  <div class="py-8 mb-5">
-    <div
+    <div class="w-full text-center">
-      class="bannerFondo bg-green-800 bg-left-top bg-auto bg-repeat-x"
+      <p class="text-sm tracking-widest text-gray-700">{{ main.subtitle }}</p>
-      style="background-image: url(./img/continuartl_4.png)"
+      <h1 class="text-4xl mt-2 mb-6 leading-tight font-heading">
-    ></div>
+        {{ main.title }}
+      </h1>
+      <g-image :src="img(main.image)" class="hidden md:block" />
+    </div>
 
-    <div class="-mt-64">
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:hidden">
-      <div class="w-full text-center">
+      <div
-        <p class="text-sm tracking-widest text-white">{{ main.subtitle }}</p>
+        v-for="(product, idx) in products"
-        <h1 class="font-bold text-5xl text-white">{{ main.title }}</h1>
+        :key="idx"
-      </div>
+        class="p-2 sm:p-0 text-center cursor-pointer"
-
+      >
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
         <div
-          v-for="(product, idx) in products"
+          class="m-auto max-w-sm rounded overflow-hidden shadow-lg hover:bg-white transition duration-500 bg-white"
-          :key="idx"
-          class="p-2 sm:p-10 text-center cursor-pointer"
         >
-          <div
+          <div class="px-2 py-2">
-            class="py-16 max-w-sm rounded overflow-hidden shadow-lg hover:bg-white transition duration-500 bg-white"
+            <g-image :src="img(product.image)" />
-          >
+            <!-- <div class="font-bold text-xl mb-2">{{ product.title }}</div> -->
-            <div class="space-y-10">
+            <p v-html="product.content" class="text-gray-700 text-base"></p>
-              <i class="fa fa-spa" style="font-size: 48px"></i>
-
-              <div class="px-6 py-4">
-                <div class="space-y-5">
-                  <div class="font-bold text-xl mb-2">{{ product.title }}</div>
-                  <p class="text-gray-700 text-base">{{ product.excerpt }}</p>
-                </div>
-              </div>
-            </div>
           </div>
         </div>
       </div>
@@ -41,6 +32,13 @@
 <script>
 export default {
   props: ["products", "main"],
+  methods: {
+    img(image) {
+      if (!image) return "";
+      if (image.src) return image.src;
+      return image;
+    },
+  },
 };
 </script>
 

src/templates/MarkdownPage.vue

@@ -24,6 +24,15 @@
         :card="card"
       />
 
+     <ShowcaseProducts
+        :main="$page.markdownPage.productsMain"
+        :products="$page.markdownPage.productData"
+        v-if="
+          $page.markdownPage.productData &&
+          $page.markdownPage.productData.length > 0
+        "
+      />
+
       <GetInTouch
         :contacts="$page.markdownPage.contactData"
         v-if="$page.markdownPage.contactData.length > 0"
@@ -34,15 +43,6 @@
         :header="$page.markdownPage.header"
       />
 
-      <ShowcaseProducts
-        :main="$page.markdownPage.productMain"
-        :products="$page.markdownPage.productData"
-        v-if="
-          $page.markdownPage.productData &&
-          $page.markdownPage.productData.length > 0
-        "
-      />
-
       <HowItWorks
         v-if="$page.markdownPage.howItWorks.length > 0"
         :HIWData="$page.markdownPage.howItWorks"
@@ -164,15 +164,17 @@
          title
          image
        }
-       productMain{
+       productsMain{
-         id
+          id
-         subtitle
+          title
-         title
+          subtitle
-       }
+          image
+        }
        productData{
          id
          title
          excerpt
+         image
        }
        brandPanel{
          id