docs: landing improvements (#695)

docs/components/builder/code-tabs/code-editor.tsx

@@ -25,16 +25,18 @@ export function CodeEditor({ code, language }: CodeEditorProps) {
 	};
 
 	return (
-		<div className="relative">
+		<div className="relative w-full">
 			<Highlight theme={theme} code={code} language={language}>
 				{({ className, style, tokens, getLineProps, getTokenProps }) => (
 					<pre
-						className={`${className} p-4 overflow-auto max-h-[400px] rounded-md`}
+						className={`${className} text-sm p-4 w-fit overflow-scroll  max-h-[400px] rounded-md`}
 						style={style}
 					>
 						{tokens.map((line, i) => (
 							<div key={i} {...getLineProps({ line, key: i })}>
-								<span className="mr-4 text-gray-500 select-none">{i + 1}</span>
+								<span className="inline-block w-4 mr-3 text-gray-500 select-none">
+									{i + 1}
+								</span>
 								{line.map((token, key) => (
 									<span key={key} {...getTokenProps({ token, key })} />
 								))}

docs/components/builder/code-tabs/index.tsx

@@ -15,11 +15,11 @@ export default function CodeTabs() {
 			id: "1",
 			name: "auth.ts",
 			content: `import { betterAuth } from 'better-auth';
-	
+
 	export const auth = betterAuth({
 		${
 			options.email
-				? `emailAndPassword: { 
+				? `emailAndPassword: {
 		enabled: true,
 ${
 	options.forgetPassword
@@ -61,7 +61,7 @@ ${
 		]`
 				: ""
 		}
-		/** if no database is provided, the user data will be stored in memory. 
+		/** if no database is provided, the user data will be stored in memory.
 	 * Make sure to provide a database to persist user data **/
 	});
 	`,
@@ -77,7 +77,7 @@ ${
 						} } from "better-auth/client/plugins";`
 					: ""
 			}
-			
+
 			export const authClient = createAuthClient({
 				baseURL: process.env.NEXT_PUBLIC_APP_URL,
 				${
@@ -123,14 +123,14 @@ ${
 	const activeFile = files.find((file) => file.id === activeFileId);
 
 	return (
-		<div className="w-full max-w-3xl mx-auto mt-8 border border-border rounded-md overflow-hidden">
+		<div className="w-full mr-auto max-w-3xl mt-8 border border-border rounded-md overflow-hidden">
 			<TabBar
 				files={files}
 				activeFileId={activeFileId}
 				onTabClick={handleTabClick}
 				onTabClose={handleTabClose}
 			/>
-			<div className="bg-background">
+			<div className="bg-back">
 				{activeFile && (
 					<CodeEditor
 						language="typescript"

docs/components/builder/index.tsx

@@ -292,7 +292,7 @@ export function Builder() {
 							)}
 						</div>
 					</ScrollArea>
-					<ScrollArea className="w-5/12  flex-grow">
+					<ScrollArea className="w-[45%] flex-grow">
 						<div className="h-[580px]">
 							{currentStep === 0 ? (
 								<Card className="rounded-none flex-grow h-full">
@@ -540,14 +540,14 @@ export function Builder() {
 									</CardContent>
 								</Card>
 							) : (
-								<Card className="rounded-none flex-grow  h-full overflow-scroll">
+								<Card className="rounded-none w-full overflow-y-hidden h-full overflow-auto">
 									<CardHeader>
-										<div className="flex flex-col items-start">
+										<div className="flex flex-col -mb-2 items-start">
 											<CardTitle>Code</CardTitle>
 										</div>
 									</CardHeader>
 									<CardContent>
-										<div>
+										<div className="flex gap-2 items-baseline">
 											<p>
 												Copy the code below and paste it in your application to
 												get started.

docs/components/builder/sign-in.tsx

@@ -178,7 +178,7 @@ export default function SignIn() {
 			? "const [rememberMe, setRememberMe] = useState(false);"
 			: ""
 	}
-  
+
   return (
     <Card className="max-w-md">
       <CardHeader>
@@ -328,9 +328,9 @@ export default function SignIn() {
 										}
                   )}
                   onClick={async () => {
-                    await signIn.social({ 
-                      provider: "${provider}", 
-                      callbackURL: "/dashboard" 
+                    await signIn.social({
+                      provider: "${provider}",
+                      callbackURL: "/dashboard"
                     });
                   }}
                 >