docs(enterprise-support): update support options

lzl0304 · Jun 1, 2024 · 3c04145 · 3c04145
1 parent 9e2d22f
commit 3c04145
Show file tree

Hide file tree

Showing 7 changed files with 152 additions and 54 deletions.
diff --git a/packages/docs/components.d.ts b/packages/docs/components.d.ts
@@ -129,8 +129,10 @@ declare module 'vue' {
     IntroductionComparison: typeof import('./src/components/introduction/Comparison.vue')['default']
     IntroductionDirectSupport: typeof import('./src/components/introduction/DirectSupport.vue')['default']
     IntroductionDiscordDeck: typeof import('./src/components/introduction/DiscordDeck.vue')['default']
+    'IntroductionDiscordDeck.1': typeof import('./src/components/introduction/DiscordDeck.1.vue')['default']
     IntroductionEnterpriseDeck: typeof import('./src/components/introduction/EnterpriseDeck.vue')['default']
     IntroductionEnterpriseForm: typeof import('./src/components/introduction/EnterpriseForm.vue')['default']
+    IntroductionSlaDeck: typeof import('./src/components/introduction/SlaDeck.vue')['default']
     PageFeatures: typeof import('./src/components/PageFeatures.vue')['default']
     PromotedBase: typeof import('./src/components/promoted/Base.vue')['default']
     PromotedCarbon: typeof import('./src/components/promoted/Carbon.vue')['default']

diff --git a/packages/docs/src/components/app/bar/EnterpriseLink.vue b/packages/docs/src/components/app/bar/EnterpriseLink.vue
@@ -3,7 +3,7 @@
     :to="rpath('/introduction/enterprise-support/')"
     class="ms-1"
     color="primary"
-    text="enterprise"
+    text="support"
     variant="outlined"
     @click="gtagClick('app-bar', 'enterprise', name)"
   />

diff --git a/packages/docs/src/components/introduction/DiscordDeck.vue b/packages/docs/src/components/introduction/DiscordDeck.vue
@@ -33,7 +33,7 @@
                 :text="tierText(tier)"
                 :variant="i === 1 ? 'flat' : 'outlined'"
                 class="mb-6 text-none"
-                color="primary"
+                color="#6458f2"
                 rel="noopener"
                 target="_blank"
                 block
@@ -76,25 +76,6 @@
   const { mdAndUp } = useDisplay()
 
   const tiers = [
-    {
-      name: 'Grass Tier',
-      price: 'Free',
-      href: 'https://community.vuetifyjs.com/',
-      src: 'https://cdn.vuetifyjs.com/docs/images/discord/tiers/grass.png',
-      text: 'Ask questions in our public Discord help channels.',
-      benefits: [
-        {
-          name: '#vuetify-3-help',
-          text: 'Ask questions and get help for Vuetify 3 from the community in this public channel.',
-          emoji: '3️⃣',
-        },
-        {
-          name: '#vuetify-2-help',
-          text: 'Ask questions and get help for Vuetify 2 from the community in this public channel.',
-          emoji: '2️⃣',
-        },
-      ],
-    },
     {
       name: 'Wood Tier',
       price: '$2.99',
@@ -152,36 +133,6 @@
           text: 'Get a private help channel where you can ask questions to the Core Team.',
           emoji: '🔨',
         },
-        {
-          name: 'Priority GitHub Issues',
-          text: 'Get priority on your GitHub reported issues.',
-          emoji: '🚨',
-        },
-      ],
-    },
-    {
-      name: 'Galaxy Tier',
-      contact: true,
-      price: '$199.99',
-      suffix: '/mo',
-      href: 'mailto:[email protected]?subject=Galaxy%20Tier%20Support%20Request',
-      src: 'https://cdn.vuetifyjs.com/docs/images/discord/tiers/galaxy.png',
-      text: 'Get support for up to 3 developers with a private help channel.',
-      benefits: [
-        {
-          text: 'Every channel in Planetary Tier plus:',
-          emoji: '💫',
-        },
-        {
-          name: 'Extra Developers',
-          text: 'Get a private help channel where up to 3 developers can ask questions directly to the Core Team.',
-          emoji: '🛠️',
-        },
-        {
-          name: 'Direct Support Discounts',
-          text: '50% discount on all Direct Support services.',
-          emoji: '🏷️',
-        },
       ],
     },
   ]

