In this video, we are going to build this intro section with drop down navigation. Like when I will hover over that, then we will get this drop down box, like this one. And this project is fully responsive. When I will check this UI in mobile, so this will look like this. And when I will go to the desktop, so this will look like this. So this is also a fully responsive. And here we have also created a responsive nap bar. When I will click on that menu button, so our side nap bar will open and here we got our items. And when I will click on that single item, so we got our items like this one, like this. And these are our buttons. And here I have also added the all hover effect. Like when I will hover on that button, so you can see that our button background color is changing. And in this video, we will also learn how to deploy your application on Vercel. And in the description, you will find the code link and live demo link. I got this challenge from frontend mentor. Here they have given the intro section drop down navigation challenge. I will give this challenge link in my description so you can check out it from there. So let's get started. So to build this project, I'm going to use a next years. So first of all, we will set up our next years project. And after that, we will create this project. So let's go to the browser and search for next years and click on that first link here on the official next year's website, you will get the installation command that is NPX create next step at the latest, then click on that button. So this will copy the installation command. Now go to the location where you want to save your project. So in that case, I want to create my project in that place. So here I will create a new folder with the help of command Ctrl Shift and and give that folder name drop down navigation, go inside that folder and click on that search tab. And here type CMD and press Enter. So this will open the CMD for that location. And after that, the command that you have copied previously is there and also add dot with the help of dot this will install all the files inside that folder and press Enter. Now this will ask us a few questions like, would you like to use type script, element CSS, yes, linked all these options. So for now I'm just pressing Enter, Enter and installing all the default options. Now our next year's project is installing. Maybe this will take three minutes. Now our next year's project is successfully installed. Now let's open our project in VS code. So for that here, we will type code dot code dot space and press Enter. So this will open the VS code for that project. Now let's run our project and test that our next year's project is working fine or not. So first of all, we will open our terminal. So I will open our terminal with the help of Ctrl J. And after that here, we will type npm rendav. So this will run our project and currently our project is open on localhost port 3001. But maybe in your case, so this is opening my project in localhost 3001 because on my port 3000, my previous project is running. So let's go to the browser and search for localhost 3001. There you will get the default styling by next year's. So what we need to do, we need to remove all the default styling. So let's go to the code. And if you want to minimize your terminal, then you can press Ctrl J. And in the next year's inside that source folder, we have our app folder inside that app folder, we have our page dot t sx. So this is the homepage that currently is rendering. So what we will do, we will remove all the code from that place. So for now, I just want to print Hello. So that's why here I have written Hello. And after that, go to that global dot CSS file. And from there also, you need to remove all these default CSS. And let's see your code and see the output. So now you can see that currently we are just getting a Hello. Let's see the final output again, what we need to create. So here, first of all, we have to create our navbar section. And in that navbar section, if you will check there, so let me take a screenshot of that. And in that navbar, if you will see this UI. So first of all, we have to create a container for this navbar and this hero section. And after that, we have to create a section for our navbar. And inside that navbar, we have another section that is this nav links inside that nav section, we have another container that is this. So what we will do first of all, we will create this thread container. And inside that thread container, we will create our yellow container that is navbar. So let's go to the code and go to the homepage. And here we will give some styling. So here we will pass a minimum height of the screen with full bg gray 100. Let's save your code and see the output. So if you will see there carefully, so our background color is little bit of gray. Now let's create our navbar component. So to create our navbar component, here we will go to that source folder and inside that source folder, we will get a new folder with the name of components. And inside that components, we will create a new file with the name of navbar. And after that here we will write ts rfc. So this will create the sample component for us. And we don't need these props. So let's remove this. Now let's give the styling for our navbar container. So here we will pass these classes that is mx auto flex with full max width will be 7xl. So max with 7xl means 1280 pixels and justify between. So with the help of this justify between, we are passing a space between. So with the help of this class name, we will get our items like here we are getting item on left hand side and right hand side. And we are getting a space between this. And after that here we are passing a padding x4. So with the help of padding x4, we are getting a padding left and right both inside of 16 pixel. And we are passing text sm. So this means we are passing a text size of 14 pixel. And here, so with the help of max auto, what is happening here we have defined that max width of 7xl means we have defined the max width of 1280 pixel. So with the help of max auto, we are centering that our navbar. So you will see this in a minute when we will get some data here. And let's import our navbar. So I will copy it from there and import it in our main page like this. Let's save this file and navbar also and see the output. So currently we are just getting a navbar there. Let's go to the code again. Now what we need to do here, firstly we have to create this left section and after that right section. So let's go to the code again. Now let's remove this navbar and comment it there like left side and create a section for our left hand side. And inside that section, we will pass these classes that is flex item center and cap 10. So this section will contain this image and these items. So first of all, I'm writing there like this logo and after that nav items. So first of all, let's put our logo here. So for the logo here, we will use the image tag of Next.js. So let's import the image from Next.js, press control space and then you will get the automatic position. So this will be auto close and let's remove this one and add a source for our image and we have to also pass a alt. So this is the logo. So that's why I'm passing a logo there and here comes our main part. If you will see there, here we are getting a logo and if you will go to that front and mentor, when you will start that front and mentor challenge, then you will get that zip file when I will extract that zip file. And after that, here you will see that they have given images. So what I will do, I will just copy that image from this place and come to my folder and inside that source folder, here I will create a new folder with the name of assets and inside that asset, I will paste my images like that. And now let's come to the code again and now import our image. So we need a logo. So here I will use import and give that image name. We can give any name that we want, but I want to give that image name that is logo. And from here we want to import, we want to import it from assets folder inside that asset we have images and inside that image we have a logo. And let's copy this logo and paste it there and let's save your file and see the output. So now you can see that we got our logo. Now what we need to do, we need to create these items. But before that, first of all, let's create this login button and right-click button because this thing is complex, so we will see it later. But here I'm creating a div for our nav links. So here I will take a div and I will just write nav links like that and save and see the output. And now let's get our pattern side data. So for right hand side here, I will comment right side data and create a one section tag. And now let's give the class name for this section tag. So let's add a class name and pass these classes. Plex items center and gap it. With the help of this, we will get a gap of eight between these two buttons. Now let's create a button for this. So here I will take a button and on that button, I will pass these classes that is height will be fit and text will be neutral 400 and transition all over and over we are passing a black with 0.9 opacity. And when I will save this code and see the output, so here we are getting our button. So let me explain you this class name that is transition all. So with the help of transition all, we are getting a little bit of animation, or automatic animation and and when we will get this animation when I will hover over that button. So let's see there like that. Now let's get our second button. So for our register button, here we will use these class name. Height will be fit here. We are giving a rounded axle. So on the rounded axle, we are passing a border radius of 12 pixel and border to and by default border color will be neutral 400 and padding X will be four and padding Y will be two. So with the help of padding X, we will get a spaces left and right hand side and with the help of padding Y to we will get spaces on y axis of eight pixels and we are also passing a text color of neutral 400 transition all and on hover, we are changing the border color and when we will hover over that button, then we are also changing the text color of that button. So let's save this and see the output. So this will look like this. Now let's create this nav links. So for the nav links, add a class name there and pass these classes that is flex items center, gap four and transition all. So mainly we are centering our items and giving a gap of four and now here we will throw our items. So let's create a UI for our items. So if you will see the final output, so this is possible that this will be the link when the user will click on that button. So this will redirect us to a career page or about page or like complete page or features page. So why I'm explaining this to you because here in the code, we are going to use a link tag. So here I've taken a link tag and this is giving us an error because we haven't imported this link tag. So let's import this link tag from next slash link like that and now we are not getting error and on that link tag we are passing these classes that is group adding x2 adding y3 and transition all. So main thing is that group. So don't worry, I will explain you what is the use case of this group. So this group is the main thing in our whole bin. So first of all, let's create our items and then I will show you that example. And inside that link tag, let's take a paragraph tag. So we are taking a paragraph tag to show this text and icon and inside that let's take a span tag and let's copy our text from there and paste it there. And now we need this icon, this arrow icon. So how we will get this arrow icon. So to get the arrow icon here we will use a react icons. So we will go to the browser and search for react icons. Click on that first link and search for arrow. Like we need this arrow. So I will just click on that arrow and click on that button. So this will copy that component and go to your code and paste your component there like this one. But one thing is that I forgot I haven't installed this package. But before that let's go to the code again and import it there. Click on that import code. So this will copy the import code from there and go to your code and import paste your input like this. And now let's come to the browser again and click on that phone button. And now copy the installation code from there. Now come to your code and press control J. Open a new terminal and paste your installation command there. So now we have installed our react icons. Now we are not getting any errors. Let's save this and see the output. So if you will see there, so currently we are getting our output like this. So let's go to the code again. And now let's pass some CSS. So this will look better. So for our paragraph tag, we will pass these classes that is flex cursor pointer and item center gap to text neutral 400. So with the help of cursor pointer, we will get our cursor like we are clicking on some button. So let's save this and see the output. So now you can see that our cursor is changing like here, like this is a button. And here our cursor is not changing. But on that place, our cursor is changing. Now let's now let's add a class name there. And we will also style our arrow icon. So here what we will do, if you will see the final output, so currently we are getting our arrow in down. And if you will see the final output, so here by default, our arrow is up. So what we will do here, here we will use the tailwind class name that is rotate 180. And when I will save this, so this is our final output. And this is our current output. So now you can see that we are getting our icons like up like this one. And what we need to do when I will hover over that, so this icon should move down, like in this case. So let's see how we can do that. So here we have to also add our additional class name that is transition all. So with the help of transition all, so if our rotate will change, so this will show in a form of animation. And now here comes our main part here on that link tag, we have used a group. So what we will do first of all on that place, we will write group hover and on hover we want to change our text color. So when user will hover over that, so we want a text color of black. And likewise, when the user will hover over that, so here we will also use a group and on hover, so we want our rotate to be zero. And let's save this code and see the output. So currently we are getting our output like this. And when I will hover over that, so now you can see that our color is also changing. And this is also moving down. If I will remove this transition all from there, and let's save your code and see the output. So you can see that we are not getting any animation on that arrow. And when I will add a transition all there, so we are getting a proper animation, like this is in the form of motion. Now what we need to do when the user will hover over that, so we have to show this div. So let's go to the code again here inside that link tag, but after that paragraph tag, we will create another div. And let's comment there. This is a drop down. And let's see the final output again, if you will see there. So when I'm hovering over that, so this div is showing below that div. And this drop down box is also showing below that company. So what we need to do, we need to set this div as absolute. So let's see how we can do that. So here on that class name, here we will give the class name. Inside that here we will pass an absolute. And we have to also pass a relative on our parent div, like from which relation this should be absolute. So this is our link tag, that is also a parent tag. So we want to relate our drop down from this div. So here we will use a relative class. Now let's style our drop down box. So on that drop down box, we have passed like right zero. And from top we are passing 10. And main thing that you have to notice there, we are also passing a hidden there. So by default our div will be hidden, like see the final output there. So here our absolute div is hidden. But when I will hover over that, then this div is showing. So see this code here we have passed simply with auto and flex column and gap one rounded LG, VG white, padding Y3 and we have also given some shadow and transition all and group over flex. So what's going on there? Let me write something there, like hello. And let's save your code and see our code. So now you can see that we are not getting our absolute div there. But when I will hover over that, so you can see that we got our hello div there. So how it's happening. So let's understand there here on our link tag. So this is our link tag. And in our final output, this is our link tag. This feature is our link tag. Inside that we are passing our paragraph and drop down. And what we have done there, we have made our link as a group. And when anyone will hover over that parent div, so with the help of this group over, we can pass any classes that we want. So it means user is hovering over that div, but we are passing a condition there if anyone will hover over that group. So we will pass this class that is flex. Now let's style our items inside that drop down box. So here again, we will use a link tag, and we have to pass a href there. So for now, I'm just passing a like empty or hash. And inside that we will use these classes that is that is flex cursor pointer items center, and padding Y1, padding left six, padding right eight, and text neutral and text neutral eight 400, text neutral 400. And on hover, text color will be black. And inside that, if you will see the final output there, we are getting our image and this item name. So what we will do first of all, I will come and their image and this is item. Now let's import the image tag there. And now we have to pass our source of so we are getting an error there because we have imported our image two times. So let's remove it from there. And now we have to pass a source of our image. And we have to also pass on property there. So this is our item icon. So I will just name this item icon. And now let's also import our image there. And after that, we will pass our image on that place. So here I will just try to like import and let's write to do image and we need to import it from our assets folder, image folder. And inside that we have our photo image. So let's copy this image and paste it on that place and save your code and see the final output. So now if I will hover that so we are getting our icon, but we haven't added our item. So let's also add our item. So for that here, we will use a span tag. And on that span tag, we will pass these classes that is white is placed from left, we are giving padding left three remains 12 pixel. And let's add our item name that is to list and let's save your code and see the output. And I'll put so now you can see that we got our item there. So here we have completed our single item. Now what we need to do, we will create a data for our items and we will map over that conditionally so that we don't have to create a UI for all these items. So let's go to the code. And before that, if you will see there, here we are getting our button like first of all, this is a label. And after that we have to also pass a link link is like when the user will click on that button. So this will redirect to any page or something like that. And after that here on that day, we are passing our icon. And this is again label. And maybe this will be a link. So we have to also pass a link for that. So maybe you are confused a bit. So don't worry, let's go to the code and see what I'm trying to see you. So what we will do, we will get a type for our data. So if you don't know type script, so don't worry, this is super easy, I will explain you in a minute. So this is the type that we have to create. And based on that type, we have to create our data. So first one is a label. So we have to pass a label and label will be a string type. And after that we are passing a link, the link will be also a string type. And here we are also passing a question mark. So it means maybe sometime we don't need a link. So that's why we have added a question mark. It means link is not mandatory to pass. And after that we are also passing a children. So our children will be that nav type. And after that here we have added a square. So a square means this will contain an array. So this nav item will contain type like this one, you will hover over that, then you will get the solution there. And after that we are getting our icon image. So this will be also the string type. Now let's create a data for our nav items. So here we are getting a data for our nav items. So in future, if you want to expand our nav items, or you want to replace our any icon or any name, so you don't have to go to the UI part, just go to the data part and replace it from there. And in the big companies, all the developers do like that. So here we will get a data. And the type for that data will be this. And here it is not mandatory to create a type for our data. But I'm creating a type for our data, because this will show us an error if we don't pass any data, or if we are passing something wrong here. So this is very helpful. Here we can here you can see that we are getting an error like like label properties missing there. So here, first of all, we will create an object there. And if I will press Ctrl space, so now you can see that we are automatically getting a suggestion, but we need to pass the error. So first of all, we need to pass a label. And after that we need to pass an icon. After that we need to pass a link. One thing I want that this will be the square bracket. It means this will contain an array, like we have passed it there on that place. And after that we have to pass our children. So for the children, I'm just passing a string there. So this will give us an error like this type is wrong. This won't be a string. This will be something like this type. And here we don't need our icon. So what we will do for our label, we will pass features. And for our link, we will pass hash. So for our children, we will create again array. And inside that array, we will create our object like this, label, link and icon image. Like label will be this to list and for the link, you can pass any link that you want. And for the icon, you have to pass an icon address. So we have already imported our to do image. So what I will do, I will just place it there like this. And if you will see the final output, so here we are getting our calendar reminder planning. So here what I've done inside that here, I've created a calendar reminder and planning. And I'm also passing the images for that I have already imported these images like I've imported this, like I've imported this to do image. And let's save your code. So currently we have just added one item in our nav item. So what we need to do, let's copy this nav item. And, and now we have to map these links. So here we will add our complete data and nav items dot map. And inside that app, we will use an arrow function. And now let's get this one and wrap up your whole link tag with this map. And now this is giving us an error like key prop is missing. So let's pass a key there. And on that map here, we'll write D. So they will indicate for data and I will indicate as an index. So we will pass our index in the place of key. And let's save this and see the output. So here nothing is changed. So let's replace our data with this. So here we will pass it there D dot label. And here we will write D dot link. And this will give us an error like in that link tag we must have to pass something. So what we will do there here we'll use a double question mark. This is a conditional operator like if like if this condition will return undefined. So here we will pass this string that is empty string or we can add a hash. And after that and after that this drop down is our children. So what we will do there here we will use curly bracket again. And inside that D dot children and if our children is true. So then we will show our drop down like this. And inside that drop down we have to map this link. So here what we need to do we need to write there D dot children dot map. And inside that we will use an error function like we have used previously. And these two brackets and map up your link tag like this. And again here we have to pass a key there. And inside that key here first of all we have to import our data and index. So for the data here for now we will use a ch. So ch will denote as a children. And after that i. So let's pass our i in that place here and here we will write ch dot label and in the place of image here we will write ch dot image and in the place of hnf here we will write ch dot link. So this is also showing that maybe sometime we don't get our image. So this will return undefined. So here again we will use a double question mark and we will pass our empty string like this. Now our error is gone. So i guess we have saved our data everywhere. So let's save this and see our output. So now you can see that our output will look like this. When i will hover over that so our drop down will show like this. Now what we need to do we don't have to create a UI for these items. We just have to add these items in our data. So let's go to the code and let's minimize this and add a comma there. And here i have added a data for this company. In that company i have passed a label inside that we have three childrens. This is history, our team and now. And inside that we are not passing our icons because in our panel UI there is no icon. So let's save this and see this. So now we got our icon but there is a problem. As you can see that in the place of images we are getting this type of errors. So let's go to the code again on that in the place and here we will pass a condition like if our ch or children image is true then we will pass our image like this. And now we don't need to pass this conditionally. And let's save this and now you can see that we got our company drop down like this and our feature drop down like this. And now we have two items left that is career and about. So let's go to the code again and minimize this one and add the data for this career and about like this. And let's save your code. So now you can see that there is another problem like there is no children inside that and we are getting a drop down there. So let's go to the code again and here we will again use another condition like curly bracket and t.children if our children is true only then this drop down will show. So let's save this and now you can see that we are not getting our drop down there. There is no children and now this is looking good. So we have completed our navbar for next up UI. So now let's create our navbar for mobile UI. So before we make our navbar responsive let's install one library that's called tailwind debug screens and then go to that NPM website and install this. So why we are using this package. So we are using this package. So if you will see there currently on my left hand side on my left bottom here we are getting a screen excel and if you will see there. So currently this is showing only a hyphen. It means we are on the mobile screen and if I will expand my screen so now you can see that this screen size is changing. Likewise currently we are on the MD. So this will only show on development. When we will deploy our application then it won't show. So let's see how to implement this. So first of all copy this installation command and compare your code and after that go to your tailwind config file there and add your plugin like this. So you need to add this plugin that is even CSS debug screens there and after that next step is to go to that dev.tsx and here we have to also change our fonts and before that let's see this. The file that you have downloaded on that file this is also come that is styleguide.md. So let's open this one. Here you will see that they are saying that to use this font family. So we will also use this font family. So let's copy this one and go to that layout.esx and what we need to do we need to import this font. So let's add a comma there like that and we have successfully imported our font. If I will hover over that then you will see that we are getting a proper suggestions there and like we have created a variable for our inter let's create a variable for this font. So I will copy it there and replace it with this one like that and after that we have to add our font in that place. So let's replace this and we don't need this interfont so let's remove this font and from there also and let's save your file and see the output. So if you will see there so our font family changed. Now we have to add our haven debug screens. Haven debug screens library there. So I will cut this one and add our backpacks because we have to pass our conditional classes there. So here we will use a curly bracket dollar symbol and we will pass it like that and now we have to use again another conditions. So here we will again use a dollar symbol and now what we need to do we have to check that is our application is a development mode or not. So here we will write presses.env.node environment equals to equals to development. Here you will also get a suggestions and if this value is true then we have to add a class that is debug screen. Here you can see that you are also getting a propositions and if this value is false then we have to pass an empty string and when I will save my code and see the output. So now you can see that here we are getting a screen size there on our left hand bottom and currently the screen size is empty. So here we have added our screen empty there. Now what we need to do on empty screen we have to hide this one. I mean when our UI will come on empty screen so we have to hide this one and these buttons. Currently we are on the mobile so you can see that our alignment is not proper on the mobile and on the SMD this is also not good. So here we will add a condition on empty. So let's go to your code and go to the navbar section and we have to hide this nav item section. So by default this section will be hidden. So here we will use our hidden class name and we have to show this on an empty screen. So I will save it and let's save this and see the output. So here you can see that currently we are on the empty screen so that's why these items are visible and when we will go to the mobile or below the empty. So these items will be hidden like that and like that we have to also hide these buttons. So we will apply same logic or same CSS. So let's copy it from there and come to our buttons. So we will apply this one like that and let's save this and now this is hidden and now we have to create a UI for mobile and which you will see there. So currently here we are getting a menu icon. So for the menu icons again we will go to the react icons and search for menu and now I will select this icon. So click on that one and click on that one. So this will copy that element code and now we have to show our icon on that place and this will be done and let's also import our icon. So let's click on that import button and paste your import code and paste your import icon there and on that icon we have to add this class name that is cursor pointer and on the empty screen this will be hidden and we are passing exercise for excel. So see the output. So currently we are getting our icon there and when I will go to the empty screen so our icon is hidden and we are getting a menu icon. So what we need to do when the user will click on that button so we have to show our mobile nav items. So let's go to the code again. Now we will create a separate function for mobile nav and after that we will import it on that place. So here let's create a function and let's see the final output and here when I will click on that one so what's happening there. So let's take a screenshot and then I will explain. So for that firstly we have to create this parent div and inside that parent div we have this byte div and inside that byte div we have this container and after that we have this container and after that we have a container for our buttons. So first of all we have to create this outer container and give that background color as black and after that we have to give the opacity of that background color. So let's go to the code and do that and one thing also if you will see their final output so what is happening there we are getting this div height now full and width now full. So what we will do we will make our div fixed. So let's go to the code and add these class names that is fixed and left zero top zero and we are passing flags height will be full and minimum height will be screen and width will be full and justify end. So we are passing a justify end for this item so this will show on the right hand side and after that we are passing our background color with 60% of opacity and here when we are on the empty screen so we will hide this container. Now let's create this byte div so for that white container here i'm passing a height of full and width is 65% and bt will be white and padding x4 and padding y4 that's simple and inside that div we have to pass this close button. So for the close button we will use this icon that is ai outline close and i'm using this icon from react icons so let's also import this icon. So here i will paste my icon name there and after that here whatever the name on the start we have to write it there ai like that so this will import the icon from that folder so let's copy this one and we don't need to copy and let's save this and see the output. So currently we are not getting any output because we are not importing this function anywhere so let's copy this one and we can paste it anywhere we want but we will call this component on that place and let's save this and now you can see that we are getting our div like that we are also getting a close button there so let's understand this what's going on there this is the parent div here we have just simply gave this a background color of 60 and main thing is that we have given a x4 button and here we are saying that def 0 top 0 and inside that we have created another div that is with the right color and this container will be of 65 percent width and inside that here we have created another section and after that what we are doing and we are just simply saying that justify end and we are pushing our icon to the right hand side so that's why we are getting our output like this now what we need to do we have to show these icons so for these icons what we will do so what i will do i will just copy this code from above there and paste it there like that and here we have to modify some css like we don't need pedal there and let's also remove this entry and this will be flex call and let's save this so now you can see that we got our items like that and if you will see there this is also coming on hover but on mobile what we need to do when the user will click on that button then we have to show this one so for that here we will create a separate item for this so let's see how we can do that so here i will create a function and give that function name that is single nav item and after that what i will do i will cut all this code from there and paste it there like that now we have to create a type for all these so what i will do here i will just pass d so d indicate well our nav item data and we have already created a type for our data so i will copy it from there and use it there like that now our error is gone and let's also remove this one so we have created our single item there and now let's copy this one and now we don't need this and we have to replace this one with this one like that and why i'm doing this one so if you will see there when the user will click on this button so this should open see the final output there like that so this should be opening like that so what we will do we will create a user state there here we will use a user state hook so that's why i'm creating a separate component for that so that we can easily same component in everywhere so let's see the code so first of all we will create this user state that is is item open and second one is set item and after that here is the user state so let's also import our user state so let's copy this one and here we have to import this user state from react so here we will use the thirdly bracket and comma here so we have to import user state like this and here we are getting an error so first of all let's pass this key so key will be i and we have to also pass other properties also so other properties will be like this label will be d.label and icon image will be d.iconimage and link will be d.link and here what we need to do when our item is open we have to show them we have to show our children so here we will add this one and here add an operator so when the user will click on that button only then this children they will show and from that place we have to remove this absolute and all these things and we have to also remove this hidden and we don't need this now with over there and we have to also open and close our items so for that we will create a toggle item function like this one we have created a toggle function and when the user will call that function so this will store the opposite of that value like if this item is true so this will store false if this is false then this will store true so let's copy this function and call this on this onclick and let's save your code and see the output so here we are getting an error because we are using a user state hook and this is a server component so what we need to do so we need to convert this component in a use client so let's go to the code and here we will write use client like that and let's see the output again and our error is gone and on that output we are not getting our icon so let's go to the code again and if you will see there we are not passing our children here so to pass children we will pass our children like that here we will use p dot children and we have and we have passed our children and let's save your code and see the output so now you can see that we got our icon like that so now we don't need our hover effect like this one if you will see their final output so by default our arrow will be down but currently is open so what we need to do we need to make our arrow by default down and when our item will be open then we will show this up so let's go to the code again and from there we need to remove this property because we don't need this now and we don't also need to rotate this one so for now let's cut this rotate code from there and paste it there and let's save this so we got our down icon like that and on that arrow icon we will use these class names that is this x will be sm and transition all and when our item will be open so we will rotate it like this one so currently we are getting our arrow icon down but when i will click on that one like this so this should open like this but currently this is not looking good so what we need to do we don't need this hover effect so let's go to the code again and from there we need to remove this shadow and now let's see the output so now we are getting our item in a much better way and we are also getting some extra padding so first of all let's make our item in a right alignment so we will go to our mobile nav and here we have to remove this item center and now we got our items in a left alignment and now this is looking in a proper way like this but if you will notice there one thing we are not getting any animation there so for the animation we will use another library so that we can easily pass our animation with single line of code so let's go to the browser and search for auto animate and click on that ntm installation and copy the installation code from there and press ctrl j paste your command and the computer browser again copy your import code from there like this one and here we will import our use auto animate library there like this one and we have to use this auto animate in this single nav item so i will copy the example from there like this one and now comes our main part we need animation on that day when our condition will true so this will be hidden so this will show our hidden based on that condition so what we need to do we need to add a reference tier reference of our animation like this one and let's save your code and see the output and here now you can see that we got our animation like and here we have to also increase the size of our text so here we will write text days and we have to also reduce our gap so i will write there gap too and now this will look like this now this is looking good and now we have to add these buttons so let's go to the code again and what we will do we will copy the button code from there and we have to show our button in this white container and after that live so let's paste your code there and we have to remove this hidden from there add a flex and here we have to pass a flex call like that and we have to give a margin top of 4 and this will be the items center okay so here we have already given items center and for this register button we have to make it maximum width of 200 pixel and by default we will pass a width of full so let's save so let's save this and see the output so we'll get our button like this so now we have completed the ui for our nav icons but here one thing is left when the user will click on that button so we have to close this side nav so for that let's go to the code and we have to control it from our parent nav bar so for that here again we will create a one user state that with the name of its side menu open and set side menu and after that here we will create two functions first one is open side menu and second one is to close that side menu and on the first one we will pass true so if our condition will true then this will show our sidebar and on the second one we are passing a false so if our condition is false so we will close our side menu so first of all let's copy this open side menu function and we have to pass this on that on click on that on click like that and after that here we have to pass this close side menu on that my lab component so i will just copy it from there close side menu and let's pass it there but here we are getting an error because we haven't created a prop for that so let's go to that component and create a prop for this so add a curly bracket so add a curly bracket there and again add a curly bracket so we can get the type for that prop so here we will use the i function because here we will pass a function and on that we'll pass a void and after that we need this close function on that close icon so we will pass this on that on click and let's save this and now when i will click on that and one thing that i forward here i have to also copy this one and paste it there and add a curly bracket and add an operator and if this condition is true only then our navbar will show otherwise this won't show so let's save this one and when i will click on that menu icon so we got our sidebar open so this one is working perfectly but if you will see there we are not getting any animation so let's also add animation on that place so to add animation on that place here we will do the same that's what we have done for this single nav item so we need to just copy this one from that place and come to our navbar and add it like that and now we have to pass our reference so we are we are passing our condition so we are passing our condition on that day so here we will use a ref and on that ref we will pass this reference and let's save this and now you can see that we are getting a proper animation there so here we have successfully completed our drop down navbar like this one and this is also fully responsive and on the desktop this will look like this and on the mobile this will look like this one with proper animation and void effect now let's create this hero section so let's go to the code so let's go to the code and create this hero section so our navbar component is successfully completed so let's go to the page file and let's close this navbar now close all these files except page and now we will create our hero section for that hero section here we will create a one section tag and inside that we are passing a mxauto flex and maxfit will be 6xl flex column flex call reverse and gap2 padding4 padding bottom 12 so 12 means 48 pixel and transition all and on the mday screen we are passing a flex row so let's see the final output so if you will see there on the mday screen or more than mday we are getting flex row and if i will go to the mobile screen so our image is coming top and our text is on the bottom so that's why here we are using a flex call reverse and here we are passing a max width of 6xl so if i will go there so here our maximum width is 6xl and up to that here we are passing a max auto so with the help of max auto so our content will align in a center on x axis and inside that section first of all we will create this left section and after that that right section so let's come to the code and here we will just write left tip and for that left tip here we'll create one container that is flex flex column on the mobile device this will be the flex column and this will be the flex flex column items center and gap will be 6 padding top 8 text center so this will be the text center on mobile screens but on the mday screens this will be the text left like this one and on the mday we are also passing a width of 1x2 so if you will see there here we are passing a width of 50% of this tip and this b and after that here on the items and after that on the mday screens here we are passing a item start but on the mobile screens we are passing a items center and on the mday screens we are also giving a gap of 10 gap of 10 between these text and paragraph buttons and these images and on the mday screen we are also giving a padding top of 32 so here we are getting a semi space here on that place so we are getting a space with the help of this padding top 32 and after that simply we are just passing a on the mday screen text left because here we are passed a text center and inside that so first of all we will take our this heading so let's save this so here we are getting our title but if you will see the final output on the final output we are getting our title like this so what we will do here we will use another library to make our titles responsive i have also created a dedicated video on that topic i will give that video link on my description if you want to watch so let's go to the browser and search for search for react-wrap-balancer then go to their official website that is react-wrap-balancer and there you will find that how they are using so what we need to do first of all let's install this package and compare your code to press ctrl j and paste your command like that and after that import this balancer from react-wrap-balancer and minimize that terminal with the help of ctrl j and let's import and now what we need to do we need to wrap up our heading with this balancer so with the help of this balancer this will balance our heading and make our titles responsive so let's save this and now you can see that we got our titles like this one now we have to do it same for our paragraph so here i will also take my paragraph in balancer like this and here i have just given our text color of neutral and on the md screen we are passing a max width of 400 pixel and let's save this and see there we got our paragraph like this one and now we have to add a button so let's go to the code again and after that balancer here we will pass our button so this is our learn more button so on that button here we are just simply passing border black and when i will hover so we are passing a bg white and width fill and width fit rounded excel border 2 and bg black and on hover we are passing a bg white and padding x4 padding y2 text white transition all for the animation on hover we are passing a border black color and on hover we are also giving a so here we are giving a wrong we just have to pass a on hover we have to pass a bg black so let's save this and see the output so this will look like this and on hover we are also giving a x color of black with 0.9 opacity now we have to add these images so here i have imported all my images from my images folder like that and now what we need to do we need to store these images in a variable and after that we will map these images so here we will store these images in array like this one here i am passing this image after that this second image and after this this mid image and maker image and after this button here we will map our image like this one here i'm passing a simply flex and gap 2 but on the md we are passing a gap of 6 and here we are mapping our array and inside that we are passing a height of 5 width will be auto and up to that here we are passing a source of image and here is a simple alt of image on that we are passing a client image and when i will save my code and see the output so here you can see that we got our client images now let's create a right section so for our right container we don't have to do much we just have to add these two images so one image we will show on mobile screens this image we will show on mobile and on the md screen we will make this hidden and on the md screen we will show this image with the help of this block and by default this will be hidden and here we are importing our image from our images folder from like this one like this and when i will save my code so now you can see that we got our view image like this and this is also fully responsive if i will go to the mobile so now you can see that this is looking like this and we got our mobile view like this one and when i will open our menu sidebar when i will click on this one so this is also working and this is also working so here we have completed our intro section with drop down navigation now let's see how to deploy this application on virtual so before we deploy this application on virtual first of all we have to deploy this on our vd so let's go to the code and here we have to give our commit so for now here i'm just giving this first commit and click on that commit button and click on that publish branch and here you will get these two options like would you like to make your repository public or private so in that case i want to make my repository public so i will click on that button so this is successfully published my application on github so let's open on github so now you can see that we got our application on my github account so this is my github account that is "Oinsedzy" so you can also follow me on github and now it's time to deploy your application on virtual so let's search your virtual and i have already logged in on virtual so that's why here i'm getting these projects but if you are not already logged in with virtual so you can log in on virtual with your github account and after that here click on that add new button and click on that project and after that you can select your project like like in my case my project name is drop down navigation and click on that input button and simply click on that deploy button so now currently our application is deploying so this will take a few minutes like one or two minutes now our application is successfully deployed on virtual so let's click on that button so now you can see that we got our project live and let's also test it there so here we are getting our on whole effect there and let's also open it on mobile so this is also working so we are also getting a responsive ui on mobile like this one and when i will click on that button so this is also opening a mobile view or mobile sidebar like this one so now here we have successfully created and deployed our introduction section with drop down navigation and if you're new to my channel so you can also check out my other videos i have uploaded so many videos recently i have created this social media dashboard and this youtube sidebar clone and this weather application and so many applications and if you enjoyed this project so don't forget to like share and subscribe my channel for more content like this one until then i will see you in next one
