All right, so if you sped up the last part or if you skipped the last chapter completely I just want to show you my app structure. So I didn't add any new files I did add them during the explanation, but then we removed those files the only thing I believe is different inside of our page.vsx I added the asynchronous tag here. So if I remove it it should be exactly the same as your file because I was explaining something about server components here. So I mentioned by the end of the last chapter that now we're gonna connect to the database But that's actually not what I want to do immediately First I want to do something else So let's go ahead and let's go inside of our app folder globals.css and let's go ahead and add html, body, colon, root and let's go ahead and add height 100% like this so all of our pages are at its full height. Once we've done that, let's go ahead and let's create our landing page, which is going to have our first Auth component called the LoginButton, which is then going to open or redirect to the auth form.
So let's go ahead inside of the app folder inside of page.csx right here. And let's go ahead and remove this and let's add a main element here. Let's give it a class name of flex min-height-screen. Actually, I believe we can just do h-full here. Let's give it flex-col, like that.
Items-center and justify-center. So everything inside of this main element is going to be centered right here in the middle. And let me just turn off my copilot here so it doesn't confuse us. All right. And here's what I want to do next.
I want to add a specific background color to this main element. So if you want to you can do BG Sky 500 for example and that's going to give you this nice background color. But I want to use a specific gradient that I really like. So if you want to you can write along with me. So you can see how Tailwind can do some very specific gradients if that's what you want to learn.
So I'm going to write bg dash I'm going to open square brackets again this is completely optional right you don't have to do this you can just use the bg sky 500. So I'm going to write bg and inside of these square brackets I'm going to write radial dash gradient I'm gonna open parentheses I'm gonna write ellipse underscore at underscore top then I'm gonna add a comma and I'm gonna write underscore var I'm gonna open parentheses again I'm gonna write dash dash TV TW sorry dash gradient dash stops like that and then outside of this square brackets I'm gonna write from sky 400 to blue 800 like that and there we go So this is the gradient that I like. Of course this is just for fun you don't have to do it like this. You can simply write BG Sky 500 or red whatever you prefer. Now inside of this let's create a div with a class name of space y6 like that so whichever elements are inside are going to be equally spaced by a value of 6 which you can see the full calculation here.
Great and now inside I want to add an h1 element and I want to write out inside and I'm going to give it a class name of Text6Excel font-semi-bold text-white and drop shadow-medium like that. And there we go we have a nice out text here in the middle. And if you want to you can add a little emoji here. So I'm on a MacBook so I have this little shortcut which can open my emoji tab here and I can add a little key lock icon right here. You don't have to do that, right?
Great! And below that I'm going to add a paragraph and I'm going to write a simple authentication service. And let's give this paragraph a class name of text white and text large like that and there we go we have our nice little landing page here if you want to you can add a text center inside of here so all of the text is centered nice and neat like this. Great! So what I want to do now is give this ALF a special font called Poppins.
So I want to show you how to add a custom font. You can do that by importing the font you want, for example Poppins from Next Fonts Google. So it uses Google fonts and then you can do const font to be Poppins, subsets, Latin and let's give it a single weight of 600 because we know we are using the semi bold option and let's go ahead and let's import the util CN from add slash lib utils. So Now we can combine this existing class name with our font. So let's wrap the entire class name of the h1 element inside of curly brackets like this.
So make sure this class name is inside of curly brackets and then add a CN wrapper around it. So like this. Wrap the entire thing in cm and I'm gonna use this existing class name as the first argument and the second argument is gonna be this constant font and then we're gonna extract the class name from that font. Like that. And that should give our ALF just a tiny bit prettier font.
Great! So what I want to do next is go below this paragraph and I want to go ahead and create a div and I want to render a button component. We should already have the button imported from here. So make sure you have that and let's write sign in. Let's give it a variant of secondary.
Let's give it a class name w-full. Actually we don't have to give it. Let's go ahead and simply give it a size of large. Like that. There we go.
So right now when you click on it nothing will happen. So what I want to do is I want to create our first ALT component called LoginButton. So let me go and close everything here and let's go inside of the components and not inside of the UI folder but just inside of the components create a new folder called out like this. So you should have the UI folder and the out folder and inside of it create a new file loginButton.tsx like that. Let's go ahead and mark this as useClient because it's going to have some interactive elements.
Let's go ahead and create an interface loginButtonProps. It's going to accept children which can be a type of react.reactNode is going to accept a optional prop called mode which can either be a model or a redirect and let's also give it a third optional prop actually the second optional prop but third overall and that's gonna be a boolean like that. So let's go ahead and write export const loginButton here and let's extract this props. So loginButtonProps. Let's get the children, the mode and the as child.
Like this. And what I want to do is set the default mode to be redirect. If the user doesn't pass anything, it's going to be redirect. Like that. And then what we're going to do is we're going to simply return a span with children inside and let's give this span a class name of cursor-pointer.
Like that. And now let's create an onClick function. So const onClick is going to be console.log loginButtonClicks. And let's give this an onClick and pass in the onClick function like this. There we go, we have our first login component.
Sorry, our first out component called LoginButton. And now I want to go back inside of my app folder page and I want to wrap this button and turn it into a component that in the future is gonna serve as the login button. Great! So it doesn't have to be a button it can be whatever we want. So let's try this out now if we've done this correctly once I click on this in my inspect element here I should see login button clicked and I have.
Perfect! So now we have a little util so that we can turn any element we want, be that a button or something else, inside a login component. Right, but obviously we don't have the actual model mode finished here, So this is what I'm gonna do. So inside of the login button where I'm here right now, let's write if mode is model. For now, I'm just gonna write a little span here, which is simply going to say to do implement model like this.
So if you go back to page and give this a mode of model it's just gonna say to do implement model. Great! So we're gonna come back to this later. What I want to do now is actually add this onClick functionality. So in order to do that let's go ahead and let's import useRouter from nextNavigation.
Make sure you don't import it from nextRouter. So inside of the app folder, we are using nextNavigation. And let's go ahead and add our router so console.router is useRouter like this and instead of this console.log what we're gonna do is router.push to slash auth slash login so that's gonna be our login route in the future. Great! So let's go ahead and try this out now.
Make sure in your page you don't have the variant model so just leave it as it is and when you click you should be redirected to a 404 page. Great! So we finished our home page, very simple screen here and what we're gonna do next is start building the form components and then when we finish the register form that's when we're gonna add the database so that we can actually send those values from the form to our database and store it. Great, great job!