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

Alright, we're going to continue designing the landing page for this travel agency. Last time we built this hero section which it looks amazing. This time we're going to design the benefits section. This is just the features or the benefits that our product provides and this is what it looks like. You can see we have a little badge at the top that tells us the section title. We have a headline, we have four benefits each with their own unique icon and finally we have have a stock image at the center. Now first things first, I'm going to go into VS Code and create a benefits component. There we go and now I'm going to render this on our page right here. Now let's see. And there we go, we can see it being rendered here. Now next let's rename this to a section and add some padding and put all of this inside a container. First let's create the heading badge. So for that we're going to use this plane icon I found on compose icons. We're going to add this to our icons.tsx file just like all the icons. And of course don't forget to add a label for screen readers plain icon. Now let's go create the heading label just follow exactly as I do here. We're going to need a flex box and I'll add some gap as well just to make things look nicer. Make sure to make this element relative because we're going to use that to position the plane icon properly. And there we go. You can see it being rendered here. Now create an absolutely positioned element with these classes. This is going to contain our plane icon. We're going to use a shade of slate 800 because pure black just doesn't look good on the web. We're going to render the plane icon here and just rotate this 225 degrees. Positive 225 degrees. And there we go, we can see that being rendered here Now next let create the headline We give it a size of text 4XL and we make it bold Also the buddy in Travel Buddy, we're going to give it a color of orange 600. And this apostrophe, please make sure to escape it as well or your code editor will just call your names and there we go we have our headline now this little label above we're going to be reusing this a lot in other sections as well so i'm just going to put this in its own component i'm just going to take all of this cut it and make it its own component we'll call it heading label because i'm actually that bad at naming things I'll just paste all of this here and import icons and this is just going to take a single prop which is text now let's go back to our benefits component and use this. Add the text prop and then let's see. And you can see it works perfectly. Now next let's add the stock image and I've already selected this here. Let's add this to our project. We'll create another div and give it some margin top. We'll add the image and we'll make it a bit rounded. Now currently it looks huge and we're going to fix that in a bit. We'll fix this in a bit. But first let's create the four components that we have, four benefits that we have. We'll create a benefit component and we'll give it a couple props. icon, header, and text. I'm going to create an interface here, benefit props, just so types actually has the proper types here. Now let's create the actual JSExport as component. This is going to be very basic for now because I just want to render the actual benefits and then worry about styling them later. Let's create a div here and render a benefit. Actually first let create a list of benefits up here We just call them benefits and we add all the properties that they have right here Now I just going to keep the icons as undefined for now and we'll add everything else here. Best price guarantees for the text I'm just going to use lipsum let's say 15 words of lipsum and of course grab this in quotes now let's copy this and just paste it four times hassle-free booking 24 7 customer support and then just one more to go exclusive travel deals. And now let's actually render all of these. And we can just use the map function to do that. Benefit. And make sure to add a key because we're rendering a list here. And then I'll just use the spread syntax to render the whole benefit here. And this is what we have so far. This is really basic. Next, let's find icons. And this just takes such a long time, so I'm just going to speed this up a bit. all of these will be available in the github in the source code and by the way all of these icons are from flat icon.com Now let's add these icons one by one to all of our benefits. If you use any different icons, just make sure that you have the file name and the file path properly set here. Okay, there we go. And they're not showing up. We need to fix that Okay instead of rendering the actual text here we need to make this an image and pass the icon in the source Now we should see it. And there we go. We have our icons. Now let's improve this a bit more. I'm going to give it a width of 12. So just make it a bit smaller. And I'm going to give them a margin bottom. I'm going to do the same thing for the header. There we go. That looks a bit nicer. Next, let's try arranging these in a grid. And that already looks a lot better. But we need to centralize the image inside them. So we're just going to create two groups of benefits, benefits G1 and G2. I'm going to move these two benefits, these last two benefits, into benefits G2. And then we're going to render both of these groups separately. First G1. Then I'll render the image. And then I'll render benefits G2. The same way we rendered the first group. there we go and this is what we have now we're almost done with this let's change this grid to have three columns instead of two and now we have this now finally we just need to move these benefits into their own div this one as well and now We're almost done here. You can see we have almost the same layout as what I showed you in the beginning. Let's turn this into a flex column and add some gap just to separate both benefits. Let's make this gap 16. that looks good now let's do the same thing for benefits G2 there we go let's also add some horizontal gap in this whole group here that's a bit better Let's also add some more margin top to separate this whole group. And let's increase our horizontal gap a bit more, make it 16. And that looks great. And that is all we really need to do to design this benefits section. what we wanted to build and that's all for this section yeah that's all for this section