React Website using Styled Components and Smooth Scroll - Beginner Project Fully Responsive

yo what is good everyone so i'm back with another react website video and i spent a lot of time designing this particular website and let me just show you what we're going to be making today all right so first of all we got the auto looping video in the background with the green cool little text i don't even know what those things say to be honest but then we got the text in the center we got some button action and then we hover got a little icon change effect right there and there are typical now but this site is not the same as the previous videos i made this one actually has smooth scrolls so let me just show you that in action and it might lag because i'm recording but let's just see what happens so i'll click on a bounce boom scrolls right into place and a little hover green hover action and also got a whole little svg and then also if i were to go to the second option boom we got it scrolling down there and then we got a little services cards and i can actually hover a little hover action over here and these are just like svg icons in there and then i go to my sign up and then we can see that we have it like this and then also we got our footer here and then also check this out i click back on the home i just call this one dollar because i mean it's like money finance type looking sites and you click it and you can see that it goes back up and you can notice that when i scroll to i'm not clicking anything it highlights it right when it hits the essentially the top of this div you can't see because this one's dark but like right here once it gets the nav boom it hits it boom it changes like this and then you can see rinse and repeat even if you click on the footer the action right there even this button right there you got some smooth scroll and i put this one back like that and we could smooth scroll all day long but not just smooth scroll we're also going to use react router so you're like hey what if i want to link to another page well i got you here sign up this is just a button i made here and then links to a sign up form so this is just like a filler design i have just to show you what a separate page could be but again this could just be anything i just have that here because i mean why not and then if i want to go back to the home links back to it and then i can see we are back on our actual website and one thing i forgot to show you it is also completely responsive so let me just shrink it over here and a little sidebar action too let me show you that really quick so you can see you got a little cyber action i'll scroll down really quick show you the mobile responsive look first and then i'll show you this little sidebar action and then i will go back to the top i just have to scroll it and then let's click on this a new sidebar comes out i click on the about scrolls to it and then you guys can guess it does the exact same thing for all the other menu items we have here as well and then also if i want to link to the next page it goes to the sign up page then brings me back and just in case i'll inspect this for you to show you even smaller screens because my i think my laptop only does like 500 or something but we got like the moto g you can see here i can scroll through it and you can see it looks like this and then also sidebar action and we got the iphone 5s series out there see it like that and let's go to let's go to the galaxy fold which is like super skinny look at that 280 pixels and we can still see that everything's working fine and still looks nice and clean and then one last thing i forgot that you can't even really tell but if you didn't notice right right now you see the nav bar is black like it's all dark it's like essentially there's a color behind it so essentially if i go back to the top if you look closely you can see that now it's transparent it's really hard to tell but basically on scroll it's hard to see it but like you can see now the text gets covered it changes on scroll as well so i'm going to show you how i made all of this in this website and if you guys want to learn how i made it then be sure to watch this video all the way to the very end and also i did decide to leave this tutorial up for free on youtube but if you guys want to help support the channel so i continue making free videos like this i decided to put a small fee on the source code which i'll link in my new website that i created with gatsby in the description below you guys can check it out if you want to support your boy go ahead and you can go ahead and get the source code there but if not you can feel free to just watch the tutorial i'll show everything in here it's step by step so without further ado let's hop into vs code and let's get started cody alright so here i am on my terminal so go ahead and open up your terminal and then feel free to go to wherever you're locating your projects in i already have mine here so i'm gonna go ahead and type in npx space and then let's do create dash react dash app and then space and then this is simply the next word is the name of the application so for this i'll just call this one react website let's do smooth dash scroll and i put yt for youtube you can leave that off but that's just so i know exactly where my photos are in my files so i'm gonna go ahead and press enter and then once this decides to finish up i will see you on the other side all right so now that is finished so i'm gonna go ahead and cd and then just type in the name of my file so i named this one react dash website dash smooth dash scroll dash yt and now before i i do the yarn start if you don't have yarn it's probably gonna say npm start so before i actually do that i'm gonna type in code dot and this only works at least in my knowledge of vs code and you have to set this up if you haven't done this but basically say code space dot and then when i press enter this is automatically going to open up vs code for me now if you don't have this set up just do a quick google search and it shows you exactly how to set this up fairly quickly and if you can't get that to work just simply open up your vs code in the actual file we just created so here i am on vs code so let me just go ahead and rearrange my screens really quickly all right so now i just fixed up my screens a little bit so right here we're in vs code now or whatever code editor they're using and i'm going to go ahead and do command j and that's gonna open up my terminal if not you guys can go up to the top of your screen like right in this section just click on your terminal open that up too and then let me just drag this up a little bit and now i'm going to go ahead and simply type in yarn start now if you do not have yarn you're going to type an npm start but mine i have yarn so i'm just going to go ahead and say yarn space starts press enter and if i predicted i have this error that shows up every single time so i'm just going to copy this little skip equals true line right there and then on the root so right here right click and just click on new file and then you just have to type in dot env now i know if this doesn't pop up for you then you can just ignore this but in case it does you can go ahead and save this here and now i can just go ahead and type in yarn start then press enter and this should load up perfectly so let me just close this out and now you can see on the right side is loading and it shows the beautiful reacts logo spinning right there so let's go ahead and let me just close this file out and let's go to src and let's just start deleting some project files here so first let me get rid of setup test setup service work and logo so i'm gonna click on the bottom hold shift and click on logo so i can get rid of all three at one time it highlights it and just delete this move to the trash and then index.css i don't need this one and app.test i don't need it for this project move to trash index.js we can get rid of this bottom text here service worker index.css let's save it here in the app.js let's see we got the logo get rid of this save it here and then let's go let's see logos not the fonts let's just get rid of all this and just be like what's up all right see perfect all right and then the app.css let me just say command a get rid of all this and pretty much let's see what should we add here for now for now let's just do a little astrix and we're not going to really do anything in here because we're going to be using uh style components for literally the entire project budget for this section i'm just going to put box sizing border box and then let's just do margin zero and padding zero and let's just put the pawn family for now so not to go back but we have to actually install this with google fonts later but let's just do font family and i'm just going to use encode sans x banded and then just comma sans dash serif alright so nothing crazy and uh i don't think that's the default font but yeah let's keep it like this for now and then exit off here and now let's go ahead and let's get started creating our actual file so first things first let's create a components folder so i'm gonna go to src click on new folder and let's see let's do components and let's see let's do an images folder a pages and video while we're here and then after that we can go inside of them so let's do right click on the my bad the src click on new folder and let's create images and i'm going to show you guys everywhere how i got all the images and also the uh video too and then right click src again new folder and let's see what we got pages and then let's do right click again i can click and we got let's see we got video so technically it's a video but you get the point all right so now let's start messing with the actual components folder first all right so first things first let me right click this let's do a new folder here and let's just build out the entire project for right now so let's do footer and just press enter and that's a folder in itself and then let's go ahead and actually let me let me do this step by step i don't want to confuse you guys so let's let me delete the footer i'll do this component by component so that you guys don't go crazy so let me just right click delete footer folder and let's just do components new folder and let's just start off with the nav bar all right we go to top of the actual thing so again this is inside of the components folder and now in the nav bar we're going to create a new file and this one's going to call it index.js and this is where we're gonna store all of our jsx and you can see all of our actual content and then right click nav bar again and then type or you name this i named this one navbar elements elements dot and essentially this is where we're gonna store our stock components and in the index.js pretty much we can start writing out our code so let me show you this extension go to this little icon right here extensions type in es7 and make sure you have this installed if you don't life's gonna be really annoying because i'm gonna type super quickly when you have to actually don't need to if you have this extension so let me just show you now let me try to get rid of this close this out one second in order for me to close this like in and out that's command b on my uh keyboard so i'm gonna actually leave it up right now so you guys can see but pretty much here i am in the index.js of the navbar i'm gonna do r a f c e press enter and boom you see that it made the import animated arrow function and all i need to do now is just change this to just start typing nav bar and i'll just hit let's see let's put in here just putting that for now save and nothing is popping up because we haven't actually added anywhere so let's actually let's go ahead and just test this really quick let me go to app.js and let me get rid of this class on this and instead of what's up let's just straight up pass in the nav bar component and cool triggers you press enter it'll auto import for you sometimes it works sometimes it doesn't i don't really know why but then you can also do control space and then press enter and it also does it too so again sometimes it works sometimes it doesn't if it doesn't just manually type in import navbar from dot slash component slash nav bar and notice that it doesn't do slash index.js because it's looking for that file so if you were to name this anything besides nh.js it would have to add like another slash nav something whatever so that's why i have it named this so that it only has to do component slash the folder and then we just put a little slash close save it now boom all right cool so everything is working fine imports are looking good and we're gonna end up deleting this so it won't even matter but for now let's go back to our nap one let's just start styling this bad boy all right so let's see what we got i'm gonna go ahead and let's get rid of these divs and now we just have our empty return and what i want to do is actually put fragments because i don't want to have a bunch of divs in here so i'm just going to say little fragments instead and now i'm going to go ahead and this is how i'm going to do it because if with stock components it's really hard to just write out all the jsx and all the content because you won't be able to see it so what i'm going to do is actually do it essentially one to three maybe one to five components at a time or stock components then i'll go back and edit it so pretty much if you haven't used stock components before it's basically css kind of like sas except you can pass in properties and essentially i'll just show you once we start editing but first what i'm going to do is call this snap so i'm just going to say closing bracket or opening what i'm going you say nav and then close it out and then in here i'm going to have our nav bar container and for stock components i've seen multiple ways to name them again it's truly preference if unless you have people that you're working with that have a particular way of doing it then at the end of the day i mean if you understand your code and other people can then i think that was what always makes sense but here i'm just going to call this one my navbar container and then let's just close this out here and let me command b so you can see more of the actual code and then here let's see we got now the logo so i'm gonna say nav logo and then this one is actually going to be a link so let me add all the stuff afterwards but pretty much here i'm going to say dollar all right so let me just save this really quick and start editing the uh actual stock components you can see what the heck is going on all right so now here what i'm going to do is i'm going to go to our navbar elements now and the first we need to do is do import style comp and actually start from styled st cannot spell today components all right so now after do this command b now i'm going to say export cons because we have to say export since we have a different file if you were to do this directly in the index above the function you could just say const nav and then your styles but we gotta export it because it is in another file over here so i'm gonna say export cons and nav that's the thing i named it and then you say equal style dots and then this is where you let me close this up this is where you actually put what actual tag you want so i want to just be a nav tag and then i'm gonna put the back ticks so you do two backticks this is how they do install components and then pretty much you write all your properties here just like typical css so first thing is let's go ahead and let me let me put the background but let me just go back to it and eventually so let me just put back around let's just do just put black for now and then here let's do a height of 80 pixels i want the now to be 80 pixels tall i'm going to set a margin dash top of minus 80 pixels because i don't know what it does because that's when you'll see when we have the video background plus also when we start adding the react scroll i'm having an offset of minus 80. so it just ends up bouncing out and you're confused what do those words mean you'll you'll see once we get to that point and then let's do display flex and then i'm gonna make this justify content let's see center let's do a line items center size will be one ram position is going to be sticky top will be zero and then z index will be ten now cool little trick is actually the uh way you can write media queries so since we're already here might as well just add one instead of it's kind of like sas but basically you just write it nested inside of it so i just have to say at media screen and parentheses max with i'm going to set 960 pixels and then i can just say transition let's do 0.8 s all e's so that's essentially the nav will trigger on this screen size this transition here so that's basically media queries for that and then what else did we have we had the navbar container which again we created this one here so we have two more and then we can go ahead and save it and see what it looks like so now let's do export cons nav bar container i'm gonna say that equal to style dot div back ticks two of them and pretty much ready to display flex so typical css and those are just my content space between and then let's do a height of a pixels z index of one and let's make a width of a hundred percent and let's do padding let's do 0 24 pixels and then i want the max width to span only 1 100 pixels all right like this and then let's do the logo now this one's interesting all right so this one essentially is a link from react router and are actually going to be using both links from react router and react scroll so in case you don't know what i'm talking about essentially scroll react scroll links essentially package we're gonna install but that only works for linking and scrolling on this particular one page here but then with react router it links to actual different page like this is a different page so if you use react rather than you already know but react scroll there's certain things that are really complicated to implement so for this we have to actually do let's do export cons as nav logo which we named it again was what we named here for the dollar you see that guy right there and it's gonna be a style and instead of being like a normal dot whatever this is actually going to be the name of the the link literally so it's parentheses and i'm going to say link now i'm not just going to say link i'm going to say link and then i name this with a capital r for short for router because eventually we're going to use both react scroll and react router and i'm going to just show you really quick so before i add the actual css stuff in here normally when you import link you just say import curly brace link from react router dom now the problem is for this style components we're going to have both links except one of them is going to be imported from react scroll now you can see how this is an issue because you're like what in the world how does it know which one is which so a cool little hack you can do is you can basically have an alias so i can say link on react router as and then i put link or short for react router you could literally say link router whatever floats your boat whatever makes it easier for you to understand but i'd say link r for that and then short for a link scratch put link as link capital s filling scroll now we don't have scroll yet so let me just go highlight this command slash to uh comment that out so now you can see link has link r and let me just go better app i mean it's still aired and now this is going to know that it's a react router link and it'll navigate to a particular page and then let's see let's go ahead and just say color hashtag fff and then also let's say justify self colon flex starts and then let's do cursor pointer so i want a little mouse to show let's do font size 1.5 rem display flex then we're going to line the items to the center and then let's do a margin dash left of 24 pixels font weight is let's see font weight is bold and then text decoration will be none all right so let me just save that there and then let's go ahead and let's go back to the navbar so again this is the index.js and pretty much right now it's going to say not working because we actually have to import these into our app so in order to do that we can just say import curly brace and then the names of our style components this one's nav and then let's see we got navbar container and then we got nav logo and where are we importing this from we are importing this from the dot slash which is the same directory and then we say nav bar elements save it and then it is going to say style components is not found because guess what we did not install that so i'm going to say open up my terminal so command j and let's do see command c and if you don't have yarn again just do npm install whatever uh the packages so this one stock component so i'm just going to say yarn add if you don't have yarn just do npm install and in case just in case let me just bring this up really quick and in case you are completely lost you have no idea still just go i typed in stock components here's the docs you can do npm install stock bones here but i already have yarn so i'm gonna do yarn add and then i'm just gonna say style dash components component spelling right let's see and then once that decides to finish shouldn't be too long then we will have everything set up so let's go let me go back here now and while that's loading i have to bring my startup again so if you don't have yarn you just say npm start but i'm gonna say yarn start because i got yarn and let's see once that loads perfect all right we got the error which is great because we do not have react router because again we used a react router link so it's like whoa where is that coming from so let's do command b and in order to fix this what we need to do is go to our actual app.js file and then let me i'm going to app.js now so on our navbar and then what we need to do is let me see i'm going to import curly brace and it's browser router as router and then for now let me just import that and this is going to be from react router dom now if you've never used react router it's they have docs you can check it out too but it's it's fairly simple for the basic things you're doing it can get complex but for now we're just going to go with a simple and before i do anything let me do command j and then let's do command no control c to stop yarn or you can just click the plus sign but now i'm gonna do is yarn add and then let's see let me just bring up the dock so you can see it alright so here's the react docs router dock so again if you have npm installed boom there you go i got yarns i'm gonna say yarn add actually i like highlight that yarn add and then pretty much we're gonna say react dash router dash nah and then let's do yarn start so let me close this out and this thing is still going to give an error but what we can do now is take out this div and we can replace this with router save it and this should work so let's do command shift c check out the console and it's going to say there's no two value which is true so right now it's saying there's no two because in the actual let me go back the index.js yeah and there's a js for navbar nav logo is supposed to be a react writer link and just like a tags with the href equals their link like a equals oh not a href equals whatever in the a tag in react router you do two so you say two and let me just put slash for now and just save it now that air goes away and then if i were to put like uh let's see let's put h1 for now save it you can't see anything right now and the reason is because the actual color of this let's see let me take this this should be where is it at let's make this red and then save it here and i think i know why it's not showing let's do command shift c and let's check out the let's see click on this let me see that i even put in the um yeah the navbar is here close this back out you try and inspect i can't even see the color oh you need to change it out glass fold so it's easier and let's do command f and c dollar alright so now it's showing here now the reason why you can't see it i forgot to show you is because if we go here this has a margin top of negative 80. so now you can see let me remove that for now and then we'll actually keep that back all right okay there we go just making sure everything perfect now so now you can see the actual nav bar is sitting there all right so again if you didn't see what i did i just commented out the margin top minus 80. we won't need that right now but let's go ahead and let's finish up this navbar now so let's go ahead and underneath this nav logo we're gonna have to add in the uh mobile aka the let's see let me show you these little icon guys right here the bars so let's go ahead and let's i'm gonna call this one mobile icon so mobile camo casing so capital i icon like this and then inside of here we're going to pass in the fa bars so fa bars and these are going to be from react icons so the closing sub closing tag and then let's see underneath this mobile icon press enter let's do nav menu so this is essentially our wrapper or i guess you could say like the container for the actual menu items and then i'm gonna have my nav we're gonna call this nav item and then in here would be essentially the nav link so let's just do nav links and then this we're gonna say two equals two quotes abouts and instead of doing a slash we're doing about because i'm gonna have another div in my other component sections that have essentially an id with the bouts so that way it knows where to scroll on the actual page so like here i'm going to keep in mo about has this id where pretty much will scroll down to that section so now i can pretty much there's a bunch of other effects or properties let's say that are going to be on here but let's just keep this for now and then here's going to say about and then let me just save this we're going to run some errors on the main and mobile everything is undefined so first thing let's go ahead and go to navbar elements so again over here command b this and then let's go ahead and let's add some styling here so first thing is we have the mobile icons let's just say export cons mobile icon equal to style.div with some backticks here and pretty much i do not want this to be displayed on normal actual just desktop view only want it to be displayed at a particular breakpoint so i'm going to say at media scrolls you can see that media screen and we have max with of 768 pixels and then we're gonna have display to be block position absolutes we'll have the top to be zero let's see let's do rights to be zero and then trans form will be translates and inside of these parentheses would be minus 100 percent comma 60 this just centers it centers it and then let's do font size of 1.8 rem again ram by default is um 16 pixels and then cursor pointer and then underneath this one we have the f8 bars but that is just a icon so not to worry about that one and then let's do nav menu so let's do export const nav menu equal to style dot and this is again unordered list so i'm gonna say back ticks then i say display i want to flex these so display flex here align items to be center list style i don't want it to have anything so none text align will be center and then margin dash right will be minus 22 pixels now the reason i did this is because i have that button on the right over here and like it's like slightly off because there's like some outside padding or margin on this so like i just did that so it makes it look more centered again i mean it's just a little preference but you can play around with that and then let's do some media queries let's do at media screen and max width is what 768 pixels yes right there and then i don't want this to display so i'm gonna say explain none so we have the nav menu wheels we got the nav item this one's easy let's just say export cons now item equals to style dot li with the backtick action going with just have a height make sure they're 80 pixels so that's the same height of my nav bar and then let's see we got the links so let's do export const nav links equals to styled and now this one this is going to be the react scroll link so now i'm going to say parentheses just like we did react router link except now we're going to say link x or s my bad but the back ticks because you remember from earlier react router i named it link r so up here so now we can actually go up to the top and just command slash this to uncomment it so now we have react scroll link as link s so type you can say link scroll or i don't even scroll scroll like that whatever easy i just put s because i mean i can tell the difference there and then inside here let's just start adding so i'm gonna make the color of them white so hashtag fff not that what is that okay let's see display to b flex i'm going to align items to be center text decoration to be none padding to be zero one rem and let's set a height of a hundred percent and then cursor to be pointer and then this is actually an active class i'm gonna say and dot active that's true i'm gonna say border dash bottom to be the three pixel solid zero one b f seven one so that just whenever it's scrolled or act essentially highlighting whatever link you clicked on back on here see how it's green that's essentially what we just did with the little border action right there so now let's go ahead and try this back so save that here let's go back to the index.js file and then let's import these at the top first so let's do let's see we got mobile icon fa bar is not an actual style component it's just an icon so i didn't have to import it there let's do nav menu now item map links now we're gonna have an error because the fa bars is going to be not defined and the reason is because it's actually a react icon so let's go ahead and we're gonna go under react here at the top i'm gonna say imports curly brace fa bars from and that's gonna be react dash icon fa and now let me actually bring the docs you can see this so here i am on react icons if you guys are following me already know but basically instead of having to import particular icon libraries or cns you can just sort of get react icons you have access to like a bunch so why would you say like bars literally we got look at all these bars right here all right so let me just do open up my terminal again and let's do let me do ctrl c close it out i'm just gonna say let me just bring it back so you can see in case you have npm you guys my npmers out here you know we'll do this line right here but with yarn we go yarn add react dash icons press enter and then also you can see here on the right like the usage so essentially exactly what i did up here import the name of the icon and curly braces from react dash icon slash the first two letters of the icon so there's gonna be other ones called like md or ai or whatever you just put slash whatever that is so let's do yarn start now let me go back to the sites and let's see if everything is working properly so let me just close this out it should be because i installed everything so let me see once this loads then i say this yeah i need to save that now let's refresh and let's see react scroll oh yeah i forgot that one so again react scroll was from the stock components we just had it here so i'm back on the navbar component in the xjs let me bring up react scroll so here i am react scroll got a pretty decent wiki downloads or weekly downloads here or is it that's right there all right so this one's pretty simple too open terminal control c hold it on let's just say yarn add react dash scroll now if you don't have yarn you would simply say npm and let's hit enter and that's going to be done soon so let me just close this out and let's go back to our actual folder and let me see refresh actually forgot to put yarn start again let's do yarn start so command j open internal yarn start there let's see looks like it's refreshing so let's see if our actual bar is showing up so right now it is not because i believe we have to have a little toggle action going on so that's technically let's see you see the about okay so we got something there but that's pretty much all we technically created right now is about i have to add some functions that we'll create later to essentially toggle the nav icons you can see it but for now let's just keep it like this and then let's see all right actually let's go to um the elements again i forgot to add a color so we have to nab our elements and go down to mobile icon right here and then go under the cursor pointer and make sure you have the color that's why it wasn't visible because you can't see it alright so now we're good we're good now with the actual little little bar action going on here so right now we click it nothing happens because we don't have the uh the function created but let's finish up this nav now and add the rest of the actual elements here all right so let's go ahead and create the rest of the uh the nav links so let's let me just show you right now we got abouts which is not enough so actually a simple trick we could do is just straight up copy this so let's highlight the nav item within that links command c press enter and then now we have the discover i think i put let me see if i put my um about discover so let's put here discover to discover the id and then under nav item again the second one command victory v page down one now we have services and then sign up so let me do one more time press enter and then now we can edit these so let's do in the about services to services and then we get sign up sign up and then to i just put sign up here and then if i save this let's go and check out cool okay so we got a little nav links right there and then underneath this nav menu i'm gonna have a little button so i'm gonna call this nav btn so this is essentially the div wrapping the button and then inside here is going to be the actual react router link so let's just do nav btn link so this two equals to quotes a slash and then the path essentially i'm going to say route here is signing or sign in then i'm just close this out and then i'm going to say sign in and the save on here is s is not going to work let's go to our navbar element so again here let's let me get rid of that red first we're gonna put the red on the nav logo if you have red on there then just erase it because i don't want that let's close it here and let's actually make it um color hashtag or colon fff for now but now let's go to the bottom and let's start adding in our additional elements so this one is basically we have the nav btn link and then the nav btn so let's do the nav v10 first so exports cons nav btn so the equal to styled dot should call this nav and then back ticks and then inside of here i'm going to say display flex align items to the center then under here i'm going to say add media screen and let's do max with 768 pixels and just want to display to be none and then underneath here let's do the nav btn link so i'm going to say exports cons nav btn link to the equal to style parentheses again this one's going to be the link capital r for um the react router link then i have the back ticks then i'm gonna have the border i just put border radius of just 50. i just want to make sure it's rounded and let's go you can see under here let's do background to be let's see hashtag 0 1 b f71 let's do white space that was going to be no wrap let's do padding 10 pixels by 22 pixels color will be hashtag 0 0 let's do font size 2b 16 pixels outline to be none border is none and then cursor pointer and then i have transition all 0.2 s e's dash in dash outs and then text decorations mean none and then underneath here we're gonna have the hover so and colon hover transition will be all 0.2 s ease in dash out background will be hashtag fff and then the color will be zero one zero six zero six save it and then let's go back to our index.js let's import these at the top so let's do nav btn comma and then btn link boom okay so now we got our navbar so it's in terms of like the design the style it's pretty much there then we just have to add a bunch of little details that essentially allow us to do a little clicking action and everything else but in terms of the actual styling part we're pretty much done there so now let's go and actually start adding some state action and let's see what i want to actually add on here so let's actually keep that until the uh until we're done because right now it's really actually yeah we can do the let me see if we should do the toggle yeah let me just keep that for now because right now it's um it's really hard to tell so let's just do command b let's do something easy so that you can visually see everything and then from there we can um start creating the actual dip sections later but let's create a sidebar now because i want to add a little toggle effect on the nav bar since we're here already so let's do components new folder call this one sidebar i mean sidebar top bar really doesn't matter but um let's do new file inside the sidebar index.js and then you file let's do sidebar elements dot js and that's just the way i'm naming i've seen other people do like sidebar dot elements.js i mean just a preference but here let's go to index.js and let's do r a f c e little hack enter and let's call this side bar now here let's go ahead and add in our style components so let me click in here let me come in but you can see this i'm going to call this one the sidebar container now inside of the sidebar container i want to have my icon so i'm just going to call this one icon and then inside the icon i'm going to have a close icon with a self closing tag and let's actually let's start adding the styles now so let's go to sidebar elements and let's see what we got to add here so first thing we go back to the top we have to import styled sty from styled components and then let's see what we got here so also i'm going to use this icon to time so import curly brace fa times and this essentially is the x symbol closing and it's going to be from react dash icon f a now i'm going to say export cons sidebar container you know if i save this i yeah we haven't imported this yet so you really can't see anything but export sidebar is equal to style dot aside with the back ticks and basically i'm gonna say position will be fixed z index is gonna be 999 because i want it to be above everything so no matter where i click it's gonna always be there i'm gonna have a width of a hundred percent what happened height of a hundred percent i don't know why you're doing that and let's do background will be hashtag 0d0d0d let's do display grid align item center top zero left zero transition zero point three s e's dash in dash outs and then let's add in some little properties on here so right now let's just do opacity and let's do let's see if i should put this yeah i'll just do it for your analysis we already basically install components you can do if else statements essentially ternary operators within your stock component so that it essentially will display true or false a different property so the way you do it you pretty much do dollar sign curly brace and then parenthesis curly brace and then inside of here you say is open and then after the first curly brace then the parenthesis but before the last curly brace you do arrow function here and then parentheses and then whatever you just name so i said is open essentially stating if the sidebar is actually there or not and then with the ternaries you pretty much it's the same as if else but basically it is open question mark and what this means it is open is true meaning i clicked on the icon then i want to display a hundred percent where the positioning essentially this is 100 c like you basically can see it and then you do a colon so you say or else if is open is not true i just want it to be zero meaning it's invisible aka you can't see it and then also the top this is the way i did the little drop down effect in case you're wondering right now you see here that part that is what we're writing right now so essentially it's like minus a hundred percent so basically top with the exact same thing dollar sign currently brace parenthesis curly brace and then we're going to say is open again and then the arrow function get rid of this then parentheses is open if that is true let me say set the top position to zero colon else to be minus one hundred percent then we got these semicolon and then we have the z index of 999 which actually i already have that okay perfect and then underneath the sidebar container let's do export cons close icon equal to style of fa times which is the x and then we see why is it there and then we can basically just say color to be hashtag f this is the only icon there and then we just have the icon left so let's just simply put this is just going to position it in the right place let's just say export cons that's what i say icon equals two style dot div with the back ticks what happened then pretty much we're gonna say position absolutes scroll up top sd 1.2 ram right let me do 1.5 ram let's do background transparent font size to be 2 ram cursor pointer outline is none so right now nothing is showing up because you can't see anything but eventually let me actually do this thing see if i can do something so you can see this it's gonna have that js let me just pass in sidebar for right now close it out and let's see perfect okay so now let's go back to sidebar index.js command b and we got imports these from the top so essentially what i'm going to do is just import these just like we did in the uh nav bar so curly brace let's do sidebar container comma icon close icon from code dot slash sidebar element could have been shipped elements but it doesn't matter and now can i name this probably yeah it should be an s so rename this sidebar element to elements just so that we can make sure on the same page and then this would just be elements that's just a file preference it really doesn't matter but the thing is now what's happening is let me take off the um let me uncomment these for now and then let me just show you what's happening so if i just say like top zero let's see now you can see it actually shows up so let's do let's just keep that like that for now you can see what the heck's going on but um don't have an unsafe file is this okay let's see what that oh index sidebar oh yeah so go back to sidebar index.js this should be just one s just save that now pretty much we need to recreate the nav menu which was here so let's just go here and let's just start doing that so let's go under icon i'm going to call this one sidebar wrapper and then in here i'm going to have the sidebar menu and then here i'm going to have the sidebar link now before we go see in here let's just say about now let's put two equals two about and again these are react scroll links not router so they're scrolling and then basically let me just copy and paste these links now we have a bunch of properties in between these we'll go back and do it later but for now let's do like this so you can see what's going on so we got about discover services and sign up so for the second one let's just do um yeah let's discover change the two to discover and then let's do uh services change this one to services and then let's do um sign up and then let's do sign up not sing up what is that all right perfect and then under let's just finish off this and then we can add all the styles so let's see i say that now i should run an error yeah perfect okay so let's see menu wrap under here so underneath the sidebar menu but still we have two wrap and container above it i'm gonna create a div i'm just gonna call this side uh side btn wrap this is just so i can like center my own button if you just left it by itself it you couldn't do it and then let's do um sidebar routes where's this at and then inside here it's going to say sign up i just say sign in yeah i think i put the wrong i'll change that at the end this should say sign in but um i mean it doesn't really matter it's literally just text right here but say sign in and then you say two equals to code slash this time because it's a rack router link to sign in so now let's save this and then let's go to our sidebar elements tab so again it's right here leave these uh uncommon for now so you can actually see what's going on and then let's do let's see what we got first wrapper so let's just say export cons sidebar wrapper equal to style.div let's just make the um the color hashtag ff for now and let's see export cons sidebar link equal to styled of blink s so this is a react scroll okay we can see what's going on all right so in here let's do display flex and then let's do uh align item center justify content this one's gonna be center here let's do font size 1.5 rem text decoration to be none list what am i saying this style two oh two okay let's see let's start to be none transition to be 0.2 s easing out text decoration and if you're wondering this is a bunch of css yes i know i had to build this myself but pretty much uh once we get finished with majority of the style components it's gonna be way more react stuff after but this is the tedious part and then let's do color hashtag fff and then cursor pointer and then i wanna hover action so basically the way you do it you just n colon hover color to be hashtag zero one b f seven one and then transition to be 0.2 e's dash in dash out so got the sidebar link now i just need the let's see side btn wrap so i'm gonna do export const side btn wrap equal to styled dot div with the backticks display flex and justify content to be centered and then underneath there let's do sidebar route so let's do export costs i think this should be the last one sidebar route equal to style of the link r says react router link and why is my screen working and let's just do border radius 50 pixels background i want this to be hashtag 0 1 bf71 and then let's do white dash space no wrap padding 16 pixels by 64 pixels color 2b hashtag 010600 font size to be 16 pixels outline to be none border to be none and cursor pointer and see what else we got transition to be all 0.2 s e's dash in dash out and then text decoration to be none and then lastly we got and colon hover transition to be all 0.2 s e's dashing dash out because this background to be hashtag ffff with the color of 010606 right here and before we do continue make sure we go to the top and let's do under here we have imports we have imports link as link s from react dash scroll and then import curly brace link as link r from react dash router dom and then we go we'll have okay so that okay then do command b let me close up now go back to the index.js in sidebar let's import all these so we got sidebar wrapper sidebar menu sidebar link side btn wrap and sidebar routes and sidebar menu is not exported so it looks like i didn't do sidebar menu so let me just make sure i have everything go back to my elements that i put in here yeah route btn wrap so let me i think i missed it so basically let's do it let's see where i want to put this cycle wrapper so go under sidebar wrapper and then just go export const sidebar menu so that you go to style.ul and then pretty much i'm going to say display grid grid template column i can't believe i forgot the most important piece one fr and then grid template rows to repeat six what will happen six comma eighty pixels and heights and then i want to do is um text align is going to be center then here we have at media screen and max width is going to be 4 80 pixels i just put that from a break point you can change it if you want to and then i'm going to say grid template rows to be repeat six comma 60 pixels so it's just like a shorter height on mobile and boom check it out we got our sidebar so it doesn't look as clean as the original because i have a different uh font but you guys get the point it's basically the same thing so right now what's happening here is this where's this nav menu sure i can find it these are the grid these are spanning essentially 80 pixels if i put like 180 you can see they go crazy and then you got the button here so pretty much you know typical here and what we could do now is actually go and add some functions to our actual application so that we can actually get it to toggle the mobile icon so let's go ahead and let me erase this top zero let me click here command slash save it so it disappears again and then let's go back to cool trick i want to show you if you go up here make sure you click open editors you can just exit off that closes all of them and the same thing here if you have a bunch of files open but let's go to navbar index.js and now what i want to do is actually edit the let's see i want to create this this on click toggle function basically to pretty much get rid of this stuff here so right now everything we have is inside of the right now it's inside of the app.js but i want to move that stuff to my pages so go over to pages right click new file and then just click index.js so this is actually going to be the home page and then basically going to say r-a-f-c-e and let's change this to home and pretty much what we could do is just let's just erase these um this here and we can just import this so let's just say sidebar and it automatically imports and then also let's just do that bar and then we can just save it here then go let's go back to app.js and technically let's just go ahead and erase this and let me just put it home for now it's sure see if everything is working fine so still works and then if i were to do this twice okay perfect all right so we're looking like everything's working we can get rid of these imports at the top with the sidebar nav bar here and eventually we're gonna update this but for now let's keep like this and then i want to go to the uh nav bar and i want to create our actual where's that here i want to create a function so pretty much that will toggle whenever we click on this mobile icon the actual bar so let's see and show them on the right spot so here let's do this so right now we actually have to create this function and where i'm going to create this is actually on the um on the home page so let's go back let's go to index.js and right now let me go ahead and let's import react use date because we're going to use some state now so finally we're doing some react stuff and it's react hook action and then basically inside of here we're just going to say cons and then use the array so the straight brackets and if you remember from the uh i'll show you somewhere elements i have that as open right here these properties you see these we're actually going to use them now in here so simply the first value is this name of your state so let's say is open and then the next is a function that's updating it so i'm gonna say set uh is it yes set capital is is open so you basically just say set whatever you named it and then let's say equal to you state and currently state is false so now i'm going to create a function that is going to update the states and pretty much change it to the reverse so when sort here i'm going to say cons and i'm going to call this function toggle so that equal to an arrow function so parenthesis arrow and pretty much we're going to just say set is open and then in parentheses i'm going to say the exclamation mark is open so this is basically just saying set the state to go from false to true then back to false true false true false and pretty much just toggling it now in order for this to work we won't have to pass this inside so let's say is open equals two is open and then also i need to pass in toggle on the sidebar to toggle i should have put an equal sign here and then for the nav bar i have to pass in toggle because it's the nav bar so i'm going to save this here and right now when i click it nothing happens and you're like why is that not happening and the reason is because we actually haven't passed this into the actual nav bar we just put it here saying it can accept this value but we need to pass this into [Music] so go back to navbar index.js mobile icon i'm going to say on click i want to trigger toggle and then pretty much let's save this here say toggle is undefined so we need to do is to structure this above so right here inside of the parentheses the nav bar curly brace and then we're going to say toggle so we're passing this value in here and if i did everything properly let's see right now it's not actually clicking so let's do command shift see see what's happening i think um make sure i press everything but yeah we need to still pass in stuff onto the sidebar where is that index.js let's go here sidebar container we need to make sure we have these open value passed in here i also want to have an on click so that we can trigger the toggle as well so that when you click on like any part of the um sidebar like really like here it still closes regardless and then icon i want that to have the on click because obviously that's where the actual x is and then let's just destruct this for now let's see if this works first let's say is open and then we got toggle now let's see if this works now perfect okay okay we got some toggle action and then i click anywhere so right now this part works the only thing is now if i click on like the menu you can see it doesn't work or even here that does but that's because it's just a page change but pretty much what you need to do now is add on click toggle to basically all of the uh nav links so let's just click here copy this and let's go inside of this just paste and then paste here paste here paste here save it and let's click it now okay awesome and let's make sure every link is working and then even if i click down here it still closes okay so pretty much we're doing pretty good so far with the sidebar and the nav bar let's start working on the hero section so again that one is the this right here so let's go and go to components create a new folder i'm going to call this one hero section and here we have a new file call this index.js and then i'm going to have a new file called this uh hero elements.js i'm not going to put here a section that's just too much give me so one can't even read it and then here this one's not too bad it's pretty short but what just happened okay command b closes out now i want to do r a f c e and let's just call this oh my oh my bad command a let me make sure i'm in the wrong file it should be in the index.js not the elements page so in the js hero section i'm going to rafce hero change that there actually let's put hero section so let me add our first style components let me just call this i'm going to call this one hero container and then i'm going to set the id equals to home because this is the home container but technically i i removed the home i used to have one earlier in my previous version but since we're technically this is the hero section i don't actually need this let me actually just delete this but ideally if you had um i hear a section you wanted the scroll to you put the id of um whatever you name it so mine's home but for now just leave that there and then we'll have hero bg which is just the background and then this one is going to be called video bg and since we're here might as well uh just put in the the properties let's say auto play loop it's muted in case it has volume src is going to be equal to curly brace video and i'm going to get the video i'll show you where i got mine later but pretty much i just named it this and then type equals to slash video slash mp4 and then i just close this and then let's simply save this for now and let me actually go back to the original one and then let's see let's go to the hero elements tab let's import styled from style components and then pretty much let's see what do i want to add here so let's just say exports const and then hero container i'm going to say equal to style.div with the backticks the background is going to be hashtag 0c0c0c display is going to be flex justify content will be center then we have let's see align dash items center and looks like i forgot the s here okay and then let's do padding to be 0 30 pixels heights will be 800 pixels position is relative and z index is going to be one now we're gonna add additional stuff here but it's like quite long so i'm gonna leave that off till later but let me just leave a comment add b4 styles and let's see you've got the hero bg next so let's just call this exports const hero bg equals to style dot div and position absolute top zero right zero bottom zero and then left zero now the width of a hundred percent was this then we got the heights of a hundred percent and that overflow is hidden and what did i mess up this time export cons equals did i miss something is it because of this comment here no in the world did i spell something wrong export cons here obvious sty dot div back dicks yeah that's so weird i don't know why it's doing that the heck unless i'm blind right now i can't see why it's doing that that's just strange either let me try something else export cons video bg equals to all right something's not right yes i don't know why my vs code is doing that with the text that's so weird i don't see anything wrong so i'm just going to continue and see what happens after so let's do xbox video styled dot video because it's a video and then we're just going to say width of a hundred percent let's do um of 100 and then dash o dash object fits why did it do that with the double dash i want this to be cover and then let's do object dash fit to be covered and then background just to be hashtag 2 3 2 8 3 4. and so far that doesn't make sense why these aren't being highlighted that seems like some error i also had to save it okay that's so weird i hadn't seen that before but now what we can do is let's import this into our our page our index.js page so go back to pages index.js and let me go right under the nav bar hero section press enter auto imports and then save it here if it doesn't auto import just mainly type it up and then let's go back to our index.js and now we need to actually add this import so let's see what we got here so first thing is the uh let's do the video so i just said import and just name the cap of the video from and then the files essentially in the videos folder which we don't even have yet so i'm gonna say dot dot slash and then dot that slash get out of there and then you can see we can go down to videos so press enter here and then the video i'm going to name it video dot mp4 so right now this doesn't exist but i will show you how to get that and then let's do um imports curly brace let's do hero container hero bg video beat oh no video bg from dot slash hero elements so when i save this now it's going to say can i find video so let me show you the site i used to get this so here's a website that i use called pixels video and i just typed in um i don't even remember what i typed that i think like let's see data yep there we go data click it and then just go ahead and just choose whichever size you want smaller is one load it won't make it lag as much so that's just key and then just download this file and then drag it over into your project and then we can rename it so let me do that really quick and pretty much let me go ahead and let me find my file real quick so here i'm going to bring this command b let me scroll this up here and let me get my video and let's drag this into videos now most likely when you download this from pixel is going to be crazy so you just right click hit rename and then just rename it to video to mp4 and then you can see we got the video plane look at that that's clean right they also got the nav looks pretty cool without any text but now let's finish up the text now so i'm going to command b now under the um hero bg i'm going to do hero content and then underneath there i'm going to do here i'll just call this one here h1 virtual banking made easy and then here's called this one hero p for just p tag or shorts and then enter say sign up for a new account today and receive 250 dollars in credits towards your next payment save that that's not defined and uh let's see we only have like two more let me just finish this off so under the hero p let's do hero btn wrapper and then underneath here i'm gonna this is gonna be a button that we haven't created yet so let's just do it now might as well have it here button two equals to sign up and then uh we'll keep it like this for now and then i'm going to say get started and then i have this function essentially a hover that pretty much will showcase the arrow forward icon else the [Music] arrow right there's that and they're pretty much done with this section and you're wondering what is this this line right here this is pretty much the um you see this little arrow it's like a forward one and then it switches this is the way i did it i'm sure there's a different way but this is like the easiest way to do it and then let's just go ahead and start styling this stuff so let's go to let's go to our hero elements so right here and let's go underneath this let's do export const hero contents equals to stop dot div let's do z index of three let's do max with of 200 pixels position absolute padding 8 pixels by 24 pixels display is flex deflex direction is column and align items is center and then let's do export const hero h1 equals to style dot h1 oh what's going on and this is going to be color hashtag fff for whites font size will be 48 pixels text align is center and then underneath there i have media queries so at media screen and scroll up and max width of 768 pixels font size is 40 pixels at media screen and max width of 480 pixels fonts size is 32 pixels and then let's go export const hero p is equal to style.p the ticks are here then i say margin dash top 24 pixels color hashtag fff font size 24 pixels text align is center max width will be 600 pixels and that should be a colon okay oh these are media queries not bad i forgot the media and i think they're the same so let me just copy these up here from the h1 paste them here and then just change the font size from 40 to 24 and then from 32 to 18 and then we got we're almost there export const hero btn wrapper equals to style dot div with the back takes margin dash top of 32 pixels display flex flex direction column and line items to be center then i say export cons arrow forward let's name it that one and this is going to be styled of the md arrow forward which is the react icon i want the margin left to be 8 pixels font size to be 20 pixels we have export cons arrow writes is equal to style dot when i start saw that okay md keyboard arrow rights the back ticks what happened here and then we just copy this and then i need to go to the top and then i need to import this so say imports md keyboard arrow right and then md arrow forward from react dash icon slash md like this and then let's go back to the hero section so again hero section index.js and then we simply just need to import this so let's add it here so what we got we got hero content hero h1 hero p tag hero ptn wrapper oh no not button and see arrow forward arrow right so when i save this now we have multiple things right now so we have hover so let's use state so let's just add that for now let's do um use state and it's just simple you state const hover with the brackets then set hover equal to use state of false let me say const on hover equal to the parentheses equal to the curly braces it says set hover of hover and on hover function needs to be on the button so now i want to do basically on mouse enter equals to curly brace on hover and then on mouse leave is equal to curly brace on hover just want to save that and you can't see anything yet because guess what the button we haven't created this so essentially let me just exit off all this stuff go to components right click new file and then just call this button element.js now this essentially is like you can pretty much reuse this anywhere that it fits but the reason i created so many different buttons in the previous like navbars and everything is because they're different links this one is essentially going to be a react scroll link by default but in the nav you can see like i had both these like a react scroll links right here but this one's a react router link so i had to make a new style to make that work for that way and now let's just do import styled from style components actually spell that right let me close that for a second i also want to import link from react dash scroll and then i will say export cons button is equal to styled of link and i've got the back ticks here and then basically gonna say border radius 50 pixels background is going to be and this is where it gets pretty fancy and this is how we can add a bunch of cool little cover animations everything without having to do it with a new style every time so pretty much gonna do a dollar sign curly brace princessy curly brace i'm gonna call this one primary set this arrow function to parentheses i'm basically going to say primary if that's true i want to set hashtag 0 1 b f71 else i'm going to set the color if it's false to hashtag zero one zero six zero six and then pretty much that's the end of that and then we have whites the white space no wrap and then let's do padding the dollar sign curly brace from the c curly brace i'm gonna say big just like if it's a big button and then parentheses say big if it's true i want the size to be 14 pixels by 48 pixels i also want to be 12 pixels by 30 pixels and then under padding i'm going to have color dollar sign curly braids we're going to see curly brace i'm going to say dark and then basically print is going to say dark if the dark is the color of text is true i want to display hashtag 010606 i also want to display fff for white and then okay let's do this let's do font size equal to dollar sign color branch parenthesis curly brace we say font big and then the arrow function here and parentheses font big if that is true i'm going to set that font size to 20 pixels else i'm going to set to 16 pixels and then outline is going to be none border is none cursor cursor pointer display is flex justify content justify content center and then align items is center and transition is all 0.2 s e's and dash out and then i have a media not media hover so and call in hover and then we're going to copy the transition and then we need a background and if the telling i just copy this let me just copy this background here and basically i just want to replace the position actually now let's erase let's erase these right here and then right before the question mark i'm going to say fff colon then this this right here so let's save this here command b go back to the index.js go to the top and let's import curly brace button dot dot slash button element save it and this currently is working so we got the text we got this and we got our hover action so now if i want to change the value of this button without having to do much i can just go into this button here so like here i'm still inside the button opening tag we're gonna say let's do um primary equals to true let's do dark equals to true and save that for now and boom i just changed the color just like that and you can see you got the little icon look at that right there so we're pretty much we're not 100 done because we still have to add the um smooth scroll effects too but i'm gonna wait until we have more content for that to actually uh do something but for the current oh yeah one last thing i forgot i forgot to tell you if we go back to the hero elements so you see right now it's kind of like like super super bright but then on the main one it's like a little darker you see the difference it's way different right so what i'm going to do is actually let me see i can change this so pretty much here under the z index i can erase this before stars comment let me say colon before curly brace and now i'm going to say content content here with the empty quotes and then position is absolute top will be 0 left will be zero rights will be zero and then bottom will be zero and then the background we're gonna do is basically linear dash gradients and then pretty much i'm going to say 180 degrees rgb a parenthesis zero comma zero comma zero comma zero point two and then zero percent comma then rgb a parenthesis zero comma zero comma zero comma zero point six and then out of that hundred percent and then i'm gonna put a let me make sure i can see closing parentheses and let me make sure that everything right i need to spread this out more because it's harder to see it but we got let's see you make sure that everything this should not have a parenthesis okay there now that works comma and then i have linear dash gradient of 180 degrees comma rgb a parenthesis zero comma zero comma zero comma zero point two outside this parentheses 0 percents and then comma transparent 100 then z dash index of 2. let me save that and i can see it is way way way darker and looks way different than the original one and also notice the um the positioning looks a little off right so what i did is we go back to our navbar navbar elements go to the top let's uncover this margin top 80 pixels and now we got it looking like this so now this is pretty much what we got going on and where he might here let's um since we're here let's just import the google font so let me just go in here and show you so here i just let me see if i can click i just typed in google fonts and code sans but i don't think that's the one i wanted so let me just go here let's do encode sans expanded here we go so just click this one i took the 400 and the 700 i took the link here and then i went to the public file index html and i just pasted it above the title so it's easy to know where i'm at and that should done it because we already added that as a font at the top so now it's basically identical awesome all right let me see here perfect all right cool so now let's see what we can actually create now let's see let me close out everything first so let's go ahead and let's create our info sections now so i'm gonna go to components right click new folder i'm gonna call this info section let me close this probably really quick and then in the info folder let's do a new file let's just call this index.js and then also a new file and let's call this info let's just see if i should call this info elements or just info yeah i think that works better all right what happened i missed click info elements.js and then also we have a data file here so i'm going to call this one just data dot js and in the index.js let's go ahead and create our react app again so r a f c e press enter this is called this info section i really couldn't come up with a good name for this besides that but um if you have a better one comment below feel free to let me know and what i'm referring to is um like these sections right here i don't know what i don't know what to like call it that shorter like one word or so because the hero's like the main one here but you could say main i guess but technically if you use it on another page would that still be made who knows whatever but let's go ahead and just start adding in our code here so first thing is let's get rid of this div here so let me just put a fragment and then let's do um in actually now let's do info container and i'm actually going to pass an id here now because this is where we start passing in values and this is where it matters all right so now i'm gonna have an info wrapper and then let's do um info row and then in the info row we're going to have a column so i'm going to say column one and then let's close this out and then the column one we're gonna have a text wrapper and this one's basically going to say the top line which is the um the the technically literally the top line we just put top line for now and uh let's see let me just put these so that we can see the filler for now and let's do heading split heading and then let's just do um sub t title here subtitle and then let's do uh btn wrap and then inside here and have the button so let's do button press enter because this is the react scroll button we just created from button elements so you can see it imported at the top i want this to equal to home let me um close that for now and then let's just put a button for now let's save this and now let's go and let's move the um info section into the index.js and the only issues we have to pass the data but let's just do this for now so we can see that errors so info section press enter and let me save this now go back to the info section we got a bunch of stuff so let's go to um info elements import styled from styled components let me drag this over so you can see what did we forget all right so now let's do export cons info container equal to style.div with the backticks the color is going to be hashtag fff background is going to be dollar sign curly braids print the c curly brace light bg and then let's do um light bg close out that's true let's do hashtag f9f9f9 else i want to do 010606 and under here let's do at media screen and max width of 768 pixels and i want to set the padding to 100 pixels by zero and then i'm going to do let's see we got info wrapper so export cons info wrapper it's equal to style dot div with the back ticks let's say display grid z index of one height is 860 pixels width is a hundred percent what happened to that max width is um one one zero zero pixels margin dash right is auto margin dash left is auto padding is 0 24 pixels and justify cons and justify content is center and then see our info rows let's export cons info row equal to s style dot there with the back ticks say display grid grid auto columns min max of uh let's see auto comma one f r align dash items is centered grid templates areas this is going to be image start so let's just do dollar sign curly brace pregnancy curly brace img start arrow functions here and then if img start is true they don't return this is actually um you have to say back ticks or you can do the quotes but i'm just gonna do back ticks quotes quote so two quotes column two column one and then i'm saying else backticks quotes quotes column one column two so this is a css grid where we have like the positioning of columns side by side and then uh underneath here i'm simply going to add a media query so at media screen and max width of 760 pixels and then grid dash template dash areas is equal to dollar sign curly brace we're going to see curly brace img start and then the arrow functions there and then i'm going to say basically i'm going to see img starts that's true i want to turn back ticks and see if um get rid of this on here back ticks then the double quotes make sure you put two and go back in the middle column 1 and then outside this column but still inside the back tick make sure because this is important you don't want to mess this up so you can see where backtick quote call one quote space uh quote call to quote back tick make sure you do it like that so look at the screen pause and make sure you have exactly like this because if you don't it's not going to work and then the uh colon and then we do backtick quotes call one call one quote space quote call to space call to quote backtick which is already there for me so again look at the screen and make sure you have it exactly as i do if you don't you're gonna have issues because you missed up and this is essentially uh a way to take it where it's like once i show you once we're done with it you'll see what's actually happening but it's important you have that if you don't it's gonna be really annoying and it took me a while to figure out because um stock opponents sometimes just converting it from regular css it's really difficult but this one was i figured this one out and then let's do um see exports cons column one is equal to style dot div with the back ticks and then basically i'm gonna say margin dash what will happen washington dash bottom i'm gonna be 15 pixels and then i have padding to be zero by 15 pixels and then grid area is going to be called column one now technically we haven't even created a column 2 but i'm just going to copy because i'm just going to add it after and this would be essentially a column 2 and that's column 2. so now you know where these these actual like names came from and then let's do export context wrapper equal to style.div with the backticks this one's gonna be max with of 540 pixels padding dash top is 0 and then padding dash bottom is 60 pixels and then let's do export cons top line equal to style dot div then i can just make this like a let's see i should do um yeah let me just do a p tag for this and then let's just do um color hashtag zero one b f f71 font size is 16 pixels line height is 16 pixels font let's see weight is 700 letters spacing is gonna be 1.4 pixels text transform is uppercase and then margin dash bottom is uh 16 pixels and see what we have left we have heading subtitle let's do export cons heading equal to style.h1 one with the backticks and then i say margin dash bottom is going to be 24 pixels font size is going to be 48 pixels line heights is going to be 1.1 will happen and then let's do font weights of 600 color is gonna be dollar sign curly brace parentheses curly brace light text and that's equal to arrow with light text question so if it's true i want to show f7 f a f a else i want zero one zero six zero six and pretty much we close that here and before we get out of this i'm going to say at media screen and max with is 480 pixels with a font size of 32 pixels and then let's do export cons sub title equals to style dot p and then let's just say max width of 440 pixels margin dash bottom of 35 pixels font size is 18 pixels line height is going to be 24 pixels then the color is going to be dollar sign color bridge we're going to see curly brace of dark text and then if that's true i want dark text to display else i want to show hashtag zero one zero six zero six and i also wanted to be um hashtag fff and we're doing majority of the styling right now so we want to mess with it later and let's see let's do button wrap export cons btn wrap is equal to style.div with the backticks display flex and we're almost get finished guys and let's do justify content flex start now we haven't actually added these yet but there's only two left so i'm just going to say export cards img wrap into the equal to style dot div with the back ticks say max width is going to be 555 pixels and the height is going to be a hundred percent and then last mile is export cons image img is equal to style dot img with the back ticks the width is going to be 100 the margin is going to be let's do 0 0 10 pixels 0 padding dash right will be zero save that there let's go back to the in index.js info section let's do the imports now so let me make sure we have everything right actually before we do the imports go under the let's see column one add column two and then in here do img wrap and then inside there img do img src is equal to actually let's see let me just close that for now let me take rid of this idea for now it's probably gonna run an error because um we passed in properties on the stock opponents but we'll see for now so let's do uh let's see import curly brace info container let's do info wrapper info row column column one column two text wrapper top line heading sub title btn wrap uh see this let's do that from dot slash info elements so now we forgot btn wrap let's do imgrap and then img awesome okay so right now input is a volume tag with natural norm and let's see what i forget so the thing is too i didn't uh in the actual what's it called the styling there's a bunch of missing things i need to go back and add but basically let's just go ahead and let's go back to info elements and let me just comment out everything that has these um the uh property stuff right here i just want to make sure everything still works fine so you can just watch right now you don't have to do this but um let's see let's save it now and see what is it saying that put in elements input is avoidant tag and mostly to have oh yeah okay that's why here let's just erase this okay so now as you can see it's not showing right now because um wait why do i have an input i edit inputs what is this hold on info element did i put input that's really strange i don't know where that's from we'll find out soon but right now oh let's see let's go ahead it's good that's showing up so what now i'm going to do is i'm going to command z all of the things i uncommented i think we should be fine yeah so everything is back to normal and then let's go to index.js and let's make sure i put okay so right now yeah this is the body i know why it's like an input it's weird but basically we're going to have to make a object with data inside of it and then essentially pass in all this data into our actual uh info section because right now we have like these uh standard stuff right now but that's not what we want to do so actually let me make sure you guys can see it too like h1 let's see i guess it's not working so you can see the heading there so technically you can it's there but let's let's actually edit our data file now because right now you can't see anything so like it defeats the whole point of um this info section if you can actually see that why we created this so here is the data file and if you haven't seen this before pretty much this is a way so you can create reusable components and then pretty much like if i go here and show you like these sections are literally the same code i just changed the titles in the data file and just reverse the images all from the data file so i have to sit there and write a bunch of code or copy and paste it's literally just mapping through essentially all these data files and just pretty much getting it all so actually let me go back and close this out let's go ahead and oh let me let me close everything out make sure i can see everything as good as i see again components info section data all right so now we're gonna add in our data so if you've never seen this before essentially this is going to be the file where i can pass in all these different values and we can essentially update the design of our website without having to hard code in these properties and also this this is a way to make it reusable too so again like anything right here i can pretty much update this and switch them around so for instance like this image on this one it's right here and that's because i put a specific property which i did earlier let me see if i can show you the like light text the dark text i think that image start img start so once i start putting this in you'll see what it is so let me command b let's just do export cons and let me just call this one home uh obj for object and then class one set equal to curly brace and the first thing is i'm gonna have the id and you do a colon and then simply i'll just say uh about in the quotes and that's essentially the about section which was the first one right here and then let me put in i put light bg for sure so light background and essentially for the first one i wanted to be false because that one was essentially the dark background which is again here and then let me do light text that one up make it as true and let me do a light text d e s c description that can be true as well and then under this i'll put top line let me just do camera casing here top line essentially this green the text right here i just named the top line i can make this one i'll just say premium bank and then let's do headline on limited transactions with zero fees and headline is this right here you guys can see as i type let's do description i want that to be get access to our exclusive app that allows you to send unlimited transactions without getting charged any fees so these again this is just copy i've made up and then after this line let's do button label i want this to say get started so that's just the text i put for the inside of the button img start this one is going to be uh false because uh it's the text that's the first section then image or img and since i'm passing it through here you might have issues in terms of passing in the actual path so the way i got it to work is you say require parentheses and then course dot dot slash dot dot slash and then we go into our images folder and then slash svg-1 dot svg so we haven't actually added our images yet but once we do it would be named that and then i simply would have it displayed the alt tag i just put um this car and then uh i put dark i'll put that as true and then that's also this is mainly for the button now and then primary i'll put this as true and then let's do dark text it will be false so that's our first data section right here and you can see it's like that so now let me just command that save this and then next thing i want to do is get the actual images just so that we have that there so let me show you the site i went to so here i am on this site called undraw all right this one's pretty popular for getting svgs and basically just hit browse now and then you simply can click and change the actual color so for this one let me see what color i have for the um make sure i use the right color here so this is the one i use so i'm just going to go into this hex code copy the one for the green again you can use whatever color you want to and then it just shows all these different photos that you can utilize so like you can just go to the search and just type in like car and then go down below and then just pick whatever you want so i think i always clicked on this one and then you just download the svg for your project and then you're good to go and then the next one these are the ones i use like the pink piggy bank um this is like data file so you can go in here choose whichever images you want or you can actually use a real image like a one off of like a camera taken one not like a drawing it's up to you but this is where i went to and just go crazy with this so you're gonna need for this example three svgs here so that's three and then also for this one i reused two so technically you need four images if you want to copy what i did or you could make these completely different so then your technique would need six but um i just reused two of them just because you know i like the way they looked so go ahead download anywhere from four to six of these picture pick whatever one you like and then once you've downloaded them all you need to do is go and drag that over to your folder so let me go get mine real quick so here i had six previously downloaded so i'm just going to drag all of these in and note i renamed all of them so just right click one rename and to change it to svg one two three et cetera till you get to however many you downloaded and pretty much now oh let's go back to my actual app right now nothing if i refresh nothing's gonna happen because we need to implement this so let's test this out right now so let's go to our index.js so on our pages now go to our home page and we close this out and now technically our info section is showing you know the info but what we have to do is pass in the data that we just created so i'll do the curly braces and we're going to spread in all these properties so i'm going to do what we call the um object home obj1 and then i'll just press enter let me see if it auto imports it so we imported home obj one from components info section data let me save this now and then technically nothing is showing yet because we have to actually pass in this data so go back to info section click on index.js and now we can actually display these values to the screen so the first one is info container this one needs lights bg msa equal to light bg so we have that there id is equal to curly brace id and then let's see info row that's where my image is going to be so i'm going to say img start equals to img start top line i'm going to replace top line the hard coded value with the actual uh top line value for the heading do the same here and it's going to be headline is what i called in my data file heading i'm going to say lights text equals to like text and then subtitle if you guys guessed it you do curly brace and then i'll have this one as description and then under here dark text equals to dark text now i probably could rename these but again this is just naming you guys can go attending the names whatever you want to button right here's the button so i need to take out this closing tag and then re-add a um another button opening here or closing curly brace let me say button label right here and then let's add on the img down below here let's do the src the image link is going to be the img that we added in the value and then the odds simply going to be the odd value that we added so again if you're confused what i'm doing is i'm just everything i named ibg litex img all dark image start etc i'm just passing these in so literally the src is going to be the value of img which is this value here and then light text or light bg is false meaning on our actual stock opponents this knock this is not going to have the light bg if it's false here so that's majority of it i still need to add stuff to the button itself but let's actually pass these into the um info section so we're going to do structure so right here const info section let's do curly braces here and then we simply just pass in all the values we just write so i like bg id img start top line lights text uh let's do headline let's do dark text dark text here let's do description button label and i think img oh hold on fun label comma img and then alt let me save this and let's see if i'm missing anything this is on the actual sign in so i don't want to be on the actual sign in and then let me see what else all right saying i have this inputted voice element tagging was so it's saying this button here is an input for some reason which i'm not too sure why it's doing that so let me actually let me go look in to see what happened here so button is imported from that's why this should be not react scroll this should be um dot slash button elements save this here and then let's see what is he saying can i resolve dot dot slash button elements so let's see why is it saying this now so integer yes modern found dot dot slash so let me make sure i name this properly the export cons button so let me check what did i put for the um let's see unless i mistyped something on the actual uh let's see command b let's go to our btn wrap and let's just check that really quick yeah so that's a div there so i don't see anything wrong here alright so figured out the issue was literally i named this wrong on button element i put button element not elements so this minor mistake caused a lot of issue that if you didn't realize that that would literally ruin everything so let's try to command us this again and then i need to simply go back to uh the info section make sure that's there and then technically should work now let me make sure i didn't mess up why is it not did i not rename it still yeah so let me close everything out look what happened here yeah let's just let me save this here all right perfect okay yeah that's a problem now so let's go back to the index.js now everything's still working fine nothing's broke okay here are sections here and then info section is right here so notice how uh these are the current values right here so let's go back and let's check out the um let's check out the data so right now let's do um so the data looks like it's fine so what i want to check is to make sure that the uh let's see because currently it looks like the header isn't getting applied the um what you call it the colors and also the description isn't working here so let's go to button elements and let's take a look at this really quick oh yeah that's one thing i need to add so let me go back to um it needs that js for the button we need to go and add some properties to it because i just put two home so instead i want to add oh let's see so this one's actually going to be a react scroll but let's just add primary equals to let me add this first so the thing is with react scroll again there's initial values that you can add so i'm going to say smooth equals to true and then let's do duration equals to 500 milliseconds let's do spy equals to true now you have to do spy if you don't then it doesn't know how to actually add the active class to it i'm gonna say exact equals to true so it knows it's this one right here offset now this is where is important and once we do this for the nav it'll make way more sense but let me just show you like a like a little intro right now this essentially is saying since we have the mark the 80 pixel nav bar essentially it's minusing 80 pixels so from right see where the the dark background the light goes right when it hits right at the top it's getting triggered instead of being uh me actually the real sight so let me go to like this right here see how it's in about and now it's about a path discover right when it hits you see that boom that because we have we put in -80 so that it actually knows to trigger here because if i didn't put the 80 it's going to only trigger when it's like down here you see the difference so it's only going to trigger when it's 80 pixels in versus having this offset that essentially brings it back and then here let's do primary and the thing is this one how to look this up on stack and found a solution but pretty much you can't just say primary like this on a button and just pass it in because for some reason stock components it wasn't working well and you can't do like if it's like this is true else false at least when i was making this because there's just something about it which didn't like this so a solution i found is to use one colon or zero so essentially if primary has a value of true return one basically is true else returns zero false and then same for dark equals two dark question mark one colon or zero and then i have there's another thing called dark two which essentially just changes the value and i'll see if i'll keep it in or not for later but i just have this there then pretty much you can see we have it like this so now i can save this and let's see those are in turn so let's add these at the bottom let's do what i put primary dark and then dark 2. and notice how the button changed you can see that that is not the same and then now let's look into why the um let's see so we got headline light text as you go to light text and then we got subtitle dark text you go to dark text so let's go back to our data file and also libg is equal to like bg so let's check data so i don't know if i put it on the um so liberty is false so technically this should be true so let's just text so light text is true so let me refresh make sure that that's up so like text is true i want it to be let's do red so it looks like it's working ah okay yeah so light text if it's true return this value else return this value so i'm not sure why oh i put true for like text um let's do yeah yeah so like bg i think i did this or opposite let me make sure so i be g is the one i want to check so like text is true now let's make it false so now looks like my colors aren't working so let me check my console really quick make sure i did something wrong no air is there okay so let's see this must be the order i guess i wrote the um stock components let me just make double check everything make sure i did everything right so let's go to let's see command z this keep that there let me make sure i put i put all yeah light light there so i just need to make the background might be g is needs to be the one you change so let's check this one out so ybg's true return red okay let's see here we use a true return red so it's false so it's returning [Music] is this not dark what happened let me check the hex code at this color is this another color is this oh that's why i didn't put a hex code in front of it there we go okay so go back if you guys did it if you're trying to see go back to the top of the info section elements and make sure you put the little hashtag because i was going crazy how's that not working okay so minor air but we fixed it and now if anything on here isn't working like in terms of the coloring make sure it's because you probably missed something on the actual styling now check this out so this is our again our image start properties here our column so essentially it's like column one here and then like column two here so let me just like inspect this you guys can probably see it better and do my arrow and you can see see how they're like two boxes yes essentially like two little columns technically right there and that's the way i did it i mean i'm sure there's like 100 different ways to uh design the same design but this is what i did and pretty much let me just show you uh i think i have to bring it like this yeah so let's command b this let's go to the data file and then on img start which is down here i can just change this to true save it and boom look just like that just like that magic see like that so now if you don't like the way it's like this you just switch it up and that's basically again triggering this uh this property here and then even for like the image let's say i don't like this image i'm gonna say svg2 then you simply put in the image they have i'm using svgs again if you have images it would just be the same concept and then everything else is pretty much the same all right so since we're already here on the data file i just want to just copy this so i'm gonna say command a command c and then paste this once change this to home object let's do two and then here let's do home object and let's do three so in terms of the svg let's just do two for now and then let's do um svg3 for mine and then let me just save this and if i scroll down nothing is actually showing so what we have to do is actually go to the pages up here and click on index and pretty much what we need to do is just paste this into the actual index page so i'm going to do alt shift down arrow on mac i think that is option shift down there right next to the command button just press it and then it copies it down directly and i can do it again and you're pretty much there and then i can just do like home obj2 and then homeobj3 and then all i need to do is go up here and just import that so home obj2 home obj3 let's save it and let's just scroll down and we can see that we've actually implemented our stuff so first thing is i want to um let me just show you since we're here already the second one the image is on the left and it's white text so so let me go back and let me just edit that in there for you so let's do let's go to the data file now and i'll do this one and then the third one i'll probably just copy and just i don't want to waste time doing again but basically here let's go ahead and this is how i pretty much change it so the id here let's scroll it in so you can see it so we're editing this section now here this id is gonna be discover that's what i named it light bg's gonna be true light text is false the light description is false and then this one will just put um unlimited access and then pretty much i'll i'll leave these descriptions out because that's all you can fill in yourself because it's not really it's just random stuff but button label let's change that to um learn more image start is going to be true we've already um added the image the alt tag let's just put a piggy bank dark is going to be false primary is false and then dark text is true i'll save that here and looks like um the headline isn't let's see should be i put true false false mr is true dark is false primary is false and dark text is true so let me check why the headline isn't doing what i want to do so let's go and command b this let's check out because the headline up here is white let me check if i put any uh properties on the headline so heading light text even like text so i should have put um yeah there was like like text right here let's try true can't because it can't even doesn't even do anything so let's do um it must be on the hero or down here the info section elements let me check like text see where i put that ah see that i did it again i didn't put the hashtag that little error awesome okay perfect so if you did see i missed the hashtag on top of the color in the um elements page for invoice elements so i just fixed that now and as a minor mistake and then pretty much you can see we have everything here and then you can just update this so i'll just go ahead and just copy my own copy from um my files because that doesn't really just just text literally so let me just copy that into the um things let's do i got my headline and description so you guys want to copy exactly what i put just you can pause the screen here so i'm just pasting this so all i did was change the headline text and the description text and then i'll save it and you can see it just says this right here so you can upload this if you want to it really doesn't matter but let me do the info on the home object 3 now so this one let's see what we have here i just need to do image switch pretty much and like i think we're pretty much set so this one should be fairly simple and then no you can do infinite but let me finish this first let me show you we can do so now let's just say ideas sign up because that's my sign up section i just named it light bg looks like i'll do true because um i'm gonna have another section in between this false for the light text light description false i'll paste in the top line headline description and then also i mean the button i can change now it's not that much let's do start now image start false images three this one is papers dark is false primary the button is false and then we got true so by saving it now this is pretty much what we got in here so all i want to do is let me copy in my top line in my description because um that stuff's just custom you can add whatever you want so if you guys want to copy that feel free or you can just leave it and i just changed the top line to join our team headline is this line right here and then descriptions right there so you guys get the point that's how you pretty much can update data and then you can literally if you go to the index.js page the homepage if you were to copy this infinite amount of times it would it would just display infinitely like look at how many of these are and if you're like how do i make more like what if i want like six different data points all you would do is like here you would just change the name so let's say you do like four and then like five i put five or what you guys got the point and then like six let me erase that and then you just go to your data file and then just copy and paste this however many times so another one you would just do it like this change that to four change this image to let's do like fpg4 and then let me just save this for now let me show you in case people are confused and then i just have to import this at the top home obj4 and then now you can see we got this new section right here this is the fourth one so we got one two three and then four so that's just a way to add a new one but i'm only gonna use three so let me just close that out close that out here and then let me get rid of this one all right so if we look at the site right now click here you can like click on our menus that have the ids and you can see that it trans transports us down to it instantly you can see that there but before we add the smooth scroll effect i want to finish off with the i'll go to the real one the service section here and that will complete majority of the sites and then we can add in our smooth scroll action so what i'm doing is let me go back to our files let me close out these we're done with that one let's go to let's see we need to create a new component and i'm going to call this one new folder under components just name it services and then in the services let me just right click let's do new file so index.js and then you file again and then let's do um service says elements.js and then we just need to add in our details so let me go into here index.js of services a command b let's do r a f c e change the index to services and then in here let's start actually adding in our code so let's do style components so it's going to be the one on first one is going to be services container and then this one's going to have an id equal to services and then under here let's do services h1 it's going to call it our services and then let's do i'm going to call this services wrapper and then i'm going to have my services card and then in here i'm going to have the services icon and then put a slash and then this one's going to be src so this essentially is an image and this one's going to call it icon1 now if you've ever seen this before i'll show you this is a cool little trick for importing uh images and it's like a cleaner way but um here let's do underneath services icon let's do services h2 let's just say reduce expenses and then under here let's do um services p tag and doesn't say we help reduce your fees and increase your overall revenue so that's pretty much the services card right here so we can do is we can actually just copy this so let's go here press enter paste it down i'll change this to icon 2 and then under here let's paste it down again i'll change this icon 3 and then in the actual copy let's just change this really quick should be too hard i put virtual offices and then here you can just put um you can access our platform online anywhere in the world and then put a period here and then this last one will just be premium benefits so again i'm just making this stuff up but let's do unlock our special membership card that returns five percent cash back and we have export defaults okay perfect so now let's go ahead let me save this first command b i want to import this now in our home page or index.js on our pages and i want to put this under the second one so let's do services press enter auto imports if it doesn't just import it manually when i save it we're gonna have a bunch of errors i like seeing the stock opponent errors because it just like tells you what you're actually missing so now go to services elements and let's do the usual so this again we're just going to simply import styled from style components and then let's export cons services container let's put that wrong oh yeah container equal to style.div to backticks height is gonna be 800 pixels display is going to be flex flex direction column justify justify content center align items center let's do background to be hashtag 010606 and then let's do some media queries here so media and max width of 768 pixels height is one one zero zero pixels under this let's do at media screen and max width for 80 pixels and let's do a height of 1300 pixels and then underneath here let's do the services wrapper so i'm gonna say exports cons services wrapper equal to style.div and let's do a max width of 1000 pixels margin is zero auto let's do display of grid and let's see grid template columns i want it to be three columns so one fr one f r one fr so again that's uh this is essentially one column two three and then let's go back here let's see i did align items make it center let's do grid gap equal to 16 pixels and then padding 0 then 50 pixels now we have at media screen and max width equals to 1000 pixels let's do grid template columns equal to 1fr 1fr so essentially now it's becoming two now it's only two columns so this is 10 only two columns one two if i had four services that it obviously would fit into there but three it does that and then it becomes one on the smaller screen so then at media screen and max width of 768 i'm gonna say grid template columns i want fr and then let's do padding 0 20 pixels boom okay so now we got that done now let's edit the export const services card equal to style yield dot div some backtick action let's go and let's do background is hashtag fff so it's whites i'm gonna display flex let's do flex direction what is this flex starts okay there and then let's do align item center let me scroll this up let's do border radius to be 10 pixels let's do max heights is 340 pixels padding is 30 pixels uh let's do box shadow to be zero one pixel three pixel rgb a zero comma zero comma zero comma zero point two and then let's do transition to be all 0.2 s ease in out and then i'll add a hover effect so i'm going to do and i'm going to get rid of this and colon hover curly brace transform a scale of what happens let's go to 1.02 let's do transition transition is equal to all 0.2s ease in outs and then cursor pointer and now let's do all export cons services icon equal to style dot h1 and go in between this actually my bad this should be a image so this should be img then the backtick okay why is it doing that all right so we got the back ticks and then let's do height of 160 pixels let's do a width of 160 pixels and then margin bottom to be 10 pixels and let's do export cons services h1 equal to style.h1 backtickbacktick and then they're going to do font size of 2.5 ram let's do color hashtag fff and then margin dash bottom to be 64 pixels and then at media screen and max width 480 pixels font size is to rem and then here export const services h2 is equal to style.h2 with the backticks and then let's just do font size one rem and then margin dash bottom 2b 10 pixels and then last but not least let's export cons services p is equal to style.p backtick backtick and then i'm just call this font size of one rem and text online to be center so let's save this here command b go back to the service index js page and if you know by now what we got to do is we got to input all this so let's do import curly brace let's do services what we got container services h1 services wrapper services card services icon services h2 and then services p tag from course dot slash services elements let's save that now and then now this is a cool little trick you don't have to do this but there's just a way basically now we can do import and i named this one icon one you could name this literally like whatever you want to right but um say this from and where is it from it's from our images folder so it's going to be dot slash dot dot slash images slash svg one and then for icon two and three so i just again alt shift down or comment or option shift down on mac change this one to icon two icon three and i think i put let's put i have three and five so whatever your svgs or however you have how many you have you just change it to whatever and now let us check out what we just created so we go down here and looks like it is not in the correct order so let's check and let's make sure everything is making sense because that is not it looks like it displayed flexed but it didn't put them in the column so um let me check so right now we have our services wrapper and then the card then the icon h2 p tag and then underneath the card so it looks like it's a css thing so let's go to service elements page and let me check i believe this should be the card i think it's in the card section now we messed something up let me check i'll start with the card and then from there we'll go up services cars we've got the background display flex flex direction oh right here this one should be column and then underneath justify content should be start or flex start now when i save it boom there we go okay cleaner much better and now let's take a look what we have just created all right so now we got a services section and let's just test it out we got about discover services and sign up so look at that's pretty cool and then we click on this route nothing is happening there either so let's see what else can we add for now what i think i'm gonna do first is um let's go ahead and let me check and see which one makes the most sense we're pretty much done with the content of the page the only thing missing is essentially the sign in so let's let's finish the uh let's create the sign in page really quick just to show you like a little filler and then we can add the component stuff later but right now let's add that in so let me command b let's go to our pages and right click new file and just call this one let's see sign in dot i'm not saying sign in dot j s and then here i'm going to do r a f c e and let's just change this to sign or sign in page and then here let's just put h1 sign in page so now let me check make sure the um let's see this should go it's not going anywhere yet oh yeah one thing too is um our routes so here's a code thing so now let's let me close these out let's go to our app.js command b so now we need to do is utilize rack router so we're going to wrap these with a swish statement and then we're going to pass in the actual routes now so let's get rid of this home component here and then i'm just going to simply do route path equals 2 component is going to be the home which we have imported and i want to have exact just so that it knows this is the only one and then what i'm going to do is i'm going to do the alt shift down arrow again or option shift down change this one to sign in component is going to be sign in page where we just added and then we just need to import uh these so let's do import home from dot slash pages and then let's import sign in page from the slash pages slash sign in and then also we need to actually add in the um switch and then the routes so when i save this if we did everything let's see import home from pages home has already been declared where did i declare this oh it showed twice only need it once and let's save it okay perfect so now we go back all right so here's our main section here and then we just implemented react router so instead of us having it like just scroll on the same static page we can now go to a completely different link which essentially is this page here now here's the thing if uh this i designed it to where the sign in page is technically like its own thing if you didn't want that you could just keep the like navbar and everything in the actual main app js file so technically you could just pass in like let's do um let me just import that for right now and let me see if i can open this and you can notice that the nav bar is here but now since there's a thing that's fun and stuff inside the sign page is ruining this design so like i already get rid of this and just save it you can't see it because it has the margin of minus 80. but ideally this is where you would add your actual design in here so let me actually take that off so you can see it so let's do this so now it looks like this so again you can utilize this nav bar on your different routes for the entire website and also your footer too which i forgot that's the one thing we do need to create still too but pretty much this is the new route section now here so i can go back to the home page and then add that in but let me i did it like this so it's separate so again this is just the way i designed it in case you need it for different use obviously you'd have to do it like that but let's just get rid of this nav bar here and then just get rid of here so again what we've done so far is just we have this home section here and then i have the sign in here so what i want to do now is let's finish this off with the footer and then that should complete the entire design section part minus the sign in p the other thing is the sign in page will leave later at the end but for now let's just do the footer now so what we need to do is let me get remote this let's see did i create a footer yet no let's go components right so the new folder let's call this footer and then in here simply just going to do new file i'm going to call this index.js and then in here let's do a new file again and let's just call this footer elements dot js and then nhs do r-a-f-e press tab erase this just call this footer and you guys know the drill we pretty much just need to go in and just rinse and repeat what we've been doing this whole entire time so i'm gonna go ahead and let me just erase this and again this is just the way i named them you can change them you want to let's just call this footer container and then in here i want to have footer okay what's happening i don't have the footer wrap and then let's do here i'm calling this one let's see footer links container so essentially this is the actual link you would have to click on and then let's do um photo links wrapper and this is essentially the wrap around it so let's do footer links wrapper and then around this is where we put our actual footer items now so like about us contact uh services etc so let's just call this one oh let's see footer link items with just link item not s so for the link items and then let's call this one footer link title and i just named it like this so it's easier for you to see exactly what i'm writing again you could shorten this but like just like footer heading or footer h1 or whatever but again this just makes it easier for you to read it from my perspective and then let's do footer link and this is essentially a link i think it was like a route now if you're ever going to link off of your website you would use an a tag but since i'm using react router for these since they're going to be on the same like site i'll just put a 2 equals to let's just say um let's do sign in and then let's just put this um about us so this is just a filler path just to show you like that how to work it and then we basically can just copy and paste this i'm gonna do the alt or option shift down arrow so one two three four five and then pretty much let's change these up so let's do um how it works let's see under here let's do um testimonials here let's do um careers and then let's do uh investors and then last but not least terms of service actually put yeah service so this okay so let me save this here really quick and then let's drag this out a bit so we're pretty much good with the footer part now all we need to do is just straight up copy these so like highlight the uh here's the footer link titles and then you want to let's see actually wait what happened all right yeah that's my bad this did i do this wrong yeah so these are for the links one two three four five okay my bad so i messed this up so erase the bottom closing footer link title or command exit and bring it up here it should be above so the only thing wrapping the um footer link for the link right here should just be the photo link items not for the title this meant this should have been right here about us that's my bad so about us here and then we can erase this link this for the link here all right so here we go okay so you need to pause the screen just pause really quick so let's go again we have footer container and then the footer wrap and then the photo links and then the footer links wrapper so again this is wrapping everything and then the footer links item is wrapping the footer links inside and then we have the folding title then the photo links here so pretty much now if i save this nothing's gonna happen but let me just agree go over what we just created so basically about us is right here for the link title everything below this is the footer link and then this is getting wrapped by photo link items and then the photo link wrapper is going to be wrapping essentially around that too so now let's go and tell you can't see it yet but what i'm going to do is click onto let's see here's the thing so i'm gonna do two columns so when i go back this footer link wrapper right here is wrapping around both of these so that i can do essentially like a um double column when i do a mobile so right now what we're going to do is we're going to click on our photo link items and highlight everything inside of that go right under it and then just paste it and so now we have this photo links wrapper with two essentially blocks of footer links inside here and then what we can do again after that is we can take this photo links wrapper now with both of our footer link boxes so one here and then go here so we got the entire footer links wrapper and then we can go underneath this and then just paste it in so now you can see we have essentially two think of as like two columns so now if i were to save this and then let's go to uh the let's bring this back it's command b let's um see let's go to where is it at pages index.js and i want the where is it at i want the footer to be underneath everything so i'm just going to say footer press enter looks like it doesn't oh yeah imported up here at the top so make sure if it imports automatically you're fine but if not then fix it and then let's go back to our footer go to footer elements this time and then technically we can just start styling this so what i'm going to do is do um import style from start components and then also i need to import uh let's see import the link from react router dom now i don't have to change the alias name because it's only one link if i was using react scroll with this then you would have to do like i did earlier in the video but here we should be pretty much good and now let's start writing styles so export cons footer container equal to style dot footer the back ticks and let's just make the background color clip colors equal to um one zero one five two two and then let's do export cons footer wrap equal to style dot div with the back ticks let's do padding let's do 48 pixels by 24 pixels display is flex flex direction is column justify content is center align items is center max width is 1100 pixels and then margin is zero auto so then underneath here we have export cons footer links container equal to style.div the backticks display is flex justify content is center and then at media screen and max width is 820 pixels and then i'm going to say padding dash top 32 pixels and then here export cons footer links wrapper equal to style.div and let's do a display is flex and then at media screen and max width is a 20 pixels and then here let's do flex direction of column so now underneath there let's see what else we got footer we got photo lens wrapper for link items okay so export cons footer link items now make sure if you're following along you don't miss the s or add it if it's not there so this one is for the link so there's no s so make sure if you have an error check both spelling everything and let's do style dot div with the back ticks and let's do um display flex flex direction column align id terms is flex start let's do margin of 16 pixels let's do text align is uh left width will be 160 pixels and then box sizing border dash box and then the color will be hashtag fff and then under here let's do at media screen and max with pixels and then i'll do margin of zero padding is 10 pixels and then the width is a hundred percent and then let's see what do we have under here what else we got we'll just do footer link items so let's do photo link title now so export cons footer link title equal to style dot h1 so the back ticks here and then font size is 14 pixels and margin bottom is um 16 pixels and then let's do export cons and scroll this up footer link equal to style now this is going to be the link react router some have the back ticks here and then i'm somebody's gonna say color hashtag fff text deck decoration to be none let's do margin dash bottom to be um 0.5 ram and then font size is going to be 14 pixels so now let's see under this we'll do a hover so in colon hover color will be 0 1 b f 7 1 and then transition is going to be 0.3 s e's out and then underneath this what do we have for the link actually i think we're good for now so let me save this let's go back to index.json footer and let's go and see scroll to the top let's import curly brace footer container footer wrap footer links container so let's just do here links container footer what else we got links wrapper footer what is this point items and then footer um title where's this one for link title and then footer link from dot slash for elements save this here and everything went well boom okay we got the footer like 90 of it done and notice how everything is the exact same but we got the hover effect here so what i'm going to do to save us some time is i'm just going to uh let me bring this over what i'm going to do is just copy in my footer so that the text so that you don't have to sit there and watch me do this so pretty much i'm just going to change up though let's see on this container give me a second i can collect this so i'm just going to go to my footer links and just copy this in and i'll save it now this is you guys can basically just change your titles and yours to fit mine so you can pause it here and see it but for like here instagram social media ideally you'd want it to link off of um so i tend to actually change this one to like something else like business so i could say like business and then i'd link something back to our actual website but the thing is i'm actually creating a um social media icons here so technically you can see it but this one ideally you would change this to something on social media or technically non linking off to your um like linking away if it if this stuff should link inside your site so here these are linking away but if you do want to have the design like this then you would just have to change these links to um non uh link tag you just take it make a normal a tag like literal a tag and then uh let's go and let's add in the uh see what is the section i named this i should call this one social media so let's go under let's see right footer links wrapper for linux container press enter so technically now we're under here and i'm just going to call this one social media let's just do social media and then in here let's just call this social media wrap and then i'm gonna have this one social logo and this is going to equal two cool slash and then i'm gonna essentially have a toggle function later but not right now but i'm gonna call this dollar right here and then under the social logo but we're still within here let's see so under social logo i have website right so website right here doll d o lla and then i think it was um i can't remember the exact yeah that's not the exact one i think it was come in which one let me look this up really quick all right i can't find forgotten the shortcut and there's nothing right now showing up on the internet so if you want to you can just copy this off of like wikipedia or something like site or you can just leave it here but basically it was like option or something i can't remember the exact thing if you know it comment below if i find it out i'll just leave it in the description or something but basically that's just a copyright symbol and then 20 2020 now the thing technically is uh you can use this date so let me show you this um really quick because i don't wanna technically if you don't wanna have to sit there and update your uh your date like every year and you're just like how can i make it automatic let me show you how to set this up pretty much the way you do it is you just do um the curly brace and then say new date parentheses dot get full year parentheses and then curly brace and that's essentially how you do it and then let me um see it finishes off all rights reserved and that's our website right logo and then after that let me just add in our social icon so here let's just add in social icons and then let's do social [Music] icon link and this is again this is now the a tag so instead of doing two you say href equal to slash i want target equals to underscore blank because i wanted to open up a new tab arya label i just put um facebook and then i'll close it out and then inside of this i pass in the actual icon so fa facebook and then underneath this social icon so technically i can just copy and paste these so i can just straight up go like highlight the social icons and we're in the social icons wrapper but social icon link my bed paste it there paste it there and then let's see facebook instagram youtube twitter and then just put like linkedin here so now we can just change these up so let's just do um what is it on instagram change this one to cfa instagram here and this one will just be youtube so let's just do youtube and change this one here fa youtube and let's do twitter right here so cool hack is we can actually do this in a command d and it's going to change these fours both but i wanted to change it looks like it's not clicking on the actual icon once let's just put youtube here youtube is here and then last but not least we got actually i put youtube twice oh man it should be twitter on that twitter and then linkedin so let's just call this links in let me just do it lowercase and then this one has to be linkedin with lowercase linked and like that and uh see that we should be pretty much set to go now here's the thing so if you if you want your your link to actually work and like when you paste if you just paste in like let's say you have a twitter for instance you just paste it in it's not going to open up so you have to do is do double slash www.twitter.com your username so mine's just brian designz because i think brian design was taken but yeah that's pretty much how you do it like this then i'll hit save and then now we have to do is pretty much export these from these style components so then we go to footer elements and then we pretty much just rinse and repeat what we've been doing this whole time so now let's just go and say exports cons social media equal to style dot section double back ticks and then let's just call this one max width of 1000 pixels and then i want the width to be 100 and then underneath here exports export const social media wrap equal to style.div with the backtick display flex justify content is space between let's do a line items to be [Music] center max width is one one zero zero pixels let's do margin of 40 pixels auto zero auto and then at media screen and max width of a 20 pixels and then i just deflect direction to column and then let's do export const social logo equal to styled link and this i think this was my yeah should be my router color will be hashtag fff let's do justify where's that self i want it to be start let's do cursor pointer text decoration none this goes up font size is going to be a 1.5 ram display will be flex align items will be centered and then margin dash bottom is 16 pixels and then let's do font weights of bold so we got that there and then let's do we have three little ones left so export cons website rights equals to style dot small with the back ticks and then let's just do color hashtag fff margin dash bottom is 16 pixels and then here let's do export cons social icons equal to style.div with the backticks display is flex justify content is space between and then let's do a line item center and then the width is 240 pixels and then here let's do export cons social icon link equal to style.a tag because again this is the ones that linking off color will be hashtag fff and then font size is 24 pixels we'll save this here and then we need to do before we go back there make sure we have the link and point from rank right or dom and then let's go back to index.js and then we pretty much just rinse and repeat what we've been doing this whole time it's basically import curly brace footer container footer wrap oh let's see um footer links container footer what else we got see footer links wrapper footer link items footer link title footer link let's do social media social media wrap social logo website rights awesome social icons social icon link and from quotes dot slash footer elements and then we'll save it and let us see foreign oh did i not wow i was going so i completely forgot we did the first section let me do this what i don't know why i did that basically i did it twice so my bad didn't even see that i'm tripping right now but basically yeah we just import that again okay so now what we need to do is we have react icon so we have to import these let's just do import curly brace fa facebook that's why i was wondering i was like why there's so many things i have to add okay now fa facebook fa instagram fa youtube fa twitter and then fa linked in from react dash icon f8 save it and boom perfect so now you can see we got our footer now ideally if this was like a massive web site you would have all these links but literally since it's just static this is just a design showing you how to create like typical footage you've seen but ideally if you don't have this many pages like you don't need them but that's just showing you in case you need that and for the most part we're pretty much set with the uh i guess you see the ui part so now we need to do is change it to where they pretty much do the smooth scroll right now because that's like the main thing i wanted to add for this is the smooth scroll isn't working so what do we need to do okay so let's do command b and let me exit off here and the first thing is i need to go to my nav bar because that is what i want to implement and then also let me see if you can see yes right now the actual background so let's go to our nav bar really quick here i'm going to nav bar elements because i believe i didn't set the background or like i did earlier so here let's change this background and let's do dollar sign curly brace from the security brace and say scroll nav that's equal to arrow function scroll nav and then if it's true i want to return hashtag i forgot my exact thing i'm going to put dark for now black pretty much uh quotes else transparent so right now um it's false because i don't have to have implemented but that was i want to make sure i go back and fix that before i edit this so right now let's do the uh let's implement the nav scrolling so when i scroll it it changes color and then after that what we can do is add in the um what's it called the actual smooth scroll effect where it hovers so let's go ahead and start adding in the scroll nap all right so the first thing i'm going to do is import use state at the top so let me just do add a little comma say use state and then under here i'm simply just gonna add in the state so i have scroll nav and then set scroll nav and my keyboard is bug now and then it's gonna be used to set the value to false and if you weren't following earlier this is again this is my state scroll now that's what i named it which is why i put it here and essentially i'm just going to write a function a basic if else statement stating when i'm past a particular point i want it to trigger so i'm going to call this function const and then say change nav let me set that equal to an arrow function and then it's curly braces here and then basically here's where i'm going to save my actual code so i'm going to say if and then this is how you target the actual window pixel so i'm going to say window dot scroll y if it is greater than or equal to 80 pixels then i'm going to update the state with my function called set scroll nav and the function is going to change the value to true and then if it's not else it's just going to set the scroll nav to false and then what i want to do to make sure that this thing doesn't go crazy is i'm going to have a use effect so use effect so only render right here and then i'm going to say window that add event listener i'm looking for a scroll events and then we're going to pass in the function change nav and then after that i'm just going to pass in the brackets right there and then also we need to actually import your state up here as well so you i mean you use effect my bad and then all we need to do is pass into our nav right here i'm going to say scroll nav equals to curly brace scroll nav so let me save this and um yeah everything should be good now and then when i scroll you can see that it works so you see how now we have a black uh navbar now and just to make sure you know we're not uh going crazy let's change this to red and that way we can actually see what's going on so perfect so now we score the top right when it passes 80 boom it gets triggered so now we have to implement it and then one little trick too i want to see if um this is one thing i added it's not really necessary but if you were to use a bunch of icons i want to actually have this and essentially it's just we're going to import at the top icon context from react icons slash lib and essentially i'm going to wrap my entire nav bar with this so that i can basically pass down any styling value into any icons inside of here so i'm going to say icon context dot provider like if you guys seen contacts api it's fairly similar and then we just do value equals to obviously color is white so this way it should be a string so hashtag fff and let me just close this out and let me copy this this closing tag of the eye context writer paste it right at the very bottom and i'll just save it there and that way you don't have to actually put a color for the icons like if i want to change this one to red it's probably yeah see now you can see that it's turned red and then this is sidebar so it's a different color but ideally i just have that there just in case you guys need to utilize that for your site so now majority of the functionality so far is there now the only thing missing is the sign in page design which that one's not too big a deal because that's just like a display i made but the main one is this actual scroll with the hover action so like it's like 95 done so pretty much right now everything is working but how do you actually get it to display the way we did so what i'm going to do is this one's fairly easy so let me actually pull up the rack scroll down so you can see like why i'm doing what i'm doing alright so here is react scroll and i want to show you there's a lot of different ones you can use and if you read this you might get confused but mainly if you go here let me see right here these essentially you can see like the path to the spy smooth offset duration delay onset active etc there's a bunch of different ones you can utilize and you can feel free to look into this more if you want to but pretty much what we do is we just need to pretty much go and for instance let's see did i have my oh yeah one thing i forgot to add but i'll add that after but pretty much i think if i click here yeah the the actual um home icons not doing what it's not bringing you back to the top like in this the finished version i click it it does it so one thing we need to do before we add this is add the on the nav logo add and on click to toggle home and then let's save that and then let's see if i passed in yeah so this is one this is like a really easy um scroll to top effect so let's just start off with this one so pretty much we're just going to create a function called cons toggle home set that equal to arrow function and then basically i'm just going to pass in scroll dot scroll to top and then just have it parentheses we're calling it there and then what we need to do go to the see because if i were to save this right now it's going to say unexpected so scroll and if i go to the react scroll docs and i do um scroll dash scroll to top it's actually a function in here too so you can do score top and also scroll to bottom if you want that too but i mean i only need that one for this design but basically you just do the same thing just change that to bottom but in order to utilize this you need to import this at the top so i'm gonna say import curly brace animate scroll as scroll that's just what i'm calling it and then from react scroll and then when we save this we can go back and then i'll have to do now when i click it it actually goes back to the top and it scrolls according to your actual site design so that's pretty much that was that easy and that's what the scroll effect so let's show let me see if i can um yes right now the rest they're not scrolling yet we're gonna implement that just a second but this one is already working perfect and that's with react scroll if you didn't do react scroll it wouldn't it wouldn't do the like nice smooth scroll effect like that so now let's go to the nav links so right here and then let's all right so go to your nav links like this go inside of the opening but go to the uh yeah inside there let's go under the two i'm gonna say smooth equals to true duration equals to curly brace i'm gonna set it to 500 that's just the speed that it goes up you can change it play around with this you have to add this one this one's really important and it's called spy and essentially this tells you if which one you're essentially clicking on because if you don't add this it's still going to work the smooth transition but like if you want an active class with the highlights of the green border i added based off what section you're on you have it's not going to work without this so i'm going to set it to true exact i'll set that equal to string of true and then offset again this this is the um this is where i put minus 80. because this our navbar again we put the minus 80 margin so i need to match the actual positioning of the the nav bar's height so that i can actually it knows exactly where to do the transition so everything works for the about section let's test it out click it and it scrolls and it highlights now let me show you on the actual docs let's see where they put it they do active class like actually coded in like this right so ideally if you didn't use stock components what you could just do is do active class equals to active and then you can go to your css file and then literally you would just create a dot active class and change like the color whatever you wanted to add but since i have let me go back on the navbar elements if i scroll down to active what this automatically does is it say it changes it to active when you're scrolling all by default and it's looking for this class this active class that we just imported with star components so that's just a cool little trick this is equivalent to just doing dot active same thing but since i have it in the stock components it automatically knows without me having to manually hard code it there so that's just a cool little trick for the react scroll so now you can see when we go back it's active when i go discover these they're not because it's only added on to the about so and then also the offset so like it's going to be hard to see here but right right here is where it hits so actually let me do it on the white background because you can't see what's going on so technically what we can do is we can just copy and paste these values so i'm leaving these up just so that you can play around with them but i'm going to copy and paste these onto the remaining links so we have this one here under the two for the services i'll post this here and then for this sign up i'll post this one here so we'll save this now and now let's try and test everything make sure everything is working so boom bam there we go all right so now notice all right this is gonna be much easier to see the difference so right when it hits like see how this is the tendency the navbar's height the minute it hits it changes like right on the tip of the top of this this container this div it changes and if i were to take off this offset and they're set to like zero what's gonna end up happening is it's gonna need to go 80 pixels more so now technically here is the tip of the div right the container and then now we're scrolling more until it hits past 80 which is the size now but then it hits and see how that's a problem because if you have like content that's not as wide as mine it's going to get like this close before it hits it and then depending on your screen size it's going to be all messed up so that's the main reason i put offset again depending on the way you design your site that might not be necessary but that's just telling you why i did it because i used the margin negative 80 pixels on my nav bar to do for that so if your nav watch perfectly fine didn't do any margin negative 80 or anything then you don't have to worry you can just put you can even leave that out but that's pretty much for the um smooth scroll effect so let's do let's just make sure everything's working out really quick so homes up here about discover services and sign up and then we go back down let's click on this one so now this one the bottom footer i want to add it to that one too so let's do uh let's switch over to our footer really quick and let me just copy this function so i'm going to copy this toggle home function command b go to footer index.js and then i'm just going to press enter add the function there and then let's just simply add this to the um the logo so let me see where is the logo i put down here simply i'm just gonna say on click equals to toggle home i'm going to save it and then also we need to import at the top import curly brace animation i can't remember what exactly let me make sure before i misspell anything animate scroll my bed so it should be import animate scroll as scroll from react scroll and then let's test this out let me just go back up to the top boom okay so majority everything looks like it's working out and then down again this works out here so now the last thing is just simply the sign up page now since this isn't really anything mind-blowing and react it's just like the ui i'm just going to show you how to set it up but i'm just going to basically paste in the style so we don't have to sit here watch me for like 30 minutes doing the same thing over and over and this is just mainly like a filler page just to show you like what you could do but pretty much here's the src components let's create a new folder i'm going to call this one sign in right click new file let's do index.js and then you file again and let's just do sign in elements.js so now i'm just going to paste in my styles for the sign in elements so i'm just going to go in here and paste these so i can save some time and then let me just go through these with you see what show you what i did so pretty much import style from stock components and then just import the link from recorder. and then i created a container with these specific styles right here and then you guys can pause the screen if you wanted to follow this or you can just simply just sit back and relax and watch it and then form wrap wrapping the form and then i have the icon that actually leads us back to the actual home screen then we have the form contents and then the irregular form i've named this form h1 the form label form input and then the form button and then basically the text so if you guys wanted to you can pause the screen at each section like you can pause it here and then i'll scroll up again you can pause it there to check and make sure that you actually if you're copying this you can but if you guys did get the source code then you can also um straight up use that too and then simply in the index.js this command uh let me make sure i'm in the right page this one is super simple so i'm just going to type it out with you r-a-f-c-e and then just say sign in and then basically this is going to be here and let's just have the container i don't know why it's doing that we'll just have the container here i'll have my form wrap here i'll have the icon 2 is equal to the slash just to bring me back home with the dollar right there and then we'll have the form content and then we'll have the form and again this is just filler design again i didn't go through every single thing on the actual form but if you actually did use a phone you most likely have your own backend and then much more complicated code so that's something you'd have to add and let's just say sign to our account and you know what let me actually just paste this in because i don't really think it's really nothing um it's just a design so here here's the lines right there and the only thing is like for react you have to change it to camera case here and then let me just add this sign up elements here the top because yeah this is mainly just like styling so this isn't really too important but now once we do have our actual form export sign in make sure it's right there okay yeah so here if you guys want to pause the screen you can see this code right here it's just inputs and form labels nothing fancy here and then same up there just import everything so this one's very simple and then all we need to do is basically pad this to our um or sign in where's it at sign in page so now i'm just gonna get rid of this add in the sign in component and let me see if i can import it doesn't look like it's auto importing so let me get rid of these divs here i'm just going to say import sign in from dot dot slash component sign in and then when i save this it's going to say does not match corresponding name on disk sign in so let's see if i made spelling anything wrong so let me try to do this let me just try to stop it and restart and see if that fixes if it doesn't then i must have some sort of misspelling somewhere okay yeah so that was simply that was the ish i just had to restart it so if you guys did um have that issue just simply control c in your terminal and then just yarn start npm start again and then pretty much you can see here we go back so now there's one last thing like when i go to the sign in depending on the screen i'm on it sometimes will be it won't go to the top so i want to make sure is i'm going to create this this new file components called new file and just simply say scroll to top.js and you wouldn't notice this right now because my screen's showing it clean but if you were to navigate to a new page and it doesn't it's gonna it's not gonna go to the top so with react router you can do this you can say import use effect from react and then also you can do import use location from react dash router dash dom and then simply you can just say export default and this is straight from the docs too by the way on react router export default function scroll to top with the parentheses and then we're going to say const curly brace path name is equal to use location with the parentheses here and then i'm just going to say use effects and then pass in the arrow function and then window dot scroll to parentheses zero comma zero and then after this first curly brace put a comma array brackets put path name and then you're pretty much good there and then actually after the parentheses i'm just going to return no then we'll save here and i can't it's hard to show you like here let me see if i can do it um let me try to scroll maybe that yeah so it's hard to tell you can't tell it right now because the screen's small but now you're just going to sign in and then all you need to do and this is again doesn't matter if you're copying my page and making your own you just pass in scroll to top so let me control here i imported it and save it so technically it's not really showing on this screen it's kind of smaller but if you were making your own page and you notice when you change to a new route it doesn't go to the top you would do this scroll to top and then you're pretty much will be at the desktop page and then now when we scroll back here now we can check out the site so now we have this and oh yeah that's the one thing i forgot to add it on the button so let me make sure let's go back and let's go to the um let's go to the nav bar in xjs let's copy um this values right here on the nav links go to the hero section and then scroll and then just simply go to the button where is this at right here press enter paste that in save it and let's scroll back out then click it and now it scrolls and then i think these are the only ones we have to add to let's go back now to the info section index.js let's check out our button we have majority it looks like it's working but it's saying to home so why doesn't this why isn't this one going in let's see did i miss anything let me double check to make sure i didn't um mistype something i know why it's because i didn't set um what's it called i didn't set anything for the actual thing so if i say to to home technically home doesn't exist yeah yeah so let me check my main one i don't think i had it on here let me make sure it looks like it's going back to the top which is strange why isn't this one working let me go back maybe i think i know why let me change it back to home let me go back it's probably because i didn't add on the hero section index.js i believe i put id equals home so id equals to home and then let's try it out now awesome perfect okay so that is much cleaner so now let's just go over what we just created we got the about hover scroll smooth scroll services here sign up make sure our hovers um yeah i got the hover sizing here and also we can scroll the buttons they all work here they go back then this one does it too and then also this one and then last but not least we got the icons they're scrolling and then this one too and then we hit the sign in nothing requires so just add it back let me go back here and this and the tutorial for today so if you did enjoy this video feel free to share this with your friend make sure you go down below subscribe to the channel for more content also gives you a thumbs up comment down below any other things you'd like to see me add in this video any suggestions to add and refactor the code to make some more improvements and aside from that i'll see you in the next video peace

Channel: Brian Design

Views: 378,605

Rating: 4.9532738 out of 5

Keywords: react website, react website using styled components, react website tutorial, beginner react js project, how to make a react website, react website tutorial for beginners, react website project, react website from scratch, react website example, react website design, react js, react js project, react js full course, react js project from scratch, react website responsive, react scroll, react smooth scroll, react scroll to component, styled components, react scroll animation

Id: Nl54MJDR2p8

Length: 224min 7sec (13447 seconds)

Published: Sat Oct 03 2020