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

All right, hello and welcome back. This has been, there's been a lot of delays with this one, but this is what we've got so far. And this is what we're going to build. This is basically just a horizontal sliding animated offer section, which basically will display a bunch of offers that we want to display here. ignore the essential section below that that's that's something we will build in a future episode that's not for this one so to get started first we'll build a component for this and I'm just going to call this scrolling office of a better name Here's our component. Now let's render this on the page. Now we're also going to create a list of offers up here. These are going to have a bunch of fields, which will be text, link, and an icon. We're going to give these three fields to each offer, and then we're just going to duplicate this four or five times. Let's say five times. Now, we need a bunch of icons for this, and I'm just going to get all of these from compose icons. We'll take this one and put this in our icons.tsx file as always. And it seems we already have one with this name so... Yeah, up there. we need to rename this to something else let's just go with plane 2 we're gonna add the screen readers label as well and then get the next icon let's go with this one again same process just add this over here add the screen label Let's look for the perfect icon. There a lot to look through but I think I go with this one Copy that and we add that here as well now we're gonna get this icon as well and lastly we just need one final icon let's go with this one Okay, with that we have all of the icons that we need. So let's start adding our offers over here. I'm going to add the text and the icon for each offer. And I'm just going to keep the link empty. Because we don't actually need a link here. is just like an example project so the link I'll just keep that empty and I'll fill up the text and the icons so I import the icons and add one icon for each of these offers Okay, now with all of that, we are ready to render these. So first let's change this to a section and create another div inside and let's render the office in here. And of course add the key as well so we don't get some errors. And let's make this a flexbox as well and add some gap. render the icon over here and add the text as well. I'll also make this a link which will open the offers link which again we kept empty but we could obviously add any link we want over there now up here let's also make this a flexbox as well and add some more gap over here we'll also give this section some background colors and some padding and also make text white Now let's see what we have so far and this is what we're working with right now. So there's a lot to do. First let's reduce the section padding and also increase the gap here and that's a bit better. Let's make this text uppercase and also larger and bold. And that's a lot more of what we want. And let's also fix this issue while we're at it. So to fix this just go to icons and change the casing to camel case for all of these variables. I'm just going to use find and replace to do this quickly. We just need to change the casing for each of these attributes to camel case and there we go okay now that error is also gone let's continue making these offers I'll put all of these in a container for now just so it's a bit more organized and now the text is wrapping and we don't want that so I'm going to add another class here which will be text no wrap and that fixes the wrapping issue I'll also add overflow hidden so it cuts off at the end here like so. Now we need to head over to globals.css and we actually need to add the sliding animation. Now I'm I'm using Tailwind here so to do this let's just add a keyframes and I'll just call this horizontal scroll and what this will do is just go from transform translate x 0 to transform translate X minus 100% and that's our animation now let's also add animate horizontal scroll actually I think I have a better name for this let's call it slide animate slide and also change the name over here now let add this animation We run it for five seconds and we also write linearly and infinite so it doesn ever end Now let remove this gap and add a padding over here and we have the same effect and that's fine. Now let's create an inline block element up here and move this entire thing up there. We'll remove the overflow hidden in the text no wrap classes and we'll duplicate this inline block element one more time. So we actually need two lists of offers as in a duplicate of the original list to animate this correctly otherwise it will just appear cut off and this is what it looks like now so let's move both of these inline block elements into another div and I'll add the overflow hidden and the text no wrap classes to this parent div and now we get this now we can actually add the animation and I'm just going to add the animate slide class here. And now we have our animations working. But this is a bit too fast. So I'm going to go back to globals.css. And I'm going to increase this to 7 seconds. And this is still too fast. So let's try 8 seconds. now let's go with 9 seconds and yeah let's just go with 9 seconds and that's good enough now we also want to pause this animation on hover and to do that let's use this custom property animation play state equals paused and let's also add this to the other elements where we're animating this and with that this animation will pause whenever we hover over the office and with that we are done with this section as you can see it powers it pauses when I hover over it and yeah that's all we needed to build for this section you you