From 14379bfdb8658b57e70a59f0b459c8a69c103da3 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Thu, 29 Jul 2021 08:57:32 +0000
Subject: [PATCH] reduce support page spacees and add btns

---
 .../support/contactData/contact1/contact1.md  |   6 -
 .../support/contactData/contact2/contact2.md  |   6 -
 .../support/contactData/contact3/contact3.md  |   6 -
 .../support/contactData/contact4/contact4.md  |   6 -
 content/page/support/header3/header3.md       |  10 --
 content/page/support/logos/main/main.md       |   4 +
 .../productData/farming_faq/farming_faq.md    |   2 +-
 content/page/support/productData/main/main.md |   2 +-
 .../page/support/productData/tf_faq/tf_faq.md |   2 +-
 .../productData/token_faq/token_faq.md        |   2 +-
 content/page/support/support.md               |   4 +-
 gridsome.config.js                            |   9 +
 .../custom/sections/header/HeaderSection.vue  |  36 +++-
 .../cta-sections/ShowcaseProducts.vue         | 155 ++++++++++++++++--
 .../sections/cta-sections/logoShowcase.vue    |  10 +-
 .../faq-sections/CenteredAccordion.vue        |   3 -
 src/templates/MarkdownPage.vue                |  17 +-
 17 files changed, 213 insertions(+), 67 deletions(-)
 delete mode 100644 content/page/support/contactData/contact1/contact1.md
 delete mode 100644 content/page/support/contactData/contact2/contact2.md
 delete mode 100644 content/page/support/contactData/contact3/contact3.md
 delete mode 100644 content/page/support/contactData/contact4/contact4.md
 delete mode 100644 content/page/support/header3/header3.md
 create mode 100644 content/page/support/logos/main/main.md

diff --git a/content/page/support/contactData/contact1/contact1.md b/content/page/support/contactData/contact1/contact1.md
deleted file mode 100644
index 28863657f..000000000
--- a/content/page/support/contactData/contact1/contact1.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-id: contact1
-title: PR / Press Inquiries
-mail: 'press@threefold.io'
-phone: ''
----
diff --git a/content/page/support/contactData/contact2/contact2.md b/content/page/support/contactData/contact2/contact2.md
deleted file mode 100644
index f054c5d94..000000000
--- a/content/page/support/contactData/contact2/contact2.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-id: contact2
-title: Partnerships
-mail: 'partners@threefold.io'
-phone: ''
----
diff --git a/content/page/support/contactData/contact3/contact3.md b/content/page/support/contactData/contact3/contact3.md
deleted file mode 100644
index 9d41690ee..000000000
--- a/content/page/support/contactData/contact3/contact3.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-id: contact3
-title: Token Listing Proposals
-mail: 'listing@threefold.io'
-phone: ''
----
diff --git a/content/page/support/contactData/contact4/contact4.md b/content/page/support/contactData/contact4/contact4.md
deleted file mode 100644
index 438d6642b..000000000
--- a/content/page/support/contactData/contact4/contact4.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-id: contact4
-title: 3Node Shop Inquries
-mail: 'info@threefold.io'
-phone: ''
----
diff --git a/content/page/support/header3/header3.md b/content/page/support/header3/header3.md
deleted file mode 100644
index e4fbbe43b..000000000
--- a/content/page/support/header3/header3.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-id: telegram
-title: ''
-subtitle: Join our communities on Telegram
-btn1: ''
-link1: ''
-btn2: ''
-link2: ''
----
-
diff --git a/content/page/support/logos/main/main.md b/content/page/support/logos/main/main.md
new file mode 100644
index 000000000..e0d0d3766
--- /dev/null
+++ b/content/page/support/logos/main/main.md
@@ -0,0 +1,4 @@
+---
+id: logosMain
+title: Join our communities on Telegram
+---
\ No newline at end of file
diff --git a/content/page/support/productData/farming_faq/farming_faq.md b/content/page/support/productData/farming_faq/farming_faq.md
index 620bb45d5..96aa4632d 100644
--- a/content/page/support/productData/farming_faq/farming_faq.md
+++ b/content/page/support/productData/farming_faq/farming_faq.md
@@ -3,7 +3,7 @@ id: farming_faq
 title: ThreeFold Farming FAQ
 image: ./farming_faq.png
 button: FAQ
