Login-3

1import Image from "next/image"
2import { LoginForm } from "../../components/login-form"
3 
4export default function Page() {
5  return (
6    // Two-column split on lg: form (4 cols) + decorative background image (6 cols, hidden below lg).
7    <div className="grid min-h-svh w-full lg:grid-cols-10">
8      <div className="flex col-span-4 items-center justify-center">
9        <div className="w-full max-w-xs">
10          <LoginForm />
11        </div>
12      </div>
13      <div className="relative hidden bg-muted lg:block col-span-6">
14        <Image
15          width={1500}
16          height={1600}
17          src="/demo/backgrounds/sky.png"
18          alt="Background"
19          // Darken and desaturate the photo in dark mode so it doesn't compete with the form.
20          className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
21        />
22      </div>
23    </div>
24  )
25}