Feat website pricing

docs/.vuepress/components/PricingContent.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <div class="relative max-w-screen-xl mx-auto">
+
+      <h2 class="text-center text-4xl normal-case mb-10 mt-6">Additional <strong>services</strong></h2>
+
+      <div class="sm:flex -mt-10 justify-center">
+        <Offer class="w-full sm:w-1/4 justify-items-stretch sm:px-2"
+               v-for="item of $site.themeConfig.offers.additionalServices.items" v-bind="item"
+               :key="item.title" />
+      </div>
+    </div>
+
+    <div class="bg-gray-lighter py-10">
+      <div class="container flex flex-col w-full max-w-md mx-auto px-3 pb-5 text-center">
+        <h3 class="text-xl font-bold mb-10">Why support becomes chargeable?</h3>
+
+        <div class="text-justify">
+          <p class="mb-5">
+            Ts.ED is an MIT-licensed <strong>Open-Source</strong> project which grows continuously thanks to community's support.
+            This framework is a result of the long road, full of sleepless nights, working after hours, and busy
+            weekends.
+          </p>
+          <p class="mb-5">
+            <strong>As the author of the framework</strong>, I spend a lot of time to answer your questions as best as possible.
+            Some of them are about specific configuration of your project and they needs a quick help from me.
+            However, in most cases, issues can be directly addressed to the Ts.ED community and this is what I recommend to do!
+          </p>
+          <p class="mb-5">
+            It happens that some problems are specific to the configuration of your project and therefore require a
+            quick
+            intervention on my part.
+          </p>
+          <p class="mb-5">
+            It's this intervention that you appreciate, because you know that the <strong>result will be there</strong>.
+          </p>
+          <p class="mb-5">
+            This support must be remunerated at its fair value, and <strong>it's essential to continue working on the
+            framework!</strong>.
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="bg-blue text-white py-10">
+      <div class="container flex flex-col w-full max-w-md mx-auto px-3 pb-5 text-center">
+        <h3 class="text-xl font-bold mb-10">Why pay for support?</h3>
+
+        <p>
+          The support is a bonus linked to sponsorship. In reality, you become an official sponsor of the framework, and
+          you get the advantage of having quality and personalized support.
+        </p>
+      </div>
+    </div>
+
+
+    <SupportUsBlock />
+  </div>
+</template>
+<script>
+export default {
+  name: "PricingContent"
+};
+</script>

docs/.vuepress/components/SupportOptions.vue

@@ -18,7 +18,7 @@
           title="Become a backer or sponsor on Github sponsor"
           href="https://github.com/sponsors/Romakita">
           <BxIcon name="bxl-github" class="mr-1" />
-          Github sponsor
+          Github sponsors
         </Button>
       </li>
       <li class="p-2">
@@ -62,4 +62,4 @@
 export default {
   name: "SupportOptions"
 };
-</script>
+</script>

docs/.vuepress/config.base.js

