Fix signup page

app/(auth)/signin/components/signin-footer.tsx

@@ -17,7 +17,7 @@ export const SignInFooter = () => {
           fontSize="sm"
           color="primary.800"
           fontWeight="semibold"
-          href="/signup/email"
+          href="/signup"
         >
           Sign Up
         </Link>

app/(auth)/signup/email/action/index.ts → app/(auth)/signup/action/index.ts

@@ -1,7 +1,7 @@
 'use server'
 import { cookies } from 'next/headers'
 import { redirect } from 'next/navigation'
-import type { SignUpSchema } from '@/(auth)/signup/email/schema'
+import type { SignUpSchema } from '@/(auth)/signup/schema'
 import { createClient } from '@/(auth)/supabase/with-cookie'
 
 export const signUp = async ({

app/(auth)/signup/email/components/signup-footer.tsx → app/(auth)/signup/components/signup-footer.tsx

@@ -29,12 +29,13 @@ export const SignUpFooter = () => {
         color="gray.600"
         mt={{ base: '38px', md: '32px' }}
       >
-        By signing up, you agree to{' '}
-        <Link href="/signUp/email" color="primary.800" hasUnderLine={true}>
+        By signing up, you agree to
+        {/* TODO Add terms of policy page */}
+        <Link href="/signUp" color="primary.800" hasUnderLine={true}>
           Terms of Service
         </Link>{' '}
-        and{' '}
-        <Link href="/signUp/email" color="primary.800" hasUnderLine={true}>
+        and {/* TODO Add terms of privacy policy page */}
+        <Link href="/signUp" color="primary.800" hasUnderLine={true}>
           Privacy Policy
         </Link>{' '}
         .

app/(auth)/signup/email/components/signup-form.tsx → app/(auth)/signup/components/signup-form.tsx

@@ -9,8 +9,8 @@ import {
   useToast,
   useBoolean
 } from '@chakra-ui/react'
-import { signUp } from '@/(auth)/signup/email/action'
-import { signUpResolver, SignUpSchema } from '@/(auth)/signup/email/schema'
+import { signUp } from '@/(auth)/signup/action'
+import { signUpResolver, SignUpSchema } from '@/(auth)/signup/schema'
 import { PrimaryButton } from '@/components/button'
 import { InputForm } from '@/components/input'
 

app/(auth)/signup/page.tsx

@@ -1,23 +1,41 @@
-import { Heading, List, ListItem } from '@chakra-ui/react'
-import Link from 'next/link'
-import { SecondaryButton } from '@/components/button'
+'use client'
+
+import { Box, Card, LightMode } from '@chakra-ui/react'
+import {
+  SignUpHeader,
+  SignUpForm,
+  SignUpFooter
+} from '@/(auth)/signup/components'
 
 export default function SignUp() {
   return (
-    <>
-      <Heading>Welcome!</Heading>
-      <Heading>Create an Account</Heading>
-      <List spacing={3}>
-        <ListItem>
-          <Link href="/signup/email">
-            <SecondaryButton>Sign up with Email</SecondaryButton>
-          </Link>
-        </ListItem>
-      </List>
-      <Heading>Already have an account?</Heading>
-      <Link href="/signin/email">
-        <SecondaryButton>Sign in to your account?</SecondaryButton>
-      </Link>
-    </>
+    <LightMode>
+      <Box
+        as="main"
+        minH="100vh"
+        height="100%"
+        display="flex"
+        overflowX="hidden"
+        p={{ base: '0', md: '40px' }}
+        justifyContent="center"
+        alignItems="center"
+        bg={{
+          base: 'white',
+          md: 'linear-gradient(242.77deg, #C4E6E6 1.15%, #085783 100%)'
+        }}
+      >
+        <Card
+          bg="white"
+          boxShadow={{ base: '0', md: '0 4px 16px rgba(0, 0, 0, 0.1)' }}
+          maxW={{ base: '100%', md: '542px' }}
+          py="30px"
+          px={{ base: '16px', md: '80px' }}
+        >
+          <SignUpHeader />
+          <SignUpForm />
+          <SignUpFooter />
+        </Card>
+      </Box>
+    </LightMode>
   )
 }