Auto-generated transcript Alright, welcome back. We are going to continue designing this landing page. We've got the hero section, we've got the benefit section, and in the last one we also built the destinations, the featured destination section. What's this error? Okay, let's fix this error first. Let's go to icons and up here just change these properties to camel casing and done that should fix that error. My intro okay this is what we are going to build this is basically two sections and what we're displaying is basically our special offers discounts stuff like that. So starting off, let's create an office component and render this on our main page right here. And we see it being rendered here. Now let's change this and add some padding here and as usual place everything inside a container and change this to a section now inside this container let's add our headline or there a text for Excel font semi bold just like all the other head headlines save on resorts or villas and up here I'm going to add the heading label which we created in the previous one. We'll give it a text property and we'll call it offers or yeah, let's call this offers. And this is what we have now. Let's add some margin to separate both of these elements and also let's move these words resorts or villas into a span element and we'll give them the color text orange 600 do the same for this villas word orange 600 and that looks a lot better now we'll add a paragraph here I'll just use the Lipsome text, 15 words. And we're going to reuse a button element here. So I'm just going to copy this from the hero section and create a new component. We'll call it white external button. And I'll place this button code inside here. Remove all of this and we'll just create a button here. Make sure to import the icons and here I'm just going to render the text which will just be a string. Now back to the hero section, let's actually use this white external button and give it the text of plan your trip. make sure that this is actually being rendered properly and it is okay so this works now we want to use this same component in here in the offers section all import and render this here I'll give it the text of explore more and And currently this looks weird because the background color isn't really prominent. So first let's change the background of this section to amber 50. Or actually let's change it to orange 50. Just to stick to the theme that we have for this site. And the background for that button is a bit more prominent now but we want to make it a bit more prominent So what I going to do is add a border property here That looks good, but I don't want the border to show up here in the hero section. I only want it here. So the way to fix that is to just make this border property optional. And to do that, I'm going to add a border property prop here in the component and also add the type for it. This is going to be a Boolean. And if bordered is true, we're just going to add the border class here in this section and this button. And that will add the border that we need. So let's add that now. If bordered is true, then we add the border class. Otherwise, we add nothing. so with that done let's actually add the border property here first let's actually give it a default of false because by default we don't want a border here and it still gives me an error not sure why okay let's add the border property here in the offers button and in the hero section. Okay, let's make this optional in the type as well. We just add a question mark next to it and that makes it optional. And that takes care of that error as well. Now we have a border here in the button on in the offer section, but not in the hero section. And that's what we want. Okay, we add a margin of bottom. a 4 into this paragraph and that looks a bit better. Now let's look for some stock images. Okay, I've got the image. Now let's add a div here and move all of this content inside that div. We'll make it a grid and we'll give it two columns and we'll give them a gap of 6. Now for the first column, let's create another div and move all of this content inside over there. And then let's create another div down here. And we'll render the image, the stock image that we got. We'll render that here. Make sure the file path is correct. And this is what we have now. We're still far from done. Next let's increase this paragraph to 30 words at least. Now I want to create another component here. I will call it section heading. So instead of creating the heading elements for every section again and again, I just want to create it one time and reuse it in every section. Let me change this div into a heading 2 and we'll give it the same classes that we give to all our headings. Make the font semi bold and make sure to add some margin and we'll give it the children prop which will just be a react node we render all the children inside here now we replace all of these h2 elements in every section with our new section heading component and we don't need these classes anymore Okay, I've increased the text size too much. We'll fix that in a bit. First, let's finish replacing all of these. So your section heading here as well, and the benefits section. And lastly, in the featured destination section as well. Remove all these classes, and that's it. Now this text is too large, so we'll go back to text 4 XL like we had before. But as you can see the component is being rendered properly So let go in here and change this text 6xl to 4xl and now we're back to what we had before. So this is nice. Now moving on, let's continue designing this section. This image div here, I'm going to give it the class relative, and I'm going to add another div here and I'll give it the class and also they're going to give it bottom zero left zero and right zero and the bunch of padding and we'll give it a border and a background of white lots of stuff move this down here and now let's give it a margin bottom of 16 and this moves up here now let's change the left and right properties to 6 and that looks a bit more centered which is what we want. Now let's change this bottom to 12 and just remove the margin bottom. So we won't need the margin bottom anymore. We'll just use the bottom property for that. I will also make it rounded just like we made the image rounded. Now let's ask chat GPT to generate a testimonial that will display in this section. So basically you have some sort of a satisfied customer and you just display their testimonial here it's like a feature testimonial this is too long so I'm going to ask it to give me a smaller testimonial because this would just take up the entire image okay that is enough. Now let's copy all of this and put it inside here. We'll create a paragraph element and we'll make it italic and add the quote here. Now right below this we'll create another paragraph element and we'll add the name of the person who gave us this testimonial. Now let's see what we have. And that's pretty decent. But let's improve this even more. First, back here we need to give this a margin bottom to separate both paragraphs. And that already looks a lot better. Let's also change this to negative bottom 12. And that looks better. And now up here, let's also give it a color of gray 600 for the text. And that looks great as well. Now let's replace these quotes with escaped characters so VS Code stops complaining at us. Okay, that's done and it still looks the same so that's great. Now let's look for another stock image. We'll need a bunch of stock images for the next section. We're going to create two of a section. The first one is complete pretty much. Now for the next section we need two stock images. Okay we have the stock images now. Next let's create a component. We'll call it more offers. This is the second offer section that I was talking about. Let's change this to a section. We'll give it some padding, just the usual stuff. I'll place everything inside a container. Now, let's open the page, the main page, and render this component there, right below the Office component. Inside the container let create a div we make it a grid and I give it two columns or three columns actually and a gap of six For the first one, we're going to give it a column span of two. This is going to be the bigger offer. We'll give it... First let's get some icons. need an icon to represent a discount or a sale and I wasn't really able to find a good icon for this so we're gonna have to compromise a bit. It is remarkable though that I searched 14,000 icons and couldn't find a decent icon to represent a discount so we're just going to use this percentage icon which kind of means discount but yeah this is kind of a compromise let's add this to our icons.tsx file as usual add these label for screen readers as well and let's fix these property names changes to camel casing so the compiler doesn't complain at us now back here in the more offers section of us let's go back to icons and change the size of this discount icon to 24 pixels because 16 is too small for our needs now back in the more offer section in this column let's Let's make it rounded. Let's give it some padding. And let's give it a background color of sky 200. Let's also make this a flexbox and give it a gap of 6. We'll also constrain the height to 80. And we'll hide the overflow. Because the image that we place here is going to overflow. Now inside here, let's create two divs with these classes, basis0 and grow. so we're giving them the flex basis of 0 and flex grow of 1 and this will just make it so both of these divs have equal width on the page now inside here let's create another div this is going to be the down icon, so let's give it a width and height of 14, let's give it orange 400 as a background color make it rounded, give it flex box and And let's render the icon inside here. Now right below here let's create an H3. This is the heading, the name of our offer. And right below that let's create a Book Now button. We're also going to add the external link icon over here. Here we go. Now let's add some classes to this button. We'll give it padding and we'll make it rounded. We'll also change the font to semi bold and we'll make it uppercase and we'll give it a border. Next let's also give it a transparent background and on hover let's change that background to white. also change the cursor to a pointer when we hover over it and we'll give it a duration of 300. We'll also make it a flexbox and give it some gap so we render the external link icon properly and this is what we have now. Now down here let's add the image. Just make sure the SRC prop is correct and this is what we have now. The image is being cut off because we added overflow hidden up in this section. Now let's copy all of this and just create a full copy of it. We'll remove the call span to class and we'll change the background color from sky 200 to orange 200. And this is what we have now. This is the second offer. And we just need to change the image here to the third offer's image. And we've done that and now let's see. And that's the final section. That's all we wanted to build and it came along really nicely.