website: revamp (#6375)
* make things work better Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix styling Signed-off-by: Jens Langhammer <jens@goauthentik.io> * move comparison css to its own file Signed-off-by: Jens Langhammer <jens@goauthentik.io> * more cleanup Signed-off-by: Jens Langhammer <jens@goauthentik.io> * more cleanup Signed-off-by: Jens Langhammer <jens@goauthentik.io> * make release bar work, more cleanup Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix a bunch of styling issues Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix table Signed-off-by: Jens Langhammer <jens@goauthentik.io> * move text slider into component Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix mobile and more cleanup Signed-off-by: Jens Langhammer <jens@goauthentik.io> * more fixes Signed-off-by: Jens Langhammer <jens@goauthentik.io> * test out gradient? Signed-off-by: Jens Langhammer <jens@goauthentik.io> * update meta? Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix lint Signed-off-by: Jens Langhammer <jens@goauthentik.io> * remove underline on news links Signed-off-by: Jens Langhammer <jens@goauthentik.io> * adjust gradient Signed-off-by: Jens Langhammer <jens@goauthentik.io> * remove override Signed-off-by: Jens Langhammer <jens@goauthentik.io> * start changing screenshots Signed-off-by: Jens Langhammer <jens@goauthentik.io> * use smaller screenshots for landing page Signed-off-by: Jens Langhammer <jens@goauthentik.io> * website: fix the font scaling issue on the text slider - Change the text slider and hero__title to use em/rem calculations This patch changes the way the text slider and hero__title font sizes are calculated so that the font scales with the device; devices with viewports larger than 379 pixels will now render the slider without line breaks or having the phrase "active directory" disappear from the page. The 379pixel break is just the best we could come up with on the fly. This does mean that if you own an iPhone 5 or an old WIFI-capable iPod, it still looks awful. :-) * fix some more react issues Signed-off-by: Jens Langhammer <jens@goauthentik.io> * a bit less padding on the bottom CTA Signed-off-by: Jens Langhammer <jens@goauthentik.io> * use some old copy for now Signed-off-by: Jens Langhammer <jens@goauthentik.io> --------- Signed-off-by: Jens Langhammer <jens@goauthentik.io> Co-authored-by: Ken Sternberg <ken@goauthentik.io>
This commit is contained in:
Jens L
@ -7,38 +7,10 @@ import BrowserOnly from "@docusaurus/core/lib/client/exports/BrowserOnly";
|
||||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import styles from "./styles.module.css";
|
||||
import Comparison from "../components/comparison";
|
||||
import Comparison from "../components/Comparison";
|
||||
import "react-before-after-slider-component/dist/build.css";
|
||||
|
||||
const features = [
|
||||
{
|
||||
title: "Easy to Use",
|
||||
description: (
|
||||
<>
|
||||
Identity made easy. authentik makes single-sign on (SSO), user
|
||||
enrollment, and access control simple.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Realise your workflow",
|
||||
description: (
|
||||
<>
|
||||
authentik lets you build your workflow as you need it, no
|
||||
limitations.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Powered by Python",
|
||||
description: (
|
||||
<>
|
||||
Implement custom verification or access control logic using
|
||||
Python code.
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
import { NewsBar } from "../components/NewsBar";
|
||||
import { TextSlide } from "../components/TextSlide";
|
||||
|
||||
function Feature({ imageUrl, title, description }) {
|
||||
const imgUrl = useBaseUrl(imageUrl);
|
||||
@ -72,10 +44,23 @@ function Home() {
|
||||
</Head>
|
||||
<header className={clsx("hero hero--primary", styles.heroBanner)}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className={clsx("row", styles.headerRow)}>
|
||||
<div className="col padding-top--lg">
|
||||
<h1 className="hero__title">
|
||||
Making authentication simple.
|
||||
<h1
|
||||
className={clsx(
|
||||
"hero__title",
|
||||
styles.ak_hero__title,
|
||||
)}
|
||||
>
|
||||
<div>Replace</div>
|
||||
<TextSlide
|
||||
words={[
|
||||
"Active Directory",
|
||||
"Okta",
|
||||
"Auth0",
|
||||
]}
|
||||
></TextSlide>
|
||||
<div>with a unified platform.</div>
|
||||
</h1>
|
||||
<p className="hero__subtitle">
|
||||
authentik is an open-source Identity Provider
|
||||
@ -84,19 +69,32 @@ function Home() {
|
||||
<div className={styles.buttons}>
|
||||
<Link
|
||||
className={clsx(
|
||||
"button button--outline button--secondary button--lg",
|
||||
styles.getStarted,
|
||||
"button button--outline button--primary button--lg",
|
||||
)}
|
||||
to={useBaseUrl("docs/installation/")}
|
||||
>
|
||||
Get Started
|
||||
</Link>
|
||||
<Link
|
||||
className={clsx(
|
||||
"button button--outline button--primary button--lg",
|
||||
)}
|
||||
to="#comparison"
|
||||
>
|
||||
Reasons to switch
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col text--center hero_image">
|
||||
<div
|
||||
className={clsx(
|
||||
"col text--center",
|
||||
styles.heroImage,
|
||||
styles.hiddenOnMobile,
|
||||
)}
|
||||
>
|
||||
<img
|
||||
alt="authentik logo"
|
||||
src={useBaseUrl("img/icon_top_brand.svg")}
|
||||
src={useBaseUrl("img/landing_login_card.jpg")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -105,36 +103,74 @@ function Home() {
|
||||
<main>
|
||||
<section className={styles.features}>
|
||||
<div className="container">
|
||||
<div className={clsx("row", styles.rowFeatures)}>
|
||||
{features.map((props, idx) => (
|
||||
<Feature key={idx} {...props} />
|
||||
))}
|
||||
<div className={clsx("row", styles.row)}>
|
||||
<Feature
|
||||
title="Easy to use"
|
||||
description={
|
||||
<>
|
||||
Identity made easy. authentik makes
|
||||
single-sign on (SSO), user enrollment,
|
||||
and access control simple.
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<Feature
|
||||
title="Realize your workflow"
|
||||
description={
|
||||
<>
|
||||
authentik lets you build your workflow
|
||||
as you need it, no limitations.
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<Feature
|
||||
title="Powered by Python"
|
||||
description={
|
||||
<>
|
||||
Implement custom verification or access
|
||||
control logic using Python code.
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="row">
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"row",
|
||||
styles.rowDark,
|
||||
styles.rowFullWidth,
|
||||
styles.newsBar,
|
||||
styles.hiddenOnMobile,
|
||||
)}
|
||||
>
|
||||
<div className="container">
|
||||
<NewsBar />
|
||||
</div>
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className={clsx("row", styles.row)}>
|
||||
<div className="col col--5">
|
||||
<div>
|
||||
<BrowserOnly>
|
||||
{() => {
|
||||
const ReactBeforeSliderComponent = require("react-before-after-slider-component");
|
||||
return (
|
||||
<ReactBeforeSliderComponent
|
||||
firstImage={{
|
||||
id: 1,
|
||||
imageUrl: useBaseUrl(
|
||||
"img/screen_apps_dark.jpg",
|
||||
),
|
||||
}}
|
||||
secondImage={{
|
||||
id: 2,
|
||||
imageUrl: useBaseUrl(
|
||||
"img/screen_apps_light.jpg",
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</BrowserOnly>
|
||||
</div>
|
||||
<BrowserOnly>
|
||||
{() => {
|
||||
const ReactBeforeSliderComponent = require("react-before-after-slider-component");
|
||||
return (
|
||||
<ReactBeforeSliderComponent
|
||||
firstImage={{
|
||||
id: 1,
|
||||
imageUrl: useBaseUrl(
|
||||
"img/landing_screen_apps_dark.jpg",
|
||||
),
|
||||
}}
|
||||
secondImage={{
|
||||
id: 2,
|
||||
imageUrl: useBaseUrl(
|
||||
"img/landing_screen_apps_light.jpg",
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</BrowserOnly>
|
||||
</div>
|
||||
<div className="col col--5 col--offset-2 padding-vert--xl">
|
||||
<h2>What is authentik?</h2>
|
||||
@ -149,7 +185,7 @@ function Home() {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className={clsx("row", styles.row)}>
|
||||
<div className="col col--5 col--offset-2 padding-vert--xl">
|
||||
<h2>Utmost flexibility</h2>
|
||||
<p>
|
||||
@ -164,35 +200,64 @@ function Home() {
|
||||
</p>
|
||||
</div>
|
||||
<div className="col col--5">
|
||||
<div>
|
||||
<BrowserOnly>
|
||||
{() => {
|
||||
const ReactBeforeSliderComponent = require("react-before-after-slider-component");
|
||||
return (
|
||||
<ReactBeforeSliderComponent
|
||||
firstImage={{
|
||||
id: 1,
|
||||
imageUrl: useBaseUrl(
|
||||
"img/screen_admin_dark.jpg",
|
||||
),
|
||||
}}
|
||||
secondImage={{
|
||||
id: 2,
|
||||
imageUrl: useBaseUrl(
|
||||
"img/screen_admin_light.jpg",
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</BrowserOnly>
|
||||
</div>
|
||||
<BrowserOnly>
|
||||
{() => {
|
||||
const ReactBeforeSliderComponent = require("react-before-after-slider-component");
|
||||
return (
|
||||
<ReactBeforeSliderComponent
|
||||
firstImage={{
|
||||
id: 1,
|
||||
imageUrl: useBaseUrl(
|
||||
"img/landing_screen_admin_dark.jpg",
|
||||
),
|
||||
}}
|
||||
secondImage={{
|
||||
id: 2,
|
||||
imageUrl: useBaseUrl(
|
||||
"img/landing_screen_admin_light.jpg",
|
||||
),
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</BrowserOnly>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<Comparison></Comparison>
|
||||
<div className="container">
|
||||
<Comparison></Comparison>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div
|
||||
className={clsx(
|
||||
styles.footerCTA,
|
||||
styles.rowAuthentik,
|
||||
styles.rowFullWidth,
|
||||
)}
|
||||
>
|
||||
<h1>Try authentik now!</h1>
|
||||
<div className={styles.buttons}>
|
||||
<Link
|
||||
className={clsx(
|
||||
"button button--outline button--primary button--lg",
|
||||
)}
|
||||
to={useBaseUrl("docs/installation/")}
|
||||
>
|
||||
Get Started
|
||||
</Link>
|
||||
<Link
|
||||
className={clsx(
|
||||
"button button--outline button--primary button--lg",
|
||||
)}
|
||||
to={useBaseUrl("pricing/")}
|
||||
>
|
||||
Learn about enterprise
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
@ -1,62 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@ -114,12 +114,12 @@ export default function pricingPage() {
|
||||
|
||||
<section>
|
||||
<div className="container" style={{ marginBottom: "3rem" }}>
|
||||
<div class="row">
|
||||
<div className="row">
|
||||
<div className="col col--8 col--offset-2">
|
||||
<h2 className="hero__subtitle margin--md">
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
<div class="card-demo margin--md">
|
||||
<div className="card-demo margin--md">
|
||||
<Card
|
||||
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."
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
.emailInput {
|
||||
width: 100%;
|
||||
line-height: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import { WaitListForm } from "../_waitlist.jsx";
|
||||
import { WaitListForm } from "../../../components/Waitlist";
|
||||
import Layout from "@theme/Layout";
|
||||
|
||||
export default function waitlistCloud() {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import { WaitListForm } from "../_waitlist.jsx";
|
||||
import { WaitListForm } from "../../../components/Waitlist";
|
||||
import Layout from "@theme/Layout";
|
||||
|
||||
export default function waitListEnterprise() {
|
||||
|
||||
@ -5,17 +5,47 @@
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
overflow-wrap: normal;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.headerRow {
|
||||
margin-bottom: -10rem;
|
||||
}
|
||||
|
||||
.heroImage {
|
||||
flex-direction: column;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.heroImage > img {
|
||||
filter: drop-shadow(5px 5px 25px rgba(0, 0, 0, 0.6));
|
||||
}
|
||||
|
||||
@media (max-width: 996px) {
|
||||
.heroBanner img {
|
||||
margin-top: 1rem;
|
||||
.headerRow {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.hiddenOnMobile {
|
||||
display: none;
|
||||
}
|
||||
.heroBanner {
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 966px) {
|
||||
.heroBanner {
|
||||
padding: 2rem;
|
||||
.ak_hero__title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
@media (min-width: 388px) {
|
||||
.ak_hero__title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 520px) {
|
||||
.ak_hero__title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,6 +53,12 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.buttons > * {
|
||||
margin: 0.25rem;
|
||||
}
|
||||
|
||||
.features {
|
||||
@ -30,8 +66,33 @@
|
||||
align-items: center;
|
||||
padding: 2rem 0;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.rowFeatures {
|
||||
.row {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.rowFullWidth {
|
||||
width: 100%;
|
||||
padding: 1rem 3rem;
|
||||
}
|
||||
|
||||
.rowDark {
|
||||
background-color: var(--ifm-color-secondary-contrast-foreground);
|
||||
color: var(--ifm-color-secondary-contrast-background);
|
||||
}
|
||||
|
||||
.rowAuthentik {
|
||||
color: var(--white);
|
||||
background-color: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
.newsBar {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.footerCTA {
|
||||
padding: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user