mirror of
https://github.com/nikdoof/pocket-id.git
synced 2025-12-23 06:19:24 +00:00
docs: improve landing page
This commit is contained in:
Elias Schneider
41
docs/src/components/feature-box.tsx
Normal file
41
docs/src/components/feature-box.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
export default function FeatureBox({
|
||||
title,
|
||||
description,
|
||||
imgSrc,
|
||||
imgLeft = true,
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
imgSrc: string;
|
||||
imgLeft?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className="p-6 glass grid grid-cols-12 gap-10 items-center">
|
||||
{imgLeft ? (
|
||||
<>
|
||||
<img
|
||||
src={imgSrc}
|
||||
alt="Feature Image"
|
||||
className="mr-3 rounded-lg col-span-7 border border-neutral-800"
|
||||
/>
|
||||
<div className="col-span-5">
|
||||
<p className="text-3xl font-semibold !mb-3">{title}</p>
|
||||
<p className="text-gray-300 mt-2">{description}</p>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="col-span-5">
|
||||
<p className="text-3xl font-semibold !mb-3">{title}</p>
|
||||
<p className="text-gray-300">{description}</p>
|
||||
</div>
|
||||
<img
|
||||
src={imgSrc}
|
||||
alt="Feature Image"
|
||||
className="ml-3 rounded-lg col-span-7 border border-neutral-800"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,103 @@
|
||||
import { Redirect } from "react-router-dom";
|
||||
|
||||
export default function Home() {
|
||||
return <Redirect to="/start" />;
|
||||
}
|
||||
import "@fortawesome/fontawesome-free/css/all.min.css";
|
||||
import React from "react";
|
||||
import FeatureBox from "../components/feature-box";
|
||||
import "/styles.css";
|
||||
|
||||
const Home: React.FC = () => {
|
||||
return (
|
||||
<div className="text-white h-screen flex flex-col bg-muted/40">
|
||||
<header style={{ backgroundColor: "hsl(240, 10%, 3.9%)" }}>
|
||||
<div className="w-full border-b border-black">
|
||||
<div className="container flex w-full items-center justify-between px-4 md:px-10">
|
||||
<div className="flex h-16 items-center">
|
||||
<img
|
||||
src="https://docs.pocket-id.org/img/pocket-id.png"
|
||||
alt="Pocket ID Logo"
|
||||
className="mr-3 h-8 w-8"
|
||||
/>
|
||||
<h2 className="text-sm font-medium" style={{ margin: 0 }}>
|
||||
Pocket ID
|
||||
</h2>
|
||||
</div>
|
||||
<a
|
||||
href="https://github.com/stonith404/pocket-id"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{ color: "hsl(0, 0%, 98%)" }}
|
||||
className="text-white text-2xl"
|
||||
>
|
||||
<i className="fab fa-github" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 flex flex-col justify-center items-center px-4 sm:px-0 container">
|
||||
<section className="flex items-center mt-10 flex-col-reverse lg:flex-row gap-5">
|
||||
<div>
|
||||
<h1 className="text-sm font-extrabold">
|
||||
Secure Your Services with OIDC
|
||||
</h1>
|
||||
<p className="mt-4 text-lg">
|
||||
Pocket ID is a simple and easy-to-use OIDC provider that allows
|
||||
users to authenticate with their passkeys to your services.
|
||||
</p>
|
||||
<a
|
||||
href="/docs/introduction"
|
||||
className="mt-6 inline-block text-black px-6 py-3 rounded-lg font-semibold"
|
||||
style={{
|
||||
backgroundColor: "hsl(0, 0%, 98%)",
|
||||
color: "hsl(240, 10%, 3.9%)",
|
||||
}}
|
||||
>
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
<img
|
||||
src="/img/landing/authorize-screenshot.png"
|
||||
alt="Pocket ID Logo"
|
||||
className="max-h-[350px] xl:max-h-[450px]"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="mt-15">
|
||||
<h2 className="text-2xl sm:text-3xl font-bold">Features</h2>
|
||||
<div className="flex flex-col gap-5">
|
||||
<FeatureBox
|
||||
title="Passwordless Authentication"
|
||||
description="Pocket ID only supports passkey authentication, which means you don't need a password."
|
||||
imgSrc="/img/landing/passkey-auth-screenshot.png"
|
||||
/>
|
||||
<FeatureBox
|
||||
title="Restrict User Groups"
|
||||
description="You can select which user groups are allowed to authenticate with your services."
|
||||
imgSrc="/img/landing/allowed-usergroups-screenshot.png"
|
||||
imgLeft={false}
|
||||
/>
|
||||
<FeatureBox
|
||||
title="Audit Logs"
|
||||
description="Keep track of your account activities. If SMTP is configured, you can even receive sign-in notifications."
|
||||
imgSrc="/img/landing/audit-log-screenshot.png"
|
||||
/>
|
||||
<FeatureBox
|
||||
title="LDAP"
|
||||
description="Sync your users and groups from your LDAP server to Pocket ID."
|
||||
imgSrc="/img/landing/ldap-screenshot.png"
|
||||
imgLeft={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="!mt-5 text-center">And much more...</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div className="flex flex-col items-center mt-10">
|
||||
<p className="py-3 text-xs text-muted-foreground">
|
||||
© 2025 Pocket ID
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
|
||||
@@ -1,58 +0,0 @@
|
||||
import React from "react"; // Font Awesome// Ensure Tailwind is imported in your global styles
|
||||
import "/styles.css";
|
||||
import "@fortawesome/fontawesome-free/css/all.min.css";
|
||||
|
||||
const Home: React.FC = () => {
|
||||
return (
|
||||
<div className="text-white h-screen flex flex-col bg-muted/40" >
|
||||
<header className="" style={{ backgroundColor: "hsl(240, 10%, 3.9%)" }}>
|
||||
<div className="w-full border-b border-black">
|
||||
<div className="max-w-[1640px] mx-auto flex w-full items-center justify-between px-4 md:px-10">
|
||||
<div className="flex h-16 items-center justify">
|
||||
<img src="https://docs.pocket-id.org/img/pocket-id.png" alt="Pocket ID Logo" className="mr-3 h-8 w-8" />
|
||||
<h2 className="text-sm font-medium" style={{ margin: 0 }} >Pocket ID</h2>
|
||||
</div>
|
||||
<a href="https://github.com/stonith404/pocket-id" target="_blank" rel="noopener noreferrer" style={{ color: "hsl(0, 0%, 98%)" }} className="text-white text-2xl">
|
||||
<i className="fab fa-github" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 flex flex-col justify-center items-center px-4 sm:px-0">
|
||||
<section className="text-center py-12 sm:py-20 glass m-4 w-full max-w-4xl animate-fadeIn px-6 sm:px-12">
|
||||
<img src="https://docs.pocket-id.org/img/pocket-id.png" alt="Pocket ID Logo" className="h-24 w-24 mx-auto mb-6 animate-bounce" />
|
||||
<h2 className="text-3xl sm:text-4xl font-extrabold">Secure Your Services</h2>
|
||||
<p className="mt-4 text-lg">A simple, open-source OIDC provider leveraging passkeys for secure authentication.</p>
|
||||
<a href="/docs/introduction" target="_blank" rel="noopener noreferrer" className="mt-6 inline-block text-black px-6 py-3 rounded-lg font-semibold" style={{ backgroundColor: "hsl(0, 0%, 98%)", color: "hsl(240, 10%, 3.9%)"}}>
|
||||
Get Started
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<section className="container mx-auto py-12 sm:py-16 px-4 sm:px-6 w-full max-w-4xl">
|
||||
<h3 className="text-2xl sm:text-3xl font-bold text-center">Features</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8 mt-8">
|
||||
<div className="p-6 glass text-center">
|
||||
<h4 className="text-xl font-semibold">Passwordless Authentication</h4>
|
||||
<p className="text-gray-300 mt-2">Leverages passkeys for a seamless and secure login experience.</p>
|
||||
</div>
|
||||
<div className="p-6 glass text-center">
|
||||
<h4 className="text-xl font-semibold">User-Friendly</h4>
|
||||
<p className="text-gray-300 mt-2">Easy-to-use interface for seamless experience.</p>
|
||||
</div>
|
||||
<div className="p-6 glass text-center">
|
||||
<h4 className="text-xl font-semibold">Open Source</h4>
|
||||
<p className="text-gray-300 mt-2">Completely open-source for transparency and trust.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div className="flex flex-col items-center">
|
||||
<p className="py-3 text-xs text-muted-foreground">© 2025 Pocket ID.</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
Reference in New Issue
Block a user