docs: Introduce Pricing Plans page (#45)

.web/docs/.vitepress/config.ts

@@ -84,10 +84,10 @@ export default defineConfig({
         },
 
         nav: [
-            {text: 'Guide', link: '/guide/'},
             {text: 'Quick Start', link: '/guide/quick-start'},
             {text: 'Connectors', link: '/guide/connectors/'},
             {text: 'Downloads', link: '/guide/connectors/plugin#downloading-the-connect-plugin'},
+            {text: 'Pricing', link: '/plans'},
             {text: 'Changelog', link: '/guide/changelog'},
             ...projects,
         ],

.web/docs/.vitepress/theme/components/LogoCloud.vue

@@ -11,8 +11,7 @@
           </p>
           <div class="mt-8 flex items-center gap-x-6">
             <a class="rounded-md bg-[--vp-button-brand-bg] px-3.5 py-2.5 text-sm font-semibold text-[--vp-button-brand-text] shadow-sm 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]"
-               href="https://app.minekube.com/">Dashboard
-              App</a>
+               href="https://app.minekube.com/">Dashboard App</a>
             <a class="text-sm font-semibold text-[--vp-button-brand-text]" href="https://minekube.com/discord">Discord
               <span aria-hidden="true">&rarr;</span></a>
           </div>

.web/docs/.vitepress/theme/components/plans/PlansLanding.vue

@@ -0,0 +1,13 @@
+<script setup>
+import Two_tiers_with_emphasized_tier from "./two_tiers_with_emphasized_tier.vue";
+import With_comparison_table_on_dark from "./with_comparison_table_on_dark.vue";
+import Faq_two_columns from "./faq_two_columns.vue";
+</script>
+
+<template>
+
+  <two_tiers_with_emphasized_tier/>
+  <with_comparison_table_on_dark/>
+  <faq_two_columns/>
+
+</template>

.web/docs/.vitepress/theme/components/plans/README.md

@@ -0,0 +1,14 @@
+// please design a nice saas plans landing page
+// with 1 free plan and 1 paid plan called "Minekube Plus"
+// the page has a prominent header "Plan Pricing" and a subheader, following the plans.
+// below the plans is a section explaining our pricing philosophy, and a call to action to contact us for custom plans.
+// use tailwind classes
+
+copies:
+
+subheader:
+Use Minekube for free with your whole team.
+Upgrade to enable Browser opt-outs, and additional features.
+
+free plan: title: Free, subheader: Free for everyone
+plus plan: title: Minekube Plus,

.web/docs/.vitepress/theme/components/plans/faq_two_columns.vue

@@ -0,0 +1,79 @@
+<template>
+  <div >
+    <div class="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8">
+      <div class="mx-auto max-w-2xl text-center">
+        <h2 class="text-2xl font-bold leading-10 tracking-tight text-[--vp-c-text-1]">Frequently asked questions</h2>
+        <p class="mt-6 text-base leading-7 text-[--vp-c-text-2]">Have a different question and can’t find the answer you’re looking for? Reach out to us on <a href="https://minekube.com/discord" class="hover:text-indigo-30 font-semibold text-indigo-400 hover:text-indigo-300">Discord</a> and we or the community will get back to you as soon as possible.</p>
+      </div>
+      <div class="mt-20">
+        <dl class="space-y-16 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-16 sm:space-y-0 lg:gap-x-10">
+          <div v-for="faq in faqs" :key="faq.id">
+            <dt class="text-xl font-semibold leading-7 text-[--vp-c-text-1]">{{ faq.question }}</dt>
+            <dd class="mt-2 text-base leading-7 text-[--vp-c-text-2]">{{ faq.answer }}</dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const faqs = [
+  {
+    id: 0,
+    question: "What is your pricing philosophy?",
+    // answer: "We hate limits. At Minekube, our core philosophy centers around empowering developers, ensuring that Connect goes out of your way to be a truly empowering platform for creators. We believe in fostering an environment where users can thrive without the constraints of unnecessary limitations, akin to Cloudflare's model. Our free tier is designed to empower the ecosystem and users to grow and innovate, while our paid plan offers enhanced features and customizations for those wanting to opt out of the ecosystem. This approach ensures that the core functionalities remain accessible to everyone, supporting both burgeoning communities and larger. We're committed to creating a happy user base, driven by a robust ecosystem free from stupid limits, where developers feel supported in their creative and technical endeavors."
+    answer: "We hate limits. At Minekube, our philosophy is to empower developers by making Connect a platform that transcends ordinary constraints, inspired by Cloudflare's model. Our free tier enables users and the ecosystem to flourish and innovate, while our paid plan provides advanced features for those seeking further customization outside the standard ecosystem. This strategy ensures core functionalities are universally accessible, nurturing both emerging and established communities. Our commitment is to a satisfied community, upheld by an ecosystem that supports developers' creative and technical projects without unnecessary restrictions."
+  },
+  {
+    id: 1,
+    question: "What does 'Prevent Fallback to Browser Hub' mean?",
+    answer: "This option controls whether players should be redirected to the Browser Hub when the endpoint players are trying to connect to is offline or when a player is disconnected from the endpoint. Enabling this option could lead to players being unable to connect when the endpoint is offline."
+  },
+  {
+    id: 2,
+    question: "What does 'Prevent Browser Endpoint Listing' mean?",
+    answer: "This option controls whether the endpoint should be listed on the Browser for advertising purposes. Enabling this option could reduce the visibility of the endpoint to potential players."
+  },
+  {
+    id: 3,
+    question: "What does 'Prevent /browser Command' mean?",
+    answer: "This option controls whether the /browser command should be available for players on the endpoint. Enabling this option could limit the commands available to players on the endpoint."
+  },
+  {
+    id: 4,
+    question: "What does 'Prevent Fallback Motd' mean?",
+    answer: "This option controls whether the default fallback Message of the Day (Motd) should be displayed to players when the endpoint is offline. Enabling this option could leave players without important information when the endpoint is offline."
+  },
+  {
+    id: 5,
+    question: "What does 'Prevent Default Tablist' mean?",
+    answer: "This option controls whether a default tablist should be set for players when they connect to or switch to the endpoint. Enabling this option could affect the user interface for players on the endpoint."
+  },
+  {
+    id: 6,
+    question: "What are the MOTD Customizations in the paid plan?",
+    answer: "Paid users will have access to advanced dashboard functionalities, including the ability to edit MOTDs directly within the dashboard. This feature enhances control over server messages and announcements."
+  },
+  {
+    id: 7,
+    question: "Are there any Player Capacity Considerations?",
+    answer: "We hate stupid limits. See our philosophy answer earlier. Hence, any limits introduced would be generous to support community growth and development needs."
+  },
+  {
+    id: 8,
+    question: "What is the Bedrock Support feature?",
+    answer: "Plans to support Bedrock players by enabling a simple option in the dashboard to integrate GeyserMC without management overhead. This would allow Bedrock players to join Java servers, expanding the server's reach and inclusivity."
+  },
+  {
+    id: 9,
+    question: "Can I setup a custom domain?",
+    answer: "Yes, you can setup a custom domain for your Connect endpoint. This feature is available to all users, including free tier users."
+  },
+  {
+    id: 10,
+    question: "Can you implement a feature for me?",
+    answer: "We are always open to feedback and suggestions. If you have a feature request, please reach out to us on Discord and we will consider it for future development if it aligns with our vision and we believe it will benefit the whole community."
+  },
+];
+</script>

.web/docs/.vitepress/theme/components/plans/two_tiers_with_emphasized_tier.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="relative isolate px-6 py-24 sm:py-32 lg:px-8">
+    <div class="absolute inset-x-0 -top-3 -z-10 transform-gpu overflow-hidden px-36 blur-3xl" aria-hidden="true">
+      <div class="mx-auto aspect-[1155/678] w-[72.1875rem] bg-gradient-to-tr from-[--vp-c-brand-1] to-[#ff80b5] opacity-30" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)" />
+    </div>
+    <div class="mx-auto max-w-2xl text-center lg:max-w-4xl">
+      <h2 class="text-base font-semibold leading-7 text-[--vp-c-brand-2]">Minekube Connect</h2>
+      <p class="mt-2 text-4xl font-bold tracking-tight text-[--vp-c-text-1] sm:text-5xl">Pricing Plans</p>
+    </div>
+    <p class="mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-[--vp-c-text-1]">Use Minekube for free with your whole team. Upgrade to opt out of Browser ecosystem, and enable additional features.</p>
+    <div class="mx-auto mt-16 grid max-w-lg grid-cols-1 items-center gap-y-6 sm:mt-20 sm:gap-y-0 lg:max-w-4xl lg:grid-cols-2">
+      <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 :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>
+        <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">
+              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+            </svg>
+            {{ feature }}
+          </li>
+        </ul>
+        <a :href="tier.href" :aria-describedby="tier.id" :class="[tier.featured ? 'bg-white text-black shadow-sm hover:bg-red-600 hover:text-white focus-visible:outline-indigo-500' : '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.5 px-3.5 text-center text-sm font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 sm:mt-10']">{{ tier.ctaText || 'Get started today' }}</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const tiers = [
+  {
+    name: 'Free for everyone forever',
+    id: 'tier-free',
+    ctaText: 'Speedrun: Connect quick start',
+    href: '/guide/quick-start',
+    priceMonthly: '$0',
+    description: "Great for side projects, or projects with a small team. Build DDoS protected Minecraft networks close to your users.",
+    features: [
+      'Unlimited endpoints & players',
+      'DDoS protected global edge',
+      'Unlimited org members',
+      'Custom domains',
+    ],
+    featured: false,
+  },
+  {
+    name: 'Plus',
+    id: 'tier-plus',
+    href: 'https://minekube.com/discord',
+    ctaText: 'Plus is coming soon',
+    priceMonthly: '$5',
+    description: 'Enhance branding and unlock features to scale your project. Everything in Free, plus:',
+    features: [
+      'Opt-out of Browser Hub fallback',
+      'Opt-out of the default tablist',
+      'Opt-out of fallback motd',
+      'Custom fallback motd',
+      'Priority support',
+      'Automated chat moderation',
+    ],
+    featured: true,
+  },
+]
+</script>