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

All right, welcome back. We're going to continue making this site responsive now. Let me just quickly go through the entire page. And back up top now. Let me just inspect the page and see what we have so far. So in the previous one, we made a couple of sections responsive. benefits section and all the way down to the destination section. We got this far last episode and now we need to do something about this offers section. And this is going to be pretty easy. You just need to change this to a column instead of a row. So if I just play around with the size here, let's go to the offer section. And instead of grid, let's remove this and use a flexbox with flexwrap. And up here let's give it basis 0, actually basis 96 sorry and grow. Here let's give it basis 96 again and grow. Let's also give it some minimum width. Let's go with 80. And also let's add some gap. And now we get this flex column layout. And now let's turn this child div into a flex column as well and give it item center. This doesn't do anything yet but we need to add some width to this image and a maximum width of let's say 2XL and now we see the effect. Let's keep shrinking and now we get this layout. Now if I keep shrinking this we will reach a point where this testimonial box is covering the entire image and we don't want that. Like right here, we can't see the image behind this box now. So to fix that, let's remove this absolute class and only enable it on the SM breakpoint. There we go. Let's also add some margin top to separate this element. And this works now. So the margin top is a bit troublesome. remove that on the larger screen sizes now up here let's change this minimum width to something else let's just remove it for now and then let's see and now I can shrink this even more and there we go now let's do something about the more offers section First, let me just remove the whole grid and just use Flexbox here as well. And give it basis zero and grow of two And a minimum width of 102 Here as well let give it basis zero and grow and a minimum width of 102. Now let's see what happens if I shrink this and now we get this layout but that suitcase image is not displaying properly so let's do something about that let's turn this into a flexbox and that's a lot better Now let's shrink this even more. And now we're stuck because displaying both these images and the text is a lot more difficult on smaller screens. And we can't go any further because of the minimum width we set over here. So for now let me just set that to the SM breakpoint and add another min-width which is 64. And now we can go further but it's not displaying properly because of these images that get in the way. Let me try giving the Flexbox layout to this first image as well. And also hide it and only display it on the SM breakpoint. And do the same for the second image as well. And now we actually have room to display these images. can see I broke the first image by giving it a flexbox so let's remove that. Let's change this to a block instead and just remove these flex classes. And there we go. Let's keep shrinking this and we hide the images now and we just make this completely responsive. And with that the more offers section is complete. Next we have this scrolling sliding offers section. Let me just make one last change here. Let's change this to a proper apostrophe. Same thing over here. And now let's open those rolling offers. There's not much change here. It's just the text we need to shrink. So let's use our clamp calculator again. Grab the minimum and maximum values. And just plug them into the calculator. For the minimum, let's try this 1.125 RAM. I'll set this minimum range to 480 since that's my mobile breakpoint. Let's copy what we have now. And instead of text-lg, let's have text and then the clamp property. all of our spaces as well. And now we have shorter text here so it a lot easier to read and it doesn take up too much space either There we go So sometimes if you resizing using these dev tools, the display sometimes breaks. That's completely fine. Anyway, we're done with this section as well. Let me try giving it to Excel as well and yeah it's too big right now. So yeah with this clamp property the entire thing becomes responsive. Now let's head to the product section and make that responsive as well. We need to do something about this list of products here. So first let's just give it flex wrap and a minimum width of let's say 56 and also a maximum width of 64. I'll also add some gap here and there we go now we have this. Let's keep shrinking. and just like that this whole section is also responsive. Now next we need to fix the reviews section. So let's open that up and let's see what we're working with here. If I shrink the screen completely, the first obvious thing to fix is these white overlays. So to do that, let's change their width first and give it the 40 width on the SM breakpoint And on Excel, let's change that to 80. So if I do that, we have a smaller overlay here. So we can actually see the text. And if I increase the screen size to the Excel breakpoint, it does increase back to a larger size. and below the small breakpoint we just remove the overlay entirely. And that fixes it. Now I want to add another div here and a button to actually pause and play the animation because on mobile you can't expect people to hover over the slider to pause the animation. So let's add a pause button over here. I'll turn this into a flux box and also give it margin top to center it. Now up here let's actually create a function we'll call it pause animation and also let's add some state here and we'll set this to false by default and and add the useClient directive at the top of the file. Now in the pauseAnimation function, we just change this value to whatever it was before. And on here in the button, let's add the onClickHandler. Now we need to modify the slider component to actually accept this prop. So here in the props let give it the pauseProp Let also add the type for this This is going to be a Boolean And it going to be optional And false by default Now, let's add a Pause Class attribute. and if this is true we're going to add this class right here without the group power section as it's not true we're not going to do that we'll just say resume here. Actually running, running, that's the correct value. And now we just need to add this pause class into both of these divs. So let me add curly braces here. And then just add the pause class in here. and there we go we're done with this. Now we can head back to the review section and just pass in the state pause variable that we created earlier and there we go. So it does regenerate the background colors for each review because it's actually re-rendering the entire component. We can fix that, but I'm not going to worry about that right now. Let's actually replace this with our pause and play button. I'll put all of this inside our icons file. Let's add the pause icon here. There we go. So that's our pause icon. Let's also get an icon for the play button. Scroll down and let's grab this icon from the blue side. and just add this to our icons file again. Alright, and now let's replace this button with the icons that we grabbed earlier. So there's some padding and I'll make it fully rounded and let's render the icons that we have here. Let me try to pause icon and there we go. Now if the pause variable is true then I want to render the play button otherwise I want to render the pause button. Now let's see if I got that right and yes I did. So this thing works and mobile users don't have to try and hover over the review to read it. Now we could also hide this button on larger screens and desktops because we don't really need it there. We could do that. try the SMHidden Plus and you can actually do that and only show this on small mobile screens. But I'm actually going to keep this even on desktops just because this is a more bit more accessible and that's all we're going to do for this episode.