Add UI for signup form

Author: LemonDrew

frontend/src/app/auth/signup/page.tsx

@@ -1,7 +1,9 @@
+import SignupForm from "@/app/components/auth/SignUpForm";
+
 export default function SignUpPage() {
     return (
-        <div>
-            SignUp Page
+        <div className="h-screen flex items-center justify-center">
+            <SignupForm/>
         </div>
     )
 }

frontend/src/app/components/auth/SignUpForm.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardTitle, CardHeader, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export default function SignupForm() {
+
+    function NavigateToLogin() {
+        window.location.href = "/auth/login";
+    };
+
+    return (
+        <Card className="min-h-[50%] min-w-[40%]">
+            <CardHeader className="mt-5">
+                <CardTitle className="text-center text-4xl font-bold">
+                    Register an account
+                </CardTitle>
+            </CardHeader>
+
+            <CardContent className="px-15 pt-10">
+                <form>
+                    <div className="flex flex-col gap-4">
+                        <div>
+                            <Label className="m-2">
+                                Email
+                            </Label>
+                            <Input name="email" type="email" required>
+                            </Input>
+                        </div>
+                        <div>
+                            <Label className="m-2">
+                                Password
+                            </Label>
+                            <Input name="password" type="password" required>
+                            </Input>
+                        </div>
+
+                        <div className="flex justify-center ">
+                            <Button className="w-full">
+                                Register
+                            </Button>
+                        </div>
+
+                        <div>
+                            <Button onClick={() => NavigateToLogin()}>
+                                Back
+                            </Button>
+                        </div>
+
+                    </div>
+                </form>
+            </CardContent>
+
+        </Card>
+    )
+}