docs: refine UI components and styling

docs/app/page.tsx

@@ -28,7 +28,7 @@ export default async function HomePage() {
 	return (
 		<main className="h-min mx-auto overflow-x-hidden">
 			<Section
-				className="-z-1 mb-1 overflow-y-clip"
+				className="mb-1 overflow-y-clip"
 				crosses
 				crossesOffset="lg:translate-y-[5.25rem]"
 				customPaddings

docs/components/builder/index.tsx

@@ -269,7 +269,7 @@ export function Builder() {
 
 				<div className="flex gap-4 md:gap-12 flex-col md:flex-row items-center md:items-start">
 					<ScrollArea className="w-4/12">
-						<div className="overflow-scroll h-[580px] relate">
+						<div className="overflow-scroll h-[580px] relative">
 							{options.signUp ? (
 								<AuthTabs
 									tabs={[

docs/components/builder/sign-in.tsx

@@ -22,7 +22,7 @@ import { cn } from "@/lib/utils";
 export default function SignIn() {
 	const [options] = useAtom(optionsAtom);
 	return (
-		<Card className="z-50 rounded-none max-w-md">
+		<Card className="z-50 rounded-none max-w-full">
 			<CardHeader>
 				<CardTitle className="text-lg md:text-xl">Sign In</CardTitle>
 				<CardDescription className="text-xs md:text-sm">

docs/components/builder/tabs.tsx

@@ -74,7 +74,7 @@ export const AuthTabs = ({
 							zIndex: -idx,
 							opacity: idx < 3 ? 1 - idx * 0.1 : 0,
 						}}
-						className={cn("w-50 h-full", isActive(tab) ? "" : "hidden")}
+						className={cn("h-full", isActive(tab) ? "" : "hidden")}
 					>
 						{tab.content}
 					</div>

docs/components/landing/hero.tsx

@@ -49,7 +49,7 @@ function TrafficLightsIcon(props: React.ComponentPropsWithoutRef<"svg">) {
 
 export default function Hero() {
 	return (
-		<section className="max-h-[40rem] relative z-[999] w-full flex md:items-center md:justify-center dark:bg-black/[0.96] antialiased bg-grid-white/[0.02] relative overflow-hidden px-8 md:min-h-[40rem]">
+		<section className="max-h-[40rem] relative w-full flex md:items-center md:justify-center dark:bg-black/[0.96] antialiased bg-grid-white/[0.02] overflow-hidden px-8 md:min-h-[40rem]">
 			<Spotlight />
 			<div className="overflow-hidden bg-transparent md:px-10 dark:-mb-32 dark:mt-[-4.75rem] dark:pb-32 dark:pt-[4.75rem]">
 				<div className="lg:max-w-8xl mx-auto grid max-w-full grid-cols-1 items-center gap-x-8 gap-y-16 px-4 py-2 lg:grid-cols-2 lg:px-8 lg:py-4 xl:gap-x-16 xl:px-12">

docs/components/ui/dialog.tsx

@@ -57,7 +57,7 @@ function DialogContent({
 			<DialogPrimitive.Content
 				data-slot="dialog-content"
 				className={cn(
-					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+					"fixed left-[50%] top-[50%] z-50 grid max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg w-11/12",
 					className,
 				)}
 				{...props}