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 row and 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. wrap and up here let's give it space is zero 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. 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, let's 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. So first let me just remove the whole grid and just use flexbox here as well. give it basis zero and grow of two and a minimum width of 102 Here as well let give it basis 0 and grow and a minimum width of 102. and 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. So 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 and I can see I broke the first image by giving it a flex box 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 can just make this completely responsive. And with that, the more offers section is complete. 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 scrolling 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. Remove all of our spaces as well. And now we have shorter text here, so it's 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 2xl 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 products 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 I will set this to false by default and add the use client directive at the top of the file. Now in the pause animation function, we just change this value to whatever it was before. And on here in the button, let's add the on click handler. Now we need to modify the slider component to actually accept this prop. So here in the props let give it the pause prop 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 a 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. You 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. just add this to our icons file again. All right 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. 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. Let's try the SMHidden class and we 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 bit more accessible. and that's all we're going to do for this episode.