"use client"; import { useEffect, useId, useState } from "react"; import useMeasure from "react-use-measure"; import Link from "next/link"; import clsx from "clsx"; import { Button } from "@/components/ui/button"; import { Check, Copy } from "lucide-react"; import { useTheme } from "next-themes"; import { Highlight, themes } from "prism-react-renderer"; import { AnimatePresence, motion, MotionConfig } from "framer-motion"; import { Builder } from "../builder"; import { Spotlight } from "./spotlight"; import { GradientBG } from "./gradient-bg"; const tabs: { name: "auth.ts" | "client.ts"; code: string }[] = [ { name: "auth.ts", code: `export const auth = betterAuth({ database: new Pool({ connectionString: DATABASE_URL, }), emailAndPassword: { enabled: true, }, plugins: [ organization(), twoFactor(), ] })`, }, { name: "client.ts", code: `const client = createAuthClient({ plugins: [passkeyClient()] }); `, }, ]; function TrafficLightsIcon(props: React.ComponentPropsWithoutRef<"svg">) { return ( ); } export default function Hero() { return (
Own Your Auth

The most comprehensive authentication framework for TypeScript.

git: (main) x

npm add{" "} better-auth

{ <>
Get Started
}
); } function CodePreview() { const [currentTab, setCurrentTab] = useState<"auth.ts" | "client.ts">( "auth.ts", ); const theme = useTheme(); const code = tabs.find((tab) => tab.name === currentTab)?.code ?? ""; const [copyState, setCopyState] = useState(false); const [ref, { height }] = useMeasure(); const copyToClipboard = (text: string) => { navigator.clipboard.writeText(text).then(() => { setCopyState(true); setTimeout(() => { setCopyState(false); }, 2000); }); }; const [codeTheme, setCodeTheme] = useState(themes.synthwave84); useEffect(() => { setCodeTheme( theme.resolvedTheme === "light" ? themes.oneLight : themes.synthwave84, ); }, [theme.resolvedTheme]); return ( 0 ? height : undefined }} className="relative overflow-hidden rounded-xl" > {/* Dynamic background based on theme */}
{/* Glass layers - responsive to theme */}
{/* Border and shadow effects - theme aware */}
{/* Inner glow - theme specific */}
{/* Liquid glass reflection effect - adaptive */}
{tabs.map((tab) => ( ))}
{({ className, style, tokens, getLineProps, getTokenProps, }) => ( 
													
														{tokens.map((line, lineIndex) => (
															

																{line.map((token, tokenIndex) => (
																	
																))}
															

														))}
)}

Demo
); } export function HeroBackground(props: React.ComponentPropsWithoutRef<"svg">) { const id = useId(); return ( ); }