ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init FAQ component

Browse Source
This commit is contained in:
samaradel
2021-06-14 10:39:54 +02:00
parent ec1f5db0ea
commit ec9e276026
12 changed files with 193 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
content/page/home/faq/main/main.md Normal file
View File

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

5
content/page/home/faq/q1/q1.md Normal file
View File

@@ -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.

5
content/page/home/faq/q2/q2.md Normal file
View File

@@ -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.

5
content/page/home/faq/q3/q3.md Normal file
View File

@@ -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.

5
content/page/home/faq/q4/q4.md Normal file
View File

@@ -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.

5
content/page/home/faq/q5/q5.md Normal file
View File

@@ -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.

5
content/page/home/faq/q6/q6.md Normal file
View File

@@ -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.

2
content/page/home/home.md
View File

@@ -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

20
gridsome.config.js
View File

@@ -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'
}
}
},

25
src/components/marketing/sections/blog-sections/3_column_cards.vue
View File

@@ -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>

99
src/components/marketing/sections/faq-sections/CenteredAccordion.vue Normal file
View File

@@ -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>

21
src/pages/Index.vue
View File

@@ -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() {