In this video, I'm going to show you how easy to create this beautiful landing page in here is look modern and super clean. As you can see the header in here when I scroll it just look amazing,

right? And also the border around the section just look really nice. So we are going to use um sets blocks which is

effort. Effort is basically a collection of beautiful design ready to use component built on top of sets. As you

can see, there's couple uh component here that you can just copy and paste.

Basically, let's generate brand new next application. I'm going to call that SAS landing. I'm going to hit enter. And also, we're going to install seten.

After this, I'm going to run npx set and at least init. For the component library, you can select radics or base.

So, I'm going to go with radics and noa right for the preset. And now, let's take a look how we can use the effort component. So, you can click the explore

here. And as you can see in in the marketing we have lot of component in here and also we have um app dashboard in here. So let's take a look first. Uh

maybe you want to implement header. You can click the header in here, right? And you can choice any header style you want. And the header to in here is just

amazing, right? I love that. So I can just click this um comment in here or you can just select whatever you want to use. In this case, I'm going to use npm.

Just copy that. Also, you can see the code basically here. Really nice. So let's try to copy that and I'm going to paste it. Right. So this basically will

clone the component and paste that into the component folder. right here. And as you can see, you just clone that. And here we go. As you can see, now we have the header, right? This one right here.

And how to use that? Pretty simple. You can see in here to using that, it just just import the component and you're done. So, let's take a look. I'm going to go back to the app and then page.tsx.

So, now let's take a look on the local host 3000. As you can see, now we have this beautiful header, right? If you add

for example like margin bottom to 400 RAM. Now as you can see if I scroll down we have this nice animation when I

scroll the page right it's look amazing but normally when I use effort I I just

go first with the hero sections so let's take a look on the hero section and I like to using um this one right here for

this tutorial hero too I love that so I just want to copy this one and then paste that to the terminal so now as you

can see on the components folder we have this hero and logo clothes and etc. So let's take a look on these um effort uh

documentation and let's see on the code in here. This is basically how we render that. So anyway I just want to copy everything in here and then try to paste that on the home component. Here we go.

So now as you can see we have this div right and also the header and the main tag and also we have the hero section

and the logo section as well. As you can see this is the result. It just look amazing when I scroll. As you can see the animation on the header, it just

look amazing. And also the border around the section in here as well. So let's just take a look on the code. As you can see, maybe you don't understand what

this styling means. So you can just comment that out. And you can see as you can see the border is basically just called the X border right here. So let's

unccomment that. So we have this border right here. And for example, you want to change the navigation item in here, you can go to the header. And then as you

can see, this is the array, right? The nuff link. So you can just remove the about for example remove that and now we just have features and also pricing. So

now let's trying to uh render another component like for example features right let's find feature style that

match with our brand right so now our brand is it just kind of like have uh some border around the section so we can

just take a look in here so maybe I want to use this one right here filter three right so here I'm just I just just want

to copy that let's try to just um run it here we go then what we have to do is just import the filter section component

into the page Now, let's take a look the result. As you can see, we have the filter section. Really nice. But the problem is, as you can see here, we have like a double border going on in here.

As you can see, right? I hope you can see that. To fix that, it's pretty simple. This is just code. Of course,

you can always go to the future section code and just take a look in here. As you can see, we have the border X. So, we can just remove that class name. Now,

the double border, it should be gone.

And also this feature it should be have like a H 100 I believe by default. So you can always remove that minimal H to

screen in here. Now as you can see we have this styling right really nice. And also if you want to add like this icon

in here on the um top and left in here you can just copy and paste basically.

So let's just take a look on the hero section and I found this one right here decor icon. So we can just copy that

right this four decor icon. You can go to the feature section and inside the um class relative in here inside the div

with have class relative you can paste that uh decor icon basically. So now let's take a look what we have. As you

can see now we have this decor icon right the plus icon right here. I hope you can see that. This one right here this one right here. And this one right

here. So now let's go to another thing which is the testimonial section. So let's just find the testimonial style that we like. I'm going to scroll down

until I found what I like which is this testimonial f. So I like that. All right. The styling is match with our

brand. So I'm going to copy this command in here and go back to the terminal and then just paste that. Then again we can just import the testimonial section

component to the page. And now let's take a look the result as you can see right here. Right. And also for the features, we don't have like a title in

here. So I like to using the title from the testimonial. So I can just copy and paste basically. Let's go to testimonials and this div. I just want

to copy that. And then now I'm going to go to the future section and then I just want to paste that right here. Here we go. So let's take a look. Now we have

this title, right? And yep, you can just styling whatever you want. So just want to remove the P tag. And this one right here, I'm going to use uh featur.

And the next thing is we are going to put the pricing component. For the pricing component, I'm going to use maybe the pricing to this one right

here. I like that. So let's just copy this command and go back to the terminal and just paste that and run it. And again, we can just import the pricing

section component to the page. And now let's see the result. As you can see here, we have the pricing component.

Really nice. And also the hake I believe is uh 100% by default. So we can just remove this minimal hake screen right

