Auto-generated transcript 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 benefits 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 have 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're rendering. We give it some padding we make it rounded and we give it a background of ember 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 pads 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 a full 100% width. We'll also give it object center and object 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 and 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. 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 flex box 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. 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. 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 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 start to prepare this section to display the price we'll make it relative and inside here I'm going to create an absolutely position 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 I'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 background color. We'll 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 flex box. I'm going to give it item center and a gap of six. 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 is 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. 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. Let's 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 let's change this into a flex box 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 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. We'll give it 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 percent 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.