-
-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Landing Page #13192
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
Open
Landing Page #13192
Changes from 17 commits
Commits
Show all changes
22 commits
Select commit
Hold shift + click to select a range
1de1f62
hero section and social proof
TheAmanM d94254b
styled rest of the page
TheAmanM 7f327a9
dark mode compatibility
TheAmanM 11f19ac
fixed testimonials
TheAmanM 7557057
fixed features
TheAmanM 81fd098
fixed logos
TheAmanM 481149c
hover effect on provider icons
TheAmanM d9089fe
fix: links
TheAmanM eeccf2c
responsive cta
TheAmanM d2f1ae6
fixed hero image
TheAmanM e3d2638
fix: code hero section
TheAmanM ca01b81
fixed statistics
TheAmanM b0574f3
responsive provider logos
TheAmanM bb09549
fix: github icon
TheAmanM 14613f3
hero code theming
TheAmanM e5ddbb0
minor text and theming fixes
TheAmanM f9410a0
refactoring
TheAmanM cc675c0
migrated <img> to <Image>
TheAmanM 63327bd
switched providers to manifest.json => reduced redundancy
TheAmanM fb157bf
moved styles to globals.css
TheAmanM ef8a339
fix: migrated to RichTabs
TheAmanM dafde59
Updated index.tsx to remove asterisks
TheAmanM File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| © {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 © Balázs Orbán and Team - {new Date().getFullYear()} | ||
| </div> | ||
| </div> | ||
| </footer> | ||
| ) | ||
| } | ||
|
|
||
| export default Footer |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.