Landing Page

docs/components/Advantages/index.tsx

@@ -0,0 +1,172 @@
+import { useEffect, useState } from "react"
+import { createHighlighter, Highlighter } from "shiki/index.mjs"
+
+const codeSnippet = `import NextAuth from "next-auth"
+
+export const { handlers, signIn, signOut, auth } = NextAuth({
+  providers: [],
+})`
+
+export default function Advantages() {
+  const [highlighter, setHighlighter] = useState<Highlighter[] | null>([])
+
+  useEffect(() => {
+    ;(async () => {
+      const hl = await createHighlighter({
+        themes: ["github-light-default", "github-light-default"],
+        langs: ["ts", "tsx", "bash"],
+      })
+      const h2 = await createHighlighter({
+        themes: ["github-dark", "github-dark"],
+        langs: ["ts", "tsx", "bash"],
+      })
+      setHighlighter([hl, h2])
+    })()
+  }, [])
+
+  const highlightLight = (code: string, lang: "ts" | "tsx" | "bash") => {
+    if (!highlighter || highlighter.length !== 2) {
+      return `<pre><code>${code}</code></pre>`
+    }
+
+    return highlighter[0].codeToHtml(code, {
+      lang,
+      themes: {
+        light: "github-light-default",
+        dark: "github-light-default",
+      },
+    })
+  }
+
+  const highlightDark = (code: string, lang: "ts" | "tsx" | "bash") => {
+    if (!highlighter || highlighter.length !== 2) {
+      return `<pre><code>${code}</code></pre>`
+    }
+    return highlighter[1].codeToHtml(code, {
+      lang,
+      themes: {
+        light: "github-dark",
+        dark: "github-dark",
+      },
+    })
+  }
+
+  return (
+    <section className="relative w-full overflow-hidden bg-white py-16 sm:py-24 dark:bg-neutral-950">
+      <div className="absolute left-1/2 top-1/2 -z-0 h-[30rem] w-[30rem] -translate-x-1/2 -translate-y-1/2 rounded-full bg-violet-500/10 opacity-50 blur-[256px] dark:bg-violet-900/20" />
+      <div className="relative z-10 mx-auto max-w-7xl px-8">
+        <div className="flex flex-col items-center gap-16">
+          <div className="flex max-w-2xl flex-col items-center gap-4">
+            <h2 className="text-center text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200">
+              Everything you need, nothing you don’t
+            </h2>
+            <div className="text-center text-lg text-neutral-600 dark:text-neutral-400">
+              Auth.js is a complete, open-source authentication solution,
+              designed to be flexible and secure, giving you full control over
+              your user data.
+            </div>
+          </div>
+
+          <div className="grid w-full grid-cols-1 gap-8 lg:grid-cols-2">
+            <div className="flex flex-col gap-8">
+              <div className="flex h-full flex-col gap-4 rounded-lg border border-neutral-200 bg-neutral-100 p-8 dark:border-neutral-800 dark:bg-neutral-900">
+                <div className="flex justify-start text-black dark:text-white">
+                  <svg
+                    className="h-8 w-8"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5-10-5-10 5z"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </div>
+                <h3 className="text-2xl font-bold text-neutral-900 dark:text-white">
+                  Use Any Framework
+                </h3>
+                <div className="text-lg text-neutral-600 dark:text-neutral-400">
+                  Built for the edge with first-class support for Next.js,
+                  SvelteKit, SolidStart, and more.
+                </div>
+              </div>
+
+              <div className="flex h-full flex-col gap-4 rounded-lg border border-neutral-200 bg-neutral-100 p-8 dark:border-neutral-800 dark:bg-neutral-900">
+                <div className="flex justify-start text-black dark:text-white">
+                  <svg
+                    className="h-8 w-8"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M4 7v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V7M4 7c0-1.1.9-2 2-2h12c1.1 0 2 .9 2 2M4 7l8 5 8-5"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </div>
+                <h3 className="text-2xl font-bold text-neutral-900 dark:text-white">
+                  Own Your Data
+                </h3>
+                <div className="text-lg text-neutral-600 dark:text-neutral-400">
+                  Connect to your own database with our adapter system. Never
+                  get locked into a vendor's user table again.
+                </div>
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-4 rounded-lg border border-neutral-200 bg-neutral-100 p-8 dark:border-neutral-800 dark:bg-neutral-900">
+              <div className="flex justify-start text-black dark:text-white">
+                <svg
+                  className="h-8 w-8"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M10 3H5a2 2 0 00-2 2v5m7-7h5a2 2 0 012 2v5m-7 11h5a2 2 0 002-2v-5m-7 7H5a2 2 0 01-2-2v-5"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </div>
+              <h3 className="text-2xl font-bold text-neutral-900 dark:text-white">
+                Fully Extensible
+              </h3>
+              <div className="mb-4 text-lg text-neutral-600 dark:text-neutral-400">
+                Choose from 100+ pre-configured providers or add your own.
+                Customize everything from UI to session handling with callbacks.
+              </div>
+              <div className="mt-auto rounded-lg border border-neutral-200 bg-[#FFF4] px-4 font-mono text-sm dark:border-neutral-800 dark:bg-[#FFFFFF03]">
+                <div className="py-4">
+                  {/* 3. Render the highlighted HTML using dangerouslySetInnerHTML */}
+                  <div
+                    className="dark:hidden [&>*]:!bg-transparent [&_*]:whitespace-pre-wrap"
+                    dangerouslySetInnerHTML={{
+                      __html: highlightLight(codeSnippet, "ts"),
+                    }}
+                  />
+                  <div
+                    className="hidden dark:block [&>*]:!bg-transparent [&_*]:whitespace-pre-wrap"
+                    dangerouslySetInnerHTML={{
+                      __html: highlightDark(codeSnippet, "ts"),
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

docs/components/CTA/index.tsx

@@ -0,0 +1,50 @@
+export default function CTA() {
+  return (
+    <section className="w-full bg-white py-16 sm:py-24 dark:bg-black">
+      <div className="mx-auto max-w-7xl px-4 sm:px-8">
+        <div className="relative isolate overflow-hidden rounded-2xl bg-violet-800/80 px-6 py-16 text-center shadow-2xl sm:rounded-3xl sm:px-16 sm:py-24">
+          <h2 className="mx-auto max-w-2xl text-2xl font-bold tracking-tight text-white sm:text-4xl">
+            Ready to secure your app?
+          </h2>
+          <div className="mx-auto mt-6 max-w-xl text-lg leading-8 text-violet-200">
+            Get started in minutes with our quickstart guide or dive into the
+            documentation to see everything Auth.js has to offer.
+          </div>
+          <div className="mt-10 flex flex-col items-center justify-center gap-x-6 gap-y-6 sm:flex-row">
+            <a
+              href="/getting-started"
+              className="w-full rounded-md bg-white px-5 py-3.5 text-base font-semibold text-violet-800 shadow-sm transition-colors duration-300 hover:bg-violet-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white sm:w-auto"
+            >
+              Get started
+            </a>
+            <a
+              href="/getting-started/integrations"
+              className="text-base font-semibold leading-6 text-white"
+            >
+              See all integrations <span aria-hidden="true">→</span>
+            </a>
+          </div>
+          <svg
+            viewBox="0 0 1024 1024"
+            className="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-x-1/2 [mask-image:radial-gradient(closest-side,white,transparent)]"
+            aria-hidden="true"
+          >
+            <circle
+              cx={512}
+              cy={512}
+              r={512}
+              fill="url(#8d958450-c69f-4251-94bc-4e091a323369)"
+              fillOpacity="0.7"
+            />
+            <defs>
+              <radialGradient id="8d958450-c69f-4251-94bc-4e091a323369">
+                <stop stopColor="#7775D6" />
+                <stop offset={1} stopColor="#E935C1" />
+              </radialGradient>
+            </defs>
+          </svg>
+        </div>
+      </div>
+    </section>
+  )
+}

docs/components/Footer/index.tsx

@@ -1,97 +1,82 @@
-import { useEffect } from "react"
-import { useRouter } from "next/router"
-import cx from "classnames"
+import React from "react"
 
-function kFormatter(num: number) {
-  return (Math.sign(num) * (Math.abs(num) / 1000)).toFixed(1) + "k"
+function FooterSection({ children }) {
+  return <div className="flex flex-col gap-4">{children}</div>
 }
 
-export function Footer({ className = "" }) {
-  const router = useRouter()
-
-  useEffect(() => {
-    fetch("https://api.github.com/repos/nextauthjs/next-auth")
-      .then((res) => res.json())
-      .then((data) => {
-        const githubStat = document.querySelector(".github-counter")!
-        if (!githubStat) return
-        githubStat.innerHTML = kFormatter(data.stargazers_count ?? 21100)
-      })
-
-    // CarbonAds hydration error workaround hack
-    const carbonAdsEl =
-      document.querySelector<HTMLScriptElement>("#_carbonads_js")
-    if (carbonAdsEl) {
-      carbonAdsEl.src =
-        "https://cdn.carbonads.com/carbon.js?serve=CWYD42JY&placement=authjsdev&format=cover"
+function FooterHeading({ children }) {
+  return (
+    <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
+      {children}
+    </h3>
+  )
+}
 
-      router.events.on("routeChangeComplete", () => {
-        window._carbonads?.refresh()
-      })
-    }
-  }, [])
+function FooterLink({ href, children }) {
   return (
-    <div
-      className={cx(
-        "mx-auto flex w-full flex-col items-center gap-4 px-12 pb-20 pt-24 text-gray-600 sm:gap-12 dark:text-gray-100",
-        className
-      )}
+    <a
+      href={href}
+      className="text-neutral-600 transition-colors hover:text-violet-500 dark:text-neutral-400 dark:hover:text-violet-400"
     >
-      <div className="flex w-full max-w-[90rem] flex-col justify-between gap-6 sm:flex-row sm:gap-0">
-        <div className="flex flex-col">
-          <h3 className="mb-4 text-lg font-black">About Auth.js</h3>
-          <ul className="flex flex-col gap-2">
-            <li>
-              <a href="/getting-started">Introduction</a>
-            </li>
-            <li>
-              <a href="/security">Security</a>
-            </li>
-            <li>
-              <a
-                href="https://discord.authjs.dev/?utm_source=docs"
-                title="Join our Discord"
-                rel="noopener noreferrer"
-                className="flex items-center gap-1"
-                target="_blank"
-              >
-                Discord Community
-              </a>
-            </li>
-          </ul>
-        </div>
-        <div className="flex flex-col">
-          <h3 className="mb-4 text-lg font-black">Download</h3>
-          <ul className="flex flex-col gap-2">
-            <a
-              rel="noopener noreferrer"
-              target="_blank"
-              href="https://github.com/nextauthjs/next-auth"
-            >
+      {children}
+    </a>
+  )
+}
+
+export default function Footer() {
+  return (
+    <footer className="w-full border-t border-neutral-200 bg-white dark:border-neutral-800 dark:bg-black">
+      <div className="mx-auto max-w-7xl px-8 pb-8 pt-16">
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
+          <FooterSection>
+            <FooterHeading>About Auth.js</FooterHeading>
+            <FooterLink href="/getting-started">Introduction</FooterLink>
+            <FooterLink href="/security">Security</FooterLink>
+            <FooterLink href="/getting-started/migrating-to-v5">
+              Migrating to v5
+            </FooterLink>
+          </FooterSection>
+
+          <FooterSection>
+            <FooterHeading>Documentation</FooterHeading>
+            <FooterLink href="/getting-started">Get Started</FooterLink>
+            <FooterLink href="/getting-started/providers/42-school">
+              Providers
+            </FooterLink>
+            <FooterLink href="/getting-started/adapters/azure-tables">
+              Adapters
+            </FooterLink>
+          </FooterSection>
+
+          <FooterSection>
+            <FooterHeading>Community</FooterHeading>
+            <FooterLink href="https://github.com/nextauthjs/next-auth">
               GitHub
-            </a>
-            <a
-              rel="noopener noreferrer"
-              target="_blank"
-              href="https://www.npmjs.com/package/next-auth"
-            >
+            </FooterLink>
+            <FooterLink href="https://discord.authjs.dev/?utm_source=docs">
+              Discord
+            </FooterLink>
+            <FooterLink href="https://www.npmjs.com/package/next-auth">
               NPM
-            </a>
-          </ul>
+            </FooterLink>
+          </FooterSection>
+
+          <FooterSection>
+            <FooterHeading>Acknowledgements</FooterHeading>
+            <FooterLink href="https://clerk.com">Clerk (Sponsor)</FooterLink>
+            <FooterLink href="https://authjs.dev/contributors">
+              Contributors
+            </FooterLink>
+            <FooterLink href="https://authjs.dev/sponsors">Sponsors</FooterLink>
+          </FooterSection>
         </div>
-        <div className="flex flex-col">
-          <h3 className="mb-4 text-lg font-black">Acknowledgements</h3>
-          <ul className="flex flex-col gap-2">
-            <a href="/contributors">Contributors</a>
-            <a href="/sponsors">Sponsors</a>
-          </ul>
+        <div className="mt-16 border-t border-neutral-200 pt-8 text-center text-neutral-500 dark:border-neutral-800 dark:text-neutral-500">
+          <p>
+            &copy; {new Date().getFullYear()} Auth.js Team. Balázs Orbán and
+            Team. All rights reserved.
+          </p>
         </div>
       </div>
-      <div className="mx-auto mt-4 flex-grow text-gray-400 sm:mt-0 dark:text-gray-500">
-        Auth.js &copy; Balázs Orbán and Team - {new Date().getFullYear()}
-      </div>
-    </div>
+    </footer>
   )
 }
-
-export default Footer