docs: improve landing page

docs/docusaurus.config.ts

@@ -26,7 +26,7 @@ const config: Config = {
       "classic",
       {
         docs: {
-          routeBasePath: "/",
+          routeBasePath: "/docs",
           sidebarPath: "./sidebars.ts",
           editUrl: "https://github.com/pocket-id/pocket-id/edit/main/docs",
         },

docs/package-lock.json

@@ -4605,7 +4605,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.0.3.tgz",
       "integrity": "sha512-qUyxuhuI2eTgRJ+qfCQRAr69Cw7BdSz+PoNFUNoRuhPjikNC8+sxK+Mi/chaXAXewjv/zbf6if6z6ItVLh+e9Q==",
-      "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "@tailwindcss/node": "^4.0.3",

docs/src/components/feature-box.tsx

@@ -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>
+  );
+}

docs/src/pages/index.tsx

@@ -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">
+          &copy; 2025 Pocket ID
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Home;

docs/src/pages/start.tsx

@@ -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">&copy; 2025 Pocket ID.</p>
-      </div>
-    </div>
-  );
-};
-
-export default Home;

docs/static/styles.css

@@ -1,10 +1,11 @@
-@import "tailwindcss";
+@layer theme, base, components, utilities;
 
-@config '../tailwind.config.js';
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
 
 .glass {
-    background: #09090B;
-    backdrop-filter: blur(10px);
-    border-radius: 10px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-}
+  background: #09090b;
+  backdrop-filter: blur(10px);
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}

docs/tailwind.config.js

@@ -1,12 +0,0 @@
-module.exports = {
-  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
-  purge: [],
-  darkMode: false, // or 'media' or 'class'
-  theme: {
-    extend: {},
-  },
-  variants: {
-    extend: {},
-  },
-  plugins: [],
-}