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

So we've been building this landing page for this travel agency, and this is what we've got so far. We've got the hero section, and we've got the benefit section. Next, I'm going to build this featured destination section. And this basically just shows a bunch of featured destinations. So starting off in VS Code, first things first, I'm going to create a component for this, and I'm going to just call it featured destinations. Let's also change this to a section and give it some padding. And as always, put everything inside a container. Now inside this container, let's use the heading label that we created in the last video. I'm going to just call this featured. And let's render this on our main page now. Feature destinations. Now let's see what this looks like. And as you can see, currently it takes up the full width. We don't want that. So to fix that, go into the heading label component and add the inline block class here. This will turn it into an inline block element. And now the width isn't an issue anymore. Now next, let's create the headline for this section. And I'll wrap this destination's word in the orange 600 text. And there we go. Now I also want to add some margin here. Let's go with 6. Now let's create a list of destinations up here that we can render on our page. This will have a bunch of properties, image, title, and also the price and the location. Now let's just copy the same thing three times because we want to display three destinations here. Now let's ask ChatGPT to generate a bunch of popular tourist destinations for us and you can just get the JSON output from it. This just saves us time for figuring out random placeholder destinations. Instead of figuring those things out ourselves we can just ask chat GPT to do it for us and this is good enough now let's paste all of this in here format it and also replace the images because these images aren't really real are they so we're going to I'm going to go to Unsplash and I'm going to download a bunch of images for these sections. I'll speed up this part of the video just because it takes forever but all of these images will be available in the source code on GitHub if you want to follow along exactly. Okay I've added all the images. Next I'll create a grid over here with three columns and add a gap of six. Inside I'm going to render the destinations that we added in the list before. Let's create a div and of course add the key property here because this is a list we rendering I give it some padding we make it rounded and we give it a background of amber 900 and this is what we have so far now let's render the image here first of all and go up here and replace the image with the actual file paths and that's the last one. There we go. Now we can see these images but they're not aligned properly so we're going to fix that next. We'll make it aspect square and we'll give it the full 100% width. We'll also give it object center and object cover and we'll make them rounded just like the container here and that's better now let's go search for some icons we need an icon for location I'm just going to use this VS Code icon just copy the SVG and place it in our icons.tsx file as usual Call it location and of course make sure to add a label for screen readers. We don't want our site to be inaccessible to people. Add some margin top and then create a headline which will be the title of the destination. and below this I'm going to create a flexbox and I'm going to render that location icon that we downloaded inside here. Here we're just going to display the destinations location and right below we're going to add an explore more button. Let's give it some classes. Actually change that background to white. and remove the text white from over there in the heading and move it up to the container and also let's change this size to 24 let's try 32 and that's a bit too big let's just stick with 24 pixels and let's remove the gap here and let's also add a margin bottom now let's continue designing that button we'll call it explore more and I'll add some more classes to it we'll give it some more padding we'll make it rounded and And this is what we have so far. Let's add some margin bottom here as well. Just to separate both elements. On hover I want to change the cursor to a pointer and I also want the background to change to slate 200. And give it a duration of 300 milliseconds And this is what we have so far This is coming along really nicely Next let move this image inside a div and we'll start to prepare this section to display the price. We'll make it relative, and inside here I'm going to create an absolutely positioned element. We'll give it top three and left three, and we'll give it a bunch of padding as well, and we'll make it rounded. We'll give it a background color of slate 800 but it will be a bit transparent so only with 70% opacity and we'll make the text white. Now let's display the price in here. I'll make the actual price bold and a bit larger. per person. And this is what we have now, and that looks really good. And now we have this issue with the icon, so let's go fix that first. We just need to change this casing to camel case. So instead of fill rule, we have fill rule, clip rule, changes to clip rule, just camel casing everywhere. And that error is gone as well. And this section is coming along very nicely. Now I want to make it a bit more rounded. Let's go with 2XL. And I think that looks good. Now, in here, in the destinations list, let's add a color property because I want each destination to have a unique color, a unique background color. So for now, I'm just going to give it amber 900 and actually use this color inside here. Change this to curly brackets. And then let's add the destination's color property here. And as you can see, it's still being rendered. So now let's change these colors. I'm going to give this sky color and I'm going to give this the emerald color. And instead of the 900 shade, we're going to use the 600 shade. And that looks really nice. Now we're not done yet. We still need to do a bunch of other things. down here outside the container let's add a horizontal separator line we'll give it full width and we'll give it the orange red background color I will give it some height and this is what we have so far now let's add some margin here to move this to the bottom okay margin auto doesn't work so let's just give it a defined margin of 24 and that works really well now we have a horizontal separator here now up here in this section I'm just going to remove the bottom padding and we'll just have top padding like this Now let's also create a div here and move the headline inside over here. I'm going to turn this into a flux box. I'm going to give it item center and a gap of 6. I'm also going to give it justify between. Here we add the left and right arrows to move the destinations list So let give this a width and height of 12 and we make it fully rounded and we give it a border as well Now we need to find some good icons as well for this. Now let's give the same classes to this other div. This what we have now. Let's use Fluxbox to arrange these. We'll give it some small gap as well. There we go. Now let's find some icons. We need an icon for the back arrow and we need an icon for the forward arrow as well. We'll place both of these in the icons list. I'll call this one back arrow. And as always, don't forget to add the screen label. Okay, that's our back arrow. Let's do the same for the forward arrow. Both of these icons are from the material symbols pack. call this one forward arrow and put the icon inside here as always with a label for screen readers now let's render both icons inside here forward arrow there we go now let's see what this looks like and it looks terrible so so let's change this into a flexbox again and give it item center and justify center now it looks a lot better it's aligned properly in the box there i also want to increase the border size here so let's give it border 2 and also I want to change the cursor to a pointer when we hover over it just to signify that this is clickable. Now finally we need to find a good stock image to place in the background. We'll place a background image in the background and then we'll add a white-ish overlay to it just like you saw in the beginning when I showed you the final product. And as always this is going to take forever to find a good image so we'll just skip ahead to that part. And if you can't find a good image on nsplash you can just search it on pexels which is another stock photography site. Okay we have the stock image now in my folder. Next let's give it the let's add the background here. We're going to use this class to just add the background and we're also going to add the bjCover and bjCenter properties. And that looks a bit better. Now we want to make this relative so we can add the overlay here. let's create an absolutely positioned element top 0, left 0, bottom 0, and right 0 so basically 0 in all the directions give it a bottom gradient from white to white 55 from 30% and also give it a negative z-index of 10 and add an isolate property to the container here to the section and this is what we have now and that looks really good the whole section looks really good this is what we wanted to build and yeah it came along really nicely