Files
www_threefold_io/src/pages/Index.vue
2021-10-03 10:45:34 +02:00

498 lines
11 KiB
Vue

<template>
<Layout :hideHeader="true" :disableScroll="true">
<div class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden">
<Header
:id="$page.markdownPage.id"
:title="$page.markdownPage.header_title"
:slogan="$page.markdownPage.header_slogan"
:title2="$page.markdownPage.header_title2"
:slogan2="$page.markdownPage.header_slogan2"
:image="$page.markdownPage.header_image"
:img2="$page.markdownPage.header_img2"
:altImg="$page.markdownPage.header_altImg"
:excerpt="$page.markdownPage.header_excerpt"
:button="$page.markdownPage.button"
:button2="$page.markdownPage.button2"
:button3="$page.markdownPage.button3"
:link="$page.markdownPage.link"
:link2="$page.markdownPage.link2"
:link3="$page.markdownPage.link3"
/>
</div>
<div class="container_tft mx-auto sm:pxi-0 overflow-x-hidden">
<Map v-if="$page.markdownPage.map" :section="$page.markdownPage.map" />
<ShowcaseProducts
v-if="
$page.markdownPage.productData &&
$page.markdownPage.productData.length > 0
"
:id="$page.markdownPage.id"
:main="$page.markdownPage.productsMain"
:products="$page.markdownPage.productData"
/>
</div>
<div class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden">
<CallToAction
v-if="$page.markdownPage.cta"
:id="$page.markdownPage.id"
:cta="$page.markdownPage.cta"
/>
</div>
<div class="container_tft mx-auto sm:pxi-0 overflow-x-hidden">
<BrandPanel
class="my-20"
:brand="$page.markdownPage.brandPanel"
:id="$page.markdownPage.id"
v-if="$page.markdownPage.brandPanel"
/>
<logoShowcase
v-if="$page.markdownPage.logos.length > 0"
:id="$page.markdownPage.id"
:logos="$page.markdownPage.logos"
:main="$page.markdownPage.logosMain"
/>
<HorizontalScroll
:team="$page.markdownPage.team"
:people="$page.entries.edges"
/>
<Blogs
v-if="$page.markdownPage.blogs || $page.markdownPage.BlogsMain"
:main="$page.markdownPage.BlogsMain"
:blogs="$page.markdownPage.blogs"
/>
<SplitWithForm
v-if="$page.markdownPage.subscribe"
:id="$page.markdownPage.id"
:subscribe="$page.markdownPage.subscribe"
/>
<CallToAction
v-if="$page.markdownPage.cta2"
:id="$page.markdownPage.id"
:cta="$page.markdownPage.cta2"
:lastCta="true"
/>
</div>
</Layout>
</template>
<page-query>
query {
markdownPage(id: "home") {
id
path
metaTitle
metaDesc
metaImg
header_slogan
header_title
header_slogan2
header_title2
header_image
header_img2
header_excerpt
header_altImg
button
link
button2
link2
button3
link3
solution_image
# solution_image2
# solution_image3
header{
title
subtitle
content
btn1
link1
btn2
link2
}
productsMain{
id
title
subtitle
# image
}
productData{
id
title
content
image
button
url
}
cta{
id
title
subtitle
image
content
button
button2
button3
button4
button5
button6
link
link2
link3
link4
link5
link6
}
BlogsMain{
id
title
}
blogs{
id
image
tags
title
path
author
autherUrl
authorImg
excerpt
created
}
cta2{
id
title
image
content
button
button2
button3
button4
link
link2
link3
link4
}
cta3{
id
title
image
content
link
button
}
cta4{
id
title
title2
subtitle
slogan
content
button
button2
button3
link
link2
link3
}
cta5{
id
title
content
button
button2
button3
link
link2
link3
}
featuresMain2{
id
title
subtitle
btn
link
btn2
link2
btn3
link3
content
}
features2{
id
title
svg
content
}
comparisonMain{
id
title
description
button
link
}
comparisonSecs{
id
svg
title
link
content
}
brandPanel{
id
title
subtitle
content
sourceUrl
btnTxt
button2
link2
image
}
brandPanel2{
id
title
subtitle
content
sourceUrl
btnTxt
sourceUrl2
btnTxt2
image
}
logosMain {
id
title
image
button
link
}
logos{
id
image
url
}
inTheNews {
id
content
partners {
path
logo
}
}
videoPanel {
id
video
title
content
btn
link
}
partenershipsMain{
id
title
slogan
content
link
link2
button
button2
}
partnerships {
id
title
img
content
}
map {
id
title
subtitle
button
link
btn1
btn2
link1
link2
link3
btn3
image
}
subscribe {
id
title
placeHolder
content
button
link
image
}
team{
id
title
content
}
}
entries: allPerson (sortBy: "rank", order: ASC, filter: {memberships: { contains: ["foundation"]}}){
edges {
node {
path
name
image
}
}
}
allProject (sortBy: "rank", order: ASC, filter: { category: { contains: ["foundation"]}}){
edges {
node {
id
title
path
rank
logo
}
}
}
}
</page-query>
<static-query>
query {
metadata {
siteUrl
}
}
</static-query>
<script>
import Header from "~/components/marketing/sections/cta-sections/Header.vue";
import SolutionsHeader from "~/components/custom/sections/header/HeaderSection.vue";
import ShowcaseProducts from "~/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue";
import Comparison from "~/components/custom/sections/Comparison.vue";
import Blogs from "~/components/marketing/sections/blog-sections/3_column_cards.vue";
import Features from "~/components/custom/sections/Features.vue";
import Map from "~/components/marketing/sections/cta-sections/Map.vue";
import NewCard from "~/components/marketing/sections/cta-sections/NewCard.vue";
import BrandPanel from "~/components/marketing/sections/cta-sections/BrandPanel.vue";
import BrandPanel2 from "~/components/marketing/sections/cta-sections/BrandPanel2.vue";
import CallToAction from "~/components/custom/sections/CallToAction.vue";
import CallToActionbg1 from "~/components/custom/sections/CallToActionbg1.vue";
import CallToActionbg2 from "~/components/custom/sections/CallToActionbg2.vue";
import logoShowcase from "~/components/marketing/sections/cta-sections/logoShowcase.vue";
import InTheNews from "~/components/marketing/sections/logo-clouds/off_white_grid.vue";
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 SplitWithForm from "~/components/custom/SplitWithForm.vue";
import HorizontalScroll from "~/components/custom/HorizontalScroll.vue";
export default {
components: {
Header,
Features,
Map,
SolutionsHeader,
ShowcaseProducts,
Comparison,
NewCard,
BrandPanel,
BrandPanel2,
logoShowcase,
CallToAction,
CallToActionbg1,
CallToActionbg2,
InTheNews,
SignUp,
Blogs,
VideoPanel,
Partenerships,
SplitWithForm,
HorizontalScroll,
},
computed: {
getImg() {
let img = "";
if (process.isClient) {
img = `${window.location.origin}${this.$page.markdownPage.metaImg.src}`;
}
return img;
},
},
// metaInfo() {
// return {
// title: "",
// titleTemplate: "ThreeFold | Welcome",
// meta: [
// {
// key: "description",
// name: "description",
// content: this.$page.markdownPage.metaDesc,
// },
// {
// key: "og:title",
// property: "og:title",
// content: this.$page.markdownPage.metaTitle,
// },
// {
// key: "og:description",
// property: "og:description",
// content: this.$page.markdownPage.metaDesc,
// },
// {
// key: "og:image",
// property: "og:image",
// content: this.getImg,
// },
// {
// key: "twitter:description",
// name: "twitter:description",
// content: this.$page.markdownPage.metaDesc,
// },
// {
// key: "twitter:image",
// property: "twitter:image",
// content: this.getImg,
// },
// {
// key: "twitter:title",
// property: "twitter:title",
// content: this.$page.markdownPage.metaTitle,
// },
// ],
// };
// },
};
</script>
<style scoped>
.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
</style>
<!-- <div class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden">
<g-image
v-if="$page.markdownPage.solution_image"
:src="$page.markdownPage.solution_image.src"
/>
</div> -->