added pricing component

packages/altair-docs/.vitepress/theme/components/Pricing.vue

@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData } from '../composables/data';
+import VPIconArrowRight from './icons/VPIconArrowRight.vue';
+import VPIconPlusSquare from './icons/VPIconPlusSquare.vue';
+import VPButton from './VPButton.vue';
+
+const { frontmatter: fm } = useData()
+
+interface Price {
+ free?: boolean
+ amount?: string
+ currency?: string
+ frequency?: string
+}
+export interface PricingItem {
+ title: string
+ recommended: boolean
+ price: Price
+ features: string[]
+ action: {
+ text: string
+ link: string
+ }
+}
+
+const pricing = computed(() => fm.value.pricing as PricingItem[])
+const grid = computed(() => {
+ const length = fm.value.pricing.length
+
+ if (!length) {
+ return
+ } else if (length === 2) {
+ return 'grid-2'
+ } else if (length === 3) {
+ return 'grid-3'
+ } else if (length % 3 === 0) {
+ return 'grid-6'
+ } else if (length > 3) {
+ return 'grid-4'
+ }
+})
+</script>
+
+<template>
+ <div v-if="pricing" class="Pricing">
+ <div class="container">
+ <h3 class="Pricing-title">Pricing designed for you</h3>
+ <div class="items">
+ <div
+ v-for="item in pricing"
+ :key="item.title"
+ class="item"
+ :class="[grid]"
+ >
+ <div
+ class="pricing-item"
+ :class="{
+ 'pricing-item-recommended': item.recommended
+ }"
+ >
+ <div class="pricing-item-title">{{ item.title }}</div>
+ <div class="pricing-item-price">
+ <template v-if="item.price.free">
+ Free
+ </template>
+ <template v-else>
+ <span class="pricing-item-currency">{{ item.price.currency }}</span> {{ item.price.amount }} / user / {{ item.price.frequency }}
+ </template>
+ </div>
+ <VPButton
+ v-if="item.action"
+ class="pricing-item-action"
+ :text="item.action.text"
+ :href="item.action.link"
+ :theme="item.recommended ? 'brand' : 'alt'"
+ :icon="item.recommended ? VPIconPlusSquare : undefined"
+ />
+ <ul class="pricing-item-features">
+ <li v-for="feature in item.features" :key="feature">
+ <VPIconArrowRight class="pricing-item-features-icon" />
+ {{ feature }}
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<style scoped>
+.Pricing {
+ position: relative;
+ padding: 0 24px;
+}
+
+.Pricing-title {
+ margin: 40px 0;
+ font-size: 36px;
+ line-height: 1.5;
+ font-weight: 600;
+ text-align: center;
+ color: var(--vp-c-brand-1);
+ background: linear-gradient(
+ 45deg,
+ var(--vp-c-brand-1),
+ var(--vp-c-sponsor)
+ );
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+@media (min-width: 640px) {
+ .Pricing {
+ padding: 0 48px;
+ }
+}
+
+@media (min-width: 960px) {
+ .Pricing {
+ padding: 0 64px;
+ }
+}
+
+.container {
+ margin: 0 auto;
+ max-width: 1152px;
+}
+
+.items {
+ display: flex;
+ flex-wrap: wrap;
+ margin: -8px;
+}
+
+.item {
+ padding: 8px;
+ width: 100%;
+}
+
+.pricing-item {
+ display: flex;
+ flex-direction: column;
+ padding: 24px;
+ border: 1px solid var(--vp-c-bg-soft);
+ border-radius: 12px;
+ height: 100%;
+ background-color: var(--vp-c-bg-soft);
+ transition: border-color 0.25s, background-color 0.25s;
+}
+
+.pricing-item:hover {
+ border-color: var(--vp-c-brand-1);
+}
+
+.pricing-item-recommended {
+ border-color: var(--vp-c-brand-1);
+ scale: 1.05;
+}
+
+.pricing-item-title {
+ font-weight: 600;
+ text-transform: uppercase;
+ border-radius: 4px;
+ background-color: var(--vp-c-default-soft);
+ padding: 4px 8px;
+ font-size: 14px;
+}
+
+.pricing-item-price {
+ margin: 20px 0;
+ font-size: 32px;
+ font-weight: 600;
+}
+
+.pricing-item-currency {
+ font-size: 20px;
+ font-weight: 500;
+}
+
+.pricing-item-action {
+ margin-bottom: 20px;
+}
+
+.pricing-item-features li {
+ display: flex;
+ align-items: center;
+ margin-bottom: 8px;
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--vp-c-text-2);
+ gap: 8px;
+}
+.pricing-item-features-icon {
+ width: 16px;
+ color: var(--vp-c-brand-1);
+ fill: var(--vp-c-brand-1);
+}
+
+@media (min-width: 640px) {
+ .item.grid-2,
+ .item.grid-4,
+ .item.grid-6 {
+ width: calc(100% / 2);
+ }
+}
+
+@media (min-width: 768px) {
+ .item.grid-2,
+ .item.grid-4 {
+ width: calc(100% / 2);
+ }
+
+ .item.grid-3,
+ .item.grid-6 {
+ width: calc(100% / 3);
+ }
+}
+
+@media (min-width: 960px) {
+ .item.grid-4 {
+ width: calc(100% / 4);
+ }
+}
+</style>

packages/altair-docs/.vitepress/theme/components/VPHome.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import VPHomeHero from './VPHomeHero.vue'
 import VPHomeFeatures from './VPHomeFeatures.vue'
+import Pricing from './Pricing.vue';
 </script>
 
 <template>
@@ -16,6 +17,8 @@ import VPHomeFeatures from './VPHomeFeatures.vue'
  <VPHomeFeatures />
  <slot name="home-features-after" />
 
+ <Pricing />
+
  <Content />
  </div>
 </template>

packages/altair-docs/cloud.md

@@ -25,4 +25,48 @@ features:
  - icon: 🔄
  title: Query Versioning
  details: Keep a version history of queries for easy rollback and traceability. Never worry about losing crucial information during the development process.
+ - icon: 👥
+ title: Easy Sharing
+ details: Share queries seamlessly with team members using shareable URLs. Accelerate collaboration and eliminate communication gaps.
+
+pricing:
+ - title: Basic
+ price:
+ free: true
+ features:
+ - Up to 2 team members
+ - Up to 20 queries
+ - Unlimited collections
+ - Query history (up to 10 revisions)
+ action:
+ link: /#download
+ text: Download
+ - title: Pro
+ recommended: true
+ price:
+ amount: 7.99
+ currency: $
+ frequency: month
+ features:
+ - Unlimited team members
+ - Unlimited teams
+ - Unlimited queries
+ - Unlimited collections
+ - Query history
+ action:
+ link: /#download
+ text: Try it today
+ - title: Self hosted
+ price:
+ free: true
+ features:
+ - Unlimited team members
+ - Unlimited teams
+ - Unlimited queries
+ - Unlimited collections
+ - Query history
+ - Full control
+ action:
+ link: https://github.com/altair-graphql/altair?tab=readme-ov-file#deployment
+ text: Get started
 ---