LukeParke/better-auth
1
0
Fork 0
mirror of https://github.com/LukeHagar/better-auth.git synced 2025-12-08 20:37:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: testimonial section (#517)

Browse Source
This commit is contained in:
Ali Samadi
2024-11-13 22:18:50 -08:00
committed by GitHub
parent 3da2a9be04
commit cbde1de713
5 changed files with 363 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

226
docs/components/features.tsx
View File

@@ -1,6 +1,7 @@
"use client"; "use client";
import React from "react";
import { import {
CheckIcon,
Globe2Icon, Globe2Icon,
PlugIcon, PlugIcon,
PlugZap2Icon, PlugZap2Icon,
@@ -8,168 +9,115 @@ import {
RabbitIcon, RabbitIcon,
ShieldCheckIcon, ShieldCheckIcon,
Webhook, Webhook,
XIcon,
} from "lucide-react"; } from "lucide-react";
import { GitHubLogoIcon, LockClosedIcon } from "@radix-ui/react-icons"; import { LockClosedIcon } from "@radix-ui/react-icons";
import Link from "next/link";
import { Button } from "./ui/button";
import React, { useState } from "react";
import { TechStackDisplay } from "./display-techstack"; import { TechStackDisplay } from "./display-techstack";
import { Ripple } from "./ripple"; import { Ripple } from "./ripple";
import { GithubStat } from "./github-stat"; import { GithubStat } from "./github-stat";
import Testimonial from "./testimonial";
import { cn } from "@/lib/utils";
const features = [
{
id: 1,
label: "Framework Agnostic",
title: "Supports popular <strong>frameworks</strong>",
description:
"Supports popular frameworks, including React, Vue, Svelte, Astro, Solid, Next.js, Nuxt, Hono, and more.",
icon: PlugZap2Icon,
},
{
id: 2,
label: "Authentication",
title: "Email & Password <strong>Authentication</strong>",
description:
"Built-in support for email and password authentication, with secure password hashing and account management features.",
icon: LockClosedIcon,
},
{
id: 3,
label: "Social Sign-on",
title: "Support multiple <strong>OAuth providers</strong>",
description:
"Allow users to sign in with their accounts, including GitHub, Google, Discord, Twitter, and more.",
icon: Webhook,
},
{
id: 4,
label: "Two Factor",
title: "Two Factor <strong>Authentication</strong>",
description:
"With our built-in two factor authentication plugin, you can add an extra layer of security to your account.",
icon: ShieldCheckIcon,
},
{
id: 5,
label: "Organization & Access Control",
title: "Gain and manage <strong>access</strong>.",
description:
"Manage users and their access to resources within your application.",
icon: RabbitIcon,
},
{
id: 6,
label: "Plugin Ecosystem",
title: "Extend your application with plugins.",
description:
"Enhance your application with our official plugins and those created by the community.",
icon: PlugIcon,
},
];
export default function Features({ stars }: { stars: string | null }) { export default function Features({ stars }: { stars: string | null }) {
return ( return (
<div className="md:w-10/12 overflow-hidden mt-10 mx-auto font-geist relative md:border-l-0 md:border-[1.2px] rounded-none -pr-2"> <div className="md:w-10/12 mt-10 mx-auto font-geist relative md:border-l-0 md:border-[1.2px] rounded-none -pr-2">
<Plus className="absolute top-[-17px] left-[-17px] text-black/20 dark:text-white/30 w-8 h-8" /> <div className="w-full md:mx-0">
<div className="grid w-full grid-cols-1 grid-rows-4 md:grid-cols-3 md:mx-0 md:grid-rows-4"> <div className="grid grid-cols-1 relative md:grid-rows-2 md:grid-cols-3 border-b-[1.2px]">
<div className="relative items-start justify-start border-l-[1.2px] border-t-[1.2px] md:border-t-0 transform-gpu flex flex-col p-10 overflow-clip"> <div className="hidden md:grid top-1/2 left-0 -translate-y-1/2 w-full grid-cols-3 z-10 pointer-events-none select-none absolute">
<Plus className="absolute bottom-[-17px] left-[-17px] text-black/20 dark:text-white/30 w-8 h-8" /> <Plus className="w-8 h-8 text-neutral-300 translate-x-[16.5px] translate-y-[.5px] ml-auto dark:text-neutral-600" />
<Plus className="w-8 h-8 text-neutral-300 ml-auto translate-x-[16.5px] translate-y-[.5px] dark:text-neutral-600" />
</div>
{features.map((feature, index) => (
<div
key={feature.id}
className={cn(
"justify-center border-l-[1.2px] md:min-h-[240px] border-t-[1.2px] md:border-t-0 transform-gpu flex flex-col p-10",
index >= 3 && "md:border-t-[1.2px]",
)}
>
<div className="flex items-center gap-2 my-1"> <div className="flex items-center gap-2 my-1">
<PlugZap2Icon className="w-4 h-4" /> <feature.icon className="w-4 h-4" />
<p className="text-gray-600 dark:text-gray-400"> <p className="text-gray-600 dark:text-gray-400">
Framework Agnostic{" "} {feature.label}
</p> </p>
</div> </div>
<div className="mt-2"> <div className="mt-2">
<div className="max-w-full"> <div className="max-w-full">
<div className="flex gap-3 "> <div className="flex gap-3 ">
<p className="max-w-lg text-xl font-normal tracking-tighter md:text-2xl"> <p
Supports popular <strong>frameworks</strong> className="max-w-lg text-xl font-normal tracking-tighter md:text-2xl"
</p> dangerouslySetInnerHTML={{
__html: feature.title,
}}
/>
</div> </div>
</div> </div>
<p className="mt-2 text-sm text-left text-muted-foreground"> <p className="mt-2 text-sm text-left text-muted-foreground">
Supports your favorite frontend, backend and meta frameworks, {feature.description}
including React, Vue, Svelte, Astro, Solid, Next.js, Nuxt, Hono, <a className="ml-2 underline" href="/docs" target="_blank">
and more.{" "}
<a className="text-gray-50" href="/docs" target="_blank">
Learn more Learn more
</a> </a>
</p> </p>
</div> </div>
</div> </div>
<div className="relative items-start justify-start border-l-[1.2px] border-t-[1.2px] md:border-t-0 transform-gpu flex flex-col p-10"> ))}
<Plus className="absolute bottom-[-17px] left-[-17px] text-black/20 dark:text-white/30 w-8 h-8" /> </div>
<div className="flex items-center gap-2 my-1"> <Testimonial />
<LockClosedIcon className="w-4 h-4" />
<p className="text-gray-600 dark:text-gray-400">Authentication</p>
</div>
<div className="mt-2">
<div className="max-w-full">
<div className="flex gap-3 ">
<p className="max-w-lg text-2xl font-normal tracking-tighter">
Email & Password <strong>Authentication</strong>
</p>
</div>
</div>
<p className="mt-2 text-sm text-left text-muted-foreground">
Built-in support for email and password authentication, with
secure password hashing and account management features.{" "}
<a className="text-gray-50" href="/docs" target="_blank">
Learn more
</a>
</p>
</div>
</div>
<div className="relative items-start justify-start md:border-l-[0.2px] border-t-[1.2px] md:border-t-0 flex flex-col p-10">
<Plus className="absolute bottom-[-17px] left-[-17px] text-black/20 dark:text-white/30 w-8 h-8" />
<div className="flex items-center gap-2 my-1"> <div className="relative col-span-3 border-t-[1.2px] border-l-[1.2px] md:border-b-[1.2px] dark:border-b-0 h-full py-20">
<Webhook className="w-4 h-4" /> <div className="w-full h-full p-16 pt-10 md:px-10">
<p className="text-gray-600 dark:text-gray-400">Social Sign-on</p>
</div>
<div className="mt-2">
<div className="max-w-full">
<div className="flex gap-3 ">
<p className="max-w-lg text-2xl font-normal tracking-tighter">
Support multiple <strong>OAuth providers.</strong>
</p>
</div>
</div>
<p className="mt-2 text-sm text-left text-muted-foreground">
Allow users to sign in with their accounts, including GitHub,
Google, Discord, Twitter, and more.{" "}
<a className="text-gray-50" href="#" target="_blank">
Learn more
</a>
</p>
</div>
</div>
<div className="items-start justify-start border-l-[1.2px] border-t-[1.2px] flex flex-col p-10 ">
<div className="flex items-center gap-2 my-1">
<ShieldCheckIcon className="w-4 h-4" />
<p className="text-gray-600 dark:text-gray-400">Two Factor</p>
</div>
<div className="mt-2">
<div className="max-w-full">
<div className="flex gap-3 ">
<p className="max-w-lg text-2xl font-normal tracking-tighter">
Two Factor <strong>Authentication</strong>
</p>
</div>
</div>
<p className="mt-2 text-sm text-left text-muted-foreground">
With our built-in two factor authentication plugin, you can add an
extra layer of security to your account.{" "}
<Link className="text-gray-50" href="/docs" target="_blank">
Learn more
</Link>
</p>
</div>
</div>
<div className="items-start justify-staart border-l-[1.2px] border-t-[1.2px] flex flex-col p-10 ">
<div className="flex items-center gap-2 my-1">
<RabbitIcon className="w-4 h-4" />
<p className="text-gray-600 dark:text-gray-400">
Organization & Access Control{" "}
</p>
</div>
<div className="mt-2">
<div className="max-w-full">
<div className="flex gap-3 ">
<p className="max-w-lg text-2xl font-normal tracking-tighter">
Gain and manage <strong>access.</strong>
</p>
</div>
</div>
<p className="mt-2 text-sm text-left text-muted-foreground">
Manage users and their access to resources within your
application.{" "}
<a className="text-gray-50" href="/docs" target="_blank">
Learn more
</a>
</p>
</div>
</div>
<div className="items-start justify-start border-l-[1.2px] border-t-[1.2px] transform-gpu relative flex flex-col p-10 ">
<div className="flex items-center gap-2 my-1">
<PlugIcon className="w-4 h-4" />
<p className="text-gray-600 dark:text-gray-400">
Plugin Ecosystem{" "}
</p>
</div>
<div className="max-w-full">
<div className="flex gap-3 ">
<p className="max-w-lg text-2xl font-normal tracking-tighter">
Extend your application with plugins
</p>
</div>
</div>
<div className="mt-2">
<p className="mt-2 text-sm text-left text-muted-foreground">
Enhance your application with our official plugins and those
created by the community.{" "}
<a className="text-gray-50" href="/docs" target="_blank">
Learn more
</a>
</p>
</div>
</div>
<div className="relative md:grid md:col-span-3 grid-cols-2 row-span-2 border-t-[1.2px] border-l-[1.2px] md:border-b-[1.2px] dark:border-b-0 h-full py-20 ">
<div className="top-0 left-0 w-full h-full p-16 pt-10 md:px-10 md:absolute">
<div className="flex flex-col items-center justify-center w-full h-full gap-3"> <div className="flex flex-col items-center justify-center w-full h-full gap-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Globe2Icon className="w-4 h-4" /> <Globe2Icon className="w-4 h-4" />

139
docs/components/infinite-scrolling.tsx Normal file
View File

@@ -0,0 +1,139 @@
"use client";
import React, { useEffect, useState } from "react";
import Image from "next/image";
import { cn } from "@/lib/utils";
import { Testimonial } from "./testimonial";
export const InfiniteMovingCards = ({
items,
direction = "left",
speed = "fast",
pauseOnHover = true,
className,
}: {
items: Testimonial[];
direction?: "left" | "right";
speed?: "fast" | "normal" | "slow";
pauseOnHover?: boolean;
className?: string;
}) => {
const containerRef = React.useRef<HTMLDivElement>(null);
const scrollerRef = React.useRef<HTMLDivElement>(null);
useEffect(() => {
addAnimation();
}, []);
const [start, setStart] = useState(false);
function addAnimation() {
if (containerRef.current && scrollerRef.current) {
const scrollerContent = Array.from(scrollerRef.current.children);
scrollerContent.forEach((item) => {
const duplicatedItem = item.cloneNode(true);
if (scrollerRef.current) {
scrollerRef.current.appendChild(duplicatedItem);
}
});
getDirection();
getSpeed();
setStart(true);
}
}
const getDirection = () => {
if (containerRef.current) {
if (direction === "left") {
containerRef.current.style.setProperty(
"--animation-direction",
"forwards",
);
} else {
containerRef.current.style.setProperty(
"--animation-direction",
"reverse",
);
}
}
};
const getSpeed = () => {
if (containerRef.current) {
if (speed === "fast") {
containerRef.current.style.setProperty("--animation-duration", "20s");
} else if (speed === "normal") {
containerRef.current.style.setProperty("--animation-duration", "40s");
} else {
containerRef.current.style.setProperty("--animation-duration", "80s");
}
}
};
return (
<div
ref={containerRef}
className={cn(
"scroller relative z-20 max-w-7xl overflow-hidden [mask-image:linear-gradient(to_right,transparent,white_20%,white_80%,transparent)]",
className,
)}
>
<div
ref={scrollerRef}
className={cn(
" flex min-w-full shrink-0 gap-4 py-4 w-max flex-nowrap",
start && "animate-scroll ",
pauseOnHover && "hover:[animation-play-state:paused]",
)}
>
{items.map((item) => (
<a
key={item.id}
href={item.link}
target="_blank"
className="bg-gray-50 max-w-sm shrink-0 border dark:bg-transparent rounded-lg p-4"
>
<span className="flex items-center gap-2">
<span className="relative">
<Image
src={item.avatar}
alt={item.from}
width={40}
height={40}
className="rounded-full object-cover"
/>
<span className="absolute bottom-0 right-0 w-4 h-4 rounded-full bg-black text-white p-1">
{item.social === "x" ? (
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
className="w-full"
>
<path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
</svg>
) : (
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 448 512"
xmlns="http://www.w3.org/2000/svg"
className="w-full"
>
<path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
</svg>
)}
</span>
</span>
<span>{item.from}</span>
</span>
<p className="mt-3 text-neutral-600 dark:text-neutral-200">
{item.message}
</p>
</a>
))}
</div>
</div>
);
};

112
docs/components/testimonial.tsx Normal file
View File

@@ -0,0 +1,112 @@
import React from "react";
import { InfiniteMovingCards } from "./infinite-scrolling";
type Props = {};
export interface Testimonial {
id: number;
from: string;
avatar: string;
message: string;
link: string;
social: "x" | "linkedin";
}
const testimonials1: Testimonial[] = [
{
id: 1,
from: "Edgaras",
avatar:
"https://pbs.twimg.com/profile_images/1648089090947010560/xGxBzHki_400x400.jpg",
message:
"🥈 @better_auth is approaching v1 release - promising to become the most comprehensive, framework-agnostic authentication library for TypeScript. Perfect for developers who want to focus on building their application!",
link: "https://x.com/edgarasben/status/1856336936505590160",
social: "linkedin",
},
{
id: 2,
from: "Yusuf Mansur Özer",
avatar:
"https://pbs.twimg.com/profile_images/1532002119972274177/D3SKwakL_400x400.jpg",
message:
"Better Auth looks so nice and complete. Will definitely try it out after v1. I am currently with Nuxt Auth Utils it is great to start but Better Auth might be the way to go for bigger projects. 👀",
link: "https://x.com/ymansurozer/status/1855579561875943731",
social: "x",
},
{
id: 3,
from: "Yusuf Mansur Özer",
avatar:
"https://pbs.twimg.com/profile_images/1532002119972274177/D3SKwakL_400x400.jpg",
message:
"Better Auth looks so nice and complete. Will definitely try it out after v1. I am currently with Nuxt Auth Utils it is great to start but Better Auth might be the way to go for bigger projects. 👀",
link: "https://x.com/ymansurozer/status/1855579561875943731",
social: "x",
},
{
id: 4,
from: "Yusuf Mansur Özer",
avatar:
"https://pbs.twimg.com/profile_images/1532002119972274177/D3SKwakL_400x400.jpg",
message:
"Better Auth looks so nice and complete. Will definitely try it out after v1. I am currently with Nuxt Auth Utils it is great to start but Better Auth might be the way to go for bigger projects. 👀",
link: "https://x.com/ymansurozer/status/1855579561875943731",
social: "x",
},
];
const testimonials2: Testimonial[] = [
{
id: 1,
from: "Edgaras",
avatar:
"https://pbs.twimg.com/profile_images/1648089090947010560/xGxBzHki_400x400.jpg",
message:
"🥈 @better_auth is approaching v1 release - promising to become the most comprehensive, framework-agnostic authentication library for TypeScript. Perfect for developers who want to focus on building their application!",
link: "https://x.com/edgarasben/status/1856336936505590160",
social: "x",
},
{
id: 2,
from: "Yusuf Mansur Özer",
avatar:
"https://pbs.twimg.com/profile_images/1532002119972274177/D3SKwakL_400x400.jpg",
message:
"Better Auth looks so nice and complete. Will definitely try it out after v1. I am currently with Nuxt Auth Utils it is great to start but Better Auth might be the way to go for bigger projects. 👀",
link: "https://x.com/ymansurozer/status/1855579561875943731",
social: "x",
},
{
id: 3,
from: "Yusuf Mansur Özer",
avatar:
"https://pbs.twimg.com/profile_images/1532002119972274177/D3SKwakL_400x400.jpg",
message:
"Better Auth looks so nice and complete. Will definitely try it out after v1. I am currently with Nuxt Auth Utils it is great to start but Better Auth might be the way to go for bigger projects. 👀",
link: "https://x.com/ymansurozer/status/1855579561875943731",
social: "x",
},
{
id: 4,
from: "Yusuf Mansur Özer",
avatar:
"https://pbs.twimg.com/profile_images/1532002119972274177/D3SKwakL_400x400.jpg",
message:
"Better Auth looks so nice and complete. Will definitely try it out after v1. I am currently with Nuxt Auth Utils it is great to start but Better Auth might be the way to go for bigger projects. 👀",
link: "https://x.com/ymansurozer/status/1855579561875943731",
social: "x",
},
];
export default function Testimonial({}: Props) {
return (
<div className="px-8 py-12 overflow-auto border-l-[1.2px]">
<InfiniteMovingCards items={testimonials1} />
<InfiniteMovingCards
direction="right"
items={testimonials2}
speed="normal"
/>
</div>
);
}

3
docs/next.config.mjs
View File

@@ -28,6 +28,9 @@ export default withMDX({
{ {
hostname: "assets.aceternity.com", hostname: "assets.aceternity.com",
}, },
{
hostname: "pbs.twimg.com",
},
], ],
}, },
}); });

7
docs/tailwind.config.js
View File

@@ -129,11 +129,18 @@ export default {
height: "0", height: "0",
}, },
}, },
scroll: {
to: {
transform: "translate(calc(-50% - 0.5rem))",
},
},
}, },
animation: { animation: {
"accordion-down": "accordion-down 0.2s ease-out", "accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out",
ripple: "ripple var(--duration,2s) ease calc(var(--i, 0)*.2s) infinite", ripple: "ripple var(--duration,2s) ease calc(var(--i, 0)*.2s) infinite",
scroll:
"scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite",
}, },
}, },
}, },