Skip to content

Commit

Permalink
docs(pricing): Launch Plus plan!
Browse files Browse the repository at this point in the history
  • Loading branch information
robinbraemer committed Feb 29, 2024
1 parent a249ad6 commit 7d1c52e
Show file tree
Hide file tree
Showing 4 changed files with 81 additions and 12 deletions.
45 changes: 45 additions & 0 deletions .web/docs/.vitepress/theme/components/plans/countdown.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<template>
<div>
<span>{{ days }} days </span>
<span>{{ hours }} hours </span>
<span>{{ minutes }} minutes </span>
<span>{{ seconds }} seconds </span>
</div>
</template>

<script>
import { ref, onUnmounted } from 'vue';
export default {
props: {
endTime: {
type: String,
required: true
}
},
setup(props) {
const endTime = new Date(props.endTime).getTime();
const now = Date.now();
const timeLeft = ref((endTime - now) / 1000);
const days = ref(Math.floor(timeLeft.value / (60 * 60 * 24)));
const hours = ref(Math.floor((timeLeft.value % (60 * 60 * 24)) / (60 * 60)));
const minutes = ref(Math.floor((timeLeft.value % (60 * 60)) / 60));
const seconds = ref(Math.floor(timeLeft.value % 60));
const interval = setInterval(() => {
timeLeft.value -= 1;
days.value = Math.floor(timeLeft.value / (60 * 60 * 24));
hours.value = Math.floor((timeLeft.value % (60 * 60 * 24)) / (60 * 60));
minutes.value = Math.floor((timeLeft.value % (60 * 60)) / 60);
seconds.value = Math.floor(timeLeft.value % 60);
}, 1000);
onUnmounted(() => {
clearInterval(interval);
});
return { days, hours, minutes, seconds };
}
};
</script>
15 changes: 15 additions & 0 deletions .web/docs/.vitepress/theme/components/plans/settings.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
export const plans = {
plus: {
price: '$10',
href: 'https://app.minekube.com/:org/checkout?plan=plus',
ctaText: 'Upgrade to Plus'
}
}

const endTime = "2024-03-31T23:59:59"
export const discount = {
active: new Date() < new Date(endTime),
endTime: endTime,
price: '$5',
note: 'This is our Plus plan launch discount!'
}
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,16 @@
<div v-for="(tier, tierIdx) in tiers" :key="tier.id" :class="[tier.featured ? 'dark relative bg-red-950 shadow-2xl' : 'dark:bg-transparent/60 bg-[--vp-c-default-soft] sm:mx-8 lg:mx-0', tier.featured ? '' : tierIdx === 0 ? 'rounded-t-3xl sm:rounded-b-none lg:rounded-tr-none lg:rounded-bl-3xl' : 'sm:rounded-t-none lg:rounded-tr-3xl lg:rounded-bl-none', 'rounded-3xl p-8 ring-1 ring-gray-900/10 sm:p-10']">
<h3 :id="tier.id" :class="[tier.featured ? 'text-[--vp-c-brand-2]' : 'text-[--vp-c-brand-2]', 'text-base font-semibold leading-7']">{{ tier.name }}</h3>
<p class="mt-4 flex items-baseline gap-x-2">
<span :class="[tier.featured ? 'text-[--vp-c-text-1]' : 'text-[--vp-c-text-1]', 'text-5xl font-bold tracking-tight']">{{ tier.priceMonthly }}</span>
<span v-if="!(discount.active && tier.featured)" :class="[tier.featured ? 'text-[--vp-c-text-1]' : 'text-[--vp-c-text-1]', 'text-5xl font-bold tracking-tight']">{{ tier.priceMonthly }}</span>
<span v-if="discount.active && tier.featured" class="text-red-500 text-5xl font-bold tracking-tight">{{ discount.price }}</span>
<span v-if="discount.active && tier.featured" class="text-[--vp-c-text-1] line-through text-xl font-bold tracking-tight">{{ tier.priceMonthly }}</span>
<span :class="[tier.featured ? 'text-[--vp-c-text-2]' : 'text-[--vp-c-text-3]', 'text-base']">/month</span>
</p>
<p :class="[tier.featured ? 'text-[--vp-c-text-1]' : 'text-[--vp-c-text-2]', 'mt-6 text-base leading-7']">{{ tier.description }}</p>
<div v-if="discount.active && tier.featured" class="mt-4 p-1">
<countdown :end-time="discount.endTime" class="text-red-400 text-lg font-bold" />
<p class="text-[--vp-c-text-1]">{{ discount.note }}</p>
</div>
<p :class="[tier.featured ? 'text-[--vp-c-text-1]' : 'text-[--vp-c-text-2]', 'mt-6 text-base leading-7']">{{ tier.description }}</p>
<ul role="list" :class="[tier.featured ? 'text-[--vp-c-text-1]' : 'text-[--vp-c-text-2]', 'mt-8 space-y-3 text-sm leading-6 sm:mt-10']">
<li v-for="feature in tier.features" :key="feature" class="flex gap-x-3">
<svg :class="[tier.featured ? 'text-[--vp-c-brand-2]' : 'text-[--vp-c-brand-2]', 'h-6 w-5 flex-none']" class="h-6 w-5 flex-none text-[--vp-c-brand-2]" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
Expand All @@ -31,6 +37,9 @@
</template>

