From e24590fd075399e9d189b3fd4c51822bac825190 Mon Sep 17 00:00:00 2001
From: Jens L <jens@goauthentik.io>
Date: Wed, 14 Jun 2023 20:52:17 +0200
Subject: [PATCH] website: add b2c pricing (#5960)

* website: add b2c pricing

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* add FAQ section for internal/external

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* add blurb about enterprise support

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix typo

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* make consistent

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---
 .../src/components/PricingQuestions/Card.tsx  |  2 +-
 website/src/pages/pricing/index.jsx           | 31 ++++++++++++++-----
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/website/src/components/PricingQuestions/Card.tsx b/website/src/components/PricingQuestions/Card.tsx
index 79511daa5..41dd93738 100644
--- a/website/src/components/PricingQuestions/Card.tsx
+++ b/website/src/components/PricingQuestions/Card.tsx
@@ -33,7 +33,7 @@ const Card = ({ title, body }: CardProps): JSX.Element => {
                             marginLeft: "0.5rem",
                         }}
                     >
-                        {title}
+                        <strong>{title}</strong>
                     </div>
                 </div>
                 {isActive && (
diff --git a/website/src/pages/pricing/index.jsx b/website/src/pages/pricing/index.jsx
index a2dba2c64..81dc78c76 100644
--- a/website/src/pages/pricing/index.jsx
+++ b/website/src/pages/pricing/index.jsx
@@ -15,7 +15,7 @@ export default function pricingPage() {
 
                     <div className={"row"}>
                         <div className={"col col--4 margin-vert--md"}>
-                            <div className="card" style={{ height: "28rem" }}>
+                            <div className="card" style={{ height: "32rem" }}>
                                 <div className="card__header">
                                     <h3>Open Source</h3>
                                 </div>
@@ -41,7 +41,7 @@ export default function pricingPage() {
                             </div>
                         </div>
                         <div className={"col col--4 margin-vert--md"}>
-                            <div className="card" style={{ height: "28rem" }}>
+                            <div className="card" style={{ height: "32rem" }}>
                                 <div className="card__header">
                                     <h3>Enterprise Self-Hosted</h3>
                                 </div>
@@ -57,7 +57,11 @@ export default function pricingPage() {
                                 </div>
                                 <div className="card__footer">
                                     <h1>
-                                        $5 <small>/user/month</small>
+                                        $5 <small>/internal user/month</small>
+                                    </h1>
+                                    <h1>
+                                        $0.02{" "}
+                                        <small>/external user/month</small>
                                     </h1>
                                     <a
                                         className="button button--info button--block"
@@ -68,9 +72,8 @@ export default function pricingPage() {
                                 </div>
                             </div>
                         </div>
-
                         <div className={"col col--4 margin-vert--md"}>
-                            <div className="card" style={{ height: "28rem" }}>
+                            <div className="card" style={{ height: "32rem" }}>
                                 <div className="card__header">
                                     <h3>Enterprise Cloud</h3>
                                 </div>
@@ -92,6 +95,10 @@ export default function pricingPage() {
                                     <h1>
                                         $5 <small>/user/month</small>
                                     </h1>
+                                    <h1>
+                                        $0.02{" "}
+                                        <small>/external user/month</small>
+                                    </h1>
                                     <a
                                         className="button button--info button--block"
                                         href="./waitlist/cloud"
@@ -114,16 +121,24 @@ export default function pricingPage() {
                             </p>
                             <div class="card-demo margin--md">
                                 <Card
-                                    body="No. As part of our core principal, we will not move any features from the open source version to the enterprise version. Features from the enterprise version are periodically moved to the open source version."
                                     title="Will any feature of the open-source version ever become enterprise?"
+                                    body="No. As part of our core principle, we will not move any features from the open source version to the enterprise version. Features from the enterprise version are periodically moved to the open source version."
+                                />
+                                <Card
+                                    title="Cam I get paid support for the open-source version?"
+                                    body="We only offer support as part of an enterprise license. You can get community support on GitHub and Discord for the open-source version."
+                                />
+                                <Card
+                                    title="What's the difference between internal and external users?"
+                                    body="Internal users might be users such as company employees, which will get access to the full Enterprise feature set. External users might be external consultants or B2C customers. These users don't get access to enterprise features."
                                 />
                                 <Card
-                                    body="We're always curious to hear what our customers are interested in and what they want to see in authentik, so if you have any questions about features send an email to <a href='mailto:hello@goauthentik.io'>hello@goauthentik.io</a>."
                                     title="Are you planning to add X to authentik?"
+                                    body="We're always curious to hear what our customers are interested in and what they want to see in authentik, so if you have any questions about features send an email to <a href='mailto:hello@goauthentik.io'>hello@goauthentik.io</a>."
                                 />
                                 <Card
-                                    body="Anyone that wants to use the enterprise features listed above. There's no minimum user amount required for enterprise."
                                     title="Who should use Enterprise plans?"
+                                    body="Anyone that wants to use the enterprise features listed above. There's no minimum user amount required for enterprise."
                                 />
                             </div>
                         </div>