Auth Form With Image Collage This component provides a responsive, two-panel layout for authentication forms. It uses CSS Grid for the main structure, ensuring the form and image collage stack vertically on smaller screens. The right panel features a staggered fade-in animation for the images, powered by framer-motion.
import * as React from "react";
import { AuthFormWithImageCollage } from "@/components/ui/form";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
// Define the form fields for the demo
const SignUpForm = (
<form className="grid gap-4">
<div className="grid grid-cols-2 gap-4">
<div className="grid gap-2">
<Label htmlFor="company-name">Company</Label>
<Input id="company-name" placeholder="Asos" defaultValue="Asos" required />
</div>
<div className="grid gap-2">
<Label htmlFor="brand-url">Brand URL</Label>
<Input id="brand-url" placeholder="your-brand.com" required />
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="grid gap-2">
<Label htmlFor="first-name">First name</Label>
<Input id="first-name" placeholder="Max" required />
</div>
<div className="grid gap-2">
<Label htmlFor="last-name">Last name</Label>
<Input id="last-name" placeholder="Robinson" required />
</div>
</div>
<div className="grid gap-2">
<Label htmlFor="email">Email</Label>
<Input
id="email"
type="email"
placeholder="m@example.com"
required
/>
</div>
<div className="grid gap-2">
<Label htmlFor="password">Password</Label>
<Input id="password" type="password" required />
</div>
<Button type="submit" className="w-full">
Sign up
</Button>
</form>
);
// Footer content with links
const FooterContent = (
<p>
By signing up, you confirm that you accept the{" "}
<a href="#" className="underline">
Terms of Use
</a>{" "}
and{" "}
<a href="#" className="underline">
Privacy Policy
</a>
.
</p>
);
// Logo component
const Logo = () => (
<svg
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 3H18V7H14V11H10V7H6V3Z"
className="fill-foreground"
/>
<path
d="M6 13H10V17H14V21H6V13Z"
className="fill-foreground"
/>
</svg>
);
// Image data for the collage
const collageImages = [
{
src: "https://cdn.21st.dev/assets/mirror/ae/ae90cda09bb8b422323b8f1959c405b39a88ea741bd4850ea206f562e197390b.jpg",
alt: "Fashion model in a hype sweatshirt",
className: "col-span-1 row-span-2", // Spans 2 rows
},
{
src: "https://cdn.21st.dev/assets/mirror/dc/dc804b0cf90e5771620366176afbf59cb979cd71086203962cbdd6d364c23924.jpg",
alt: "Well-dressed man",
className: "col-span-1 row-span-1",
},
{
src: "https://cdn.21st.dev/assets/mirror/3c/3ccae6e7e43b4b2dcc8649607fbe6ca41a730f9f7d52c30bf658452d4ee551a7.jpg",
alt: "Woman with purple hair",
className: "col-span-1 row-span-1",
},
{
src: "https://cdn.21st.dev/assets/mirror/0d/0d590d37b6ebb1387da516c6314f17de2ce3d7b2a0755f3c8bcb4faf7ab5d42f.jpg",
alt: "Woman with curly hair",
className: "col-span-1 row-span-1",
},
{
src: "https://cdn.21st.dev/assets/mirror/c8/c85c1b33180cf6883f0aeb7c32b396638012a95d12060dbe76bb66ef0b8cf9e3.jpg",
alt: "Man with a beard",
className: "col-span-1 row-span-1",
},
];
export default function AuthFormWithImageCollageDemo() {
return (
<AuthFormWithImageCollage
logo={<Logo />}
title="Connect with top talents"
form={SignUpForm}
footer={FooterContent}
images={collageImages}
/>
);
}