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

All right, continuing where we left off. This is the entire landing page that we've built so far. We've come really far along with this and for this one we're going to build this social section where we basically have a bunch of travel pictures and if you hover over them you get this cool little effect where you can add some more content. I just you can add whatever you want. This is what we're going to build. So let's go back to our explorer here and create a social component. I'll change this to a section and I'll give it some padding and also an orange 50 color for the background. Now let's add a container and inside that container let's add the heading label. We'll call it social and right below that let's add the section heading. and I'll wrap this text in our brand color. Now with that done, let's see what this looks like. And to do that, let's first render this on our page right here. There we go. And this is what we have so far. Now we need to add a bunch of stock photos here and I just going to speed that up as always And now I'm just going to add a destinations variable over here and I'll put everything inside that or actually I'll call it posts and I'll put everything inside it. We'll add the image, the location, and the... yeah that's about it. And I'll copy this four times. Make sure you use the correct path for each image. And now let's add the location names as well. Of course all of these are just examples, none of these are real. Okay with that done let's actually render all of these. So just below the section headings let's create another div and render our posts inside it. We'll add the key here and up here we'll also give it some flexbox and gap and also a margin top. Now for this one let give it basis zero and growth And inside let render the image And right below that I'll add an h3 with these classes which will show the location. Now for the image let's add a bunch more classes. Let's give it full height. and make it object cover and object center and we have this and now we have this now let's also make it rounded let's make it a bit more rounded Now for the location, let's add some other stuff here. Let's move this all into a span. And before that, let's add an icon, which is our social Instagram icon. And let's make this a flexbox to align the icon properly. And there we go. Now let's move the image into a div and give that div the class of relative and also overflow hidden. And we make it rounded same as the image let add the overlay over this so we can show our button as well and let's give it full height to fix that issue and now we don't need to make the image grounded anymore Okay, so let's give this a background of white with, yeah, just white. Okay, and also make this a flexbox. And inside let's add the white external button component that we made. And we'll call it explore more. I'll also make it border just so it's easier to see. And there we go. Now let's add the group class up here. And let's say on, we want to have zero opacity, but on group hover, let's give it 80% opacity. Let's also give it a duration of 300 milliseconds. So it looks more smooth and let's also give it some Z index of 10 Now same thing for the image, but on group power. We'll just scale it by And there we go And yeah with that we are done with this section this was a lot shorter than the usual one was yeah, we're done with this