feat: add auth layout component with shared sign-in/sign-up forms

apps/web/src/routes/login.tsx

@@ -1,7 +1,9 @@
-import { createFileRoute, redirect } from "@tanstack/react-router";
+import { createFileRoute, Link, redirect } from "@tanstack/react-router";
 import { useState } from "react";
 import SignInForm from "@/components/sign-in-form";
 import SignUpForm from "@/components/sign-up-form";
+import AuthLayout from "@/components/auth-layout";
+import { Button } from "@/components/ui/button";
 import { account } from "@/lib/auth-client";
 
 export const Route = createFileRoute("/login")({
@@ -27,9 +29,55 @@ export const Route = createFileRoute("/login")({
 function RouteComponent() {
   const [showSignIn, setShowSignIn] = useState(false);
 
-  return showSignIn ? (
-    <SignInForm onSwitchToSignUp={() => setShowSignIn(false)} />
-  ) : (
-    <SignUpForm onSwitchToSignIn={() => setShowSignIn(true)} />
+  const title = showSignIn ? "Welcome back" : "Create your account";
+  const subtitle = showSignIn
+    ? "Sign in to access your dashboard and keep creating."
+    : "Join Reflecto to capture ideas and collaborate seamlessly.";
+
+  return (
+    <AuthLayout
+      footer={
+        <div className="flex flex-col items-center gap-2 text-center sm:flex-row sm:justify-between">
+          <div className="flex items-center gap-3">
+            <Button asChild className="px-0" variant="link">
+              <Link search={{ mode: "recover" }} to="/password">
+                Forgot password?
+              </Link>
+            </Button>
+            <Button asChild className="px-0" variant="link">
+              <Link to="/verify-email">Verify your email</Link>
+            </Button>
+          </div>
+
+          <div>
+            {showSignIn ? (
+              <Button
+                className="px-0 text-primary"
+                onClick={() => setShowSignIn(false)}
+                variant="link"
+              >
+                Need an account? Sign Up
+              </Button>
+            ) : (
+              <Button
+                className="px-0 text-primary"
+                onClick={() => setShowSignIn(true)}
+                variant="link"
+              >
+                Already have an account? Sign In
+              </Button>
+            )}
+          </div>
+        </div>
+      }
+      subtitle={subtitle}
+      title={title}
+    >
+      {showSignIn ? (
+        <SignInForm onSwitchToSignUp={() => setShowSignIn(false)} />
+      ) : (
+        <SignUpForm onSwitchToSignIn={() => setShowSignIn(true)} />
+      )}
+    </AuthLayout>
   );
 }