habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

website: add sliders for light/dark mode

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-03-18 20:51:21 +01:00
parent d82dfc65b7
commit e7a8371cbb
4 changed files with 31 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
website/src/pages/index.jsx Normal file
View File

@ -0,0 +1,158 @@
import React from "react";
import clsx from "clsx";
import Layout from "@theme/Layout";
import Link from "@docusaurus/Link";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import useBaseUrl from "@docusaurus/useBaseUrl";
import styles from "./styles.module.css";
import BeforeAfterSlider from 'react-before-after-slider'
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.
</>
),
},
];
function Feature({ imageUrl, title, description }) {
const imgUrl = useBaseUrl(imageUrl);
return (
<div className={clsx("col col--4", styles.feature)}>
{imgUrl && (
<div className="text--center">
<img
className={styles.featureImage}
src={imgUrl}
alt={title}
/>
</div>
)}
<h3>{title}</h3>
<p>{description}</p>
</div>
);
}
function Home() {
const context = useDocusaurusContext();
const { siteConfig = {} } = context;
return (
<Layout title="Welcome" description={siteConfig.tagline}>
<header className={clsx("hero hero--primary", styles.heroBanner)}>
<div className="container">
<div className="row">
<div className="col padding-top--lg">
<h1 className="hero__title">
{siteConfig.tagline}
</h1>
<p className="hero__subtitle">
authentik is an open-source Identity Provider
focused on flexibility and versatility
</p>
<div className={styles.buttons}>
<Link
className={clsx(
"button button--outline button--secondary button--lg",
styles.getStarted
)}
to={useBaseUrl("docs/installation/index")}
>
Get Started
</Link>
</div>
</div>
<div className="col text--center hero_image">
<img alt="authentik logo" src={useBaseUrl("img/icon_top_brand.svg")} />
</div>
</div>
</div>
</header>
<main>
<section className={styles.features}>
<div className="container">
<div className={clsx("row", styles.rowFeatures)}>
{features.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</div>
<div className="row">
<div className="col col--5">
<div>
<BeforeAfterSlider
className={styles.featureImage}
before={useBaseUrl("img/screen_apps_light.png")}
after={useBaseUrl("img/screen_apps_dark.png")}
width={640}
height={480}
/>
</div>
</div>
<div className="col col--5 col--offset-2 padding-vert--xl">
<h2>What is authentik?</h2>
<p>
authentik is an open-source Identity Provider
focused on flexibility and versatility. You
can use authentik in an existing environment
to add support for new protocols, implement
sign-up/recovery/etc. in your application so
you don't have to deal with it, and many other
things.
</p>
</div>
</div>
<div className="row">
<div className="col col--5 col--offset-2 padding-vert--xl">
<h2>Utmost flexibility</h2>
<p>
You can adopt authentik to your environment,
regardless of your requirements. Need an Active-Directory
integrated SSO Provider? Do you want
to implement a custom enrollment process for your
customers? Are you developing an application and
don't want to deal with User verification and recovery?
authentik can do all of that, and more!
</p>
</div>
<div className="col col--5">
<div>
<BeforeAfterSlider
className={styles.featureImage}
before={useBaseUrl("img/screen_admin_light.png")}
after={useBaseUrl("img/screen_admin_dark.png")}
width={640}
height={480}
/>
</div>
</div>
</div>
</div>
</section>
</main>
</Layout>
);
}
export default Home;