diff --git a/packages/docs/src/components/introduction/SlaDeck.vue b/packages/docs/src/components/introduction/SlaDeck.vue
@@ -0,0 +1,143 @@
+<template>
+  <v-sheet
+    border="s e b"
+    class="overflow-hidden"
+    max-width="900"
+    rounded
+  >
+    <v-divider
+      class="border-opacity-100"
+      color="primary"
+      thickness="4"
+    />
+
+    <v-container class="py-9 px-5" fluid>
+      <v-row justify="space-around" dense>
+        <template v-for="(tier, i) in tiers" :key="i">
+          <v-col
+            :class="i === 1 && 'bg-primary'"
+            class="position-relative pa-4 rounded-lg"
+            cols="12"
+            md="4"
+          >
+            <v-responsive :min-height="mdAndUp ? 96 : undefined" class="mb-4">
+              <h3 class="d-flex align-center text-h6 font-weight-medium mb-4">
+                <v-avatar :image="tier.src" class="me-3" />
+
+                <div>
+                  {{ tier.name }}
+
+                  <div class="text-h5 font-weight-bold">
+                    {{ tier.price }}<span v-if="tier.suffix" class="font-weight-medium opacity-60 text-body-2">{{ tier.suffix }}</span>
+                  </div>
+                </div>
+              </h3>
+
+              <v-btn
+                :color="i === 1 ? 'surface' : 'primary'"
+                :href="tier.href"
+                :text="tierText(tier)"
+                :variant="i === 1 ? 'flat' : 'outlined'"
+                class="mb-6 text-none"
+                rel="noopener"
+                target="_blank"
+                block
+              />
+
+              <div class="text-caption">{{ tier.text }}</div>
+            </v-responsive>
+
+            <v-divider class="mb-4" />
+
+            <ul class="text-caption ps-1" style="list-style-type: none;">
+              <li v-for="(benefit, k) in tier.benefits" :key="k" class="mb-2 d-flex">
+                <div class="me-2">{{ benefit.emoji }}</div>
+
+                <div>
+                  <strong>{{ benefit.name }}</strong>
+
+                  <div class="opacity-60">
+                    {{ benefit.text }}
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </v-col>
+        </template>
+      </v-row>
+    </v-container>
+  </v-sheet>
+</template>
+
+<script setup>
+  const { mdAndUp } = useDisplay()
+
+  const tiers = [
+    {
+      name: 'Galaxy Tier',
+      price: '$250',
+      suffix: '/mo',
+      href: 'https://buy.stripe.com/cN2fZOfIE7xc4iA288',
+      src: 'https://cdn.vuetifyjs.com/docs/images/avatars/galaxy.png',
+      text: '🥉 For 2 developers',
+      benefits: [
+        {
+          name: 'Chat support',
+          text: 'Get a private Discord channel where your developers can ask questions directly to the Core Team.',
+          emoji: '💬',
+        },
+        {
+          name: 'Same day response',
+          text: 'Questions are answered within 24 hours, Monday through Friday.',
+          emoji: '🕒',
+        },
+      ],
+    },
+    {
+      name: 'Cosmic Tier',
+      price: '$500',
+      suffix: '/mo',
+      href: 'https://buy.stripe.com/7sIfZO0NK3gW3ewfYZ',
+      src: 'https://cdn.vuetifyjs.com/docs/images/avatars/cosmic.png',
+      text: '🥈 For up to 5 developers',
+      benefits: [
+        {
+          name: 'Everything in Galaxy Tier, plus:',
+          emoji: '💫',
+        },
+        {
+          name: 'Priority bug fixes',
+          text: 'Get priority on reported or identified Vuetify GitHub issues.',
+          emoji: '🎯',
+        },
+      ],
+    },
+    {
+      name: 'Multiverse Tier',
+      price: '$1,000',
+      suffix: '/mo',
+      href: 'https://buy.stripe.com/8wMeVKeEA04K8yQeUW',
+      src: 'https://cdn.vuetifyjs.com/docs/images/avatars/multiverse.png',
+      text: '🥇 For up to 15 developers',
+      benefits: [
+        {
+          name: 'Everything in Cosmic Tier, plus:',
+          emoji: '💫',
+        },
+        {
+          name: 'Monthly strategy session',
+          text: 'A monthly strategy session to discuss your project and how to best utilize Vuetify.',
+          emoji: '📅',
+        },
+      ],
+    },
+  ]
+
+  function tierText (tier) {
+    if (tier.trial) return 'Start free trial'
+    if (tier.price === 'Free') return 'Join Community'
+    if (tier.contact) return 'Contact Us'
+
+    return 'Subscribe'
+  }
+</script>
diff --git a/packages/docs/src/layouts/default.vue b/packages/docs/src/layouts/default.vue
@@ -8,7 +8,7 @@
 
     <AppDrawerDrawer />
 
-    <AppToc />
+    <AppToc v-if="!route.meta.fluid" />
 
     <AppBackToTop />
 

diff --git a/packages/docs/src/pages/en/introduction/enterprise-support.md b/packages/docs/src/pages/en/introduction/enterprise-support.md
@@ -21,11 +21,11 @@ Let the experts at Vuetify help you get the most out of your application with a
 
 Vuetify offers a variety of support options to meet any need.
 
-<IntroductionEnterpriseDeck />
+<IntroductionSlaDeck />
 
 <br>
 
-## Chat support
+## Single developer support
 
 Get direct access to the Vuetify team through our private [Discord server](https://community.vuetifyjs.com/). Ask questions, get help, and chat with the team.
 

diff --git a/packages/docs/src/plugins/global-components.ts b/packages/docs/src/plugins/global-components.ts
@@ -35,6 +35,7 @@ import HomeEntry from '@/components/home/Entry.vue'
 import HomeFeatures from '@/components/home/Features.vue'
 import HomeSpecialSponsor from '@/components/home/SpecialSponsor.vue'
 import HomeSponsors from '@/components/home/Sponsors.vue'
+import IntroductionSlaDeck from '@/components/introduction/SlaDeck.vue'
 import IntroductionDiscordDeck from '@/components/introduction/DiscordDeck.vue'
 import IntroductionEnterpriseDeck from '@/components/introduction/EnterpriseDeck.vue'
 import PageFeatures from '@/components/PageFeatures.vue'
@@ -87,6 +88,7 @@ export function installGlobalComponents (app: App) {
     .component('HomeFeatures', HomeFeatures)
     .component('HomeSpecialSponsor', HomeSpecialSponsor)
     .component('HomeSponsors', HomeSponsors)
+    .component('IntroductionSlaDeck', IntroductionSlaDeck)
     .component('IntroductionDiscordDeck', IntroductionDiscordDeck)
     .component('IntroductionEnterpriseDeck', IntroductionEnterpriseDeck)
     .component('PageFeatures', PageFeatures)