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

All right, welcome back. We've been designing this travel agencies landing page for a while now. We've built all of these sections. Last time we built this sliding offer section and next, next we're going to build this travel essential section. So this is basically just a bunch of products that we may sell. And we're going to display all of them in this section. So starting off, I'm going to create a new component. I'm going to call it products.tsx and we're going to call this a section. I'm going to give it some padding and as always put everything inside a container. Now inside this container I'm going to use the heading label component that we built before and I'm going to call it Essentials. Right below this I'm going to create a section heading and let's call it Featured Travel Essentials and we'll wrap Essentials in orange 600. Now let's render this on the page. And now let's see what this looks like. And this is what we have so far. Now let's look for some stock images to represent the products. I getting all of these from freepik And as always all of these will be in the source code as well so I just going to speed this up okay we have all the stock images now let's create a div up here and let's also create a list of products here we're going to give each product a title and an image. Now let's duplicate this four times because we're going to render four products and now let's start naming these. I'm going to create a bags product and give it the appropriate image. Next a tools product and also a camping gear product and of course give it the appropriate image and lastly we'll make a suitcases product and give it the image as well. Now let's start rendering all of these. We use the map function as always a div inside here give it the key and also make it rounded and give it a border Now let render the image in here And also use an h3 element to render the text, the product title. Let's make this big and bold. And also uppercase. Now in this container let's make this flexbox and give it some gap. Now this is what we have so far. So let's start fixing all of these things because currently it's ugly. Let's give this div basis 0 and grow and in the image here let's see what this looks like first. Now the image, let's give it full width and height and also give it object contain and object center and that makes the images look a lot better now let's fix that text as well first I'm going to remove all of these classes from the product and create another div put the image inside it and give it these classes that seems we broke everything again so I going to give the product div the classes basis 0 and grow still not there yet so I going to give this div full height and that a lot better Now for the text I'm going to make it larger and I'm also going to align it in the center and give it some margin. this is what we have now for the text. Let's also give this parent class a group class and down here in the image we'll give it group power scale 115. Now Tailwind doesn't have this 115 value by default but we can actually use these arbitrary values if you're using Tailwind v4. We'll also give it duration 300 and I'll give overflow hidden to the image container here. And now we have this neat little effect to the images. Now back up here in the parent I'll also give it our cursor pointer and we're almost done with this section. Some finishing touches. I'm going to add more padding to this section and also give it the orange 50 background color. And that looks a lot better. Lastly I'm going to add some margin top to this products list here. And with that we are done with this section.