init FAQ component

content/page/home/faq/main/main.md

@@ -0,0 +1,4 @@
+---
+id: homeFAQ
+title: Frequently asked questions
+---

content/page/home/faq/q1/q1.md

@@ -0,0 +1,5 @@
+---
+id: q1
+question: What's the best thing about Switzerland?
+---
+I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.

content/page/home/faq/q2/q2.md

@@ -0,0 +1,5 @@
+---
+id: q2
+question: How do you make holy water?
+---
+You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam aut tempora vitae odio inventore fuga aliquam nostrum quod porro. Delectus quia facere id sequi expedita natus.

content/page/home/faq/q3/q3.md

@@ -0,0 +1,5 @@
+---
+id: q3
+question: What do you call someone with no body and no nose?
+---
+Nobody knows. Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, voluptas ipsa quia excepturi, quibusdam natus exercitationem sapiente tempore labore voluptatem.

content/page/home/faq/q4/q4.md

@@ -0,0 +1,5 @@
+---
+id: q4
+question: Why do you never see elephants hiding in trees?
+---
+Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.

content/page/home/faq/q5/q5.md

@@ -0,0 +1,5 @@
+---
+id: q5
+question: Why can't you hear a pterodactyl go to the bathroom?
+---
+Because the pee is silent. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, quas voluptatibus ex culpa ipsum, aspernatur blanditiis fugiat ullam magnam suscipit deserunt illum natus facilis atque vero consequatur! Quisquam, debitis error.

content/page/home/faq/q6/q6.md

@@ -0,0 +1,5 @@
+---
+id: q6
+question: Why did the invisible man turn down the job offer?
+---
+He couldn't see himself doing it. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet perspiciatis officiis corrupti tenetur. Temporibus ut voluptatibus, perferendis sed unde rerum deserunt eius.

content/page/home/home.md

@@ -43,6 +43,8 @@ partenershipsMain: home_partenerships_main
 partnerships: [tag, solidaridad , threefold]
 BlogsMain: blog_main
 blogs: [zero_os_blog, smart_contract_blog, threefold_regenerates]
+faqMain: homeFAQ
+faqContent: [q1, q2, q3, q4, q5, q6]
 ---
 
 <!-- header: home_header

gridsome.config.js

@@ -269,6 +269,22 @@ module.exports = {
             }
         },
 
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'FAQMain',
+                path: './content/page/**/faq/main/*.md',
+            }
+        },
+
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'FAQContent',
+                path: './content/page/**/faq/**/*.md',
+            }
+        },
+
         {
             use: '@gridsome/source-filesystem',
             options: {
@@ -314,7 +330,9 @@ module.exports = {
                     stats: 'Stats',
                     videoPanel: 'VideoPanel',
                     blogs: 'Blogs',
-                    BlogsMain: "BlogsMain"
+                    BlogsMain: "BlogsMain",
+                    faqMain: 'FAQMain',
+                    faqContent: 'FAQContent'
                 }
             }
         },

src/components/marketing/sections/blog-sections/3_column_cards.vue

@@ -1,6 +1,16 @@
 <template>
   <div
-    class="relative bg-gray-50 pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8"
+    class="
+      relative
+      bg-gray-50
+      pt-16
+      pb-20
+      px-4
+      sm:px-6
+      lg:pt-24
+      lg:pb-28
+      lg:px-8
+    "
   >
     <div class="absolute inset-0">
       <div class="bg-white h-1/3 sm:h-2/3"></div>
@@ -8,7 +18,15 @@
     <div class="relative max-w-7xl mx-auto">
       <div class="text-center">
         <h2
-          class="text-4xl leading-tight mb-6 font-bold font-heading uppercase sm:text-4xl sm:leading-10"
+          class="
+            text-4xl
+            leading-tight
+            mb-6
+            font-bold font-heading
+            uppercase
+            sm:text-4xl
+            sm:leading-10
+          "
         >
           {{ main.title }}
         </h2>
@@ -93,8 +111,5 @@ export default {
       return image;
     },
   },
-  mounted() {
-    console.log(this.blogs);
-  },
 };
 </script>

