moviedice/src/app/(auth)/login/page.tsx

import type { Metadata } from "next";
import { DisplayNameForm } from "@/components/auth/display-name-form";

export const metadata: Metadata = {
  title: "Join - MovieDice",
};

export default function LoginPage() {
  return (
    <>
      <h1 className="mb-6 text-2xl font-bold text-center">Join MovieDice</h1>
      <DisplayNameForm />
      <p className="mt-6 text-center text-sm text-foreground/50">
        Already have an account?{" "}
        <a href="/recover" className="text-blue-500 hover:underline">
          Recover it
        </a>
      </p>
    </>
  );
}