diff --git a/docker-compose.override.yml b/docker-compose.override.yml deleted file mode 100644 index 973659a09..000000000 --- a/docker-compose.override.yml +++ /dev/null @@ -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 diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index ef4814383..aab36aea8 100644 --- 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" }, diff --git a/website/docusaurus.docs-only.js b/website/docusaurus.docs-only.js index 08851f511..618219952 100644 --- 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: [ { diff --git a/website/src/components/comparison.jsx b/website/src/components/Comparison/index.jsx similarity index 99% rename from website/src/components/comparison.jsx rename to website/src/components/Comparison/index.jsx index 5aacfef75..88047742f 100644 --- a/website/src/components/comparison.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 ( -
-
-

Why authentik?

-
+ <> + +

Why authentik?

+
+
@@ -489,7 +491,7 @@ function Comparison() {
-
+ ); } diff --git a/website/src/components/Comparison/style.css b/website/src/components/Comparison/style.css new file mode 100644 index 000000000..c24a80a10 --- /dev/null +++ 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; + } +} diff --git a/website/src/components/NewsBar/index.tsx b/website/src/components/NewsBar/index.tsx new file mode 100644 index 000000000..9aa4efd1a --- /dev/null +++ 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 ( +
+ News +
+ {getReleases().map((version) => { + return ( + + {version.label} + + ); + })} +
+
+ ); +} diff --git a/website/src/components/NewsBar/style.css b/website/src/components/NewsBar/style.css new file mode 100644 index 000000000..c5657bc5b --- /dev/null +++ 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; +} diff --git a/website/src/components/TextSlide/index.tsx b/website/src/components/TextSlide/index.tsx new file mode 100644 index 000000000..2384388cf --- /dev/null +++ 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 ( +
+
{words[0]}
+
{words[1]}
+
{words[2]}
+
+ ); +} diff --git a/website/src/components/TextSlide/style.module.css b/website/src/components/TextSlide/style.module.css new file mode 100644 index 000000000..c583d4e61 --- /dev/null +++ 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; + } +} diff --git a/website/src/pages/pricing/_waitlist.jsx b/website/src/components/Waitlist/index.jsx similarity index 98% rename from website/src/pages/pricing/_waitlist.jsx rename to website/src/components/Waitlist/index.jsx index 2aa949ec7..16253686b 100644 --- a/website/src/pages/pricing/_waitlist.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) { diff --git a/website/src/pages/pricing/waitlist.module.css b/website/src/components/Waitlist/style.module.css similarity index 100% rename from website/src/pages/pricing/waitlist.module.css rename to website/src/components/Waitlist/style.module.css diff --git a/website/src/css/custom.css b/website/src/css/custom.css index a17c86ae0..983ec3631 100644 --- 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; +} diff --git a/website/src/pages/index.jsx b/website/src/pages/index.jsx index 3921b7917..c9542b0aa 100644 --- 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() {
-
+
-

- Making authentication simple. +

+
Replace
+ +
with a unified platform.

authentik is an open-source Identity Provider @@ -84,19 +69,32 @@ function Home() {

Get Started + + Reasons to switch +
-
+
authentik logo
@@ -105,36 +103,74 @@ function Home() {
-
- {features.map((props, idx) => ( - - ))} +
+ + Identity made easy. authentik makes + single-sign on (SSO), user enrollment, + and access control simple. + + } + /> + + authentik lets you build your workflow + as you need it, no limitations. + + } + /> + + Implement custom verification or access + control logic using Python code. + + } + />
-
+
+
+
+ +
+
+
+
-
- - {() => { - const ReactBeforeSliderComponent = require("react-before-after-slider-component"); - return ( - - ); - }} - -
+ + {() => { + const ReactBeforeSliderComponent = require("react-before-after-slider-component"); + return ( + + ); + }} +

What is authentik?