@@ -48,9 +48,9 @@ module.exports = ({title, description, base = "", url, apiRedirectUrl = "", them
     repo: "tsedio/tsed",
     githubProxyUrl: "https://api.tsed.io/rest/github/tsedio/tsed",
     openCollective: "https://api.tsed.io/rest/opencollective",
-    slackUrl: "https://api.tsed.io/rest/slack/tsedio/tsed",
+    slackUrl: `${base}/pricing`,
     stackoverflowUrl: "https://stackoverflow.com/search?q=tsed",
-    sponsorUrl: "https://tsed.io/support.html",
+    sponsorUrl: `${base}/sponsors.html`,
     twitterUrl: "https://twitter.com/TsED_io",
     editLinks: true,
     docsDir: "docs",
@@ -263,6 +263,11 @@ module.exports = ({title, description, base = "", url, apiRedirectUrl = "", them
               }
             ].sort((a, b) => (a.text < b.text ? -1 : 1))
           },
+          {
+            title: `Pricing | ${title}`,
+            text: "Pricing",
+            link: `${base}/pricing`
+          },
           {
             icon: "bx bx-dots-horizontal-rounded text-lg",
             title: `Extras`,
@@ -288,8 +293,8 @@ module.exports = ({title, description, base = "", url, apiRedirectUrl = "", them
                 link: `${base}/contributing.html`
               },
               {
-                text: "Support",
-                link: `${base}/support.html`
+                text: "Support us",
+                link: `${base}/sponsors.html`
               },
               {
                 text: "License",
@@ -415,7 +420,7 @@ module.exports = ({title, description, base = "", url, apiRedirectUrl = "", them
               {title: "Our Team", path: base + "/team"},
               {title: "Tutorials", path: base + "/tutorials/"},
               {title: "Contributing", path: base + "/contributing"},
-              {title: "Support us", path: base + "/support"},
+              {title: "Support us", path: base + "/sponsors"},
               {title: "License", path: base + "/license"},
               {title: "API References", path: `${apiRedirectUrl}/api`}
             ]
@@ -500,13 +505,17 @@ module.exports = ({title, description, base = "", url, apiRedirectUrl = "", them
             {
               title: "Support",
               items: [
+                {
+                  label: "Pricing",
+                  url: base + "/pricing.html"
+                },
                 {
                   label: "Issues",
                   url: "https://github.com/tsedio/tsed/issues"
                 },
                 {
                   label: "Sponsoring & donations",
-                  url: base + "/support.html"
+                  url: base + "/sponsors.html"
                 }
               ]
             }

docs/.vuepress/config.js

@@ -1,7 +1,243 @@
+const slackURL = "https://api.tsed.io/rest/slack/tsedio/tsed";
+const defaultTiersItems = [
+  `Github <a class="text-blue hover:text-blue-active underline" href="https://github.com/tsedio/tsed/issues" target="_blank">issues</a>`,
+  `Github <a class="text-blue hover:text-blue-active underline" href="https://github.com/tsedio/tsed/discussions" target="_blank">discussions</a>`,
+  `Slack <a class="text-blue hover:text-blue-active underline" href="${slackURL}" target=\"_blank\">public channel</a>`,
+  "Voting for new features"
+];
+
+function getTiers(wording = "Free") {
+  return [
+    {
+      title: "Individual",
+      category: "Starter",
+      description: "Premium support for individuals and non-profit organizations",
+      items: [
+        `<strong>${wording} options</strong>`,
+        "+",
+        "Sponsor badge",
+        "<strong>Slack private</strong> channel",
+        "<strong>Direct message</strong> to the author",
+        "<strong>Earlier access</strong> to private packages",
+        "<strong>Prioritized</strong> issues",
+        "Submit new features",
+        "Hosted private packages on our repository",
+        "Your name / logo will appear on the Ts.ED website as sponsor!"
+      ],
+      price: {
+        amount: "$25",
+        by: "per month"
+      },
+      cta: {
+        label: "Get started",
+        url: "https://github.com/sponsors/Romakita/sponsorships?sponsor=Romakita&tier_id=69641&preview=false"
+      }
+    },
+    {
+      title: "Company",
+      category: "Premium",
+      description: "Premium support for company<br />startup, small business...",
+      items: [
+        `<strong>${wording} options</strong>`,
+        "+",
+        "Sponsor badge",
+        "<strong>Slack private</strong> channel",
+        "<strong>Direct message</strong> to the author",
+        "<strong>Earlier access</strong> to private packages",
+        "<strong>Prioritized</strong> issues",
+        "Submit new features",
+        "Hosted private packages on our repository",
+        "Your name / logo will appear on the Ts.ED website as sponsor!"
+      ],
+      price: {
+        amount: "$50",
+        by: "per month"
+      },
+      cta: {
+        label: "Get started",
+        url: "https://github.com/sponsors/Romakita/sponsorships?sponsor=Romakita&tier_id=69642&preview=false"
+      }
+    },
+    {
+      title: "Company +",
+      category: "Golden",
+      description: 'Now I have an answer to the question "Are you wasting time on GitHub again?"',
+      highlight: true,
+      items: [
+        "<strong>Company options</strong>",
+        "+",
+        "<strong>Dedicated slack</strong> private channel",
+        "<strong>Technical support</strong> (hangout, audio/video)",
+        "Ask for personalized features",
+        "Code review"
+      ],
+      price: {
+        amount: "$100",
+        by: "per month"
+      },
+      cta: {
+        label: "Get started",
+        url: "https://github.com/sponsors/Romakita/sponsorships?sponsor=Romakita&tier_id=161983&preview=false"
+      }
+    }
+  ];
+}
+
 module.exports = require("./config.base")({
   title: "Ts.ED - A Node.js and TypeScript Framework on top of Express/Koa.js.",
   description:
     "A Node.js and TypeScript Framework on top of Express/Koa.js. It provides a lot of decorators and guidelines to write your code.",
   url: "https://tsed.io",
-  apiRedirectUrl: "https://api-docs.tsed.io"
+  apiRedirectUrl: "https://api-docs.tsed.io",
+  themeConfig: {
+    offers: {
+      supports: {
+        title: "Support pricing",
+        description: "Support the Open-Source project by getting a premium support!",
+        legalInfo: "Prices include taxes - It use github sponsors.",
+        items: [
+          {
+            title: "Free",
+            category: "Community",
+            description: "Share your issues with the community<br /><br />",
+            startHere: true,
+            items: defaultTiersItems,
+            price: {
+              amount: "$0",
+              by: "per month"
+            },
+            cta: {
+              label: "Open Slack",
+              url: "Slack URL"
+            }
+          },
+          ...getTiers()
+        ]
+      },
+      additionalServices: {
+        items: [
+          {
+            title: "Support",
+            category: "One time",
+            description: "You have a problem that requires quick attention.<br /><br />",
+            items: ["Audio/Video", "Share screen", "Share repository", "1 hour consulting, mentorship or pair-programming session"],
+            price: {
+              amount: "$100",
+              by: "one time"
+            },
+            cta: {
+              label: "Get started",
+              url: "https://github.com/sponsors/Romakita/sponsorships?sponsor=Romakita&tier_id=68164&preview=false"
+            }
+          },
+          {
+            title: "Create POC",
+            category: "Development",
+            description: "I'll bootstrap a POC for you that match your needs.<br /><br />",
+            items: [
+              "Discuss about your needs on a private slack channel / e-mail",
+              "Cost and time evaluation",
+              "I take 1 minimum hour to create the repository with the source code that match your needs"
+            ],
+            price: {
+              amount: "$250",
+              by: "start from"
+            },
+            cta: {
+              label: "Contact us",
+              url: "https://form.typeform.com/to/uJLP7anG"
+            }
+          },
+          {
+            title: "Audit",
+            category: "Consulting",
+            description: "You develop your application on the Ts.ED framework and you want an expert opinion on your code.",
+            items: ["Audit and Code review", "Improvement proposal", "Audio / video playback possible (hangout, Teams, etc...)"],
+            price: {
+              amount: "$800",
+              by: "one time"
+            },
+            cta: {
+              label: "Contact us",
+              url: "https://form.typeform.com/to/uJLP7anG"
+            }
+          }
+        ]
+      },
+      sponsors: {
+        title: "Support us",
+        description: "Support the Open-Source project by becoming an official sponsor and enjoy the benefits that this includes!",
+        legalInfo: "Prices include taxes - It use github sponsors.",
+        items: [
+          {
+            title: "Supporter",
+            category: "Community",
+            description: "You are just an holy person who wants to support my work out of pure goodness. 🙏🏻",
+            startHere: true,
+            items: defaultTiersItems,
+            price: {
+              amount: "$7",
+              by: "per month"
+            },
+            cta: {
+              label: "Get started",
+              url: "https://github.com/sponsors/Romakita/sponsorships?sponsor=Romakita&tier_id=36063&preview=false"
+            }
+          },
+          ...getTiers("Supporter")
+        ]
+      }
+    },
+    backers: {
+      cta: {
+        label: "Become backer",
+        url: "https://opencollective.com/tsed#backers"
+      }
+    },
+    sponsors: {
+      classes: null,
+      title: "Support us",
+      description:
+        "Ts.ED is under MIT-license and is an open-source project. Many thanks to our sponsors, partners and backers who contribute to promote and support our project!",
+      cta: {
+        label: "Become sponsor",
+        url: "/sponsors.html"
+      },
+      items: [
+        {
+          title: "Premium sponsors",
+          class: "w-1/2 sm:w-1/6 px-5 py-3",
+          style: {
+            maxHeight: "150px"
+          },
+          items: [
+            {
+              title: "Zenika",
+              href: "https://www.zenika.com",
+              src: "https://zenika-website.cdn.prismic.io/zenika-website/4e73b102-9045-4cff-b098-a0625f7d10f8_logo_light.svg"
+            },
+            {
+              title: "Weseek",
+              href: "https://weseek.co.jp/",
+              src: "https://avatars.githubusercontent.com/u/6468105?v=4"
+            }
+          ]
+        },
+        {
+          title: "Partners",
+          class: "w-1/3 sm:w-1/6 px-5 py-3",
+          style: {
+            maxHeight: "90px"
+          },
+          items: [
+            {
+              title: "schnell.digital",
+              href: "https://schnell.digital/",
+              src: "/partners/schnell.svg"
+            }
+          ]
+        }
+      ]
+    }
+  }
 });