All right, so now that we've practiced routing, let's go ahead and let's utilize that to create our marketing page. In order to do that, first thing I want to do is delete this page.tsx which is currently rendering a simple text Hello Trello, which is visible right here on the localhost 3000. So make sure that you are on localhost 3000 and not on any other route. And go ahead and remove page.vsx from your application. And now you're going to get a 404 page.
And now we're going to bring it back, but inside of an organizational folder so that we can create a custom layout for our marketing page, which is also going to be our root page. So go ahead and create a new folder inside of the app folder, open up the parentheses and write marketing. And inside create a new file page.tsx. And let's go ahead and write const marketingPage. Let's return a div marketingPage and don't forget to export default marketing page.
And when you save, there we go, we are back at the beginning. This is acting as our root page.tsx but this time it's in a nice folder. This means that we, well first of all it's better organized right now we know exactly what this page.tsx is without changing its name because well we cannot change its name it needs to be page.tsx to be accepted into the routing system but besides that if you remember from our practice we can now create a reusable layout which is going to be reflecting everything inside of this marketing folder and we're also going to be able to create a custom components folder inside of this marketing folder which is only going to be available to use inside of this page. Sorry, it's going to be available to use everywhere of course but we are kind of, you know, with our structure indicating that it should be used only inside of the marketing page. So just a bit of a practice with structuring your project.
Great. So let's go ahead and create the layout page inside of this marketing file. And of course we have an error. So let's go ahead and let me expand my code here and let's write const marketingLayout. Let's immediately destructure the children and let's give it a type of children to be React.ReactNode And let's go ahead and simply return a div and render the children inside.
And X for default, marketing layout. And there we go, nothing much has changed. But now let's go ahead and give this div a class name of h-full, so it takes the full screen height and bg-slate-100. So it's a bit darker. And now let's create a main element and wrap our children inside of that and let's give the main element a class name of PT40 padding bottom of 20 and BG slate 100 as well and if you're interested in exact pixels you can hover over these classes to see exactly what they are doing to the code.
So why am I moving this from the top and why am I adding the space on the bottom? Well I'm going to add a comment for now because here we're going to have a navbar and at the bottom we're going to have a footer. You don't have to write this, we're gonna come back and do it later. Perfect. So now I want to go back inside of the marketing page and go ahead and well style it to look like something.
Let's go ahead and give this div a class name of FlexItemsCenter whoops, JustifyCenter and FlexCall. If you're ever unsure about what classes do you can always hover to see exactly what css they are implying Right now what I'm doing is centering this text into the middle like this and flex call indicates that all the items that I create are not going to be next to each other but one below another. If it was just flex then that would mean that it's in a flex row position but flex-col indicates that I want it to go one below another. Great! And let's go ahead and create another div here with a class name of flex-items-center justify-center again and flex-col.
So exactly the same thing that we did above. And in here I want to open a new div which is going to hold our medal from Lucid React. If you're wondering where do we have this Lucid React installed well that came installed when we run our chat CNUI and when we chose the default style for our app. If you chose the New York style you're not gonna have Lucid React installed. So if you're getting an error here, you can just go ahead and run npm install lucid react.
No biggie. Perfect. And now we can render this metal right here. And if you save, you're going to get this little metal here in the browser. Now let's go ahead and give this a class name of Height6 with 6 and margin-right of 2.
Perfect. And below that, let's go ahead and write number1 TaskManagement. Like this. Perfect. And now let's go inside of this empty div and let's give it some proper classes.
So class name is going to be margin-bottom of 4 plex-items-center border-shadow-small padding 4 so we add some space to it, BG amber 100, text amber 100, sorry text amber 700 so it's a bit darker like this, rounded full and uppercase everything. Like this. And let me just expand this and there we go. Now you can see how we have a nice little badge here in the middle of the screen. Perfect.
Now let's go outside of this div which is our badge right and let's open up an h1 element which is going to say Taskify helps team move like this and let's style this so it looks like an actual heading. So we're gonna give it a text of 3xl but on medium devices, we're gonna give it a text of 6xl So it's bigger and now let's write text center like this so it aligns properly. Let's write text neutral 800 so it's just a tiny bit lighter like that and margin bottom of 6. Perfect. Below that open up a div and write work forward and a dot at the end and in here we're gonna write a class name to be text3excel the same it was above and on medium devices it's going to be text6excel so same as above everything we're also gonna go ahead and give it a BG gradient to write like that.
Prom and now we're going to write a color. I'm not sure how to pronounce this so Fuchsia I'm not sure all right so Fuchsia 600 I'm just gonna call it purple from purple 600 to pink 600 like that So we have a nice little gradient. Text is going to be white. Px is going to be 4. Padding overall is going to be 2.
Rounded is going to be medium. Padding bottom is going to be 4. And W is going to be fit like this. So you can go ahead and expand this and there we go. You can see how this looks now.
And if you think that the font looks weird, don't worry. We're going to change the font later. For now, I just want to create a little structure here. Perfect. So now we have that.
Now, let's go outside of this div, which is wrapping our task management, our taskify-help-steam-move and this little gradient box. So not outside of this div but outside of this one right here and let's open a new div and inside we're gonna write collaborate manage projects and reach new productivity peaks like that And now we can go ahead and just write from high rises to the home office. The theme, sorry, the way your team works is unique. And let's go ahead and add, accomplish it all with Taskify. So basically it doesn't matter, just a little promotional text, right, on our website.
And give this div a class name of TextSmall. On medium text is going to be ExtraLarge, text is going to be Neutral 400, margin-top is going to be 4, max-width is going to be ExtraSmall, but on medium devices max width is going to be 2x Let's center the text using Text Center and MX Auto to push it from both sides. Like this and if you expand you can see how this looks on desktop mode like that and you can see how it looks on mobile mode like this. Perfect! So now that we have this all that I want to do is import a component called Button from chat.cn so for that let's head inside of our terminal I'm gonna open a new one here so here I have my project running and I clicked a little plus icon here so I have a new instance and inside I'm gonna write npx chat.cn-ui-add-latest-add-button like this and just wait for this to install the button and there we go we can close this terminal let me zoom back in And now we have a new component inside of our components folder.
Inside the UI folder we have button.tsx. So this is what's different with ChatCN in regards to other libraries. Other libraries give you the same type of components, but usually you're not able to see the exact code that is inside of them. But with ChatCN UI you're able to visit the code and you can modify it however you want. We're not going to do too much modifying, I'm quite satisfied with what ChatCN offers by default.
But if you're interested, you can always change the focus visible, you can change the opacity when it's disabled, you can change the variance of your button, the sizes of your button, whatever you want. But for now, I recommend that you don't play around with it too much until it's time to do so. So now let's use that button by going outside of this div and opening up that button and import it from add slash components UI button like this. Let me show you how that looks. So right here at the top, I've imported button from add slash components UI button.
And this little add sign is what's called an alias. So what does an alias do? Well, it saves us from doing this. Like usually we had to go outside manually, right? Using this dot dot slash notation.
But with an alias we can easily do this and it's the same thing. So that's what I was talking about when I was telling you about the option to customize the default import alias and I told you to leave it exactly as it is and by default that's the at sign. Perfect! So as you can see I like to separate my imports So I'm always going to keep my global imports at the top. By global, I mean those things that I installed using NPM.
After that, I'm going to keep this alias imports. And then even lower, I'm going to keep my local relative imports if I ever need to use them. For now, we don't have any. Perfect! And inside of this button, let's go ahead and let's import a link component from next slash link.
So make sure you import that. And since it is from npm, I'm gonna add it here to the top. And let's go ahead and let's write getTaskify for free. And it's missing an href. So let's for now just write sign-up.
Like this. Perfect. And now let's style this button by giving a class name of MarginTop6. Let's give it a size of large and let's write as child so it properly works with this link component inside. Perfect!
So here it is our initial landing page. If you click here of course you're going to get a 404. So now it's time for us to add custom fonts so this looks even better. So what I want you to do now is go inside of my GitHub. You can find the link in the description and I want you to go inside of the public folder and in here you can find a file called font.
So go ahead and click on this file and find a way to download that file. Once you've downloaded that file, go ahead and open up the public folder which you have right here and drag and drop that downloaded file inside. If you're wondering what font this is, this is the CalSense font or CalOpenSense font. I'm not sure what's the name and it is from a project called cal.com. He's a competitor to Calendly if I'm correct and they've created this amazing font for us to use you can Google Cal font github to see more information about that.
So make sure you have this font inside of your public folder if you don't it doesn't matter so this is just a font right where this is just styling no important functionality is being done here. But I want to show you how to import local fonts using Next.js. So in order to do that we first have to import something called local font from next slash font slash local like this and then go ahead and write const heading font to be local font like that and go ahead and give it a source of dot dot slash dot dot slash public fonts font that woff2 like that and now we have our font. Perfect. So now we have to add that font inside of one of these divs right here.
So let me just go back to my localhost here and let's see if I did any mistake here and I did, yes. So instead of my public folder I just dragged and dropped the font but I actually want to create a new folder inside called fonts and then drop that inside so it's even better organized and there we go now we have no error because our relative import here is correct. Perfect! So now what I want to do is I want to import our util called CN which we researched at the beginning of this tutorial where we installed chat CN. So with this CN we can now combine the existing class names which we have and then append this initial additional class name which is going to come from this constant right here thanks to this local font instance from next font.
Perfect! So let's go ahead and let's go inside of this second div right here and let's just add curly brackets around this class name like this so when we save nothing should change and then what I want to do is at the beginning of this curly class added the CN library and wrap this entire thing inside of parentheses like this and again nothing is going to change so here is how CN works in the first parameter of CN we're gonna pass our default classes and then I'm gonna add a comma and I'm gonna write the dynamic class like heading font.classname and when I save you can see that we have a beautiful font right here. See how nice this looks? Perfect. So now we know how to import local fonts and now let me show you how to import fonts from Google fonts because you can do that as well.
So go ahead and import the specific font you want. In my case that's gonna be Poppins. So import Poppins from next slash font slash Google. Like this. Perfect.
Now we have the poppins font and let's initialize it in a similar way So I'm gonna go ahead and write const text font to be poppins We have to give it subsets which is just gonna be an option Latin and we also want to give it weight and let's go ahead and open our array here and let's write 100, let's write 200, so basically we're going to fill up all the options it give us 400, then it's 500, 600, 700, 800 and lastly it's gonna be 900. Perfect! And now that we have this we're gonna append this font to the rest of our text. So let's go ahead all the way to the bottom here where we have this collaborate manage projects text and do the same thing. So first add the curly brackets around this class name like this nothing changes then add CN and wrap the entire thing inside the brackets.
Great! Let's collapse this so the default thing is in the first line and then add a comma and write textFont.className like this. And when you save, you can see that we have a nicer font for our description as well. Perfect! And we can leave the button as it is.
So now it's time for us to create our navbar component, our footer component and also one reusable component called the logo because we're gonna use it in the navbar, in the footer and we're also gonna use it in the dashboard of our Taskify project itself. So let's go ahead and create our first reusable component called logo. So in order to do that first go back inside of my public folder here and find logo.svg right here. This is a logo from the logoipsum.com website where you can find a bunch of free logos just make sure not to actually use them for your business. You can use them for your demo projects or some education purposes.
So go ahead and download this file and go ahead and drag and drop that straight into the public folder similar to what we did with the font. Just like this, so paste it here and make sure to rename it into logo.svg in case you have this little number as I do. So just make sure that it's called logo.svg. Perfect. So I'm going to close everything and I'm going to go back here and let's go inside of the components folder.
So I'm going to keep the UI folder for all the Shazam components which we are going to import. But for our own custom reusable components I'm going to write that inside of the components folder directly. So right click here and create logo.tsx make sure it's outside of the UI folder like that. And in here let's go ahead and write export const logo like this and let's go ahead and return a link component from next link let's give it an href of just an empty slash let's go ahead and give it a div and let's add an image from next slash image and in here the source is going to be slash logo.svg which we just added into our public folder alt is going to be logo, height is going to be 30 and width is going to be 30 as well. Great!
And now let's go ahead below that and let's add a paragraph here which is going to have, which is just going to say Taskify like this. Perfect! And let's go ahead and give this paragraph a class name of TextLarge, TextNeutral 700 and PaddingBottom of 1. Great! And now let's give this div which is wrapping our image a class name and that one is going to be hover opacity 75, transition, items center, gap x 2, hidden by default but on medium devices it's going to be visible.
So from medium and up, meaning on desktop devices, we're going to see this logo, but on mobile devices it's going to be invisible. Great. And now let's go ahead and let's import CN from s-lib-utils and let's go ahead and let's also import local font from next font local. So we're gonna reuse that font which we imported previously perfect and let's go ahead and do that adding const heading font to be local font let's write a source to be .al slash public slash font VOFF2 great And now let's go ahead and let's wrap this class name inside of curly brackets, right? Let's add our CNUTIL and let's wrap this entire thing inside of parentheses.
Let's add a comma and then we write heading font dot class name. And that's it our reusable logo component is finished. Perfect. So now let's create our navigation bar. So I'm gonna close everything and I'm gonna go inside of the app folder and inside of marketing and in here we're gonna create our components folder but I'm gonna show you a little trick.
So there is a third type of folders inside of Next.js, which is a second type of folder which can be used to be outside of the routing system. So we learned that we can use the parentheses around the folder to ensure that it's not inside of the URL. But as you can see, even then we can still render some pages and routing inside of it. So there is an actual type of folder which can be used to completely exclude it from the router. And that is called an underscore folder I mean it probably has a different name I'm calling it an underscore folder because it begins with an underscore so let's add underscore components like this so even if we added page.tsx inside it would not be visible anywhere you will not be able to access it unless you import it into a page so that's exactly what we're going to do inside of the components folder create a new file navbar.tsx like this and let's go ahead and let's write const navbar and let's return a div saying navbar like this and make sure you add export const navbar.
So no export default when we write components. We're gonna use export default only in layouts and pages. But not in individual reusable components or just components like this. That's when we're gonna use just an export const. Great!
And now let's immediately add this inside of our layout.tsx right here. So instead of this comment here, we're gonna add that navbar component from ./.components/.navbar and you can see how I imported this at the top. Perfect! And now you can see a little text here which says navbar. Perfect!
Let's go inside of the navbar and let's finish it up. So I'm gonna give this div a class name of FixedTop0 so it's always gonna be at the top, W is going to be full, height is going to be a fixed 14 like that, PX is going to be 4, border bottom like this, shadow small, BG white, flex and items center. Great, so you can now definitely see that here at the top and we have a little text here we have our border and we have some slight shadow. Perfect, Now let's go ahead and open a new div inside with a class name MDMaxWScreenToExcelMXAutoFlexItemsCenterWFullAndJustifyBetween. So we are doing another flex box but this time we are doing it in a row right and what does this MD max W screen to Excel do Well it ensures that on desktop devices there is a limit to how far we can expand the screen.
So for example let's go ahead and write something here. I'm gonna write test here and you can see how now when I expand to a certain point it stops resizing. Are you noticing that in the navbar? So that's what this class name MaxWScreen2XL does. You can make it even shorter, for example MaxScreenLarge and you can see that now it stops here it stops resizing at a certain point but for my case I think 2xl is just fine so it's enough room for a small for a big desktop monitor but if it gets larger than that it stops resizing.
Great! So we now have that. Perfect! And now we can render our logo component and make sure you import that from add slash components logo and destructure it like this. All right, and it seems like we have a little error here.
So let's go inside of our logo component. So that's located inside of components UI, sorry, inside of components folder logo here. And we are missing the fonts folder here. There we go. And now if you expand, there we go.
We have a nice little logo here and we can click on it but right now it's not doing anything but it's actually redirecting to the page that we are already on. Great. Let's head back inside of our navbar component here and now below this logo let's add a new div here with a class name of spaceX4 so the items between are spaced evenly on the x-axis. Let's add MD block, let's add MDW auto, let's add flex, items center, justify between and W pull. And then let's add our buttons.
So import button from add slash components UI button and write login and below that add a new button which is gonna say get Taskify for free. Like that. Perfect. So you can see on mobile devices they're gonna be each on its own corner but on a large screen they're both gonna be in this corner right here. Now let's add some styles to this button.
So the first one size is going to be small, variant is going to be outline and as child like that and if we are using as child we also have to add a link from next slash link so make sure you add that import. Alright and let's give this link an href of slash sign dash in like that perfect and then we're gonna reuse that link already here in this other button like that and this one is gonna lead to sign dash up like that and let's go ahead and give this button a size of small and also as child prop. Perfect! So let's see how this looks now. There we go.
We have our logo here, we have our two buttons here. When we click on them they lead to 404 because we don't have authentication set up yet but we're gonna do that in just a moment and now a last thing we have to do inside of our marketing page is the footer so let's go ahead and do that. So we can actually copy the existing navbar component. So I'm gonna go ahead and do that. So go ahead and copy the navbar component and paste it inside the underscore components folder and rename it to footer like this.
And let's go ahead and let's slightly modify it. So instead of top zero, first let's actually rename it. So footer like this. And then instead of top zero, it's going to be bottom zero like that. We don't need to have the height of 14 like this.
We also don't need a border bottom instead we need a border top. We don't need any shadow so we can remove that. We can also remove the BG white like that and flex item center are not needed either and instead let's write BG slate 100 like that. Perfect. We can leave this exactly as it is.
The only thing we're gonna change here is these two buttons so you can remove the as child and you can remove the variant and you can remove the link as well so do the same thing here remove the as child and remove the link here and change this one to say privacy policy and change the other one to say terms of service like that and let's give both of them a variant of ghost like that perfect We can remove this import now and now that we have our footer ready, remember if you get stuck at any point in a specific component you can always head directly into my github from where you downloaded my fonts and my other images and you can just take a look at the component and see exactly what's going on. You can copy it if you're stuck or you can use it as a guide. And now let's go back inside of our layout here and remove this comment which says footer and let's actually import the footer component from ./.components footer Great! And let's go ahead and try this out now There we go, you can see we have a footer here but something seems a little bit off.
I have a feeling like our footer is too small, right? It seems too cluttered. So let's actually go ahead and give it a fixed height. You know I removed the height because I thought we're not going to need it. Actually instead of height we can just do this.
Instead of PX just give it a P4 like this inside of the footer component. So we had a PX here just change it to be P4. And let's see that now. There we go. That looks much cleaner now.
Perfect. So we have finished our landing or marketing page so that is now our root page perfect we are now ready to implement our authentication and by doing that we're gonna implement our middleware which is then going to take a look if we are logged in or not and if we try to visit this marketing page while we are logged in it's gonna immediately redirect us to the dashboard and pre-select our organization. Great! Amazing, amazing job!