0:00 All right, so before we actually generate the 0:02 underlying form for our signup, 0:05 let's go ahead and generate the container for it where we're actually going to 0:08 render it. So to do this, I actually wanna create a new page where 0:12 we're gonna host the signup form. 0:15 Now, since we're using the app router approach 0:17 for Next.js to create new pages, 0:20 we simply follow a file-based approach. 0:22 So in this case, I'll create a new folder under app, 0:25 and then this folder 0:26 name is gonna correspond to the name of the underlying route. 0:29 So in our case, I wanna call this route signup, 0:32 so we'll call the folder 0:33 signup. And then to render the actual content on 0:37 the 0:37 page, we simply create another page.tsx, 0:41 and then this component will automatically be rendered on this given page. 0:46 So again, this is following the same pattern as our 0:48 root page. 0:49 So the root page corresponds to this root page.tsx, 0:53 and so the signup page will correspond to this page.tsx. 0:58 So let's go ahead and export default function SignupPage. 1:04 And we'll go ahead and return JSX to host the signup form. 1:08 And we're gonna style this with Tailwind. 1:10 So I'll give a root div here, 1:13 and let's specify some class names for it. 1:16 So I want a min height of screen, 1:19 and we're gonna use flexbox here. So we'll say flex 1:22 item center, 1:24 justify center, and this is gonna center everything on the middle 1:27 of the screen. 1:29 And then we're gonna set bg background here to specify the background 1:33 color. Should be our background color from shade 1:36 cn theme that we 1:37 currently have. And so again, this is using the 1:41 global CSS colors we have here. If we look for the 1:45 background color here, well, we have a background class 1:48 defined for our dark mode here and for the light mode theme
The rest of the transcript is for members.
Sign in 