Amaxa-Impact / amaxa-web

2 stars 0 forks source link

[UI] Create account / Log in Page #5

Closed LaurenMcM749 closed 4 months ago

LaurenMcM749 commented 7 months ago

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

Screenshot 2024-03-25 at 2 43 47 PM
not-ani commented 7 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