simple sign up page

src/app/signup/page.tsx

@@ -1,5 +1,56 @@
 'use client';
 
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import Link from 'next/link';
+
 export default function SignUp() {
-    return <div className="bg-[#ccc] w-1/2 h-screen ml-auto"></div>;
+    return (
+        // <div className="bg-white dark:bg-black w-[46%] h-screen ml-auto">
+        <div className="bg-white dark:bg-black w-full h-screen flex justify-center items-center">
+            <div className="text-center">
+                <h1 className="text-xl pb-2">Create an account</h1>
+                <Label className="text-sm text-muted-foreground">
+                    Enter your credentials below to create your account
+                </Label>
+                <div className="pb-5">
+                    <Input
+                        className="w-80 mt-6 mx-auto"
+                        placeholder="Full name"
+                    />
+
+                    <Input
+                        className="w-80 mt-5 mx-auto"
+                        type="email"
+                        placeholder="[email protected]"
+                    />
+
+                    <Input
+                        className="w-80 mt-5 mx-auto"
+                        type="password"
+                        placeholder="Enter a password"
+                    />
+
+                    <Button className="mt-5 w-80 mx-auto">
+                        Sign in with Email
+                    </Button>
+                </div>
+                <div className="w-72 mx-auto">
+                    <Label className="mt-3 text-sm text-muted-foreground break-words">
+                        By clicking continue, you agree to our{' '}
+                        <Link href="/terms" className="underline">
+                            Terms of Service
+                        </Link>{' '}
+                        {'and '}
+                        <Link href="/privacy" className="underline">
+                            Privacy Policy
+                        </Link>
+                        .
+                    </Label>
+                </div>
+            </div>
+        </div>
+        // </div>
+    );
 }