Landing Page Design Tutorial - NextJS & Tailwind (Travel Agency) - Part 13 (FINAL PART)

All right, welcome back. We finished building the responsive version of this review section, the essential section and a couple sections about that. We also added this pause button over here to pause and play the animation here. Next we need to do something about this social section and the CTA and finally the section. So first let's do something about this social section. Let's just add flex wrap here and increase the gap and for the y-axis let's give it a gap of 20. Let's also give each of these divs a minimum width of 64. And now let's try shrinking these images and we get this. So this is a cool layout and this works as well. If I go even more smaller, then we get this layout. And so just like that, we are mostly responsive. But let's also give it a max width of 128. And give it justify center. So we don't have any giant images anymore. and this looks fine now let's keep shrinking and there we go so that all for the social section now let do something about the CTA section and what I going to do is actually remove both of these images because I don actually like these anyway what I actually going to do is change this flexbox to Center the whole text that we have and up here let's give it the relative and isolate classes let's create an absolutely positioned element. I just give it zero in all directions and a background of black so we know if it's working. And yes, it is working, so let's remove that. And instead I'm going to add a different image here. Let's use the CTA2 image that I had earlier. And let's add the background cover and center properties. Now let's add the Mix Blend Multiply property. And we get this effect. I also want to decrease the opacity so the text is actually readable. And this is the effect we get now. But this isn't selectable yet so let me just move that behind the text using z-index. And there we go. So this is obviously completely responsive because that's just a background image. And it also looks better than what we had before. Let's also re-add the container element that we had here. So your content doesn't get too close to the edges. And we can just safely remove both of these images here because we won need them And there we go Let's also add padding. And there we go. This whole section is responsive as well now. And our heading obviously scales down and up because we're using the clamp style over there. let's finally do something about the footer section. Let's remove this grid. I just use flux box instead of grid. I'll also increase the gap and let me just collapse all of these elements. We don't need call span here. Let me just give it basis zero and a grow of two. And here as well I'll give it basis zero and just grow. Same thing here as well. And there we go. With that this section is already much more responsive than before. Now we need to do something about this input field because currently it's not shrinking. So in here, right here in the input field, let's give it the class of full width and a minimum width of let's say 56 and a maximum width of 72. I'll also add flex wrap here. And now we get this layout Let keep shrinking Now we get this Now we need to do something about this element at the bottom of the footer and this is easy we just need to give it a FluxGraph as usual and there we go with all of this done our footer is also pretty much responsive I also had an underline on this link here just so it's more visible apparent that it is actually clickable and let's also fix these icon issues while we're at it head over to icons.tsx and fix these attribute names. Okay, with that done, let's head back to the footer. Let's see what we have now. And those errors are gone, and the entire site is responsive. So this is a full view of the entire website on my phone. And as you can see, every section is now fully responsive and looks great on all screen sizes. Let's go all the way to the bottom. It's the social section, the CTA, and now finally the footer section. and yeah the whole website is complete now we completed the design the responsiveness the functionality everything we're pretty much done with this website 100% now