updated login/signup form to shadcn

app/(public)/login/page.tsx

@@ -1,10 +1,17 @@
-import LoginForm from '@/components/LoginForm';
+import FormWrapper from '@/components/forms/FormWrapper'
+import LoginForm from '@/components/forms/LoginForm'
 import React from 'react'
 
 export default function LoginPage() {
     return (
-        <div>
-            <LoginForm />
+        <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+            <div className="w-full max-w-sm">
+                <FormWrapper
+                    title='Login to your account'
+                    description='Enter your email below to login to your account'
+                    form={<LoginForm />}
+                />
+            </div>
         </div>
     )
 }

app/(public)/signup/page.tsx

@@ -1,5 +1,9 @@
 import { verifyInvite } from '@/lib/invite'
-import SignupForm from '@/components/SignupForm'
+import FormWrapper from '@/components/forms/FormWrapper'
+import SignUpForm from '@/components/forms/SignUpForm'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import Link from 'next/link'
+import { IconArrowLeft } from '@tabler/icons-react'
 
 interface Props {
     searchParams: {
@@ -11,13 +15,38 @@ export default async function SignupPage({ searchParams }: Props) {
     const invite = searchParams.token ? await verifyInvite(searchParams.token) : null
 
     if (!invite || invite.accepted || new Date(invite.expiresAt) < new Date()) {
-        return <div className="text-center mt-10">Invalid or expired invitation.</div>
+        return (
+            <div className="flex min-h-svh w-full justify-center p-6 md:p-10">
+                <div className="w-full max-w-sm">
+                    <Card>
+                        <CardHeader className='py-2'>
+                            <CardTitle>
+                                <div className="text-center">Invalid or expired invitation.</div>
+                            </CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <p>Reach out to the couple or event planner to get a new invitation link.</p>
+                            <Link href={'/'} className='mt-4 text-brand-primary-400 flex items-center hover:underline'>
+                                <IconArrowLeft />
+                                Back to Homepage
+                            </Link>
+                        </CardContent>
+                    </Card>
+
+                </div>
+            </div>
+        )
     }
 
     return (
-        <div className="max-w-md mx-auto mt-10">
-            <h1 className="text-2xl font-bold mb-4">Complete Your Signup</h1>
-            <SignupForm invite={invite} />
+        <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
+            <div className="w-full max-w-sm">
+                <FormWrapper
+                    title='Complete Your Signup'
+                    description='Choose a username to finish signing up'
+                    form={<SignUpForm invite={invite} />}
+                />
+            </div>
         </div>
     )
 }