website: add pricing waitlist and blog post (#5058)
* pricing Signed-off-by: Jens Langhammer <jens@goauthentik.io> * update Signed-off-by: Jens Langhammer <jens@goauthentik.io> * website: add pricing waitlist and blog post Signed-off-by: Jens Langhammer <jens@goauthentik.io> * Apply suggestions from code review Co-authored-by: Tana M Berry <tanamarieberry@yahoo.com> Signed-off-by: Jens L. <jens@beryju.org> * fix lint Signed-off-by: Jens Langhammer <jens@goauthentik.io> --------- Signed-off-by: Jens Langhammer <jens@goauthentik.io> Signed-off-by: Jens L. <jens@beryju.org> Co-authored-by: Tana M Berry <tanamarieberry@yahoo.com>
This commit is contained in:
Jens L
52
website/src/components/PricingQuestions/Card.tsx
Normal file
52
website/src/components/PricingQuestions/Card.tsx
Normal file
@ -0,0 +1,52 @@
|
||||
import React, { useState } from "react";
|
||||
|
||||
interface CardProps {
|
||||
title: string;
|
||||
body: string;
|
||||
}
|
||||
|
||||
const Card = ({ title, body }: CardProps): JSX.Element => {
|
||||
const [isActive, setIsActive] = useState(false);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
padding: "1rem",
|
||||
marginBottom: "1rem",
|
||||
marginTop: "1rem",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
className="card"
|
||||
onClick={() => setIsActive((state) => !state)}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
marginLeft: "0.5rem",
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
</div>
|
||||
{isActive && (
|
||||
<div
|
||||
className="card__body"
|
||||
dangerouslySetInnerHTML={{ __html: body }}
|
||||
>
|
||||
{}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Card;
|
||||
@ -2,7 +2,6 @@ import React from "react";
|
||||
import Layout from "@theme/Layout";
|
||||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
||||
import { useColorMode } from "@docusaurus/theme-common";
|
||||
import BrowserOnly from "@docusaurus/core/lib/client/exports/BrowserOnly";
|
||||
import { useEffect } from "react";
|
||||
|
||||
function JobBoardWrapper() {
|
||||
|
||||
62
website/src/pages/pricing/_waitlist.jsx
Normal file
62
website/src/pages/pricing/_waitlist.jsx
Normal file
@ -0,0 +1,62 @@
|
||||
import React from "react";
|
||||
import styles from "./waitlist.module.css";
|
||||
import clsx from "clsx";
|
||||
|
||||
export function WaitListForm(props) {
|
||||
return (
|
||||
<section>
|
||||
<div
|
||||
className="container"
|
||||
style={{ marginTop: "2rem", marginBottom: "4rem" }}
|
||||
>
|
||||
<h2 style={{ textAlign: "center" }}>Join the waitlist</h2>
|
||||
<p style={{ textAlign: "center" }}>
|
||||
Sign up to be notified once authentik Enterprise becomes
|
||||
ready!
|
||||
</p>
|
||||
|
||||
<div className={"row"}>
|
||||
<div className={"col col--4 margin-vert--md"}></div>
|
||||
<div className={"col col--4 margin-vert--md"}>
|
||||
<form
|
||||
name="enterprise-waitlist-v1"
|
||||
method="post"
|
||||
data-netlify="true"
|
||||
netlify-honeypot="bot-field"
|
||||
>
|
||||
<p style={{ visibility: "hidden" }}>
|
||||
<label>
|
||||
Don't fill this out if you're human:{" "}
|
||||
<input name="bot-field" />
|
||||
</label>
|
||||
</p>
|
||||
<input
|
||||
type="hidden"
|
||||
name="form-name"
|
||||
value="enterprise-waitlist-v1"
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
name="product"
|
||||
value={props.product}
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
className={clsx(styles.emailInput)}
|
||||
placeholder="Your Email address"
|
||||
/>
|
||||
<button
|
||||
className="button button--primary button--lg button--block"
|
||||
type="submit"
|
||||
>
|
||||
Join
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div className={"col col--4 margin-vert--md"}></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
137
website/src/pages/pricing/index.jsx
Normal file
137
website/src/pages/pricing/index.jsx
Normal file
@ -0,0 +1,137 @@
|
||||
import React from "react";
|
||||
import Layout from "@theme/Layout";
|
||||
import Link from "@docusaurus/Link";
|
||||
import Card from "../../components/PricingQuestions/Card";
|
||||
|
||||
export default function pricingPage() {
|
||||
return (
|
||||
<Layout title="Pricing">
|
||||
<section>
|
||||
<div
|
||||
className="container"
|
||||
style={{ marginTop: "2rem", marginBottom: "4rem" }}
|
||||
>
|
||||
<h1 style={{ textAlign: "center" }}>Pricing</h1>
|
||||
<p style={{ textAlign: "center" }}>
|
||||
All variants include security patches for all supported
|
||||
versions.
|
||||
</p>
|
||||
|
||||
<div className={"row"}>
|
||||
<div className={"col col--4 margin-vert--md"}>
|
||||
<div className="card" style={{ height: "28rem" }}>
|
||||
<div className="card__header">
|
||||
<h3>Open Source</h3>
|
||||
</div>
|
||||
<div className="card__body">
|
||||
<li>Open source</li>
|
||||
<li>Self-hosted</li>
|
||||
<li>Supports OAuth2/OpenID Connect</li>
|
||||
<li>Supports SAML</li>
|
||||
<li>Supports LDAP</li>
|
||||
<li>Supports Proxy authentication</li>
|
||||
<li>Advanced policy engine</li>
|
||||
<li>Community support</li>
|
||||
</div>
|
||||
<div className="card__footer">
|
||||
<h1>Free, forever</h1>
|
||||
<Link
|
||||
className="button button--primary button--block"
|
||||
href={"/docs/"}
|
||||
>
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={"col col--4 margin-vert--md"}>
|
||||
<div className="card" style={{ height: "28rem" }}>
|
||||
<div className="card__header">
|
||||
<h3>Enterprise Self-Hosted</h3>
|
||||
</div>
|
||||
<div className="card__body">
|
||||
<li>Self-hosted</li>
|
||||
<li>Source-available</li>
|
||||
<li>Long-term-support releases</li>
|
||||
<li>Enterprise support plan (50 Users+)</li>
|
||||
<li>Push-notification MFA (planned)</li>
|
||||
<li>Desktop authentication (planned)</li>
|
||||
<li>AI-based risk assessment (planned)</li>
|
||||
</div>
|
||||
<div className="card__footer">
|
||||
<h1>
|
||||
$5 <small>/user/month</small>
|
||||
</h1>
|
||||
<a
|
||||
className="button button--info button--block"
|
||||
href="./waitlist/enterprise"
|
||||
>
|
||||
Join waitlist
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={"col col--4 margin-vert--md"}>
|
||||
<div className="card" style={{ height: "28rem" }}>
|
||||
<div className="card__header">
|
||||
<h3>Enterprise Cloud</h3>
|
||||
</div>
|
||||
<div className="card__body">
|
||||
<li>Hosted and Managed by authentik</li>
|
||||
<li>
|
||||
Easily shift to self-hosted if needed
|
||||
</li>
|
||||
<li>Source-available</li>
|
||||
<li>Long-term-support releases</li>
|
||||
<li>Enterprise support plan (50 Users+)</li>
|
||||
<li>Push-notification MFA (planned)</li>
|
||||
<li>Desktop authentication (planned)</li>
|
||||
<li>AI-based risk assessment (planned)</li>
|
||||
</div>
|
||||
<div className="card__footer">
|
||||
<h4>Minimum 100 users</h4>
|
||||
<h1>
|
||||
$5 <small>/user/month</small>
|
||||
</h1>
|
||||
<a
|
||||
className="button button--info button--block"
|
||||
href="./waitlist/cloud"
|
||||
>
|
||||
Join waitlist
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div className="container" style={{ marginBottom: "3rem" }}>
|
||||
<div class="row">
|
||||
<div className="col col--8 col--offset-2">
|
||||
<p className="hero__subtitle margin--md">
|
||||
Frequently Asked Questions
|
||||
</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?"
|
||||
/>
|
||||
<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?"
|
||||
/>
|
||||
<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?"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
6
website/src/pages/pricing/waitlist.module.css
Normal file
6
website/src/pages/pricing/waitlist.module.css
Normal file
@ -0,0 +1,6 @@
|
||||
.emailInput {
|
||||
width: 100%;
|
||||
line-height: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
11
website/src/pages/pricing/waitlist/cloud.jsx
Normal file
11
website/src/pages/pricing/waitlist/cloud.jsx
Normal file
@ -0,0 +1,11 @@
|
||||
import React from "react";
|
||||
import { WaitListForm } from "../_waitlist.jsx";
|
||||
import Layout from "@theme/Layout";
|
||||
|
||||
export default function waitlistCloud() {
|
||||
return (
|
||||
<Layout title="Waitlist">
|
||||
<WaitListForm product="cloud"></WaitListForm>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
11
website/src/pages/pricing/waitlist/enterprise.jsx
Normal file
11
website/src/pages/pricing/waitlist/enterprise.jsx
Normal file
@ -0,0 +1,11 @@
|
||||
import React from "react";
|
||||
import { WaitListForm } from "../_waitlist.jsx";
|
||||
import Layout from "@theme/Layout";
|
||||
|
||||
export default function waitListEnterprise() {
|
||||
return (
|
||||
<Layout title="Waitlist">
|
||||
<WaitListForm product="enterprise"></WaitListForm>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user