@@ -149,7 +185,7 @@ function Home() {

-
+

Utmost flexibility

@@ -164,35 +200,64 @@ function Home() {

-
- - {() => { - const ReactBeforeSliderComponent = require("react-before-after-slider-component"); - return ( - - ); - }} - -
+ + {() => { + const ReactBeforeSliderComponent = require("react-before-after-slider-component"); + return ( + + ); + }} +
- +
+ +
+
+
+
+

Try authentik now!

+
+ + Get Started + + + Learn about enterprise + +
+
diff --git a/website/src/pages/jobs.jsx b/website/src/pages/jobs/index.jsx similarity index 100% rename from website/src/pages/jobs.jsx rename to website/src/pages/jobs/index.jsx diff --git a/website/src/pages/pricing/index.jsx b/website/src/pages/pricing/index.jsx index 819849cf1..11cb4e635 100644 --- a/website/src/pages/pricing/index.jsx +++ b/website/src/pages/pricing/index.jsx @@ -114,12 +114,12 @@ export default function pricingPage() {
-
+

Frequently Asked Questions

-
+
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; +} diff --git a/website/static/img/landing_login_card.jpg b/website/static/img/landing_login_card.jpg new file mode 100644 index 000000000..26f26008b Binary files /dev/null and b/website/static/img/landing_login_card.jpg differ diff --git a/website/static/img/landing_screen_admin_dark.jpg b/website/static/img/landing_screen_admin_dark.jpg new file mode 100644 index 000000000..d442969a6 Binary files /dev/null and b/website/static/img/landing_screen_admin_dark.jpg differ diff --git a/website/static/img/landing_screen_admin_light.jpg b/website/static/img/landing_screen_admin_light.jpg new file mode 100644 index 000000000..1d4b0e9ef Binary files /dev/null and b/website/static/img/landing_screen_admin_light.jpg differ diff --git a/website/static/img/landing_screen_apps_dark.jpg b/website/static/img/landing_screen_apps_dark.jpg new file mode 100644 index 000000000..8488b7f5d Binary files /dev/null and b/website/static/img/landing_screen_apps_dark.jpg differ diff --git a/website/static/img/landing_screen_apps_light.jpg b/website/static/img/landing_screen_apps_light.jpg new file mode 100644 index 000000000..17c73bed7 Binary files /dev/null and b/website/static/img/landing_screen_apps_light.jpg differ diff --git a/website/static/img/screen_admin_dark.jpg b/website/static/img/screen_admin_dark.jpg index 5f4855d57..730a25318 100644 Binary files a/website/static/img/screen_admin_dark.jpg and b/website/static/img/screen_admin_dark.jpg differ diff --git a/website/static/img/screen_admin_light.jpg b/website/static/img/screen_admin_light.jpg index 5cb34d143..6fc2f9252 100644 Binary files a/website/static/img/screen_admin_light.jpg and b/website/static/img/screen_admin_light.jpg differ diff --git a/website/static/img/screen_apps_dark.jpg b/website/static/img/screen_apps_dark.jpg index 3ff18b1d5..be768b3ee 100644 Binary files a/website/static/img/screen_apps_dark.jpg and b/website/static/img/screen_apps_dark.jpg differ diff --git a/website/static/img/screen_apps_light.jpg b/website/static/img/screen_apps_light.jpg index 17c5222ad..0c1c7cab2 100644 Binary files a/website/static/img/screen_apps_light.jpg and b/website/static/img/screen_apps_light.jpg differ diff --git a/website/static/img/screen_flow_dark.jpg b/website/static/img/screen_flow_dark.jpg index a5f6a2f4c..7a829610b 100644 Binary files a/website/static/img/screen_flow_dark.jpg and b/website/static/img/screen_flow_dark.jpg differ diff --git a/website/static/img/screen_flow_light.jpg b/website/static/img/screen_flow_light.jpg index 89061e973..cb4f9aa96 100644 Binary files a/website/static/img/screen_flow_light.jpg and b/website/static/img/screen_flow_light.jpg differ