So all that's left on the marketing page is to add a footer component. But just before we do that, I want to add a few more class names for our main page here. Let's go inside the app folder marketing page.csx and let's find the div which is encapsulating our clerk loading and clerk loaded, so this part right here. And to this div I want to add a class name of flex- flex-col-items-center-gap-y3 and max-width of 330 pixels. And let's give it a full width like that.
There we go. So now this looks just a tiny bit better and you're gonna see that even more when I log out. So now this do have a gap between them like that. I like this. It's a tiny detail but I think it just makes this look a tiny bit better.
Great. So now that we have this we have to create our footer component. So in order to do that let's prepare some flags. So again you can find all of the assets inside of my public folder in github here and for the flags I'm using this flag pack library. So originally this was a react library but I'm not sure if it is maintained at the moment so what I did is I used the Figma resource for it.
So if you want to you can do that yourself and this is flag pack you can find the link in the description. Or you can find the ones which I've downloaded from Figma and exported here. So I'm gonna go ahead and just add a couple of random flags inside of my footer which are going to be used to showcase some of the languages which our app is going to offer. So I'm gonna go ahead and download Spanish, English, Croatian, Italian and German flag. For my case you can go ahead and choose any flag you want.
So I ended up adding Spanish flag, French flag, Croatian flag, Italian flag and Japan flag right here. So you can find this exact names. So H R I T J P F R E S. So just go ahead and find them inside of my public folder and download them. This is just, you know, for preview, of course, it's just the landing page.
It has no real functionality. So you can use any image you want. So now let's go inside of the marketing here inside of footer.tsx and let's go ahead and actually style this. So inside of the footer create a div with a class name MaxWidthScreenLargeMXAutoPlexItemsCenter justify evenly and height full. With a class name max-width screen-large mx-auto plex-items-center justify-evenly and height-full.
So we're gonna do the same max-width screen trick that we did in the navbar so it is consistent with the footer as well but we don't have to hide it under the LG prefix because the footer will be hidden on mobile devices. And now inside of here I'm going to use the button component which we've created and I'm gonna add a little span here. Sorry, I'm not gonna add a span. I'm gonna be using the image element from next image and I'm gonna do for example hr.svg which will represent creation language. And I'm gonna go ahead and try this with a height of 32 and a width of 40.
And we're going to see how that looks like. So I'm going to give this button a size of large. I'm going to give it a variant of ghost and a class name of width full and let's also write creation here and let me just do that after the image so I just want to collapse these elements here so it's more readable and let me go ahead and just add a class name here. MR-4 and rounded MD. Alright, so let's try it out.
This should simply render a creation flag in my footer. There we go. This looks fine and now I'm gonna go ahead and do that for the rest of the flags that I have. So I'm gonna copy the button. I'm gonna write Spanish for example and now we should have Spanish.
I'm gonna copy the button again and just look at your public folder right and check what you have. So we have FR that's going to be French. Let me change the text to French here as well and I have to change the alt of this image to Spanish. Let's go ahead and copy one more time. This one is going to be Italian using it.svg, Italian.
And last one is going to be Japanese. So let's add JP here, Japanese. And let's copy that and paste it here and I believe we should now have a nice little footer. Great! If you want to you can add these to open a model as well by wrapping them in the sign in button or sign up button.
Great! And you've probably noticed that these flags from Flagpack have a unique little touch to them. I like that because I want this to kind of have a whole cartoonish feel to it. So yeah, even the creation flag where I'm from is a little bit modified. So this is supposed to have like a little artistic touch to it.
You can of course find your own images of flags if you prefer different ones. Great! So that wraps up our landing page. As you can see we have nice little loading states so we can see if we have an account or if we are already logged in. So let me just log in so we can just see how this looks on that screen.
So yeah we are still getting redirected to this 404 that's the next page we're gonna work with and there we go in here we have a nice little user button and we have a button continue learning let's just check on mobile looks fine great so all of that is working great great job you finished the marketing or the landing page what we're gonna do next is we're gonna go ahead and work on this 404 slash learn page.