From 39839ee6b6cbff6e6178cd69335deca70dd996c7 Mon Sep 17 00:00:00 2001
From: Bereket Engida <bekacru@gmail.com>
Date: Sun, 17 Nov 2024 12:09:53 +0300
Subject: [PATCH] docs: add comparison

---
 docs/components/landing/hero.tsx    | 13 ++++++------
 docs/components/sidebar-content.tsx | 19 +++++++++++++++++
 docs/content/docs/comparison.mdx    | 33 +++++++++++++++++++++++++++++
 3 files changed, 58 insertions(+), 7 deletions(-)
 create mode 100644 docs/content/docs/comparison.mdx

diff --git a/docs/components/landing/hero.tsx b/docs/components/landing/hero.tsx
index cb2e9f746b..6326d44123 100644
--- a/docs/components/landing/hero.tsx
+++ b/docs/components/landing/hero.tsx
@@ -24,10 +24,9 @@ const tabs: { name: "auth.ts" | "client.ts"; code: string }[] = [
 	{
 		name: "auth.ts",
 		code: `export const auth = betterAuth({
-	database: {
-        provider: "postgresql",
-        url: process.env.DATABASE_URL,
-    },
+	database: new Pool({
+		connectionString: process.env.DATABASE_URL,
+	}),
     emailAndPassword: {
         enabled: true,
     },
@@ -75,7 +74,7 @@ export default function Hero() {
 							</div>
 
 							<p className="text-zinc-800 dark:text-zinc-300 mt-3 tracking-tight md:text-2xl">
-								The authentication and authorization framework for TypeScript.
+								The most comprehensive authentication framework for TypeScript.
 							</p>
 							{
 								<>
@@ -148,7 +147,7 @@ function CodePreview() {
 			<MotionConfig transition={{ duration: 0.5, type: "spring", bounce: 0 }}>
 				<motion.div
 					animate={{ height: height > 0 ? height : undefined }}
-					className="from-stone-100 to-stone-200 dark:from-stone-950/70 dark:to-stone-950/90 relative overflow-hidden rounded-sm bg-gradient-to-tr ring-1 ring-white/10 backdrop-blur-lg"
+					className="from-stone-100 to-stone-200 dark:to-black/90 dark:via-stone-950/10 dark:from-stone-950/90 relative overflow-hidden rounded-sm bg-gradient-to-tr ring-1 ring-white/10 backdrop-blur-lg"
 				>
 					<div ref={ref}>
 						<div className="absolute -top-px left-0 right-0 h-px" />
@@ -260,7 +259,7 @@ function CodePreview() {
 									<Link
 										href="https://demo.better-auth.com"
 										target="_blank"
-										className="shadow-md shadow-primary-foreground mb-4 ml-auto mr-4 mt-auto flex cursor-pointer items-center gap-2 px-3 py-1 transition-all ease-in-out hover:opacity-70"
+										className="shadow-md  border shadow-primary-foreground mb-4 ml-auto mr-4 mt-auto flex cursor-pointer items-center gap-2 px-3 py-1 transition-all ease-in-out hover:opacity-70"
 									>
 										<svg
 											xmlns="http://www.w3.org/2000/svg"
diff --git a/docs/components/sidebar-content.tsx b/docs/components/sidebar-content.tsx
index 1acee56faf..05e55977e2 100644
--- a/docs/components/sidebar-content.tsx
+++ b/docs/components/sidebar-content.tsx
@@ -62,6 +62,25 @@ export const contents: Content[] = [
 					</svg>
 				),
 			},
+			{
+				title: "Comparison",
+				href: "/docs/comparison",
+				icon: () => (
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="1.2em"
+						height="1.2em"
+						viewBox="0 0 24 24"
+					>
+						<path
+							fill="currentColor"
+							fillRule="evenodd"
+							d="M13 2a1 1 0 1 0-2 0v1H6a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h5v1a1 1 0 0 0 2 0v-1a1 1 0 0 0 0-2V5a1 1 0 1 0 0-2zm4 1a1 1 0 1 0 0 2h1a1 1 0 0 1 1 1v1a1 1 0 1 0 2 0V6a3 3 0 0 0-3-3zm4 8a1 1 0 1 0-2 0v2a1 1 0 0 0 2 0zm0 6a1 1 0 1 0-2 0v1a1 1 0 0 1-1 1h-1a1 1 0 1 0 0 2h1a3 3 0 0 0 3-3z"
+							clipRule="evenodd"
+						></path>
+					</svg>
+				),
+			},
 			{
 				title: "Installation",
 				href: "/docs/installation",
diff --git a/docs/content/docs/comparison.mdx b/docs/content/docs/comparison.mdx
new file mode 100644
index 0000000000..cba6fe0489
--- /dev/null
+++ b/docs/content/docs/comparison.mdx
@@ -0,0 +1,33 @@
+---
+title: Comparison
+description: Comparison of Better Auth with other auth libraries and services.
+---
+
+> Comparison is the thief of joy. – Kanye West
+
+### vs Other Auth Libraries
+
+- We probably support the framework you are using.
+- You need more featuers from your auth library.
+- You need advanced features like two-factor authentication, multi-tenancy, multi-session, admin tools, rate limiting, etc.
+- You want to have more control over your auth flow.
+- You prefer more comprehensive documentation.
+
+### vs Self Hosted Auth Server
+- You want to keep your users on your own database (the same database as your app).
+- You need more control over your auth flow.
+- You don't want the hassle of self-hosting your auth server.
+- And there is a high possibilty that we cover more features you need. And you can alway extends it using our plugin system.
+
+### vs Managed Auth Services (paid)
+
+- You don’t want to give up user data to a third party.
+- You want a single source of truth for your users.
+- You prefer not to pay for authentication.
+- You want to keep your users on your own database (the same database as your app).
+
+### vs Roll Your Own Auth
+
+- You don’t want to maintain a lot of code that isn’t your core business.
+- You want to deligate the security to a community of people who probably care more than you do.
+- We probably cover most of the features you need, and you can always extend it using our plugin system.
\ No newline at end of file