-url: https://threefold.io/farming/faq
+link: https://threefold.io/farming/faq
 ---
 
 Find all the information you need to understand what is ThreeFold Farming and how to set up your farm.
diff --git a/content/page/support/productData/main/main.md b/content/page/support/productData/main/main.md
index 1efb5e2ae..d56f0c619 100644
--- a/content/page/support/productData/main/main.md
+++ b/content/page/support/productData/main/main.md
@@ -1,5 +1,5 @@
 ---
-id: faq
+id: faqMain
 title: FAQ
 subtitle: See some of the Most Freaquently Asked Questions answered in FAQs. You might already find what you're looking for.
 ---
\ No newline at end of file
diff --git a/content/page/support/productData/tf_faq/tf_faq.md b/content/page/support/productData/tf_faq/tf_faq.md
index 4120b750d..bf32ccd64 100644
--- a/content/page/support/productData/tf_faq/tf_faq.md
+++ b/content/page/support/productData/tf_faq/tf_faq.md
@@ -3,7 +3,7 @@ id: tf_faq
 title:  Main ThreeFold FAQ
 image: ./threefold_faq.png
 button: FAQ
-url: /faq
+link: /faq
 ---
 
 Learn more about ThreeFold, our ethos, structure, how we compare with other projects and how to join the movement.
\ No newline at end of file
diff --git a/content/page/support/productData/token_faq/token_faq.md b/content/page/support/productData/token_faq/token_faq.md
index ed769b891..5bd1c103e 100644
--- a/content/page/support/productData/token_faq/token_faq.md
+++ b/content/page/support/productData/token_faq/token_faq.md
@@ -3,7 +3,7 @@ id: token_faq
 title: ThreeFold Token FAQ
 image: ./token_faq.png
 button: FAQ
-url: ''
+link: ''
 ---
 
 Understand what the ThreeFold Token is, it's utility in the ThreeFold ecosystem and how to charge your wallet.
\ No newline at end of file
diff --git a/content/page/support/support.md b/content/page/support/support.md
index eaff57f85..5285a3863 100644
--- a/content/page/support/support.md
+++ b/content/page/support/support.md
@@ -10,12 +10,12 @@ header_altImg: support
 header_excerpt: ''
 button: ''
 link: ''
-productsMain2: faq
+productsMain2: faqMain
 productData2: [tf_faq, farming_faq, token_faq]
 header: forum
 solution_image2: ./forum.png
 header2: forum_button
 header3: telegram
+logosMain: logosMain
 logos: [tele_1, tele_2, tele_3, tele_4, tele_5]
-contactData: [contact1, contact2, contact3, contact4]
 ---
