fix: New pricing -> blog post

blog/2024-01-18-announcing-new-pricing.mdx

@@ -0,0 +1,192 @@
+---
+slug: new-pricing-2024-01
+title: "Upcoming Changes to Tolgee's Pricing Plans"
+description: "We are making some changes to Tolgee's pricing plans. Read more about the changes and the reasons behind them."
+authors: [jcizmar]
+tags: ['tolgee', 'pricing']
+image: '/img/blog/new-pricing_light.webp'
+---
+
+import { PricingChanges } from "../src/component/pricing/PricingChanges";
+import ThemedImage from "@theme/ThemedImage";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+Dear Tolgee Users,
+
+In the past year of 2023, Tolgee made a significant step forward, introducing many new features and making the whole
+project more robust. We must reflect these company and product developments into the pricing to align with the new product state and the company's business targets.
+
+<ThemedImage
+  alt="New pricing"
+  sources={{
+    light: useBaseUrl('/img/blog/new-pricing_light.webp'),
+    dark: useBaseUrl('/img/blog/new-pricing_dark.webp'),
+  }}
+/>
+
+<!--truncate -->
+
+## What do we change?
+
+ - We are entirely redesigning the pay-as-you-go plan
+ - We are adding a new, more accessible "Team" plan for self-hosted instances
+ - We are making the Tolgee AI Translator available also on self-hosted instances
+ - We are limiting the number of seats in the self-hosted free plan
+ - We are making machine translation credits way cheaper
+
+The new plans will be available by **26th January 2024**.
+
+## What is changing in Cloud pricing
+
+Until now, we have considered the re-selling of
+machine translation as one of our core revenue streams. The experience showed us that this wasn't the right decision.
+We want to **keep machine translation accessible** for all our customers, and we don't want to discourage new customers
+with high machine translation prices. At the same time, we would like to focus on **improving the [Tolgee AI translator](/platform/translation_process/tolgee_translator)**
+so it's used by as many customers as possible because we see unlimited opportunities in the AI in software localization.
+The new price of 1000 machine translation credits will be unified at €0.035 per 1000 machine translation credits in all the plans,
+including the self-hosted ones. We will also charge one machine translation credit per character for the [Tolgee AI translator](/platform/translation_process/tolgee_translator).
+While before, we were charging you 10 MT credits per OpenAI token,
+which made our pricing more complex than required. Overall, we are making our pricing more straightforward.
+
+We are also completely **redesigning the pay-as-you-go plan**. The past year showed us that providing the plan,
+starting at 0€ and charging only for what's consumed, isn't cost-effective for us. For many pay-as-you-go customers,
+the payment processing and related costs are higher than the actual revenue. So the new plan will start at €30, which
+we consider a fair minimal price for the service. The new plan will contain new features such as the <a href="/platform/projects_and_organizations/webhooks">Webhooks</a> and <a
+  href="/platform/projects_and_organizations/content_delivery#using-custom-storage">Custom Content Delivery Storage</a>.
+
+### The Pay-as-you-go plan changes
+
+<PricingChanges data={[
+  { item: "Plan price", oldValue: "€0", newValue: "€30", isNumber: true },
+  { item: "Price per 1000 MT credits", oldValue: "€0.20", newValue: "€0.035", isNumber: true },
+  {
+    item: "Additional features",
+    oldValue: "N/A",
+    newValue: <>
+      <a href="/platform/projects_and_organizations/webhooks">Webhooks</a>,{' '}
+      <a href="/platform/projects_and_organizations/content_delivery#using-custom-storage">
+        Custom Content Delivery Storage
+      </a>
+    </>
+  },
+  {
+    item: "Tolgee AI Translator pricing model",
+    oldValue: "1 MT credit per 10 OpenAI tokens",
+    newValue: "1 MT credit per character"
+  },
+  {
+    item: "Transfer date of current pay-as-you-go users to the new plan",
+    oldValue: "N/A",
+    newValue: "March 1st, 2024"
+  },
+]} />
+
+The current pay-as-you-go plan users will be transferred to the updated pay-as-you-go plan on <b>March 1st</b>.
+Please get in touch with us if you have any concerns about this change using any of the channels described at
+the bottom of this post.
+
+### The Business plan changes
+
+<PricingChanges data={[
+  { item: "Price per 1000 MT credits", oldValue: "€0.20", newValue: "€0.035" },
+  {
+    item: "Tolgee AI Translator pricing model",
+    oldValue: "1 MT credit per 10 OpenAI tokens",
+    newValue: "1 MT credit per character"
+  }
+]} />
+
+### For open-source projects
+
+As an open-source project, you don't have to worry; we still provide the free business plan on the Tolgee Cloud. **Just reach us out at [email protected]**.
+
+## What is changing in self-hosted pricing
+
+We discovered that Tolgee provides great value for many companies that use Tolgee on self-hosted instances, but very few
+of them actually subscribed to our "Bussiness" plan. According to our analysis, the free plan is also sufficient for
+larger teams of 10+ developers, and the price of the business plan is too high while not bringing much more value.
+
+Because of this, we decided to make the [Tolgee AI translator](/platform/translation_process/tolgee_translator) available also to customers who purchased a license
+for any of the self-hosted plans. This way, the self-hosted license brings significant benefits in comparison
+to the free plan. We are also adding a new, more cost-effective "Team" plan. At the same time, we decided to <b>limit
+the
+number of seats in the free plan to 10</b>. This change won't affect the users on older Tolgee Platform versions, so
+the users staying with such versions are fine with continuing with the previous unlimited free plan.
+
+The new version of the Tolgee platform with limited free users will be released by **January 26th**.
+
+### The new Team plan on Self-hosted
+
+<PricingChanges data={[
+  { item: "Price per seat", oldValue: "N/A", newValue: "10€" },
+  {
+    item: <>
+      Price per 1000 MT credits <br />(Only for <a href="/platform/translation_process/tolgee_translator">Tolgee
+      AI translator</a> services, for other services, you can provide your
+      own API key)
+    </>,
+    oldValue: "N/A",
+    newValue: "€0.035"
+  },
+  {
+    item: "Additional features",
+    oldValue: "N/A",
+    newValue: <><a href="/platform/projects_and_organizations/webhooks">Webhooks</a>, <a
+      href="/platform/projects_and_organizations/content_delivery">Multiple content delivery
+      configs</a>, <a
+      href="/platform/translation_process/tolgee_translator">Tolgee
+      AI translator</a></>
+  },
+]} />
+
+### Changes to Business plan on self-hosted
+
+<PricingChanges data={[
+  {
+    item: <>
+      Price per 1000 MT credits <br />(Only for <a href="/platform/translation_process/tolgee_translator">Tolgee
+      AI translator</a> services, for other services, you can provide your
+      own API key)
+    </>,
+    oldValue: "N/A",
+    newValue: "€0.035"
+  },
+  {
+    item: "Additional features",
+    oldValue: "N/A",
+    newValue: <a href="/platform/translation_process/tolgee_translator">Tolgee
+      AI translator</a>
+  },
+]} />
+
+We understand that this change might be hard to accept for many companies using Tolgee for free on self-hosted instances.
+We apologize for the inconvenience you may encounter. However, we need to focus on making the Tolgee company stable
+and cost-effective, and we want to assure you that additional revenues from this change will be used
+for future product development, bringing you **great new features like GitHub/GitLab integrations, Visual Editor,
+Universal Format Support, Mobile SDKs, Document translations and [much more](/roadmap)**.
+
+## Few more words to advocate the changes
+
+When we started Tolgee in 2020, our goal was simple: to create an open-source localization platform that makes the
+translation process easier for software developers. Today, we are proud to see thousands of
+users and hundreds of companies actively using Tolgee.
+
+Over the past three years, we have personally invested a significant amount of our time and resources into the
+development and growth of Tolgee, funded primarily through our personal investments.
+This journey has been enriching, brimming with learning opportunities, rewards, and the pure
+enjoyment of working diligently on a tool that we are passionate about. Moreover, the positive feedback and
+warm reactions we have received from our users have only amplified our excitement and commitment to this project.
+
+In 2024, we are facing the reality of the current market situation and recognizing that it is time for us to think
+about long-term sustainability and company stability. Until now, we have provided many features that deliver value
+to many companies while only a fraction contribute to future development by subscribing to non-free subscription plans.
+We realized this has to change if Tolgee should become a stable and sustainable company.
+
+I understand and empathize that these changes may cause discomfort and may not accommodate everyone's circumstances.
+If this materially impacts your business, I warmly invite
+you to contact me directly. I am open to having a personal dialogue regarding your concerns, and I am firmly committed
+to exploring potential solutions with you to continue providing a platform that satisfies and comforts your
+experience with us. You can get in touch with me directly
+ - at [email protected]
+ - in the Tolgee slack community at https://tolg.ee/slack
+ - or book a slot in my Calendly at https://tolg.ee/jan.