src/components/marketing/sections/faq-sections/CenteredAccordion.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="bg-gray-50">
+    <div class="max-w-screen-xl mx-auto py-12 px-4 sm:py-16 sm:px-6 lg:px-8">
+      <div class="max-w-3xl mx-auto">
+        <h2
+          class="
+            text-center text-3xl
+            leading-9
+            font-extrabold
+            text-gray-900
+            sm:text-4xl
+            sm:leading-10
+          "
+        >
+          {{ main.title }}
+        </h2>
+        <div class="mt-6 border-t-2 border-gray-200 pt-6">
+          <dl>
+            <div
+              v-for="(faq, index) in faqs"
+              :key="index"
+              :class="{ 'mt-6 border-t border-gray-200 pt-6': index !== 0 }"
+            >
+              <dt class="text-lg leading-7">
+                <!-- Expand/collapse question button -->
+                <button
+                  class="
+                    text-left
+                    w-full
+                    flex
+                    justify-between
+                    items-start
+                    text-gray-400
+                    focus:outline-none
+                    focus:text-gray-900
+                  "
+                  @click="setActive(index)"
+                >
+                  <span class="font-medium text-gray-900">
+                    {{ faq.question }}
+                  </span>
+                  <span class="ml-6 h-7 flex items-center">
+                    <!--
+                    Heroicon name: chevron-down
+
+                    Open: "-rotate-180", Closed: "rotate-0"
+                  -->
+                    <svg
+                      class="h-6 w-6 transform"
+                      :class="{
+                        '-rotate-180': active == index,
+                        'rotate-0': !active == index,
+                      }"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M19 9l-7 7-7-7"
+                      />
+                    </svg>
+                  </span>
+                </button>
+              </dt>
+              <dd class="mt-2 pr-12" v-if="active == index">
+                <div
+                  class="text-base leading-6 text-gray-500"
+                  v-html="faq.content"
+                ></div>
+              </dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["main", "faqs"],
+  data() {
+    return {
+      isOpen: false,
+      active: 0,
+    };
+  },
+  methods: {
+    setActive(index) {
+      this.active = index;
+      this.open = !this.open;
+    },
+  },
+};
+</script>

src/pages/Index.vue

@@ -27,7 +27,8 @@
         :features="$page.markdownPage.features2"
       />
 
-      <Partenerships class="lg:mt-20"
+      <Partenerships
+        class="lg:mt-20"
         v-if="
           $page.markdownPage.partnerships &&
           $page.markdownPage.partnerships.length > 0
@@ -54,7 +55,7 @@
         :id="$page.markdownPage.id"
       /> -->
 
-       <ShowcaseProducts
+      <ShowcaseProducts
         v-if="
           $page.markdownPage.productData &&
           $page.markdownPage.productData.length > 0
@@ -87,6 +88,11 @@
         :news="$page.markdownPage.inTheNews"
       />
 
+      <CenteredAccordion
+        v-if="$page.markdownPage.faqContent"
+        :main="$page.markdownPage.faqMain"
+        :faqs="$page.markdownPage.faqContent"
+      />
       <!-- <SignUp
       v-if="$page.markdownPage.signup"
       :signup="$page.markdownPage.signup"
@@ -351,6 +357,15 @@
           btn3
           image
         }
+        faqMain{
+          id
+          title
+        }
+        faqContent{
+          id
+          question
+          content
+        }
     }  
   }
 
@@ -382,6 +397,7 @@ import InTheNews from "~/components/marketing/sections/logo-clouds/off_white_gri
 import SignUp from "~/components/custom/sections/SignUp.vue";
 import VideoPanel from "~/components/custom/VideoPanel.vue";
 import Partenerships from "~/components/marketing/sections/team-sections/grid_with_large_round_images.vue";
+import CenteredAccordion from "~/components/marketing/sections/faq-sections/CenteredAccordion.vue";
 
 export default {
   components: {
@@ -403,6 +419,7 @@ export default {
     Blogs,
     VideoPanel,
     Partenerships,
+    CenteredAccordion,
   },
   computed: {
     getImg() {