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 reviews 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. 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 will 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. And now 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. 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 end even and end 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 get color 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. Let's make the font bold and let's make it more rounded. Let's also increase the padding. 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 and I'm going to create two absolutely positioned elements. Also give them a z-index of 10 and black background. I'll add the same thing here. And 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.