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

Alright, continuing where we left off again. We've built a lot of sections on this page. Lots of stuff here. And this time we're going to build this CTA section. And this is pretty simple. It just has a bunch of content in the center and two stock images on both sides. And that's about it. This is the second last section we're going to build. After this is just going to be the footer section. And that will be the end. So let's create a CTA component here. As always, I'll change this to a section. I'll give it some padding. and a yellow 200 of background color. Put everything in a container. Let's create a flexbox right below it. Or actually instead of that let's just add a section heading first. let's put this inside a div and now let's add some with some text and now let just give this text center and that let render this on our page What do we have now Okay, so I forgot to import our container, so let's fix that first. There we go. And now scroll all the way to the bottom, and this is what we have. Very basic. So let's start fixing this first. Remove some padding and wrap this phrase in our brand color. There we go. Now let's constrain this paragraph to a max width of md. And let's remove this text center and replace it with a flexbox now. turn this into a flex column and okay that's not what we want instead of justify let's use item center great and it seems we will need the text center class so let's add that back and this is what we have now MD isn't enough weight here so let's try 2xl and that's a bit better. Now next we are going to reuse this button that we have in the navbar so let's extract it into its own component. I'll just take all of this and put it in its own component and we call it the primary button Remove all of this and just paste the button that I copied here. It'll take a text prop which will just be a string and that's it. Actually instead of text let's use the children prop so if you want to render icons or something else here we can do that okay that's done now let's actually use this in the nav bar and see if it works on and yes it does so this is working perfectly now let's use this in our CTA section as well let's render this over here and we'll call it get started And we'll also add some margin-bottom to the paragraph here. And that looks good. Now let's move this into its own div and use the icon external link here. This will open a link. Let's also align it properly using flexbox. And there we go. And with that, our button is complete. Now let remove this container And instead of that let just use a flexbox here Let's move this whole thing inside that flexbox. And here I'll render the images that we're going to use. Now I already got these images from some stock websites. give it a maximum width of 80 and I'll just paste the same thing over here and use the other image. Let's also remove the padding here from this section and see what we have. Okay so this is what we have now. Let's actually have some bottom padding but remove the top padding. And that's what we have now. Now I do want to fix these images up a bit so to do that let's add some more classes to these images. I'll select both of these and let's give them a max width of 100 and a height of 80. Let's also give them object center and object color. And in case this is wrong I made some typo let's change this with 80 to height 80 and now let's see okay there we go now lastly I just want to change this basic yellow background and use a gradient here instead so without a gradient to the bottom from yellow 200 to 300 from 60% now we have a much better background here as well and with that we are done with this section as well