360 lines
8.1 KiB
Vue
360 lines
8.1 KiB
Vue
<template>
|
|
<Layout :hideHeader="true" :disableScroll="true">
|
|
<div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
|
|
<Header
|
|
v-if="
|
|
$page.markdownPage.id !== 'contact' &&
|
|
$page.markdownPage.header_title &&
|
|
$page.markdownPage.header_title != ''
|
|
"
|
|
:title="$page.markdownPage.header_title"
|
|
:image="$page.markdownPage.header_image"
|
|
:altImg="$page.markdownPage.header_altImg"
|
|
:excerpt="$page.markdownPage.header_excerpt"
|
|
/>
|
|
|
|
<VerticalNav
|
|
:slides="$page.markdownPage.slides"
|
|
v-if="$page.markdownPage.slides && $page.markdownPage.slides.length > 0"
|
|
/>
|
|
|
|
<NewCard
|
|
v-for="card in $page.markdownPage.cards"
|
|
:key="card.id"
|
|
: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"
|
|
/>
|
|
|
|
<SolutionsHeader
|
|
v-if="$page.markdownPage.header"
|
|
:header="$page.markdownPage.header"
|
|
/>
|
|
|
|
<HowItWorks
|
|
v-if="$page.markdownPage.howItWorks.length > 0"
|
|
:HIWData="$page.markdownPage.howItWorks"
|
|
:main="$page.markdownPage.howItWorksMain"
|
|
/>
|
|
<template>
|
|
<ClientOnly>
|
|
<Features
|
|
v-if="$page.markdownPage.features.length > 0"
|
|
:main="$page.markdownPage.featuresMain"
|
|
:features="$page.markdownPage.features"
|
|
/>
|
|
</ClientOnly>
|
|
</template>
|
|
|
|
<logoShowcase
|
|
v-if="$page.markdownPage.logos.length > 0"
|
|
:logos="$page.markdownPage.logos"
|
|
/>
|
|
|
|
<CallToAction
|
|
v-if="$page.markdownPage.cta"
|
|
:cta="$page.markdownPage.cta"
|
|
/>
|
|
|
|
<SignUp
|
|
v-if="$page.markdownPage.signup"
|
|
:signup="$page.markdownPage.signup"
|
|
/>
|
|
|
|
<template>
|
|
<ClientOnly>
|
|
<Comparison
|
|
v-if="
|
|
$page.markdownPage.comparisonSecs &&
|
|
$page.markdownPage.comparisonSecs.length > 0
|
|
"
|
|
:main="$page.markdownPage.comparisonMain"
|
|
:sections="$page.markdownPage.comparisonSecs"
|
|
/>
|
|
</ClientOnly>
|
|
</template>
|
|
|
|
<Roadmap
|
|
v-if="$page.markdownPage.roadmap.length > 0"
|
|
:roadmap="$page.markdownPage.roadmap"
|
|
/>
|
|
|
|
<FourTiersWithToggle
|
|
v-if="$page.markdownPage.pricingPlans.length > 0"
|
|
:main="$page.markdownPage.pricing_plansMain"
|
|
:pricingPlans="$page.markdownPage.pricingPlans"
|
|
/>
|
|
|
|
<WithComparisonTable
|
|
v-if="$page.markdownPage.plans.length > 0"
|
|
:plans="$page.markdownPage.plans"
|
|
/>
|
|
|
|
<BrandPanel
|
|
:brand="$page.markdownPage.brandPanel"
|
|
v-if="$page.markdownPage.brandPanel"
|
|
/>
|
|
</div>
|
|
</Layout>
|
|
</template>
|
|
|
|
<page-query>
|
|
query($id: ID!) {
|
|
markdownPage(id: $id) {
|
|
id
|
|
path
|
|
excerpt
|
|
header_excerpt
|
|
header_altImg
|
|
header_title
|
|
header_image
|
|
slides{
|
|
id
|
|
title
|
|
excerpt
|
|
image
|
|
order
|
|
}
|
|
cards{
|
|
id
|
|
title
|
|
image
|
|
button
|
|
link
|
|
order
|
|
content
|
|
}
|
|
contactData{
|
|
id
|
|
title
|
|
mail
|
|
phone
|
|
}
|
|
header{
|
|
title
|
|
subtitle
|
|
content
|
|
btn1
|
|
link1
|
|
btn2
|
|
link2
|
|
}
|
|
howItWorks{
|
|
id
|
|
title
|
|
content
|
|
}
|
|
howItWorksMain{
|
|
id
|
|
title
|
|
image
|
|
}
|
|
productsMain{
|
|
id
|
|
title
|
|
subtitle
|
|
image
|
|
}
|
|
productData{
|
|
id
|
|
title
|
|
content
|
|
image
|
|
}
|
|
brandPanel{
|
|
id
|
|
title
|
|
subtitle
|
|
excerpt(length: 2000)
|
|
sourceUrl
|
|
btnTxt
|
|
image
|
|
}
|
|
featuresMain{
|
|
id
|
|
title
|
|
btn
|
|
link
|
|
content
|
|
}
|
|
logos{
|
|
id
|
|
image
|
|
}
|
|
features{
|
|
id
|
|
title
|
|
svg
|
|
content
|
|
}
|
|
cta{
|
|
id
|
|
title
|
|
content
|
|
button
|
|
link
|
|
}
|
|
signup{
|
|
id
|
|
title
|
|
button1
|
|
link1
|
|
button2
|
|
link2
|
|
}
|
|
comparisonMain{
|
|
id
|
|
title
|
|
description
|
|
button
|
|
link
|
|
}
|
|
comparisonSecs{
|
|
id
|
|
svg
|
|
title
|
|
content
|
|
}
|
|
roadmap{
|
|
id
|
|
title
|
|
excerpt
|
|
}
|
|
pricing_plansMain{
|
|
id
|
|
title
|
|
button1
|
|
button2
|
|
excerpt
|
|
}
|
|
pricingPlans{
|
|
id
|
|
title
|
|
excerpt
|
|
price
|
|
duration
|
|
button
|
|
link
|
|
includeTitle
|
|
options
|
|
}
|
|
plans{
|
|
id
|
|
title
|
|
rows {
|
|
title
|
|
firstCol
|
|
secCol
|
|
thirdCol
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</page-query>
|
|
|
|
<script>
|
|
import NewCard from "~/components/marketing/sections/cta-sections/NewCard.vue";
|
|
import Header from "~/components/marketing/sections/cta-sections/Header.vue";
|
|
import VerticalNav from "~/components/custom/Navbar/VerticalNav.vue";
|
|
import GetInTouch from "~/components/custom/Navbar/Getintouch.vue";
|
|
import SolutionsHeader from "~/components/custom/sections/header/HeaderSection.vue";
|
|
import HowItWorks from "~/components/custom/sections/HowItWorks.vue";
|
|
import ShowcaseProducts from "~/components/marketing/sections/cta-sections/ShowcaseProducts.vue";
|
|
import Features from "~/components/custom/sections/Features.vue";
|
|
import logoShowcase from "~/components/marketing/sections/cta-sections/logoShowcase.vue";
|
|
import CallToAction from "~/components/custom/sections/CallToAction.vue";
|
|
import SignUp from "~/components/custom/sections/SignUp.vue";
|
|
import Comparison from "~/components/custom/sections/Comparison.vue";
|
|
import Roadmap from "~/components/custom/sections/Roadmap.vue";
|
|
import FourTiersWithToggle from "~/components/marketing/sections/pricing/four_tiers_with_toggle.vue";
|
|
import WithComparisonTable from "~/components/marketing/sections/pricing/with_comparison_table.vue";
|
|
import BrandPanel from "~/components/marketing/sections/cta-sections/BrandPanel.vue";
|
|
|
|
export default {
|
|
components: {
|
|
NewCard,
|
|
Header,
|
|
VerticalNav,
|
|
GetInTouch,
|
|
SolutionsHeader,
|
|
HowItWorks,
|
|
ShowcaseProducts,
|
|
Features,
|
|
logoShowcase,
|
|
CallToAction,
|
|
SignUp,
|
|
Comparison,
|
|
Roadmap,
|
|
FourTiersWithToggle,
|
|
WithComparisonTable,
|
|
BrandPanel,
|
|
},
|
|
|
|
metaInfo() {
|
|
return {
|
|
title: this.$page.markdownPage.title,
|
|
};
|
|
},
|
|
mounted() {
|
|
// console.log(this.$page.markdownPage.plans);
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
/**
|
|
* Add back the container background-color, border-radius, padding, margin
|
|
* and overflow that we removed from <pre>.
|
|
*/
|
|
|
|
.gridsome-highlight {
|
|
background-color: #fdf6e3;
|
|
border-radius: 0.3em;
|
|
margin: 0.5em 0;
|
|
padding: 1em;
|
|
overflow: auto;
|
|
}
|
|
.gridsome-highlight-code-line {
|
|
background-color: #feb;
|
|
display: block;
|
|
margin-right: -1em;
|
|
margin-left: -1em;
|
|
padding-right: 1em;
|
|
padding-left: 0.75em;
|
|
border-left: 0.25em solid #f99;
|
|
}
|
|
|
|
/**
|
|
* Remove the default PrismJS theme background-color, border-radius, margin,
|
|
* padding and overflow.
|
|
* 1. Make the element just wide enough to fit its content.
|
|
* 2. Always fill the visible space in .gatsby-highlight.
|
|
* 3. Adjust the position of the line numbers
|
|
*/
|
|
.gridsome-highlight pre[class*="language-"] {
|
|
background-color: transparent;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: initial;
|
|
float: left; /* 1 */
|
|
min-width: 100%; /* 2 */
|
|
}
|
|
|
|
/* Adjust the position of the line numbers */
|
|
.gridsome-highlight pre[class*="language-"].line-numbers {
|
|
padding-left: 2.8em;
|
|
}
|
|
</style> >
|