From 8b3e2fe3add5c6449001e2bffd24ad04ac0e4f31 Mon Sep 17 00:00:00 2001
From: Henri Courdent <122811744+hcourdent@users.noreply.github.com>
Date: Wed, 27 Sep 2023 17:34:10 +0200
Subject: [PATCH] Update pricing page & fix dark mode (#318)

* Fix dark mode & update pricing page

* Added Whitelabel section & backlinks

* Improved links
---
 docs/advanced/index.md                    |  19 ---
 docs/misc/7_plans_details/index.mdx       |  28 +++-
 docs/misc/9_guides/index.md               |  13 --
 docs/misc/9_guides/index.mdx              |  16 ++
 src/components/Pricing.js                 | 185 +++++++++++++---------
 src/components/pricing/PriceCalculator.js |   5 +-
 6 files changed, 154 insertions(+), 112 deletions(-)
 delete mode 100644 docs/advanced/index.md
 delete mode 100644 docs/misc/9_guides/index.md
 create mode 100644 docs/misc/9_guides/index.mdx

diff --git a/docs/advanced/index.md b/docs/advanced/index.md
deleted file mode 100644
index a9b07f3f6..000000000
--- a/docs/advanced/index.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Advanced
-
-Windmill's most advanced guides.
-
-<div class="text-xl mb-2 font-semibold"></div>
-<div class="grid grid-cols-2 gap-6 mb-4">
-  <a href="/docs/advanced/self_host" class="rounded-md p-6 border border-gray-200 hover:border-blue-500 transition-all cursor-pointer flex flex-col gap-2 !no-underline" >
-   <div class="text-lg font-semibold text-gray-900">Self-Host</div>
-    <div class="text-sm text-gray-500">Host and manage Windmill directly on your server.</div>
-  </a>
-  <a href="/docs/advanced/sharing_common_logic" class="rounded-md p-6 border border-gray-200 hover:border-blue-500 transition-all cursor-pointer flex flex-col gap-2 !no-underline" >
-   <div class="text-lg font-semibold text-gray-900">Sharing Common Logic</div>
-    <div class="text-sm text-gray-500">Share common logic between your scripts using relative imports in both Python and Deno.</div>
-  </a>
-  <a href="/docs/advanced/docker" class="rounded-md p-6 border border-gray-200 hover:border-blue-500 transition-all cursor-pointer flex flex-col gap-2 !no-underline" >
-   <div class="text-lg font-semibold text-gray-900">Run Docker Containers</div>
-    <div class="text-sm text-gray-500">Windmill supports running any docker container through its Bash support.</div>
-  </a>
-</div>
diff --git a/docs/misc/7_plans_details/index.mdx b/docs/misc/7_plans_details/index.mdx
index be12be6a7..4470ce5f9 100644
--- a/docs/misc/7_plans_details/index.mdx
+++ b/docs/misc/7_plans_details/index.mdx
@@ -17,20 +17,22 @@ Windmill provides a range of pricing plans for both Cloud and Self-hosted deploy
 ### Community Edition - Cloud
 
 No commitment or credit card required.
-- Features include Google/Github/Microsoft/Gitlab SSO, unlimited variables/resources/scripts/apps/flows (except abuse), and 1,000 free executions per month.
+- Google / Microsoft / GitHub / GitLab SSO.
+- Unlimited [variables](../../core_concepts/2_variables_and_secrets/index.mdx), [resources](../../core_concepts/3_resources_and_types/index.mdx), [scripts](../../script_editor/index.mdx), [apps](../../apps/0_app_editor/index.mdx), [flows](../../flows/1_flow_editor.mdx) (except abuse).
+- 1,000 free executions per month.
 - [Granular permissions](../../core_concepts/16_roles_and_permissions/index.mdx), [groups](../../core_concepts/8_groups_and_folders/index.mdx), [folders](../../core_concepts/8_groups_and_folders/index.mdx) and [public apps](../../apps/8_public_apps.md) available.
-- [Deployment from Github](../../advanced/9_deploy_gh_gl/index.md) and community support on [Discord](https://discord.com/invite/V7PM2YHsPB).
+- [Deployment from GitHub](../../advanced/9_deploy_gh_gl/index.md) and community support on [Discord](https://discord.com/invite/V7PM2YHsPB).
 
 ### Team Plan - Cloud
 
 Designed for small teams automating processes.
 - Includes all Community edition features.
-- [Priority Support](../12_support_and_sla/index.mdx) 24/7 with a 48-hour response time and automation engineer assistance.
 - [Audit logs](../../core_concepts/14_audit_logs/index.mdx) with a 7-day retention period.
 - [Global CSS on App Editor](../15_css_editor/index.md).
 - [Multiplayer](../../core_concepts/7_multiplayer/index.md) editing.
 - Each seat: $10/month.
 - Each seat includes one user or two operators and 10k executions.
+- [Priority Support](../12_support_and_sla/index.mdx) 24/7 with a 48-hour response time and automation engineer assistance.
 - Limited to 20 users.
 
 `seats = max(users, executions / 10k)`. Meaning if you have 4 users and 60k executions, you pay 60$ = 40$ + 20$.
@@ -43,12 +45,12 @@ Your own hosted dedicated Windmill cluster without restrictions.
 Dedicated support, guidance and infrastructure for advanced capabilities.
 
 - Isolated & dedicated database network & workers.
-- [SLA and priority support](../12_support_and_sla/index.mdx) with a 3-hour response time.
 - [Audit logs](../../core_concepts/14_audit_logs/index.mdx) with a 60-day retention period.
 - [Deploy to staging/prod web UI](../../core_concepts/12_staging_prod/index.md).
 - [Global CSS on App Editor](../15_css_editor/index.md).
 - [Multiplayer](../../core_concepts/7_multiplayer/index.md) editing.
 - [SAML / SCIM support](../14_saml_and_scim/index.md). Group sync with active directory.
+- [SLA and priority support](../12_support_and_sla/index.mdx) with a 3-hour response time.
 - Design partner for Windmill roadmap.
 - Base price at $600.
 - Each seat: $40/month.
@@ -59,10 +61,18 @@ See [Upgrading to Enterprise Edition](#upgrading-to-enterprise-edition).
 
 ## Self-hosted
 
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+		title="Self Host Windmill"
+		description="Self host Windmill in 2 minutes."
+		href="/docs/advanced/self_host/"
+	/>
+</div>
+
 ### Free and Open-source
 
 - Unlimited users and executions.
-- Features [Google/Github/Microsoft/Gitlab SSO](../../misc/2_setup_oauth/index.mdx) and easy deployment on Fargate/Docker/Kubernetes.
+- Features [Google/Microsoft/GitHub/GitLab SSO](../../misc/2_setup_oauth/index.mdx) and easy deployment on Fargate/Docker/Kubernetes.
 - Community support on [Discord](https://discord.com/invite/V7PM2YHsPB).
 
 ### Enterprise Edition - Self-Hosted
@@ -122,6 +132,14 @@ Team plans work at the workspace-level.
 
 #### Self-host
 
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+		title="Self Host Windmill"
+		description="Self host Windmill in 2 minutes."
+		href="/docs/advanced/self_host/"
+	/>
+</div>
+
 - The subscription to the Enterprise Self-Host offer is done through a [secure payment link](https://billing.windmill.dev/b/8wMaFS51Y0Bl2VacMT), with a 1-month free trial.
 - You can reach out to us via contact@windmill.dev, [Discord](https://discord.com/invite/V7PM2YHsPB), or schedule a [meeting](https://www.windmill.dev/book-demo) for an introduction session.
 - Upon subscribing, we will get back to you with a license key that is valid for a month (duration of trial). You can also contact us immediately if preferred. At the end of the subscription period (or trial), you will receive another license key valid for a year.
diff --git a/docs/misc/9_guides/index.md b/docs/misc/9_guides/index.md
deleted file mode 100644
index 6525464eb..000000000
--- a/docs/misc/9_guides/index.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Guides
-
-<div class="text-xl mb-2 font-semibold"></div>
-<div class="grid grid-cols-2 gap-6 mb-4">
-  <a href="/docs/misc/guides/aggrid_table" class="rounded-md p-6 border border-gray-200 hover:border-blue-500 transition-all cursor-pointer flex flex-col gap-2 !no-underline" >
-   <div class="text-lg font-semibold text-gray-900">AgGrid Table</div>
-    <div class="text-sm text-gray-500">Basic introduction on how to use AgGrid Tables.</div>
-  </a>
-  <a href="/docs/misc/guides/table" class="rounded-md p-6 border border-gray-200 hover:border-blue-500 transition-all cursor-pointer flex flex-col gap-2 !no-underline" >
-   <div class="text-lg font-semibold text-gray-900">Table</div>
-    <div class="text-sm text-gray-500">Basic introduction on how to the Table component.</div>
-  </a>
-</div>
diff --git a/docs/misc/9_guides/index.mdx b/docs/misc/9_guides/index.mdx
new file mode 100644
index 000000000..439050574
--- /dev/null
+++ b/docs/misc/9_guides/index.mdx
@@ -0,0 +1,16 @@
+import DocCard from '@site/src/components/DocCard';
+
+# Guides
+
+<div class="grid grid-cols-2 gap-6 mb-4">
+    <DocCard
+		title="AgGrid Table"
+		description="Basic introduction on how to use AgGrid Tables."
+		href="/docs/misc/guides/aggrid_table"
+	/>
+    <DocCard
+		title="Table"
+		description="Basic introduction on how to the Table component."
+		href="/docs/misc/guides/table"
+    />
+</div>
\ No newline at end of file
diff --git a/src/components/Pricing.js b/src/components/Pricing.js
index 5291233a9..59403a315 100644
--- a/src/components/Pricing.js
+++ b/src/components/Pricing.js
@@ -9,7 +9,8 @@ import classNames from 'classnames';
 
 const types = [
 	{ value: 'selfhost', label: 'Self-hosted' },
-	{ value: 'cloud', label: 'Cloud' }
+	{ value: 'cloud', label: 'Cloud' },
+	{ value: 'whitelabel', label: 'White Label' },
 ];
 
 const periods = [
@@ -22,13 +23,13 @@ const pricing = {
 		{
 			name: 'Free and Open-source',
 			id: 'tier-free-selfhost',
-			href: '#',
+			href: '/docs/misc/plans_details#free-and-open-source',
 			price: {},
 
 			description: 'Unlimited users & executions',
 			features: [
-				{ text: 'Google/Github/Microsoft/Gitlab SSO' },
-				{ text: 'Easy to deploy on Fargate/Docker/Kubernetes' },
+				{ text: 'Google / Microsoft / GitHub / GitLab SSO' },
+				{ text: 'Easy deployment on Fargate / Docker / Kubernetes' },
 				{ text: 'Community support on Discord' }
 			],
 			mostPopular: false
@@ -36,7 +37,7 @@ const pricing = {
 		{
 			name: 'Enterprise edition',
 			id: 'tier-enterprise-selfhost',
-			href: 'mailto:contact@windmill.dev',
+			href: '/docs/misc/plans_details#self-host',
 			price: {
 				worker: {
 					monthly: 50,
@@ -67,27 +68,24 @@ const pricing = {
 				{
 					text: (
 						<span>
-							Windmill Enterprise Edition <b>Plugins</b>
+							Windmill Enterprise Edition <b>Plugins</b>:
 						</span>
 					),
 					features: [
 						{ text: 'Audit logs' },
 						{ text: 'Distributed dependency cache backed by S3' },
 						{ text: 'SAML support including groups synchronization' },
-						{ text: 'Multiplayer on WebIDE' }
+						{ text: 'Dedicated Workers / Native Performance' },
+						{ text: 'Worker Group Management UI' },
+						{ text: 'Deploy to staging/prod web UI' },
+						{ text: 'Global CSS on App Editor' },
+						{ text: 'Multiplayer on WebIDE' },
 					]
 				},
 				{
 					text: (
 						<span>
-							<b>SLA</b>
-						</span>
-					)
-				},
-				{
-					text: (
-						<span>
-							<b>Priority Support 24/7 </b> with 3h response time and automation engineer assistance
+							<b>SLA & Priority Support 24/7 </b> with 3h response time and automation engineer assistance
 						</span>
 					)
 				},
@@ -95,7 +93,7 @@ const pricing = {
 				{
 					text: (
 						<span>
-							<b>Design partners for Roadmap</b>
+							<b>Design partners for roadmap</b>
 						</span>
 					)
 				}
@@ -107,42 +105,45 @@ const pricing = {
 		{
 			name: 'Community',
 			id: 'tier-free',
-			href: '#',
+			href: '/docs/misc/plans_details#community-edition---cloud',
 			price: {},
 			description: 'Discover the platform with no commitment and no credit card required.',
 			features: [
 				{
-					text: <span>Google/Github/Microsoft/Gitlab SSO</span>
+					text: <span>Google / Microsoft / GitHub / GitLab SSO</span>
 				},
 				{
 					text: (
 						<span>
-							<b>Unlimited</b> variables/resources/scripts/apps/flows * (except abuse)
+							<b>Unlimited</b> variables/resources/scripts/apps/flows (*except abuse)
 						</span>
 					)
 				},
 				{
 					text: (
 						<span>
-							<b>1000</b> free executions per month
+							<b>1,000</b> free executions per month
 						</span>
 					)
 				},
 				{
-					text: <span>Public apps</span>
+					text: <span>Groups, folders and granulars permissions</span>
 				},
 				{
-					text: <span>Groups, folders and granulars permissions</span>
+					text: <span>Public apps</span>
 				},
 				{
 					text: (
 						<span>
-							Deploy from <b>Github</b>
+							Deploy from <b>GitHub</b>
 						</span>
 					)
 				},
 				{
 					text: <span>Community support on Discord</span>
+				},
+				{
+					text: <span><a href="/docs/misc/plans_details#community-edition---cloud">All details</a></span>
 				}
 			],
 
@@ -151,14 +152,14 @@ const pricing = {
 		{
 			name: 'Team',
 			id: 'tier-team',
-			href: '/docs/misc/plans_details#upgrading-to-team-edition',
+			href: 'https://app.windmill.dev/',
 			price: {
 				seat: {
 					monthly: 10,
 					description: 'An author can create scripts and flows',
 					default: 1,
 					min: 1,
-					max: 100
+					max: 20
 				}
 			},
 			minPrice: 10,
@@ -176,7 +177,13 @@ const pricing = {
 					)
 				},
 				{
-					text: <span>Each seat includes:</span>,
+					text: <span>Global CSS on App Editor</span>
+				},
+				{
+					text: <span>Multiplayer editing</span>
+				},
+				{
+					text: <span> Each seat includes:</span>,
 					features: [
 						{ text: 'one user or two operators' },
 						{
@@ -188,7 +195,9 @@ const pricing = {
 						}
 					]
 				},
-
+				{
+					text: <span>20 seats maximum</span>
+				},
 				{
 					text: (
 						<span>
@@ -196,6 +205,9 @@ const pricing = {
 							assistance
 						</span>
 					)
+				},
+				{
+					text: <span><a href="/docs/misc/plans_details#team-plan---cloud">All details</a></span>
 				}
 			],
 			mostPopular: true,
@@ -204,7 +216,7 @@ const pricing = {
 		{
 			name: 'Enterprise',
 			id: 'tier-enterprise',
-			href: 'mailto:contact@windmill.dev',
+			href: '/docs/misc/plans_details#cloud-1',
 			price: {
 				worker: {
 					monthly: 100,
@@ -222,12 +234,15 @@ const pricing = {
 					max: 1000
 				}
 			},
-			minPrice: 440,
-			description: 'Dedicated support and infrastructure for your company.',
+			minPrice: 600,
+			description: 'Dedicated support, guidance and infrastructure for your company.',
 			features: [
 				{
 					text: <span>Everything in Team</span>
 				},
+				{
+					text: <span>Isolated & dedicated <b>database network & workers</b></span>
+				},
 
 				{
 					text: (
@@ -239,28 +254,28 @@ const pricing = {
 				{
 					text: (
 						<span>
-							<b>SAML</b> support including groups synchronization
+							Audit logs <b>60 days </b>retention
 						</span>
 					)
 				},
 				{
 					text: (
 						<span>
-							<b>SLA</b>
+							Deploy to staging/prod web UI
 						</span>
 					)
 				},
 				{
 					text: (
 						<span>
-							Audit logs <b>60 days </b>retention
+							<b>SAML / SCIM</b> support including groups synchronization
 						</span>
 					)
 				},
 				{
 					text: (
 						<span>
-							<b>Priority Support 24/7 </b> with 3h response time and automation engineer assistance
+							<b>SLA & Priority Support 24/7 </b> with 3h response time and automation engineer assistance
 						</span>
 					)
 				},
@@ -268,13 +283,32 @@ const pricing = {
 				{
 					text: (
 						<span>
-							<b>Design partners for Roadmap</b>
+							<b>Design partners for roadmap</b>
 						</span>
 					)
+				},
+				{
+					text: <span><a href="/docs/misc/plans_details#enterprise-plan---cloud">All details</a></span>
 				}
 			],
 			mostPopular: false
 		}
+	],
+	whitelabel: [
+		{
+			name: 'White Labeling Windmill',
+			id: 'tier-free-selfhost',
+			price: {},
+
+			description: 'Windmill offers white labeling capabilities, allowing you to customize the Windmill platform to align with your brand.',
+			features: [
+				{ text: 'Embed the entire Windmill app.' },
+				{ text: 'Embed specific components (flow builder, app builder).' },
+			],
+			mostPopular: false,
+			customMessage: 'Learn more',
+			href: '/docs/misc/white_labelling'
+		}
 	]
 };
 
@@ -293,18 +327,45 @@ export default function Pricing() {
 					<RadioGroup
 						value={frequency}
 						onChange={setFrequency}
-						className="grid grid-cols-2 gap-x-1 rounded-full p-1 text-center text-md font-semibold leading-5 ring-1 ring-inset ring-gray-200 dark:ring-gray-700"
+						className="grid grid-cols-3 gap-x-1 rounded-full p-1 text-center text-md font-semibold leading-5 ring-1 ring-inset ring-gray-200 dark:ring-gray-700"
 					>
 						<RadioGroup.Label className="sr-only">Payment frequency</RadioGroup.Label>
 						{types.map((option) => (
+							<RadioGroup.Option
+							key={option.value}
+							value={option}
+							className={({ checked }) =>
+								classNames(
+									checked ? (option.value === 'whitelabel' ? 'bg-gray-300 text-white' : 'bg-blue-600 text-white') : '',
+									'cursor-pointer rounded-full px-4 py-2',
+									'transition-all'
+								)
+							}
+						>
+							<span>{option.label}</span>
+						</RadioGroup.Option>
+						
+						))}
+					</RadioGroup>
+					<div>
+					{frequency.value !== 'whitelabel' && (
+					<RadioGroup
+						value={period}
+						onChange={setPeriod}
+						className="grid grid-cols-2 gap-x-1 rounded-full p-1 text-center text-xs font-semibold leading-5 ring-1 ring-inset ring-gray-200 dark:ring-gray-700"
+					>
+						<RadioGroup.Label className="sr-only">Payment period</RadioGroup.Label>
+						{periods.map((option) => (
 							<RadioGroup.Option
 								key={option.value}
 								value={option}
 								className={({ checked }) =>
 									classNames(
-										checked ? 'bg-blue-600 text-white' : '',
-										'cursor-pointer rounded-full px-4 py-2',
-										'transition-all '
+										checked
+											? 'bg-gray-800 dark:bg-gray-200 dark:text-gray-900 text-white'
+											: 'text-gray-500',
+										'cursor-pointer rounded-full px-2.5 py-1',
+										'transition-all'
 									)
 								}
 							>
@@ -312,37 +373,17 @@ export default function Pricing() {
 							</RadioGroup.Option>
 						))}
 					</RadioGroup>
-					<div>
-						<RadioGroup
-							value={period}
-							onChange={setPeriod}
-							className="grid grid-cols-2 gap-x-1 rounded-full p-1 text-center text-xs font-semibold leading-5 ring-1 ring-inset ring-gray-200 dark:ring-gray-700"
-						>
-							<RadioGroup.Label className="sr-only">Payment period</RadioGroup.Label>
-							{periods.map((option) => (
-								<RadioGroup.Option
-									key={option.value}
-									value={option}
-									className={({ checked }) =>
-										classNames(
-											checked
-												? 'bg-gray-800 dark:bg-gray-200 dark:text-gray-900 text-white'
-												: 'text-gray-500',
-											'cursor-pointer rounded-full px-2.5 py-1',
-											'transition-all'
-										)
-									}
-								>
-									<span>{option.label}</span>
-								</RadioGroup.Option>
-							))}
-						</RadioGroup>
+				)}						
 					</div>
 				</div>
 				<div
 					className={classNames(
 						'isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-8 lg:mx-0 lg:max-w-none w-full',
-						frequency.value === 'selfhost' ? 'lg:grid-cols-2' : 'lg:grid-cols-3'
+						{
+							'lg:grid-cols-3': frequency.value === 'cloud',
+							'lg:grid-cols-2': frequency.value === 'selfhost',
+							'lg:grid-cols-1': frequency.value === 'whitelabel',
+						  }
 					)}
 				>
 					{pricing[frequency.value].map((tier, index) => (
@@ -409,16 +450,18 @@ export default function Pricing() {
 								</a>
 							)}
 
-							{index == 0 ? (
-								<div
+						{index === 0 && (frequency.value === 'selfhost' || frequency.value === 'cloud') ? (
+								
+								<a
 									aria-describedby={tier.id}
+									href={tier.href}
 									className={classNames(
 										'text-gray-900 ring-1 ring-inset ring-gray-200 dark:ring-gray-600 hover:ring-gray-300 dark:text-white',
 										'!no-underline mt-6 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 focus-visible:outline-gray-600'
 									)}
 								>
 									No credit card required
-								</div>
+								</a>
 							) : (
 								<a
 									href={tier.href}
@@ -430,10 +473,10 @@ export default function Pricing() {
 										'!no-underline mt-6 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 focus-visible:outline-blue-600'
 									)}
 								>
-									{tier.customMessage ? tier.customMessage : 'Contact us'}
+									{tier.customMessage ? tier.customMessage : 'How to upgrade'}
 								</a>
 							)}
-							<ul role="list" className="mt-8 space-y-3 text-sm leading-6 text-gray-600 xl:mt-10">
+							<ul role="list" className="mt-8 space-y-3 text-sm leading-6 text-gray-600 xl:mt-10" style={{ marginBottom: '8rem' }}>
 								<FeatureList features={tier.features} level={1} id={tier.id} />
 							</ul>
 							{Object.keys(tier.price).length > 0 ? (
@@ -447,4 +490,4 @@ export default function Pricing() {
 			<PricingFAQ />
 		</div>
 	);
-}
+}
\ No newline at end of file
diff --git a/src/components/pricing/PriceCalculator.js b/src/components/pricing/PriceCalculator.js
index 02c67e5aa..dc02b5a14 100644
--- a/src/components/pricing/PriceCalculator.js
+++ b/src/components/pricing/PriceCalculator.js
@@ -5,10 +5,7 @@ import classNames from 'classnames';
 import Slider from './Slider';
 
 const plans = [
-	{ name: 'Multi-tenant', description: 'Shared infrastructure', price: 200 },
-	{ name: 'Isolated workers and database', description: 'Available in US/EU/Asia', price: 600 },
-	{ name: 'Dedicated Kubernetes cluster', description: 'Available in US/EU/Asia', price: 1200 }
-];
+	{ name: 'Core package', description: 'Your own hosted dedicated Windmill cluster without restrictions', price: 360 },];
 
 function calculatePrice(monthlyPrice, period) {
 	if (period === 'annually') {