\ No newline at end of file
diff --git a/gridsome.config.js b/gridsome.config.js
index 8b105177b..e0e10252f 100644
--- a/gridsome.config.js
+++ b/gridsome.config.js
@@ -125,6 +125,14 @@ module.exports = {
                 path: './content/page/**/features2/**/*.md',
             }
         },
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'LogosMain',
+                path: './content/page/**/logos/main/*.md',
+            }
+        },
+
         {
             use: '@gridsome/source-filesystem',
             options: {
@@ -357,6 +365,7 @@ module.exports = {
                     featuresMain2: 'Features2',
                     features2: 'Features2',
                     logos: 'Logo',
+                    logosMain: 'LogosMain',
                     cta: 'Cta',
                     cta2: 'Cta',
                     cta3: 'Cta',
diff --git a/src/components/custom/sections/header/HeaderSection.vue b/src/components/custom/sections/header/HeaderSection.vue
index 08c62ef1f..7b5b290db 100644
--- a/src/components/custom/sections/header/HeaderSection.vue
+++ b/src/components/custom/sections/header/HeaderSection.vue
@@ -6,17 +6,46 @@
         {{ header.subtitle }}
       </h2>
       <div
+        v-if="header.content"
         v-html="header.content"
         class="mb-8 text-gray-700 leading-relaxed"
       ></div>
       <div>
         <g-link
-          class="inline-block bg-green-500 text-sm text-white learn-button hover:bg-green-600 px-8 py-2 mr-2 my-0 rounded shadow rounded-full active--exact active"
-          v-if="header.btn1" 
+          class="
+            inline-block
+            bg-green-500
+            text-sm text-white
+            learn-button
+            hover:bg-green-600
+            px-8
+            py-2
+            mr-2
+            my-0
+            rounded
+            shadow
+            rounded-full
+            active--exact active
+          "
+          v-if="header.btn1"
           :to="header.link1"
           >{{ header.btn1 }}</g-link
         ><g-link
-          class="inline-block bg-teal-300 text-sm learn-button hover:bg-teal-400 text-gray-900 px-12 py-2 mr-3 my-2  rounded shadow rounded-full"
+          class="
+            inline-block
+            bg-teal-300
+            text-sm
+            learn-button
+            hover:bg-teal-400
+            text-gray-900
+            px-12
+            py-2
+            mr-3
+            my-2
+            rounded
+            shadow
+            rounded-full
+          "
           v-if="header.btn2"
           :to="header.link2"
           >{{ header.btn2 }}</g-link
@@ -32,5 +61,4 @@ export default {
 };
 </script>
 <style scoped>
-
 </style>
diff --git a/src/components/marketing/sections/cta-sections/ShowcaseProducts.vue b/src/components/marketing/sections/cta-sections/ShowcaseProducts.vue
index fb44e5cc9..9a00cb0fe 100644
--- a/src/components/marketing/sections/cta-sections/ShowcaseProducts.vue
+++ b/src/components/marketing/sections/cta-sections/ShowcaseProducts.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="py-0 mb-5 mx-4">
-    <div class="text-center mx-auto my-4" v-if="id == 'why'"> 
+    <div class="text-center mx-auto my-4" v-if="id == 'why'">
       <h1 class="text-4xl text-gray-900 font-light sm:text-9xl sm:leading-10">
         {{ main.title }} <span class="font-extrabold">{{ main.subtitle }}</span>
       </h1>
@@ -26,7 +26,7 @@
       class="grid grid-cols-1 gap-4 sm:grid-cols-3 text-center"
       v-if="id == 'token'"
     >
-      <a 
+      <a
         v-for="(product, idx) in products"
         target="_blank"
         :key="idx"
@@ -53,7 +53,14 @@
         target="_blank"
         :key="idx"
         :href="product.link"
-        class="m-auto rounded overflow-hidden transition duration-500 bg-gray-100"
+        class="
+          m-auto
+          rounded
+          overflow-hidden
+          transition
+          duration-500
+          bg-gray-100
+        "
       >
         <div>
           <g-image :src="img(product.image)" />
@@ -66,13 +73,35 @@
               v-if="product.link.includes('http')"
               target="_blank"
               :href="product.link"
-              class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 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
+              "
               >{{ product.button }}</a
             >
             <a
               v-else
               :href="product.link"
-              class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 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
+              "
               >{{ product.button }}</a
             >
           </div>
@@ -103,13 +132,35 @@
               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"
+              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
             >
             <a
               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"
+              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
             >
           </div>
@@ -117,6 +168,66 @@
       </div>
     </div>
 
+    <!-- Support -->
+
+    <div
+      class="grid grid-cols-1 gap-4 sm:grid-cols-3 text-center"
+      v-else-if="id == 'support'"
+    >
+      <a
+        v-for="(product, idx) in products"
+        target="_blank"
+        :key="idx"
+        :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>
+          <div v-html="product.content" class="text-gray-700 text-base"></div>
+          <div v-if="product.button" class="my-5 text-center">
+            <a
+              v-if="product.link.includes('http')"
+              target="_blank"
+              :href="product.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
+              "
+              >{{ product.button }}</a
+            >
+            <a
+              v-else
+              :href="product.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
+              "
+              >{{ product.button }}</a
+            >
+          </div>
+        </div>
+      </a>
+    </div>
+
     <div class="grid grid-cols-1 gap-4 sm:grid-cols-3 text-center" v-else>
       <a
         v-for="(product, idx) in products"
@@ -132,7 +243,7 @@
         </div>
       </a>
     </div>
-    
+
     <div v-if="main.button" class="my-10 text-center">
       <!-- <a
         v-if="main.button"
@@ -145,13 +256,37 @@
         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
+          rounded
+          shadow
+          rounded-full
+        "
         >{{ main.button }}</a
       >
       <a
         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
+          rounded
+          shadow
+          rounded-full
+        "
         >{{ main.button }}</a
       >
     </div>
diff --git a/src/components/marketing/sections/cta-sections/logoShowcase.vue b/src/components/marketing/sections/cta-sections/logoShowcase.vue
index a901c22c9..9eaf99b10 100644
--- a/src/components/marketing/sections/cta-sections/logoShowcase.vue
+++ b/src/components/marketing/sections/cta-sections/logoShowcase.vue
@@ -1,9 +1,9 @@
 <template>
   <section class="py-10 pb-8 px-4 text-center">
-    <div class="max-w-2xl mx-auto mb-8">
-      <!-- <h2 class="text-4xl leading-tight mb-6 font-bold font-heading">
-        WORK WITH AWESOME PARTNERS
-      </h2> -->
+    <div class="max-w-2xl mx-auto mb-8" v-if="main">
+      <h2 class="text-4xl leading-tight mb-6 font-bold font-heading">
+        {{ main.title }}
+      </h2>
       <p class="text-gray-400 leading-relaxed"></p>
     </div>
     <div class="flex flex-wrap -mx-8">
@@ -21,7 +21,7 @@
 
 <script>
 export default {
-  props: ["logos"],
+  props: ["logos", "main"],
   methods: {
     img(image) {
       if (!image) return "";
diff --git a/src/components/marketing/sections/faq-sections/CenteredAccordion.vue b/src/components/marketing/sections/faq-sections/CenteredAccordion.vue
index 91d8badb7..35519f7c6 100644
--- a/src/components/marketing/sections/faq-sections/CenteredAccordion.vue
+++ b/src/components/marketing/sections/faq-sections/CenteredAccordion.vue
@@ -96,8 +96,5 @@ export default {
       this.open = !this.open;
     },
   },
-  mounted() {
-    console.log(this.main);
-  },
 };
 </script>
\ No newline at end of file
diff --git a/src/templates/MarkdownPage.vue b/src/templates/MarkdownPage.vue
index 8dd1727aa..5ee3faaf9 100644
--- a/src/templates/MarkdownPage.vue
+++ b/src/templates/MarkdownPage.vue
@@ -96,7 +96,7 @@
       />
 
       <CenteredAccordion
-        v-if="$page.markdownPage.faqContent"
+        v-if="$page.markdownPage.faqContent && id == 'faq'"
         :main="$page.markdownPage.faqMain"
         :faqs="$page.markdownPage.faqContent"
       />
@@ -114,6 +114,7 @@
       />
 
       <ShowcaseProducts
+        class="my-20"
         v-if="
           $page.markdownPage.productData2 &&
           $page.markdownPage.productData2.length > 0
@@ -124,6 +125,7 @@
       />
 
       <SolutionsHeader
+        class="mt-20"
         v-if="$page.markdownPage.header"
         :header="$page.markdownPage.header"
       />
@@ -146,6 +148,7 @@
       <logoShowcase
         v-if="$page.markdownPage.logos.length > 0"
         :logos="$page.markdownPage.logos"
+        :main="$page.markdownPage.logosMain"
       />
 
       <FourTiersWithToggle
@@ -156,7 +159,7 @@
 
       <GetInTouch
         :contacts="$page.markdownPage.contactData"
-        v-if="$page.markdownPage.contactData.length > 0"
+        v-if="$page.markdownPage.contactData"
       />
 
       <SignUp
@@ -275,6 +278,10 @@
           title
           content
         }
+        logosMain {
+          id
+          title
+        }
         logos{
           id
           image
@@ -355,9 +362,9 @@
       }
       contactData{
          id
-         title
-         mail
-         phone
+        # title
+        # mail
+        # phone
       }
       signup{
           id