Landing Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 10

all right boys let's continue designing this page so we're almost done with this and yeah we're literally almost done with this there's literally just one more part to build and that's the footer for this web page and that's what we're going to build right now in terms of design we're completely done with this site we're just going to build a footer and then after that we'll spend some time making this whole thing responsive on all other devices and smaller screens but uh yeah the footer is not something very complex we just have a bunch of links we have some social icons we have a short um form for the email and that's about it so so in our code editor let's first create a footer component There we go. And I'm also going to change this div into a footer and give it some classes. We'll give it some padding. We'll also give it a background color of Slade 900. Now inside here I'm going to create a container and inside this I'm going to add all of our content. Let's first go to the page and render all of this so you can actually see what we've done. And this is what we have so far, just an empty black box. So let's start filling this with content now. I'll create and this will be the brand name also go to the nav bar and just copy all of these classes because it's gonna look the same way and of course this buddy text we're going to wrap this in our brand color as well and remove this space. We also need to change the text color to white and there we go. So that's our brand name right there. Now next let's add some with some text here just as a placeholder. Let's also add some margin bottom here to separate these two elements. Next I'll add some classes here. Let's change the text color to slate 300. And also let's add some margin bottom here as well. Now we need to build the form. Let's create a flexbox and I'll add a text input element over here we'll give it some padding and we'll make it rounded and also give it a border and there we go that's our input element now as for the subscribe button actually let's make it less rounded. That's good enough. Now for the subscribe button we're just going to use the primary button that we created. I'll just call it subscribe and there we go that's our button. Now we need to find some icons for the social media that we need to add below this. So I'm just going to use bootstrap icons for this. And as always we just going to place all of these in the icons file Let's also not forget to add the screen labels. There we go. I'll also give it a prefix of BI for bootstrap icons. Just because we already have an Instagram icon up here and I don't want the names to conflict with each other. get an icon for Twitter as well Twitter X whatever you want to call it there we go and fix this class and change its class name Let's get one for Instagram as well. Let's also get YouTube right here. Now let's add all of these down here just below the subscribe form. I'll create another flexbox, give it some gap. And now let's create some links here. And inside each of these links, I'm going to add the social icons. we go let's add the Instagram icon here and over here the YouTube icon and this is what we have now so there's still a lot more work to be done on this first let's go to the icons and change their sizes to 24 let's say let's select all of these this one as well and I'll change all of these to 24 pixels and that's a lot better for our needs now that's a margin top here let's increase the gap as well Awesome, okay. Now let's select all of these links and add some classes. I'll give it the fill of white. And on hover, let's change that to orange. And also add a duration. And remove this fill current color from every single icon. Save changes and now let's see. And now we get this cool hover effect Now let select all of this and put it inside another div and this is what we have now. Let's create another div down here and I'll turn this into a heading. We'll give it extra large text and also make it bold and add some margin bottom and this will be the quick links section now just below this I'm going to create an unordered list and we'll fill this with a bunch of links let's say five links over here Now let's just fill this with some text. Let's say destinations, tours, and a bunch of other stuff. Okay, there we go. Now let's improve this a bit more. We don't need the text-wide class here. And in this list, let's change the text to, let's say, 300. also turn this into a flux column and add some vertical gap here just to separate each link out there we go now let's just copy this whole thing and duplicate it there we go and let's just change text over here so this is just like another quick quick links section There we go, so we have all the content that we need. Now we need to just arrange this into a proper layout. So select all of this and put all of it inside another div which will be a grid with three columns. Okay we've made some progress here. change this to four columns and let's give this first div two columns. Already really good. Now, down here, let's add a horizontal line and just below that, let's add another div. You should also add some margin here to separate these sections. There we go Actually let increase that and that great I also want to change the color of this line Let say slate 400 And that's good, but let's try 600. And that's even more subtle, so Let's try 800 and that's barely visible. So let's go with 700. Okay, that's fine I think. Now in this next div, let's go into a flexbox and add some gap as usual. I'll just add some copyright information and stuff over here. Here I'll just link my own website with my name. And next I'll just add some copyright text. Just change the year. And add a button that says back to top. also turn the cursor to a pointer. Let's also add a good icon for this as well. So let's go back to compose icons and let's find a good icon for this. Finding good icons is a problem in and of itself. Let's go with this one from material symbols. copy this and place it in our icons file I just call it double arrow up and fix that class name I just paste the icon here now back in our footer let's add that icon right here there we go now let's see we need to fix the color of this icon so here let's just add a class and just say fill slate 300 and there we go and let's try this with no gap that's fine so let's just remove the gap and here let's use our brand color to signify that this is a link and we are pretty much done with this section now we've added all of the content we've fixed all the layout issues we also added copyright and everything else. So yeah, we are done with this now.