PreRelease v1

app/(auth)/sign-in/[[...sign-in]]/page.tsx

@@ -0,0 +1,33 @@
+// The [[...sign-in]] folder name is MAGIC!
+// It catches all Clerk's internal sign-in routes
+// (sign-in, sign-in/factor-one, sign-in/sso-callback, etc.)
+
+import { SignIn } from "@clerk/nextjs";
+
+export default function SignInPage() {
+  return (
+    <main className="min-h-screen flex items-center justify-center bg-slate-50 dark:bg-slate-900">
+      {/* Left side - branding (optional, add later) */}
+      <div className="w-full max-w-md">
+        <SignIn
+          appearance={{
+            elements: {
+              // Customize Clerk's UI to match your design
+              rootBox: "w-full",
+              card: "bg-white dark:bg-slate-800 shadow-xl border border-slate-200 dark:border-slate-700 rounded-2xl",
+              headerTitle: "text-slate-900 dark:text-slate-100 font-bold",
+              headerSubtitle: "text-slate-600 dark:text-slate-400",
+              socialButtonsBlockButton:
+                "border border-slate-300 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700",
+              formFieldInput:
+                "border-slate-300 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 focus:ring-blue-500",
+              formButtonPrimary:
+                "bg-blue-700 hover:bg-blue-800 text-white font-semibold",
+              footerActionLink: "text-blue-700 hover:text-blue-800 font-medium",
+            },
+          }}
+        />
+      </div>
+    </main>
+  );
+}