blog/authors.yml

@@ -1,13 +1,13 @@
 sgranat:
   name: Štěpán Granát
-  title: Co-founder and CTO
+  title: Co-founder & CTO & The front-end magician
   url: https://github.com/stepan662
   image_url: /img/blog/profile-photos/stepan.jpeg
   description: "Štěpán is a passionate developer responsible for Frontend and SDK development at Tolgee. He's on a mission to make software localization as easy as pie while keeping it smart. 🧠"
 
 jcizmar:
-  name: Jan Cizmar 😎
-  title: Founder & Full-stack Architect
+  name: Jan Cizmar 🧑🏻‍💻
+  title: CEO & Full-stack Architect
   url: https://github.com/JanCizmar
   image_url: /img/blog/profile-photos/jan.jpeg
   description: "Jan is a coding mastermind who's on a mission to save the world from software localization chaos. He has a passion for clean code, hates being a copy-pasting monkey 🙈 and is dedicated to delivering smart and simple software as the head of Tolgee."

src/component/pricing/PricingChanges.tsx

@@ -0,0 +1,46 @@
+import React, { FC, ReactNode } from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeadCell,
+  TableRow,
+} from '../table/Table';
+import clsx from 'clsx';
+
+export type PricingChangesData = [
+  {
+    item: ReactNode;
+    isNumber?: boolean;
+    oldValue: ReactNode;
+    newValue: ReactNode;
+  }
+];
+
+export const PricingChanges: FC<{ data: PricingChangesData }> = (props) => {
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableHeadCell></TableHeadCell>
+          <TableHeadCell>Old</TableHeadCell>
+          <TableHeadCell>New</TableHeadCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {props.data.map((row, index) => (
+          <TableRow key={index}>
+            <TableCell className={clsx('max-w-[400px]')}>{row.item}</TableCell>
+            <TableCell className={clsx('text-center', 'px-10')}>
+              {row.oldValue}
+            </TableCell>
+            <TableCell className={clsx('text-center', 'px-10', 'font-bold')}>
+              {row.newValue}
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+};

src/component/table/Table.tsx

@@ -0,0 +1,49 @@
+import { styled } from '@mui/material';
+import React, { FC } from 'react';
+
+export const TableInner = styled('table')`
+  display: table;
+`;
+
+export const TableContainer = styled('div')`
+  border-radius: 4px;
+  border: 1px solid ${(props) => props.theme.palette.custom.tableBorder};
+  overflow: auto;
+  display: inline-block;
+`;
+
+export const Table: FC = (props) => {
+  return (
+    <TableContainer>
+      <TableInner>{props.children}</TableInner>
+    </TableContainer>
+  );
+};
+
+export const TableHead = styled('thead')`
+    background-color: ${(props) =>
+      props.theme.palette.custom.tableHeadBackground};
+    color: ${(props) => props.theme.palette.primary.main};
+    border: 0;
+
+    tr {
+        border-bottom: 1px solid ${(props) =>
+          props.theme.palette.custom.tableBorder};
+    }
+}
+`;
+
+export const TableBody = styled('tbody')``;
+
+export const TableRow = styled('tr')`
+  border: 0;
+`;
+
+export const TableCell = styled('td')`
+  border: 0;
+  background-color: ${(props) => props.theme.palette.custom.tableRowBackground};
+`;
+
+export const TableHeadCell = styled('th')`
+  border: 0;
+`;

src/css/custom.css

@@ -40,6 +40,8 @@
   --footer-background-gradient-start: #ffffff;
   --footer-background-gradient-stop: #ebedf0;
   --ifm-navbar-background-color-transparent: #f8f9facc;
+  --table-border-color: #d1d6dc;
+  --table-head-background: #fbfbfd;
 }
 
 html[data-theme='dark'] {
@@ -69,6 +71,8 @@ html[data-theme='dark'] {
   --footer-background-gradient-start: var(--ifm-background-color);
   --footer-background-gradient-stop: var(--overlay-background);
   --ifm-navbar-background-color-transparent: #1f2d40cc;
+  --table-border-color: rgb(44, 58, 77);
+  --table-head-background: #1f2d40cc;
 }
 
 *[itemprop='headline'] {

src/custom.d.ts

@@ -1,4 +1,16 @@
+import { CustomThemeColors } from './theme/colors';
+
 declare module '*.svg' {
   const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
   export default content;
 }
+
+declare module '@mui/material/styles' {
+  interface Palette {
+    custom: CustomThemeColors;
+  }
+
+  interface PaletteOptions {
+    custom: CustomThemeColors;
+  }
+}

src/theme/LayoutContent.tsx

@@ -6,13 +6,13 @@ import { getChatwootScript } from '../component/externalScripts/getChatwootScrip
 import { getGtagScript } from '../component/externalScripts/getGtagScript';
 import websiteSchema from '../info/website';
 import {
-  createTheme,
   Experimental_CssVarsProvider,
   ThemeProvider as MuiThemeProvider,
   useColorScheme,
 } from '@mui/material';
 import { useDarkMode } from '../utils';
 import { getHotjarScript } from '../component/externalScripts/getHotjarScript';
+import { createTheme } from './muiTheme';
 
 const MuiThemeSynchronizer = () => {
   const isDarkTheme = useDarkMode();
@@ -48,25 +48,12 @@ export const LayoutContent = ({ children }) => {
   }, [isDarkTheme]);
 
   const theme = useMemo(() => {
-    return createTheme({
-      palette: {
-        primary: {
-          main: isDarkTheme ? 'rgb(255, 105, 149)' : '#EC407A',
-        },
-      },
-    });
+    return createTheme(isDarkTheme);
   }, [isDarkTheme]);
 
   return (
     <>
       <Head>
-        {/*{cookieYesId && (*/}
-        {/*  <script*/}
-        {/*    id="cookieyes"*/}
-        {/*    type="text/javascript"*/}
-        {/*    src={`https://cdn-cookieyes.com/client_data/${cookieYesId}/script.js`}*/}
-        {/*  ></script>*/}
-        {/*)}*/}
         {trackingId && (
           <script>{`(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
           new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],

src/theme/colors.ts

@@ -0,0 +1,10 @@
+export type CustomThemeColors = typeof lightThemeColors;
+export const lightThemeColors = {
+  tableHeadBackground: 'var(--table-head-background)',
+  tableBorder: 'var(--table-border-color)',
+  tableRowBackground: 'var(--ifm-background-color)',
+};
+
+export const darkThemeColors = {
+  ...lightThemeColors,
+} as CustomThemeColors;