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

All right, 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 ruined 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. We'll give it text for Excel font semi bold just like all the other 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 office or yeah, let's call this office. 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. We'll 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. Now let's 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. I'll import and render this here and I'll give it the text of explore more. 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. 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 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 had 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 We add a margin of bottom of four 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 six. 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 benefit 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 go back to text for Excel 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 then I'm going to give it bottom zero, left zero and right zero and a 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. And we'll 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 and 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 a 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 we escort 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 offers 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 office 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 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. We 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 office section of us let's go back to icons and change the size of this discount icon to 24 pixels the 16 is too small for our needs. Now back into more of a section in this column 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 basis zero and grow so we're giving them the flex basis of zero and flex grow of one and this will just make it so both of these divs are 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 Give it flexbox 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. There 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 colspan2 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 offers 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.