<script setup>
import Countdown from "./countdown.vue";
import {discount, plans} from "./settings";
const tiers = [
{
name: 'Free for everyone forever',
Expand All @@ -50,9 +59,9 @@ const tiers = [
{
name: 'Plus',
id: 'tier-plus',
href: 'https://minekube.com/discord',
ctaText: 'Plus is coming soon',
priceMonthly: '$5',
href: plans.plus.href,
ctaText: plans.plus.ctaText,
priceMonthly: plans.plus.price,
description: 'Enhance branding and unlock features to scale your project. Everything in Free, plus:',
features: [
'Opt-out of Browser Hub fallback',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<section v-for="tier in tiers" :key="tier.id" :class="[tier.mostPopular ? 'rounded-xl bg-white/5 ring-1 ring-inset ring-white/10' : '', 'p-8']">
<h3 :id="tier.id" class="text-sm font-semibold leading-6 text-[--vp-c-text-1]">{{ tier.name }}</h3>
<p class="mt-2 flex items-baseline gap-x-1">
<span class="text-4xl font-bold text-[--vp-c-text-1]">{{ tier.priceMonthly }}</span>
<span :class="[tier !== tiers[0] && discount.active ? 'text-red-500' : '', 'text-4xl font-bold text-[--vp-c-text-1]']">{{ tier !== tiers[0] && discount.active ? discount.price : tier.priceMonthly }}</span>
<span class="text-sm font-semibold text-[--vp-c-text-1]">/month</span>
</p>
<a :href="tier.href" :aria-describedby="tier.id" :class="[tier.mostPopular ? 'bg-indigo-500 text-[--vp-c-text-1] hover:bg-indigo-400 focus-visible:outline-indigo-500' : 'bg-white/10 text-[--vp-c-text-1] hover:bg-white/20 focus-visible:outline-white', 'mt-8 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2']">{{ tier.ctaText || 'Buy plan' }}</a>
Expand Down Expand Up @@ -69,7 +69,7 @@
<th scope="row"><span class="sr-only">Price</span></th>
<td v-for="tier in tiers" :key="tier.id" class="px-6 pt-2 xl:px-8">
<div class="flex items-baseline gap-x-1 text-[--vp-c-text-1]">
<span class="text-4xl font-bold">{{ tier.priceMonthly }}</span>
<span :class="[tier !== tiers[0] && discount.active ? 'text-red-500' : '', 'text-4xl font-bold']">{{ tier !== tiers[0] && discount.active ? discount.price : tier.priceMonthly }}</span>
<span class="text-sm font-semibold leading-6">/month</span>
</div>
<a :href="tier.href" :class="[tier.mostPopular ? 'bg-black text-white dark:bg-white dark:text-black dark:hover:bg-red-600 hover:bg-red-600 dark:hover:text-[--vp-c-text-1] focus-visible:outline-indigo-600' : 'bg-[--vp-button-brand-bg] text-[--vp-button-brand-text] hover:bg-[--vp-button-brand-hover-bg] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--vp-button-brand-active-bg]', 'mt-8 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 text-[--vp-c-text-1] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2']">{{ tier.ctaText || 'Buy plan' }}</a>
Expand Down Expand Up @@ -112,7 +112,7 @@
</template>

<script setup>
// import { CheckIcon, MinusIcon } from '@vue-hero-icons/solid/icons'
import {discount, plans} from "./settings";
const tiers = [
{
Expand All @@ -127,17 +127,17 @@ const tiers = [
{
name: 'Plus',
id: 'tier-plus-table',
ctaText: 'Coming soon',
href: 'https://minekube.com/discord',
priceMonthly: '$5',
ctaText: plans.plus.ctaText,
href: plans.plus.href,
priceMonthly: plans.plus.price,
description: 'Quis eleifend a tincidunt pellentesque. A tempor in sed.',
mostPopular: true,
},
// {
// name: 'Enterprise',
// id: 'tier-enterprise',
// href: '#',
// priceMonthly: '$59',
// priceMonthly: '$109',
// description: 'Orci volutpat ut sed sed neque, dui eget. Quis tristique non.',
// mostPopular: false,
// },
Expand Down

0 comments on commit 7d1c52e

Please sign in to comment.