here. And here we go. And inside the div with class name relative. I'm going to put this decor icon right decor icon

here. And now let's take a look the result. We have the decor icon. It should be right here, right here, and down here as well. And also if you want

to put that on these um testimonial, you can do that as well. Go to the testimonial component. Inside the div

with class name relative, you can put the decor icon styling. Here we go. But make sure you you have to import that as

well. Let's take a look. Here we go. As you can see, we have this decor icon.

So, the last thing is I'm going to put the footer component. Let's let's click that. I'm going to use let's just find the things that I like, which is this

one right here. I'm going to copy that and go back to the terminal and then just paste and run it. Then we can just import the footer component to the page.

Let's take a look the result. As you can see, we have like a space in here. I don't like that. So, let's go to the footer component. And first, I think I

just want to remove the like a padding going on in here. I believe it should be this one right here, px4. So, I'm going to remove that. Let's take a look. Now,

as you can see, the padding is gone. And also on the top right here, I don't like this border on the top. Let's go back.

And I think this one right here. So, I'm going to remove the class name. And now let's take a look. As you can see, we don't have the um border top. Really

nice. If you want to see um clearly, you can just add class name and then background to whatever color you want.

So, we need to basically move the footer a little bit on the top. The space here is basically part of the pricing component. So, we can go to the pricing

section component. And this one right here, this is a padding vertical four.

So, I just want to change that to padding top four. So, padding bottom should be zero. Let's take a look. As you can see, the padding bottom is gone,

right? Let's go back to the footer and just remove the color right here. If you take a look on the detail, this border here is double basically. So, like you

can just go back in here and just remove the border X. And now the border should be not double. Here we go. And also the

pricing. We have the double border as well. You can go to the pricing and find the border X as well. This one right

here. Remove it. Nice. Right. And also for the testimonial as well, we have the

border X I believe testimonials border X right here. We also need to remove that.

And here we go. And also I like to add the like this icon plus right here on the bottom bottom right and bottom left.

And then inside the class name relative I can just put that uh right here. So we need to just uh import that. Here we go. Let's take click this one right here.

And as you can see this is double. So,

we can just remove the top, right? This top left and top right. If you take a look so closely right here, we have some

like a shadow going on in here. I'm not really sure what happened, but we have to move this decor icon basically on the top on the this relative right here. So,

we can put that like so. And now that should be gone, right? Really nice. And also, I'm going to add the horizontal

line in here. So, you can just take a look on another component. I believe should be full width divider. So we can just copy that and then go back to the

footer and paste that inside the relative as well. Here we go. Just import that. And now we should have uh I

think it should be position bottom. So now we have this uh line in here on the bottom. But the things that I'm going to change also is basically the column of

this testimonial. I'm going to change that to the four column because the template all of this is using four column. for the uh logo here using four

column for the features using four column and also for the footer as well it's using four column so that's why in

here I'm going to change that to the four column so let's go to testimonials and basically uh in this grid in here

I'm going to change that to the four column like this now let's take a look here we go we done and also for this

blank empty space in here I believe should become from the testimonial so you always adding background here to check as you can see it's come from this

component. So now we can just basically remove the minimal H screen here. Remove that. And now the space should be gone,

right? Really nice. And we done. As you can see, it's just beautiful. And of course, you can always adding like a smooth scrolling here. When I click

filter, it should be go to the f section. When I click pricing, it should be go to the pricing section as well. To adding that is basically really simple.

On the header component, I'm going to change the href in here. So I'm just going to copy and paste. As you can see the it should be go to the fters ID and

then pricing ID. So let's go to the features component. I'm going to add this ID here. ID set equals to features.

And also let's go to the pricing. I also put the ID set equals to pricing in this section as well. So now let's take a

look. If I click filters, we own the features. If I click pricing, we own the pricing. But it's not smooth. So how we make that smooth? It's pretty simple.

I'll go to global CSS and on the HTML here we can set the scroll behavior into smooth and now let's take a look here

I'm going to click features and as you can see it's really smooth pricing feature pricing right it works and also

this is basically responsive by default of course as you can see this one right here we have this navigation right all right it is also works everything is uh

responsive really really cool and also for the icon for example you want to change the icon in here. It's really simple as well. So, let's go to the hero

section in here. And as you can see, the icon is come from the Lucid React, but you can also grab that from the another library that you want. For example, you

can use tableabler icon, huge icon, and ramics icon and whatever, right? It just works basically. So, let's try to use hero icon. Let's go to hero icons/react.

I'm going to copy the package and then paste that. So anyway, instead of grab the arrow right icon from the lucid react, I'm going to grab that from the hero icons right now. So as you can see,

it still work. Let's see on the browser.

And as you can see the icon, it should be also change, right? This one right here. So I think that's it guys for this video. As you can see, this is really

nice landing page. You can just try the using effort right now. Link it should be on the description. Thank you so much for watching. and see you on the next wine.

Sync to video time

Best ShadCN Blocks Library for Modern UI? (Efferd)