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

Alright, we're going to be designing a landing page that looks a lot like this. This is going to be a series and for the first part we're just going to design this hero section that you see here. So we're going to start off by creating an XJS app. I'm going to use TypeScript and Tailwind and for everything else I'm just going to use default options. And now I just open up VS Code. First things first I'm going to delete all of this default code that we have here. In here as well I'm going to delete everything yeah we don't need any of this you just need that one line to import tailwind and that's it So I created a components folder and let's just run this right now and see what we have so far. There we go. right now it's just a blank page so we're going to start by creating a super header which is the element you see above the navbar i'm going to remove all of these classes and i'm going to import and add the super super header here Okay, it's being rendered properly. I'm also going to create a container element just so we can neatly organize our elements. And it's going to take a children prop which will be a react node. And then I'll just render the children here. And what is this error? Okay this is not how you do it. Yeah. Okay like this. We also don't need this read only property so So yeah, this is unnecessary. So I'll just remove that as well. And here I'll just add a class of max width about, let's say, yeah, this much. And then just margin auto. That's all we need for there. And here I'll add a background color of yellow 200. And now I'll just use the container we built earlier. And put all of the children inside there. We're going to create a flexbox with item center and justify between. and just add some gap. Now inside here I'm going to create another div. This is compose icons. It is just an icon library. I'm going to get a currency icon. Let's see which one of these looks good. this one maybe actually I'm just gonna go with this from hero icons now before rendering the icon I'm going to store all of my icons in a new icons.tsx file just so they're a lot more organized I'm going to export icons and I'll put all of my icons in this file. Now also I'm going to add a label for screen readers just so these icons are accessible. We're going to use the srOnly class, which basically means that this element will only show up if screen readers are using it. Okay, that's done. Now we can use this icon. I'll import it and use it over here. And there we go. We see it on the page. I'm going to add some padding here just so it looks nicer. About this much. Yeah, that looks fine. I'm also going to increase the shade of yellow here. And now we're just going to add the name of the currency right next to the icon. We need to use flexbox here again just to arrange this. I'll add a tiny bit of gap as well. Or maybe not. Okay, now it's too congested. So maybe we will have some form of gap. And then just show the currency here. Now next we're going to create another child and here I'll just add the coupon information. like an announcement section and the coupon code I'm going to make it bold so it's more prominent there we go and one more child Here I'm just going to create login and sign up buttons. Okay, let's see. Yeah, I'm going to use let's box here as well and add a bunch of gap here. That should be fine I also going to add a separator here That looks a lot nicer Maybe we don't need to use the full currency name. That looks fine. I guess I'll use it. And yeah, that's mostly it for the super header component. Next, we're going to create a navbar component that's going to go right below this. Alright, now let's make this navbar. So, first things first, I'm just going to render this on our page. and there we go you can see it being rendered here. Next I'm going to replace this with a container we're going to put everything in a container. Now I'll create a div with a flexbox, add some gap just for styling and here I'm going to create the brand link. I'm going to add some styling to this, make it big and also the body text I'm going to make that orange just so it looks a bit nicer. Remove this space and add the color to this orange 600 and that looks a lot nicer now we also want to add some margin actually some padding just to add some white space and make these elements look better to create the actual links in the navbar and I'm also going to change this to a nav element just so we're using proper semantic HTML we're going to make this a flexbox as well we're going to make everything a flexbox First link is destinations, then travel packages, flights and hotels, and yeah, they've been rendered. Flights and hotels, there we go. guides about us and contact us and that's that's all the links we need now finally I'm going to add a bunch of icons here first a search icon I'm going to use this one from the blue side. We'll put this in icons.tsx again. And of course Let's use this one from the blue side. We'll put this in icons.tsx again. And of course make sure to add the label for screen readers as well. icon there we go I'm also going to add a heart icon so this is going to be like if you want to view your favorites your favorite places your wish list something like that again make sure you add the label for screen readers heart icon those are the two icons we need I'm going to render both of them in a button first the search icon and now the heart icon and there we go. We'll turn this into a flexbox as well and add some gap between both of those icons. And that looks a lot nicer. Okay, that's enough gap. Yeah, I'm just experimenting with how much gap I should add. I'm also going to add a CTA button over here. Shop now or book a flight. Now let's add some style into this to make this more prominent. I'm going to make it rounded as well. And add a lot of padding. And also make the text a bit bigger. and make the font semi bold. That looks good. We'll go with that. Let's also add hover effects. If you hover let's change it to orange 500. Also let's add a a duration just so it's a bit more smooth and let's also change the cursor to a pointer when we hover over it that's all for this button let's also do the same thing for the heart and the search icons. When I hover over them I want to see a pointer. That's all we need for the navbar now to design the hero section. And I'm just going to render this here, first things first. Now I need to find the hero section. I'm going to do that by clicking find a good image for the hero section. This is going to take a while. okay I sped that up a bit because it took forever to find a good image and now we have to deal with this error. So basically it can't find the image. Okay so the solution is to have one copy of the images folder in your src folder and one copy in your public folder. You need both of these to make this work. Okay, with that done, we're going to add some padding to this image and we're going to add VJ center and VJ color just to make this look a bit nicer. The padding is just temporary so we can actually see the image. Once we fill this with content, we won't need the padding so much. And as always I'm going to put everything in a container. We're going to add our headline over here. Now we're going to make this bigger because this isn't big enough yet. Let's try 8XL. That looks big enough. We're also going to constrain its width. That's too small. also too small. Let's make it XL and that's good enough. Now we also want to add sufficient line height just to make it look a bit nicer let's go with snug and that looks fine Now I want to add a transparent overlay, a blackish overlay to this whole image so we can read this text a bit better. I'm going to reduce the padding a bit. There we go. Now I'm going to create an absolute positioned element that's going to take up this whole container. And we can see if it's working correctly by just adding a background. And as you can see it fills up the whole image. So we know it's working correctly. Now I'm going to add a gradient here to the bottom left. And we're going to go from let's say gray 900 to gray 50. That's not what we want. Let's try top right. Still not what we want. try bottom right. Okay that's correct. Now let's reduce the opacity so we can actually see the content below this. Ok, so it turns out we use a different class for background opacity in Tailwind V4. So let's fix what we wrote here. I'll try using 50% opacity for starters. And that looks kinda okay. Let's try 10%. Still not perfect. Let's try a different color. Okay, I'm actually going to use what Spotify uses for their albums. They basically use this linear gradient, and I'm going to do the same thing over here. So instead of gray, we're going to use this color, which is just a transparent shade of black and here we're going to use a transparent shade of white and that looks a lot better so now this headline is a lot more readable as well but it's not selectable this absolute element is covering everything up. So we're going to use z-index to move this to the bottom. And let me just play around with the opacity of it. Okay, now let's fix this selection issue. So this headline is currently below the absolute positioned element and we need to fix that. Now we're going to use z-index to actually fix it but that's going to actually make the overlay invisible so what we need to do is add an isolate class to the parent and without going into too much detail this is just going to make sure that the overlay is below the text but it is still visible. Now let's reduce the padding a bit more. Let's do 40. That looks good. And now let's add a big CTA button right below the headline. We're going to add some styling to this similar to what we had in the nav bars button. And I'm going to make this a white button. Let's make it bold. And let also make the text a bit bigger Let remove this line height because I think it doesn look good and let add a margin to separate this from the button Okay this should be good enough. I'm going to increase the padding a bit just to make this even bigger and also increase the text size. I'm also going to add an icon here just to show that this is opening a new link. Let's use this one and as always I'm going to put this in the icons.tsx file. Let's call this external link and of course we make sure to add the screen label for screen readers. External link icon, okay. Now let's put this text in a span and render the icon here right next to it. We're also going to need flexbox here to arrange both of these. That looks better. But the icon is not centered. So let's try to fix that as well. Okay items end seems to work. This looks good enough. But let's see if we can make this relative and make it even more perfect. Okay that's too much. So I think I'm just going to leave it as it is. I'm going to remove this relative positioning. just use this use what we have here now I am going to change the color to match the site color orange 600 okay 700 is too dark let's use 600 and that's pretty much all we need for the CTA button I'm just going to turn the text uppercase and reduce the text size a bit. And make this bold. Let's see what that looks like. Okay, it looks fine. Now moving on. Finally, for this section I'm going to add a subheader. Exciting Adventures. Unforgettable Memories. There we go. this white just to match the rest of the section. I'm instead just going to use flexbox again and move all of these in there. And we actually need to use flex call, that's the correct name for the class. I'm going to move this button inside a div, just to make this an inline element. And let's reduce the padding again. too much let's go with 20 and that looks fine now to move this text to the bottom I'm going to add a margin top and that seems work. Now moving on I'm going to add a bit of gap between these elements and I'm going to move the heading and the button in its own element. So instead of using margin-top we're just going to use the gap property and let's make this text a bit bigger as well and make it semi bold and also constrain its width to let's say MD and that looks fine Let's increase the text size a bit more. And alright, this is starting to come along really nicely. I'm going to increase the container width, and that looks a bit nicer. Now let's also add some hover effects to this CTA button. Let's say on hover we want to change its color to Slate 100, and we also want to change the cursor to a pointer. This is way too subtle so I'll increase this to slate 200. And that's a bit nicer. Now lastly I'm going to change the font for this website. This is something change the font for this website. This is something we should have done right from the start but we're going to use the Poppins font. I'm just going to import this into the project. Get rid of this Ubuntu Mono. Get the embed code and then just import this in our project. There we go. Now we also need to set Tailwind to actually use this font. that should work ignore that warning in the ID it means nothing okay so there's an error we actually need to move this import rule to the top and that should work and there we go that looks a lot better with this font and yeah those Those were the only finishing touches we needed. If I inspect this page here, we should be able to see that the font is correctly being used right here by using the 4pins font. So this is working properly. And yeah, this is the final page.