okay then so we've had a play around now with making pages and linking between those pages inside a layout component but the website currently looks terrible so I want to spend this video talking about a few different things to make it look a little bit better Styles fonts and images so to begin with I actually want to talk about fonts because next.js gives us a really easy way to import either Google fonts or local fonts into our projects and in fact in the starter project next already shows us how to do this with the insert Google font so we just import the font from next forward slash font forward slash Google and we can import any Google font by the way that's available here not just enter and then we instantiate that font down here and pass in an options object to configure the font so inside that currently there's subsets which is an array of subsets that you want to include for the font currently set to Latin which we won't change but we can also add other properties like weights to specify what weight you want or styles to specify what styles are the font you want Etc but you don't need to manually add those if you're using a variable font which most Google fonts are so we can leave them out so what I do want to do is change this into font to one called Rubik instead because that's what I want to use for this project so change that in the import at the top and then also the constant name down here as well and then finally we need to do it in the template where we apply the fonts as a class and this is how we apply these custom fonts to elements in the template we use the class name prop and then pass in whatever we called the constant up here and use the class name property on that and under the HUD next is going to apply a custom class to this body tag which registers this Rubik fonts on it and the cool thing about using this next font module is that the fonts are self-hosted and served up from your domain so there's no need to make any external requests to Google fonts for it all right now in a browser we can see it using that Rubik font it's not terribly different but I can demo that it is Rubik by inspecting something and in fact if we go to the body then we can see we've got this font family right here that says Rubik inside of it so this is the Rubik font that we're using awesome okay so next up I want to talk about styles so there's a few ways that we can add styles to an application we can use Global Styles which we already have a style sheet for right here which then gets imported into the layout file and any styles that you add there are going to be Global and applied to any page because every page is wrapped by this layout file where it's imported we can also use CSS modules to scope certain styles to certain components and we do that by making a DOT module.css file and then we can import them into whatever component needs them and as much as I like CSS modules for this course I don't want to get bogged out by them but I will leave a link below the video to a page which goes over how to use them and set them up and they are really really easy to set up and use and then we can also use Tailwind out of the box as well because next.js has already set it up for us and we can already see that we have a Tailwind config file right here which we can use to extend or change the theme in any way and in fact I'm going to do that right away by first of all getting rid of this background image property it's already registered we don't need that and then I'm going to extend the color palette to add in my own theme color for the website which I'm going to call primary you can call it whatever you want it doesn't really matter but the value of that theme color is going to be hash seven eight five six f f which is kind of like a purpley color that looks quite nice so when we add this custom color to the theme Tailwind automatically under the hood creates utility classes for that color so for this series I'm going to be using the global style sheet for any Global Styles and also Tailwind to create some basic component Styles as well now if you head into the global style sheet you're going to already see that next is imported the three directives that we needed here for Tailwind to work bass components and utilities so those three things need to be inside This Global file for Tailwind to work and then we can go ahead and start using Tailwind now sometimes the way I like to work is to make up some classes in my Global CSS file for common UI components like buttons cards form Fields Etc and apply multiple different Tailwind utility classes to those that way I'm not polluting my component templates with a bunch of different utility classes which in my opinion makes it a little bit harder to read and it gets a bit messy so then I can just use my own custom classes and sprinkle in a few extra Tailwind utility classes whenever they're needed so what I'm going to do then is I'm just going to paste in a load of styles rather than type them all out from scratch because this is a next JS course not a CSS one but I will quickly go through them so let me just paste all these in and by the way you can get these from my repo the course files it's over here so don't forget the link to those is down below the video so you can copy and paste those as well but right here we have some base dials for the body and where you see this apply thing that's a Tailwind directive and basically all we're doing is saying apply these Tailwind classes to this selector right so that's instead of writing all the properties we're just using these utility classes that Tailwind provides and I find that a bit easier so we have some bass dials for the body to apply a color to the background and text then the h1nh2 again we're using our primary color this time and you know like I said Tailwind generates utility classes for that color this is an example so text primary and we can see it's that purpley color and we say text large I don't want to go through everything but basically we're applying some space in here some space in here um text color and style there for the anchor tags then we've got some nav Styles remember we have a nav components over here so we're applying styles to this right here well we're giving it some padding at the bottom uh border we're saying Flex item Center yada yada okay some styles for anchor tags and spun tags in the nav then when we hover over them and also we have a board of zero for the nav as well then we've got some button Styles right here and some hover styles for the button as well um down here we have some form Styles we're not using these tags in our components at the minute this is just so in the future when we do use forms and buttons and things like that then they look nice and I don't have to keep on going into the style sheet right but either way we're applying a few different classes to forms labels and then the different Imports text areas Etc um form button and then we're going to have feedback on the forums at some point and maybe other parts of the website as well and we're just applying some styles for any error feedback right here then we have a card component so if I want to show a card I'm going to use this card class we apply a few different stars to that we have a pill down here which is like just a small kind of pill-shaped bubble around some text normally with different colors so this is going to be for later when we're listing out all the different tickets on the page and they have different priorities we're going to use the Pearl class and these different priority classes right here to kind of colorize them and that's pretty much it my friends so that's the CSS like I said I don't want this to be a big CSS list or anything like that I'm sure you already know CSS and you don't want me to spend 20 minutes explaining all this but the point is all of this is now going inside the global CSS file and that's getting imported inside the layout so it's going to apply to the entire site and because we have Tailwind installed and we are using these directives here we can apply these different Tailwind classes inside these selectors and not only here but where we need to we can also apply some of those classes to different elements inside our page components or other components as well Okay cool so that's the Styles out of the way I do also want to add some content now to the home page just some dummy content and again I'm going to grab this from my repo because it's very very basic HTML so you can see right here this is what I'm grabbing we just have a main tag an H2 some alarm ipsum we have a different here with a link to the tickets and then that's a button by the way we're using the button primary class that we just added then we have an H2 and there's some cards down here as well okay so very basic stuff I've copied that and I'm going to go into the home page and I'm just going to delete this and paste it all in all right so we're getting there right and that's because we're using a link here to forward slash ticket so when we do that we need to import the link component now instead of me right now I'm just going to delete that and then type it again and you can see we get an Auto Import if we click on that cool so that's pretty much done now and I only did this so that we could kind of preview the styles that we just added right here it gives us some content to work with doesn't it so now let's view this in the browser alright so that's looking a lot nicer we have the navbar nicely styled we have the home page here this is the button that we created and the cards down here looking pretty nice this and this go to the same place so if we click on this we should see the tickets page which is empty at the minute eventually we're going to be listing tickets out here as well but everything's looking a lot nicer now there is one more thing I want to do in this lesson and that's to add an image over here to the left of the title in the nav bar so I've already dragged this image Dojo logo into the components folder next to the navbar because that's where we're going to be using it inside this nav bar I did say you can put static images inside the public folder if you wanted to and you can do you don't have to put it here to me it just made sense to put it here because we're using it inside the nav bar so what I'm going to do is use the built-in image component you could use a standard image tag if you wanted to but we're going to use the image component which comes supercharged with extra features and different props we can use to alter the settings of the image so let's do that image I'm going to click on this to Auto Import it from next forward slash image and there are a couple of props that are mandatory the first one is the source and that is the this thing right here so we need to import that so I will say import we'll call it logo but call it what you will and that's going to come from dot forward slash and then Dojo hyphen logo.png by the way this image you can get from the course files the GitHub repo remember the link to that is down below and then for the source we can just reference that logo so the second required prop is going to be the alt prop and that's just going to be a string we will say Dojo help desk logo all right so there are other props we can apply to this is quite a lot in fact and I'll show you some of those in a minute but we're just going to add a handful more first of all we're going to add the width prop to set of width and that width is going to be 70 and this is in pixels and by the way I've not shown you this logo have a so it's just a little ninja logo if it eventually loads it's quite big so that's the reason I'm applying this 70 pixel width right here just to make it smaller I could also apply a height if I wanted to but if I don't do that it's going to Auto scale the height based on this width so next I'm going to say the quality and I'm going to set that to 100 and that is the best quality I think the default might be 80 or 70. I always forget but I think the default isn't 100 so I'm going to set it to be 100 which is the maximum quality and then also I'm going to use a prop called placeholder and I'm going to set that equal to a value called blur now what this does is look at the source of the image and the colors in that image and it creates like a blur effect that mirrors that image based on the colors in that image while the image loads so for a second or Split Second you're going to see that blur and then we see the image itself when it's loaded so it's just a nice little added effect that we get for this image component there are other props we can add which I will show you in a minute but for now I think that will do is fine I'm going to save it so we can preview this now in the browser okay so there it is in all its Gloria the ninja logo in the navbar awesome now I did want to very quickly show you the image component on the docs because it has a list of other props you can use on it and if we scroll down we can see all those so the source the width we've seen all these the alts the quality the placeholder which we set to blur but there's also other things as well like loader fill property sizes priority style Etc so if you click on one of these you can read more about them so the placeholder for example is this one it shows you the type of value it expects the default is empty but we've said it's a blur you can click on a list to read about them so we have an unloading complete and that will fire a function when the image has loaded so that can be sometimes useful I don't want to go through all of these but you can check out the image component in the docs just search for it right here just go to search and then image and you're going to see that component right here all right so how I play around with those if you want to in the next lesson we're going to start fetching data in our components