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

Alrighty, continuing where we left off with this landing page, we've built all of this and now we're going to build this review section which is a bit animated. So without further ado, let's head into our code editor and create a component for this. I'm going to just call this reviews and let's set this up now. Let's change this to a section instead of a div. and inside this let's create a container. I'll also give the section some padding and a background color. And let's add a heading label here as well and we'll just call this reviews and add a section heading which we'll call our customers. I'll also add some text which is colored by our brand color over here and now let's just render this on our page and see what we've got so far okay so this is what we had so far now let's ask GPT to generate a bunch of example testimonials for us so we don't have to come up with all of this ourselves. We'll ask it to give us the output in JSON so we don't have to format it ourselves and we'll get two fields the text and the name. I should also tell it to create these testimonials for a travel agency just so this looks better in context. Now copy this and let's add this to the review section over here. And that saves us a lot of work. Now I'll create another div here and give it some margin top and inside here I'll render these reviews. And of course give it a key attribute as well. Now let's give it some padding and make it rounded, and also give it a background color of sky 300 I also increase the text size and make it uppercase and also bold Now here I render the review text and here I render the review author name For the text let's give it some margin bottom and let's turn this whole thing into a flexbox. And this is what we have now so far. Now we are going to make this, we are going to use the same animation that we used in this scrolling office section. So instead of recreating this, I'm just going to extract this into its own component. we'll just reuse that over here as well as in the review section. So to do that let's create a slider component. Let's put these side by side and let's extract the common functionality. So let's give this a class of overflow hidden and text no wrap and also the group class now let's copy this whole div both of these and let's paste them over here now let's remove the content from these and we'll take the children prop here and we'll render it in both of these divs. There we go. And this will be a React node. Now I can just take this content out and create a slider component here and just pass the content inside it. Now we don't need any of this stuff so we can just remove that and just to see if everything is working and yes it is and it does pause on hover as well so now we can reuse this same thing in our review section as well I'll just add the slider component here and move the entire reviews inside here and I'll create another div which will be a flexbox and I'll put all the reviews inside it and now we don need the flexbox up here and now let see so we do have the animation but everything still looks broken so there a lot we need to fix here first let remove the gap here and add a horizontal margin here and also the base is zero and grow classes okay And that didn't do anything, so let's add the text wrap class so the text can actually wrap. And now it's a bit better. Next I'm going to give it a minimum width of 80. and I'm going to wrap the quote the review text in quotes and of course escape these with proper characters now let's also align this text to the center and add a horizontal line between the name and the text and that's a bit more organized. Now next let's add the nth even and nth odd selectors and add a margin bottom and top to them. So now we get this cool little effect. and you can see that the first and the last items of both lists aren't exactly aligned properly here the margin isn't applying here because we only have five items in this list so the even odd numbers don't really match up here so to fix this real quick we can just use another testimonial instead of five let's have six testimonials and that will just quickly fix this issue Let's take this one and add it up here to our list. There we go and now let's see if that fixes it. And it does. Okay so moving on. Let create a list of colors here because I want to randomize the color for each review So let add a bunch of colors here And I'll just stick with these for now. Next, let's create a getColor function, which will return a random color from this list. Now we just remove the background color here and replace it with a random color. And that looks a lot better. Now we just have a couple more things to do. We're almost done with this. make the font bold and let's make it more rounded. Let's also increase the padding. And that looks a lot more neat and clean. Now let's remove this container for the reviews. So they stretch to the entire screen. Next, I'm going to add the relative class here to the parent. I'm going to create two absolute repositioned elements. Also give them a z-index of 10 and black background. I'll add the same thing here. we can't see them right now so let me just give them some width as well and now we can see them now this one let's change that to right and now we have two black boxes over here. We'll use this to add an overlay to this section. Let's add a gradient to the left here. Let's start it from orange 50 with 25% opacity to transparent from 30%. Now let's change this upper one to right, gradient to right and this one to left. And now we have this really neat little effect. So basically it looks like the reviews are fading into the background. Lastly, let's fix this typo. And there we go. And with that, we are done with this section.