Closed LaurenMcM749 closed 4 months ago
Even better - I have the code here:
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
export function Dashboard() {
return (
<div className="w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]">
<div className="flex items-center justify-center py-12">
<div className="mx-auto grid w-[350px] gap-6">
<div className="grid gap-2 text-center">
<h1 className="text-3xl font-bold">Login</h1>
<p className="text-balance text-muted-foreground">
Login in with a provider bellow
</p>
</div>
<div className="grid gap-4">
<Button variant="outline" className="w-full">
Login with Google
</Button>
</div>
</div>
</div>
<div className="hidden bg-muted lg:block">
<Image
src="/placeholder.svg"
alt="Image"
width="1920"
height="1080"
className="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
/>
</div>
</div>
)
}
I'll let one of yall integrate the above into the platform so that you understand the codebase better
Implement the create account/log in page in the image below using our styles (font type/colors, background colors, border-radius, etc).
This is created using Shadcn/ui components, so it requires little, if any?, custom coding! However, I don't know exactly how to access the code for it - you will have to do some exploring or ask Ani who introduced me to this library.
Here is the link to the library and specifically their authentication example - https://ui.shadcn.com/examples/authentication