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>
2023-07-27 11:44:50 +02:00 · 2023-07-27 11:44:50 +02:00 · 664bc19bba
parent f315360be1
commit 664bc19bba
29 changed files with 586 additions and 331 deletions
--- a/docker-compose.override.yml
+++ b/docker-compose.override.yml
@ -1,36 +0,0 @@
-# This file is used for development and debugging, and should not be used for production instances
-
-version: '3.5'
-
-services:
-  flower:
-    image: ${AUTHENTIK_IMAGE:-ghcr.io/goauthentik/server}:${AUTHENTIK_TAG:-2023.5.4}
-    restart: unless-stopped
-    command: worker-status
-    environment:
-      AUTHENTIK_REDIS__HOST: redis
-      AUTHENTIK_POSTGRESQL__HOST: postgresql
-      AUTHENTIK_POSTGRESQL__USER: ${PG_USER:-authentik}
-      AUTHENTIK_POSTGRESQL__NAME: ${PG_DB:-authentik}
-      AUTHENTIK_POSTGRESQL__PASSWORD: ${PG_PASS}
-    env_file:
-      - .env
-    ports:
-      - "9001:9000"
-    depends_on:
-      - postgresql
-      - redis
-  server:
-    environment:
-      AUTHENTIK_REMOTE_DEBUG: "true"
-      PYDEVD_THREAD_DUMP_ON_WARN_EVALUATION_TIMEOUT: "true"
-    ports:
-      - 6800:6800
-  worker:
-    environment:
-      CELERY_RDB_HOST: "0.0.0.0"
-      CELERY_RDBSIG: "1"
-      AUTHENTIK_REMOTE_DEBUG: "true"
-      PYDEVD_THREAD_DUMP_ON_WARN_EVALUATION_TIMEOUT: "true"
-    ports:
-      - 6900:6900
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@ -13,7 +13,7 @@ module.exports = async function () {
    });
    return {
        title: "authentik",
-        tagline: "Making authentication simple.",
+        tagline: "Bring all of your authentication into a unified platform.",
        url: "https://goauthentik.io",
        baseUrl: "/",
        onBrokenLinks: "throw",
@ -25,7 +25,7 @@ module.exports = async function () {
                title: "authentik",
                logo: {
                    alt: "authentik logo",
-                    src: "img/icon.svg",
+                    src: "img/icon_left_brand.svg",
                },
                items: [
                    { to: "blog", label: "Blog", position: "left" },
--- a/website/docusaurus.docs-only.js
+++ b/website/docusaurus.docs-only.js
@ -17,7 +17,7 @@ module.exports = async function () {
                title: "authentik",
                logo: {
                    alt: "authentik logo",
-                    src: "img/icon.svg",
+                    src: "img/icon_left_brand.svg",
                },
                items: [
                    {
--- a/website/src/components/Comparison/index.jsx
+++ b/website/src/components/Comparison/index.jsx
@ -1,12 +1,14 @@
 import React from "react";
 import { Check, X, AlertTriangle } from "react-feather";
+import "./style.css";

 function Comparison() {
    return (
-        <section className="">
-            <div className="container">
-                <h2 id="correctness">Why authentik?</h2>
-                <div className="table-responsive">
+        <>
+            <a name="comparison"></a>
+            <h1 className="header">Why authentik?</h1>
+            <div className="table-responsive">
+                <div className="table">
                    <table className="comparison">
                        <thead>
                            <tr>
@ -489,7 +491,7 @@ function Comparison() {
                    </table>
                </div>
            </div>
-        </section>
+        </>
    );
 }

--- a/website/src/components/Comparison/style.css
+++ b/website/src/components/Comparison/style.css
@ -0,0 +1,155 @@
+.header {
+    text-align: center;
+    padding: 2rem 0;
+}
+
+table {
+    display: table;
+}
+
+.table-responsive {
+    overflow-x: auto;
+}
+/**
+* comparison
+*
+* Comparison table used in both the performance and correctness tables.
+*/
+
+table.comparison {
+    width: 100%;
+}
+
+table.comparison [title],
+table.comparison [title] {
+    text-decoration: underline;
+    text-decoration-style: dotted;
+}
+
+table.comparison th,
+table.comparison td,
+table.comparison tr {
+    border: 0px none;
+    white-space: nowrap;
+}
+
+table.comparison th {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+table.comparison tr th.authentik {
+    color: var(--ifm-color-primary);
+}
+
+table.comparison thead.group tr {
+    border-top: 1px;
+    border-bottom: 1px;
+    border-bottom-color: var(--ifm-table-head-color);
+    border-top-style: solid;
+    border-bottom-style: solid;
+}
+
+table.comparison thead.group th:first-child {
+    padding: 10px;
+    text-align: left;
+    font-weight: 800;
+}
+
+table.comparison tr td {
+    padding-left: 10px;
+    min-width: 90px;
+    text-align: center;
+}
+
+table.comparison tr td:first-child {
+    font-weight: bold;
+    text-align: left;
+    white-space: nowrap;
+    width: 25%;
+}
+
+table.comparison tr td.description {
+    font-weight: normal;
+    min-width: 250px;
+    padding-top: 0;
+    vertical-align: top;
+    white-space: normal;
+}
+
+table.comparison tr td.description .label {
+    color: var(--ifm-heading-color);
+    font-weight: bold;
+}
+
+table.comparison tr td.description .text {
+    color: var(--ifm-color-emphasis-600);
+}
+
+table.comparison tr td.description .links {
+    font-size: 0.9em;
+    margin-top: var(--ifm-spacing-vertical);
+}
+
+table.comparison tr td.result {
+    background-color: var(--ifm-panel-background-color);
+}
+
+table.comparison tr td.result.failed {
+    color: var(--ifm-color-danger);
+}
+
+table.comparison tr td.result.lost {
+    background: var(--ifm-color-emphasis-1000);
+    color: transparent;
+}
+
+table.comparison tr td.result.not-applicable {
+    background: var(--ifm-color-emphasis-1000);
+    color: rgba(var(--ifm-background-color-rgb), 0.5);
+}
+
+table.comparison tr td.result.passed {
+    color: var(--ifm-color-success);
+}
+
+table.comparison tr td.result.warning {
+    color: var(--ifm-color-warning);
+}
+
+table.comparison tr td.result.authentik {
+    background: var(--ifm-color-primary);
+    color: var(--ifm-color-secondary);
+}
+
+table.comparison tr td.bar {
+    padding: 0;
+    vertical-align: bottom;
+}
+
+table.comparison tr td.bar .place {
+    font-size: 0.9em;
+}
+
+table.comparison tr td.bar .measurement {
+    font-weight: bold;
+}
+
+table.comparison tr td.bar .bar {
+    background: var(--ifm-color-emphasis-1000);
+    margin: 0 auto;
+}
+
+table.comparison tr td.bar.authentik {
+    color: var(--ifm-color-primary);
+}
+
+table.comparison tr td.bar.authentik .bar {
+    background: var(--ifm-color-primary);
+}
+
+@media (max-width: 996px) {
+    table.comparison td.description {
+        display: none;
+    }
+}
--- a/website/src/components/NewsBar/index.tsx
+++ b/website/src/components/NewsBar/index.tsx
@ -0,0 +1,45 @@
+import React from "react";
+import sidebar from "../../../sidebars";
+import "./style.css";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+interface ItemLink {
+    label: string;
+    link: string;
+}
+
+export function getReleases(): ItemLink[] {
+    const docs = sidebar.docs;
+    const releaseCategory = docs.filter(
+        (doc) => doc.link?.slug === "releases",
+    )[0];
+    // @ts-ignore
+    const releaseItems = releaseCategory.items!.filter(
+        (release) => typeof release === "string",
+    );
+    const releaseVersion: ItemLink[] = releaseItems.map((relUrl: string) => {
+        const [_, year, version] = relUrl.split("/");
+        return {
+            label: `authentik ${version} released!`,
+            link: relUrl,
+        };
+    });
+    return releaseVersion;
+}
+
+export function NewsBar() {
+    return (
+        <div className="news-bar-container">
+            <span>News</span>
+            <div className="items">
+                {getReleases().map((version) => {
+                    return (
+                        <a key={version.link} href={useBaseUrl(version.link)}>
+                            {version.label}
+                        </a>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}
--- a/website/src/components/NewsBar/style.css
+++ b/website/src/components/NewsBar/style.css
@ -0,0 +1,27 @@
+.news-bar-container {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    font-size: 1.25rem;
+    font-weight: 800;
+}
+
+.news-bar-container .items {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    width: 100%;
+}
+
+.news-bar-container .items a {
+    color: var(--ifm-color-secondary-contrast-background);
+    -moz-transition: all 0.1s ease-in;
+    -o-transition: all 0.1s ease-in;
+    -webkit-transition: all 0.1s ease-in;
+    transition: all 0.1s ease-in;
+}
+
+.news-bar-container .items a:hover {
+    color: var(--ifm-color-primary);
+    text-decoration: none;
+}
--- a/website/src/components/TextSlide/index.tsx
+++ b/website/src/components/TextSlide/index.tsx
@ -0,0 +1,13 @@
+import React from "react";
+import styles from "./style.module.css";
+import clsx from "clsx";
+
+export function TextSlide({ words }) {
+    return (
+        <div className={clsx(styles.slider)}>
+            <div className={clsx(styles.sliderEntry)}>{words[0]}</div>
+            <div className={clsx(styles.sliderEntry)}>{words[1]}</div>
+            <div className={clsx(styles.sliderEntry)}>{words[2]}</div>
+        </div>
+    );
+}
--- a/website/src/components/TextSlide/style.module.css
+++ b/website/src/components/TextSlide/style.module.css
@ -0,0 +1,47 @@
+.slider {
+    --height: 1.25em;
+}
+
+.slider {
+    height: var(--height);
+    overflow: hidden;
+}
+
+.sliderEntry:first-of-type {
+    animation: slide 5s linear infinite;
+}
+
+.sliderEntry {
+    height: var(--height);
+    padding: 0px 15px;
+    text-align: center;
+    margin-bottom: var(--height);
+    box-sizing: border-box;
+}
+
+@keyframes slide {
+    0% {
+        margin-top: calc(-6 * var(--height));
+    }
+    5% {
+        /* For stopping effect */
+        margin-top: calc(-4 * var(--height));
+    }
+    33% {
+        margin-top: calc(-4 * var(--height));
+    }
+    38% {
+        /* For stopping effect */
+        margin-top: calc(-2 * var(--height));
+    }
+    66% {
+        margin-top: calc(-2 * var(--height));
+    }
+    71% {
+        /* For stopping effect */
+        margin-top: 0px;
+    }
+    100% {
+        margin-top: 0px;
+    }
+}
--- a/website/src/components/Waitlist/index.jsx
+++ b/website/src/components/Waitlist/index.jsx
@ -1,5 +1,5 @@
 import React from "react";
-import styles from "./waitlist.module.css";
+import styles from "./style.module.css";
 import clsx from "clsx";

 export function WaitListForm(props) {
--- a/website/src/components/Waitlist/style.module.css
+++ b/website/src/components/Waitlist/style.module.css
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@ -6,12 +6,19 @@
    --ifm-color-primary-light: #fd644b;
    --ifm-color-primary-lighter: #fd7159;
    --ifm-color-primary-lightest: #fe9786;
-    --ifm-navbar-link-hover-color: var(--ifm-color-content-inverse);
+    --white: #e3e3e3;
+    --ifm-navbar-link-color: var(--white);
+    --ifm-navbar-link-hover-color: var(--ifm-color-gray-1000);
 }

 .button.button--outline {
-    color: var(--ifm-navbar-link-hover-color) !important;
-    --ifm-button-border-color: var(--ifm-navbar-link-hover-color) !important;
+    color: var(--white) !important;
+    --ifm-button-border-color: var(--white) !important;
+}
+
+.button.button--outline:hover {
+    color: var(--ifm-color-gray-1000) !important;
+    --ifm-button-background-color: var(--white);
 }

 .navbar {
@ -19,192 +26,38 @@
    box-shadow: none;
 }

+/* Don't display text title */
 .navbar__title {
    display: none;
 }

+.navbar__logo {
+    margin: 0 0.75rem;
+}
+
+/* Match color of light/dark theme switch */
+.navbar__items--right svg {
+    color: var(--white);
+}
+
 .hero--primary {
+    background: radial-gradient(
+        circle,
+        rgba(47, 6, 75, 1) 0%,
+        var(--ifm-color-primary) 50%
+    );
    padding-bottom: 5.3rem !important;
+    /* fix aliasing at the edge */
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3vw));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3vw));
 }

-.hero_image {
-    flex-direction: column;
-    justify-items: center;
-}
-
-.hero_image > img {
-    max-height: 200px;
-}
-
-@media (max-width: 996px) {
-    .hero_image > img {
-        display: none;
-    }
-}
-
-@media (max-width: 430px) {
-    .hero__title {
-        font-size: 2rem;
-    }
-}
-
 .before-after-slider img {
    max-width: none;
 }

-table {
-    display: table;
-}
-
-.table-responsive {
-    overflow-x: auto;
-}
-/**
-* comparison
-*
-* Comparison table used in both the performance and correctness tables.
-*/
-
-table.comparison {
-    width: 100%;
-}
-
-table.comparison [title],
-table.comparison [title] {
-    text-decoration: underline;
-    text-decoration-style: dotted;
-}
-
-table.comparison th,
-table.comparison td,
-table.comparison tr {
-    border: 0px none;
-    white-space: nowrap;
-}
-
-table.comparison th {
-    padding-left: 0;
-    padding-right: 0;
-}
-
-table.comparison tr th.authentik {
-    color: var(--ifm-color-primary);
-}
-
-table.comparison thead.group tr {
-    border-top: 1px;
-    border-bottom: 1px;
-    border-bottom-color: var(--ifm-table-head-color);
-    border-top-style: solid;
-    border-bottom-style: solid;
-}
-
-table.comparison thead.group th:first-child {
-    padding: 10px;
-    text-align: left;
-    font-weight: 800;
-}
-
-table.comparison tr td {
-    padding-left: 10px;
-    min-width: 90px;
-    text-align: center;
-}
-
-table.comparison tr td:first-child {
-    font-weight: bold;
-    text-align: left;
-    white-space: nowrap;
-    width: 25%;
-}
-
-table.comparison tr td.description {
-    font-weight: normal;
-    min-width: 250px;
-    padding-top: 0;
-    vertical-align: top;
-    white-space: normal;
-}
-
-table.comparison tr td.description .label {
-    color: var(--ifm-heading-color);
-    font-weight: bold;
-}
-
-table.comparison tr td.description .text {
-    color: var(--ifm-color-emphasis-600);
-}
-
-table.comparison tr td.description .links {
-    font-size: 0.9em;
-    margin-top: var(--ifm-spacing-vertical);
-}
-
-table.comparison tr td.result {
-    background-color: var(--ifm-panel-background-color);
-}
-
-table.comparison tr td.result.failed {
-    color: var(--ifm-color-danger);
-}
-
-table.comparison tr td.result.lost {
-    background: var(--ifm-color-emphasis-1000);
-    color: transparent;
-}
-
-table.comparison tr td.result.not-applicable {
-    background: var(--ifm-color-emphasis-1000);
-    color: rgba(var(--ifm-background-color-rgb), 0.5);
-}
-
-table.comparison tr td.result.passed {
-    color: var(--ifm-color-success);
-}
-
-table.comparison tr td.result.warning {
-    color: var(--ifm-color-warning);
-}
-
-table.comparison tr td.result.authentik {
-    background: var(--ifm-color-primary);
-    color: var(--ifm-color-secondary);
-}
-
-table.comparison tr td.bar {
-    padding: 0;
-    vertical-align: bottom;
-}
-
-table.comparison tr td.bar .place {
-    font-size: 0.9em;
-}
-
-table.comparison tr td.bar .measurement {
-    font-weight: bold;
-}
-
-table.comparison tr td.bar .bar {
-    background: var(--ifm-color-emphasis-1000);
-    margin: 0 auto;
-}
-
-table.comparison tr td.bar.authentik {
-    color: var(--ifm-color-primary);
-}
-
-table.comparison tr td.bar.authentik .bar {
-    background: var(--ifm-color-primary);
-}
-
-@media (max-width: 996px) {
-    table.comparison td.description {
-        display: none;
-    }
-}
-
 .header-github-link:hover {
    opacity: 0.6;
 }
@ -214,11 +67,6 @@ table.comparison tr td.bar.authentik .bar {
    width: 24px;
    height: 24px;
    display: flex;
-    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
-        no-repeat;
-}
-
-[data-theme="dark"] .header-github-link::before {
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
        no-repeat;
 }
@ -232,11 +80,39 @@ table.comparison tr td.bar.authentik .bar {
    width: 24px;
    height: 19px;
    display: flex;
-    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20127.14%2096.36%22%3E%3Cg%20id%3D%22%E5%9B%BE%E5%B1%82_2%22%20data-name%3D%22%E5%9B%BE%E5%B1%82%202%22%3E%3Cg%20id%3D%22Discord_Logos%22%20data-name%3D%22Discord%20Logos%22%3E%3Cg%20id%3D%22Discord_Logo_-_Large_-_White%22%20data-name%3D%22Discord%20Logo%20-%20Large%20-%20White%22%3E%3Cpath%20d%3D%22M107.7%2C8.07A105.15%2C105.15%2C0%2C0%2C0%2C81.47%2C0a72.06%2C72.06%2C0%2C0%2C0-3.36%2C6.83A97.68%2C97.68%2C0%2C0%2C0%2C49%2C6.83%2C72.37%2C72.37%2C0%2C0%2C0%2C45.64%2C0%2C105.89%2C105.89%2C0%2C0%2C0%2C19.39%2C8.09C2.79%2C32.65-1.71%2C56.6.54%2C80.21h0A105.73%2C105.73%2C0%2C0%2C0%2C32.71%2C96.36%2C77.7%2C77.7%2C0%2C0%2C0%2C39.6%2C85.25a68.42%2C68.42%2C0%2C0%2C1-10.85-5.18c.91-.66%2C1.8-1.34%2C2.66-2a75.57%2C75.57%2C0%2C0%2C0%2C64.32%2C0c.87.71%2C1.76%2C1.39%2C2.66%2C2a68.68%2C68.68%2C0%2C0%2C1-10.87%2C5.19%2C77%2C77%2C0%2C0%2C0%2C6.89%2C11.1A105.25%2C105.25%2C0%2C0%2C0%2C126.6%2C80.22h0C129.24%2C52.84%2C122.09%2C29.11%2C107.7%2C8.07ZM42.45%2C65.69C36.18%2C65.69%2C31%2C60%2C31%2C53s5-12.74%2C11.43-12.74S54%2C46%2C53.89%2C53%2C48.84%2C65.69%2C42.45%2C65.69Zm42.24%2C0C78.41%2C65.69%2C73.25%2C60%2C73.25%2C53s5-12.74%2C11.44-12.74S96.23%2C46%2C96.12%2C53%2C91.08%2C65.69%2C84.69%2C65.69Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
-        no-repeat;
-}
-
-[data-theme="dark"] .header-discord-link::before {
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20127.14%2096.36%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22%E5%9B%BE%E5%B1%82_2%22%20data-name%3D%22%E5%9B%BE%E5%B1%82%202%22%3E%3Cg%20id%3D%22Discord_Logos%22%20data-name%3D%22Discord%20Logos%22%3E%3Cg%20id%3D%22Discord_Logo_-_Large_-_White%22%20data-name%3D%22Discord%20Logo%20-%20Large%20-%20White%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M107.7%2C8.07A105.15%2C105.15%2C0%2C0%2C0%2C81.47%2C0a72.06%2C72.06%2C0%2C0%2C0-3.36%2C6.83A97.68%2C97.68%2C0%2C0%2C0%2C49%2C6.83%2C72.37%2C72.37%2C0%2C0%2C0%2C45.64%2C0%2C105.89%2C105.89%2C0%2C0%2C0%2C19.39%2C8.09C2.79%2C32.65-1.71%2C56.6.54%2C80.21h0A105.73%2C105.73%2C0%2C0%2C0%2C32.71%2C96.36%2C77.7%2C77.7%2C0%2C0%2C0%2C39.6%2C85.25a68.42%2C68.42%2C0%2C0%2C1-10.85-5.18c.91-.66%2C1.8-1.34%2C2.66-2a75.57%2C75.57%2C0%2C0%2C0%2C64.32%2C0c.87.71%2C1.76%2C1.39%2C2.66%2C2a68.68%2C68.68%2C0%2C0%2C1-10.87%2C5.19%2C77%2C77%2C0%2C0%2C0%2C6.89%2C11.1A105.25%2C105.25%2C0%2C0%2C0%2C126.6%2C80.22h0C129.24%2C52.84%2C122.09%2C29.11%2C107.7%2C8.07ZM42.45%2C65.69C36.18%2C65.69%2C31%2C60%2C31%2C53s5-12.74%2C11.43-12.74S54%2C46%2C53.89%2C53%2C48.84%2C65.69%2C42.45%2C65.69Zm42.24%2C0C78.41%2C65.69%2C73.25%2C60%2C73.25%2C53s5-12.74%2C11.44-12.74S96.23%2C46%2C96.12%2C53%2C91.08%2C65.69%2C84.69%2C65.69Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
        no-repeat;
 }
+
+@media (min-width: 1416px) {
+    .docPage_node_modules-\@docusaurus-theme-classic-lib-theme-DocPage-Layout-styles-module {
+        align-self: center;
+        max-width: 1600px;
+        width: 1600px;
+    }
+}
+
+.navbar .navbar__inner {
+    margin: 0 auto;
+    max-width: 1600px;
+}
+
+/* Load new font as Roboto */
+
+@font-face {
+    font-family: "superMario";
+    src: url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
+}
+
+body {
+    font-family: "Roboto", sans-serif;
+}
+
+/* Container styles */
+.content {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
--- a/website/src/pages/index.jsx
+++ b/website/src/pages/index.jsx
@ -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>
--- a/website/src/pages/jobs/index.jsx
+++ b/website/src/pages/jobs/index.jsx
--- a/website/src/pages/pricing/index.jsx
+++ b/website/src/pages/pricing/index.jsx
@ -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."
--- a/website/src/pages/pricing/waitlist/cloud.jsx
+++ b/website/src/pages/pricing/waitlist/cloud.jsx
@ -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() {
--- a/website/src/pages/pricing/waitlist/enterprise.jsx
+++ b/website/src/pages/pricing/waitlist/enterprise.jsx
@ -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() {
--- a/website/src/pages/styles.module.css
+++ b/website/src/pages/styles.module.css
@ -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;
+}
--- a/website/static/img/landing_login_card.jpg
+++ b/website/static/img/landing_login_card.jpg
--- a/website/static/img/landing_screen_admin_dark.jpg
+++ b/website/static/img/landing_screen_admin_dark.jpg
--- a/website/static/img/landing_screen_admin_light.jpg
+++ b/website/static/img/landing_screen_admin_light.jpg
--- a/website/static/img/landing_screen_apps_dark.jpg
+++ b/website/static/img/landing_screen_apps_dark.jpg
--- a/website/static/img/landing_screen_apps_light.jpg
+++ b/website/static/img/landing_screen_apps_light.jpg
--- a/website/static/img/screen_admin_dark.jpg
+++ b/website/static/img/screen_admin_dark.jpg
--- a/website/static/img/screen_admin_light.jpg
+++ b/website/static/img/screen_admin_light.jpg
--- a/website/static/img/screen_apps_dark.jpg
+++ b/website/static/img/screen_apps_dark.jpg
--- a/website/static/img/screen_apps_light.jpg
+++ b/website/static/img/screen_apps_light.jpg
--- a/website/static/img/screen_flow_dark.jpg
+++ b/website/static/img/screen_flow_dark.jpg
--- a/website/static/img/screen_flow_light.jpg
+++ b/website/static/img/screen_flow_light.jpg