docs: landing improvements (#695)

docs/app/v1/page.tsx

@@ -217,7 +217,11 @@ function ChangelogItem({
 	version,
 	date,
 	changes,
-}: { version: string; date: string; changes: string[] }) {
+}: {
+	version: string;
+	date: string;
+	changes: string[];
+}) {
 	return (
 		<div className="border-l-2 border-white/10 pl-6 relative">
 			<div className="absolute w-3 h-3 bg-white rounded-full -left-[7px] top-2" />

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

@@ -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/features.tsx

@@ -72,7 +72,7 @@ const features = [
 
 export default function Features({ stars }: { stars: string | null }) {
 	return (
-		<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">
+		<div className="md:w-10/12 mt-10 mx-auto font-geist relative md:border-l-0 md:border-b-0 md:border-[1.2px] rounded-none -pr-2">
 			<div className="w-full md:mx-0">
 				<div className="grid grid-cols-1 relative md:grid-rows-2 md:grid-cols-3 border-b-[1.2px]">
 					<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">