simple sign up page

src/app/page.tsx

@@ -1,24 +1,9 @@
 'use client';
 
-import { PostRequest } from '@/platform';
-
 export default function Home() {
-    const test: PostRequest = {
-        content: 'Hello, World - Idk, Made this post for testing my API lol',
-        platforms: [],
-    };
-
     return (
-        <button
-            className="w-max mx-auto my-auto"
-            onClick={async () => {
-                await fetch('/api/posts', {
-                    method: 'POST',
-                    body: JSON.stringify(test),
-                });
-            }}
-        >
-            Post now
-        </button>
+        <div>
+            <h1 className="text-2xl">The ultimate social media manager</h1>
+        </div>
     );
 }

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>
+    );
 }

src/components/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

src/components/ui/label.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }