Build a Complete Typescript React Fitness Application for Beginners | Responsive

hey guys this is Ed Rowe today we are going to be building this complete typescript responsive Fitness application using react from complete scratch so this typescript application is going to have a beautiful landing page where we're going to deal with some tricky layouts and I'll show you how we'll go about those we're also going to be dealing with a nav bar so that it is also responsive and has some tricky elements to it where we can navigate around as well going back to our full desktop we can go and click one of these and it's going to take us to the next page where we have the benefits page I'm going to refresh it and show you all the animations that we have it's going to stagger the animations and we'll have everything coming in also we'll be showing you how to do some of these layouts where you have these images above relative to other things and I'll show you how to go about those and then we can go to our classes where we have a side scroller and we can hover over elements as well and I'll show you how we can create this side scrolling action and then finally we can go to the contact list page where we have name email message and this will have react hook form and we can validate our input and once you hit submit it's going to send an email to our own email or custom email all for free and finally we're going to have a footer where we have some elements of tricky and I'm going to show you how we can deal with responsive layouts in these scenario finally this website is completely responsive where you have a desktop screen everything will be laid out cleanly and then if you go to Mobile screen on small screens small devices everything will be laid out perfectly with no issues and most importantly this tutorial will be geared towards beginners who are just learning typescript and building applications and I will be focusing on the basics of typescript as well as advanced parts of typescript and I'll explain this very thoroughly for experienced developers I have stuff for you in regards to typescript so I'll be covering a lot of typescript elements I'll be focusing on that as well as some tricky layout fundamentals for the Technologies we'll be using we'll include the typescript for our language react for our framework Vite for our starter pack framer motion for our animations Tailwind for our styling and Tailwind hero icons for our icons and finally we will deploy all of this onto cloudflare pages so you can put this on your portfolio also like all my other applications this website uses free image is sourced from unsplash meaning it is all free to use and the website is completely designed all by me so you're free to use parts or even the whole project for your portfolio hope you enjoy alright let's get started so for this project we're going to be actually using Vite instead of create react app like we normally do but Vite is very similar to create react app but it's basically just faster and it provides you boilerplate for 10 typescript so we're going to be using this and I'll show you how it's pretty similar to create react app so we're going to do npm create Vite at latest all right once you type that command it's going to ask you what project name you want and we're going to call this gym Dash typescript and then here it's going to ask you the framework and we're going to choose react we're going to hit enter and from here I'm going to do typescript so you saw that there's a plus swc don't don't worry about swc is for a more advanced build so we're just going to use regular typescript here and then from here we're going to follow these commands so we're going to CD gym Dash typescript npm install and once that's installed I want you guys to go down to this fifth icon over here and we're going to go into our extensions section and in here there is something called es7 plus react Redux and react native so this is an extension that allows you to have like template scripts template Snippets that makes it easy to write and we're going to be using some of those and we're also going to use prettier so if you have prettier this will automatically format your code if you have it installed and it's pretty nice so we're going to install those two extensions I already have them installed so I'm not going to do anything and then from here I'm going to go back open up my terminal once again and in the terminal I'm going to install some packages so I'm going to do npm I framer Dash motion so this is an animation library that we'll be using and I'll explain this later they're going to install react anchor link smooth Dash scroll at 1.0.12 so this is a package that allows you to click on the nav bar item and it'll take you down to the particular page and we're going to install a specific version so you guys don't run into ish issues and then finally we're going to install at hero icons slash react so these are basically icons that are pre-made and this is by the Tailwind group and similar to material UI icons are already preset but this is Tailwinds version of those icons so we're going to install those after you have installed those we're going to install some Dev dependencies so it's similar to regular packages Dev dependencies are essentially dependencies basically packages that you'll use when you're doing the development but they will not be existent on the final build so when you run npm run build these packages will not exist in the final Bill and you want to keep these packages in the dev side of things if you need and also we're running typescript so some of these packages don't have the types already built in so you have to specifically install certain packages so that the types are existent so for example we're going to have to install at types slash react anchor link smooth scroll at 1.0.2 so this particular package is going to allow us for typescript or allow typescript to be able to identify the types that exist in this particular package so you have to install some of these manually and it's a quirk of typescript so you kind of have to do that otherwise you're going to get lots of errors and also we're going to install app types slash node this is particularly for a path module that we'll be setting up and that will be set up for the configuration I'll explain this as we go and finally I'm going to open up the Explorer over here and then I'll look at gym typescript and inside the source directory we're going to see an assets folder however what I have in the assets folder is going to be different from what you see you're going to see something called react.svg I deleted that because we're going to have all these images for our project and I have a link in the description below where you can download these images and replace your assets folder with that particular file so make sure you do that so we can use the images for the project and then from here I'm going to delete app.css as well because we do not need that and I am going to go to app.tsx and I'm going to delete app CSS as well as a react logo and over here I'm going to close the terminal so you can see what I'm doing I'm gonna take everything inside our div over here I'm going to lowercase this app and remove everything between the outer div and we're just going to say app like this I'm going to delete the count as well we don't really need this I'm going to save it and finally I'm going to go to index.css do command a or control a depending on your OS and I'm going to delete everything and save it all right and then I'll give you a brief rundown what's happening what each file is doing and what everything is about so index.css this is our entry point for our CSS file and that leads us into the main TSX where this exists the entry point of our entire application so this is where our react application actually lives and then app.tsx this is going to be the code that we'll be writing so we can have like different entry points different pages all on this particular page and then from here we have a Vite EMV typescript file so if you want types that exist throughout your entire file or entire directory this is where you'll write the types and we'll talk about typescript a little more later on and then we also have the get ignore file so you need the skid ignore so we don't push up everything the most important things to note is that we're ignoring node modules so that when you push to our GitHub node modules are exempt because known modules is a huge file and instead if someone downloads your repo you can do npmi instead over here we have packs.json so you have your dependencies Dev dependencies everything as usual vit has this particular Vite config that's specific to their particular configurations and this is where you'll set up different packages and then you're going to have a TS config as well so this is where you set up typescript configurations that you need and we'll all go we'll go over everything as we go the first thing we want to do is going to be setting up our Vite configurations so in this file imagine if we import some component from and we have to refer to like a certain folder we go like this dot dot Source components and some component like that and if you look at this this is a little crazy if you have a lot of these Imports it's really annoying to figure out what location this exists so instead we want to refer it as act components so if we have a file of some component in the components folder inside our source directory we can refer to at starting from Source but we need to set up some configurations for this to happen so I'm going to just erase this and I'll show you how we can do that so we're going to import path from path and this path comes from the types slash node that we installed all right and then from here I'm going to go under plugins I'm going to write resolve and inside this curly braces I'm going to set alias and I'm going to put an array and say find at and we're going to do replacement and we're going to set path.resolve and we're going to do under under a score directory name and we're going to say source so all this is doing is we're going to find anytime we have this at we're going to replace it with the current directory folder so that's what this particular represents and we're going to add source to it so that will give us an absolute path whenever we see at so this is a convenient way so this is one of those things you just kind of set it up you don't have to like learn this it's just sometimes you just have to Google it figure out good solution for your use case and then from here I'm going to go to the tsconfig.json file and in here under compiler options I'm going to set paths in double quotations and curly braces I'm going to set at slash star colon I'm going to put dot slash Source slash star like so and make sure I have an ending trailing comma over here so we're going to save it so now with this setup we're essentially allowing us to use the Imports like I mentioned so this is very convenient so our Imports are very nice and structured without all the chaos and now from here I'm going to be installing Tailwind but before we install Tailwind I'm going to close these tabs and we're going to go back to our extensions and we're going to install a couple extensions that I think are very useful for Tailwind so if I go to Tailwind documentation I think this is one of the best documentation for tail one because you can instantly search Tailwind documentation inside the code editor there's another one that's popular that you can look but it takes you to the actual website so it kind of interferes whereas this one you can search it up instantly with a shortcut key so for example if I go over here let's say I'm working on some class and I don't know what Flex is going to do so I'm going to do command command control T and I'll open it up or yeah it might be different depending on your extension let me go back it's a Tailwind documentation it says for Windows it's Ctrl alt T Mac is command control T so make sure you click that so you can be able to see the Tailwind documentation inside your code editor and you can go let's say I want to learn about flex and it's going to instantly take you to the flex location it's super nice the only downside is I can't really doesn't let you copy for some reason so if I try to copy that it doesn't seem to paste but aside from that it gives you a good option that you can instantly search and I highly recommend this one and also Tailwind CSS intellisense this one is another vs code extension and this one will automatically show you which Tailwind classes that you should apply this will help you figure out what type of classes that you can add and it'll automatically know if you're typing it correctly or not and give you suggestions and it's very nice highly recommend this one this one's very popular too now after those extensions are installed now we can install Tailwind so now on my left side or right side I have Tailwind to open up and this is going to be installing Tailwind CSS with Vite so there is a link in the description below so this is where you can install Tailwind CSS with the byte package and we're going to follow this pretty much to the T except a few adjustments for example create your project we've already created our project so we don't need to follow this so we're just going to skip to step two and we're going to be installing Tailwind CSS so I'm going to close this we're going to open up our terminal and we're going to be installing we're just going to take this npmi Dash detail when CSS post CSS all the prefixer I'm going to paste it into our terminal and we're going to wait for that to finish once that's finished I'm going to grab npx Tailwind CSS and knit Dash p so I'm going to paste that and we're going to create these files so you should be able to see tailwind.config.cgs post CSS dot config.cgs so we'll have those two files and then we're going to go to our template path and we're going to go and copy this guy over here I'm going to open it up and I'm going to go to tailwind.config.cjs I'm just going to replace everything over here and it'll have all the proper content that we need and then finally I'm going to go to Tailwind directives to your CSS so I'm going to copy all of this go to my index.css I'm going to paste it over here now we're going to get some mornings over here but you can completely ignore that it's just intellisense not properly figuring out what you need so it's a good point right now to just test our project so I'm going to run npm run Dev okay so we're going to hit enter and we're going to run it and as you can see if you ever use create react app this instantly loaded so it's very very quick versus create rack up takes a sweet time so here we're going to have our link so I'm going to copy and paste it over here and we can see our application now if you notice we're getting a warning no utility classes were detected in your source files that's expected because we have not used Tailwind classes yet and we'll take care of that so don't worry about that all right and then here I turned it off with Ctrl C so making sure your build is not up because we're going to run a few more commands so the first thing we're going to do is we're going to do npm I Dash D prettier and then prettier Dash plug-in Dash Tailwind CSS so prettier is going to be the extension that we use and it's going to install the plug-in into Vite but pretty plug and Tailwind will allow prettier to have Tailwind CSS configurations that will format Tailwind classes in a particular order now with this I'm not too big of a fan of how they basically organize it so if you take a look at this URL it's a link in the description again this is how classes are sorted it's going to tell you what how and like the way they organize it and sort it so whenever you save it's going to organize it in their particular format I don't particularly agree because it doesn't make sense on the first glance of how they're organizing it but at least it gives some kind of order to the chaos so if you have a lot of classes it at least gives you some kind of level of organization which is a little better than nothing I would say so this is why I'm installing it so we're gonna go the till uh prettier config or we're going to create a file called prettier config prettier dot config dot CJs and I'm going to drag it into our directory over here and inside here I'm gonna do module dot exports equals let me close all of this so you guys don't have to look at the chaos I'm going to write plugins is require D I'm going to put prettier Dash plugin Dash Tailwind CSS and I'm going to save that after we have all that set up we're going to go to our tailwindconfig.cgs and we're going to be extending this so now if you want to skip it you can you can go into the link in the description below where I have Tailwind config file click that and you can just copy and paste everything into here but if not I'm just going to go through this so you can skip this section if you don't want to copy it but basically I'm going to talk about every color how to create the Steam and what's everything happening so over here we're gonna have theme extend colors and inside here I'm going to say gray of 20 is going to have a color of f 8 F 4 e b and then I'm going to have a gray of 50. this is going to be e f e 6 E6 now if you're wondering how I'm getting these colors I created a figma I did the design so basically I'm basically grabbing the colors that I wanted and I'll have different shades and this is just if it's a smaller number like grade 20 it's a lighter gray than gray 100 but these are colors that are predefined that I've particularly used and it works in this design and then from here I'm going to have gray 500 I'm going to say five E zero zero zero zero zero like that I'm going to do primary 100 FF e 1 E zero like that I'm just going to copy this two more times we're going to have 300 then 500 this will be FF a 6 a 3. then FF six b six six and then from here I'm going to do secondary 400 FF c d five eight and then secondary 500 FFC one three two so these are all the colors that we'll be using so by the way just a little tip this is not a very design related video but when you have a design or a mock-up generally you want to stick to three to five colors that are the main colors and then you have shades of those colors that you use because sometimes you want that particular color that you use like primary 500 which is the main color but sometimes you want a lighter version so you do primary 300 so it's like a lighter shade of that color and it's very important to have those Shades because a lot of times you want variations of those colors but you don't want to use too many different colors so that's why you have primary and then secondary and then like a neutral color like gray or black things like that that's generally how you want to use them and when you use this in your Tailwind classes you're going to be using it like if you want to change the background you're going to say BG Dash gray Dash 20 so you can use those colors using these names so that's what these are extending and then from here we're also going to do a background image because we want to set the background image CSS over here and we'll we'll cover it when we get to that point but we're going to do a few things I'm going to set this as gradient yellow red so anytime you're using a gradient color for maybe like a before or after CSS selector this is how you're going to do it in Tailwind it's a little a little unfriendly for this part it's a little like I don't know it doesn't feel as well integrated in comparison but if you wanted to use gradients this is kind of how you do it and by the way I created a gradient in figma this is the CSS that it outputted so this isn't some like fancy gradient color that I just knew off the top of my head these are colors that I made from my mocks and then from here I'm also going to do mobile home so this one's actually going to be an image so this one's just a gradient and I know it's on their background image which kind of doesn't make really much sense but that's kind of how you have to do it otherwise if you want an image you can do URL and we're going to add dot slash assets slash home page graphic .png like this and we can access our background image with the assets file that we have and that's exactly one of the assets that we added earlier so home page Graphics will be this image so that's what we want to put in the back we'll have that as our background image and then from here we're going to do font family and we're going to add two fonts one that is going to be DM Sans and this is a Google font and it's a Sans serif font so it's kind of like open Sans which is the most popular one but with a slight twist has this own little character and then we're also going to have Montserrat at this is going to be oops this is going to be our main bold Heather type font that's a very common font that you see in the lot but it's a very nice one and it fits our style I'm gonna also say Sans serif like this so we're going to be importing Google fonts and I'll show you in just a second on that the final thing is going to be the content section and in here I'm going to do evolve text and I'm going to call this URL so again it's similar to what we have as background image but this is just used in a different way if you're familiar with before and after selectors you can put images via this content so like this is a way to put images when you do use up before CSS selector we'll cover that when we get to it it'll make more sense now I'm just like kind of talking about it it'll make more sense when we get to it and over here I'm gonna do evolve text.png I'm going to close that like so I'm going to have another one actually let's just copy this so that's kind of easier to just replace it and we're going to have four of these so this one's going to be abstract waves and over here this should be abstract waves as well except it's going to be capitalized this one's going to be sparkles and we're going to have sparkles PNG foreign is going to be circles and this one's going to be circles PNG like that we're almost done and below this content right here on line 31 below this particular curly braces I'm going to have screens so in till when we can specify break points for media queries essentially if it reaches a certain width we can change things so this sets up the default breakpoints so if I want to say we should only apply this particular class at extra small screens which is 480 pixels this is what it's going to be using we're going to do the same thing for a small except this is going to be 660. or 768 pixels I'm going to do medium and this will be 10 60 pixels so we don't need more than that and it seems like we have some kind of prettier area so it turns out I was kind of looking at scratching my head for this one but if you go back to terminal for some reason I did not do npm I Dash D I did not hit enter so make sure you hit enter if you didn't but maybe you guys did so once you have that installed so after that was installed if I hit command s now we don't get a prettier error so if you still see the pretty area ER if you have the same issue you can restart your vs code make sure you close down properly and reopen it should not show the error anymore so now we have everything set up for our Tailwind configuration now we can actually start coding so I'm going to close this out I'm going to go to our source directory I'm going to go to app.tsx and the first thing I'm going to do is open up my terminal and I'm going to do npm run Dev so here we have our local URL I'm going to copy and paste it it's already existing but make sure you have this app text because that's what you have so this is to make sure we have everything running and you have no issues all right so let me close the terminal for now and here what I want to explain is going to be typescript and typescript files so we have files called TSX and there's also going to be files called t.ts so the main difference between dot TSX and TS is that TSX refers to typescript component files so anytime you're actually using react components you can dot TSX whereas dot TS represents just regular typescript files that just maybe you just run you have like functions or maybe you just have some types in there you're going to be just having those just it's more of a semantic thing so that when someone looks at those files they know that this one is about react components this maybe and other files are not about it's more just a organizational thing all right so the first thing I'm going to do is I'm going to add a class I'm going to do BG Gray and then we're going to set this as 20. I'm going to save it let's make sure if you take a look the gray 20 is over here this is what we just specified for the color and we can see that we have our app over here now if you take a look our fonts are not there and the entire height is not there and that's because if we go to our index.css we have not imported the fonts nor have we set the default CSS to take up the entire height so we're going to start with that so the first thing we want to do is going to go to Google fonts there's a link in the description and we're going to go over to Google fonts and we're going to search up DM Sans so even though we set this up in Tailwind we still have to add the the fonts over here so I'm gonna go actually let me remove everything because I already had a selected family I'm going to go down and I'm going to choose two fonts sizes for this so I'm going to do regular 400 and bold 700 so if I open this up this is the selected family that we have but we're not done yet so we're going to go to Google fonts we're also going to choose monster at and I'm going to choose just the default and we're just going to grab one font size which is going to be 700. not the italic make sure we get that one right and we have bold 700. now if you take a look under style we're going to grab this at import and we're just going to copy and we're going to paste it at the top above the Tailwind base components and utilities all right so we have our Google fonts now I'm going to close it and over here I'm going to set HTML body root and then dot app like so so here we're going to set everything to a height of 100 percent a width of hundred percent and we're also going to set the font family like so of DM Sans oh make sure this is capitalized like that sand serif so this is the default font family for basically everything because I'm basically targeting like the root divs of our entire application so we'll have this as our default and I'm going to do at apply text Gray 500. so what this at apply is doing is we're going to grab over here and Tailwind config we're applying basically the text primary 500. color for our text so our default color for everything will be this sorry not primary I meant gray so basically this is our default text color for our entire page we can override this when we go more specific but once we save this we should see that the color the background color gets applied to everything and we now have I know it's a very subtle change but this font did change from the original so if I comment it out you can see that there's a very slight app change I don't know if you notice it but you can try it on your own but we now have our default setup all right and then let's go back to our app.tsx and we have the background gray 20. as you can see just like Tailwind we have the intellisense that provides us different options so these are already colors that Tailwind provides us if we want to use them but we also have the colors that we added so I have background gray 50 which is one that I added now it's giving me an error because it's saying there's duplicates there's like saying we're editing the same CSS so one of these are redundant so this is how you essentially work Tailwind CSS classes all right and then from here I'm going to delete the app now I'm going to create a component called navbar like so and I'm going to close it so we haven't created this component but we're going to import it first and then we're going to create the component so this component does not exist yet but we will be soon so we're going to import navbar from at slash scenes slash navbar so now if you remember we added the configuration so we have an absolute import so this should be referring to Source directory so we start from source and then we can create a new folder called scenes and then inside the scenes I'm going to create a file or folder called navbar and inside this folder of navbar I'm going to create a file called index.tsx now what happened here is I know we're referring to scene slash navbar if you're not familiar but if you directly reference a folder with index.tsx you don't have to write slash index.tsx it's only for a file called index in each folder where you can do that if there is a file different called like maybe nav for example then you have to actually specify that in this path over here like nav.ts nav something like that but if you have an index you can just reference that particular folder that's why we're able to do this so inside this nav bar I'm going to run t s r a f c e so this is basically the vs code extension the es7 plus over here so I found it es7 so this provides us Snippets so that we can make this make our lives a little easier so let me make sure I close this so that provides us this option over here I'm going to have the indexes over here I'm going to call this navbar like so and we actually don't need this import react I'm not entirely sure if there's a particular snippet without the import react from react but generally I don't need to use that so over here I'm going to make some imports all right and then from here I did save it so you can see navbar over here and I'm going to do some imports so I'm going to import use state from react so now if you saw what I just did you can do you can use intellisense for example I can type something like use effect and the intellisense will come up right here and you can click on it or hit enter and it'll automatically add use effect over here so using intellisense is very nice for two reasons one it saves you time writing you know a boilerplate code to import something but also prevents bugs because it's automatically generated versus you typing it which can lead to typos at times so I'm going to erase that I just wanted to demonstrate the next thing we want to import is going to be hero icons so if I go hero icons Tailwind we're going to be using some of these hero icons for our application so if you go to this website you can see all the icons that we need and the first thing we're going to need is going to be this menu icon so bars three so instead of copying we don't want to copy the SVG or the jsx we're just going to import it from our package so I'm going to do bars 3 is what they called and you're going to write icon and we're also going to import something called xmark icon for closing so this is for our model when we have a menu we want to be able to close the model as well so I'm going to do x mark icon like so and it's going to be from at hero icon slash react and we're going to say 24 because that represents the side size and we're going to do solid so this is all in documentation I'm not pulling this out of thin air it's just all in the documentation of how to import and then from here I'm going to import some images I'm going to import the logo from are at assets wait so at slash assets slash logo.png so that'll import our asset image all right cool and then from here I'm actually going to create a string called Flex between so this is a string that represents certain classes so items or Flex items Dash Center justify between so what this guy is doing is basically it's going to apply these Tailwind CSS classes and we're going to be using them in multiple locations I personally use this quite a bit it's going to be Flex item Center justify between so this what this kind of represents is if you if you take a look at this hero icon it gives this basic layout right here if you see if you imagine this right here is its own div same with this Flex between or Justify between is gonna move this to the very opposite end of this top parent div and we're going to do item Center which aligns it vertically so this is a very common UI thing that you use or like a set of classes that you use and we're going to be using that quite a bit for our nav bar so if I go down I'm going to actually get rid of this div over here I'm going to say this is going to be nav like this so it's the reason why I'm doing this nav is more it's about semantic HTML5 semantics it helps with Google crawlers and provides a better experience for Google to crawl your website but it is not the worst thing if you don't do it if you want to rank high which is not a requirement for a lot of applications for some applications important but for a lot of applications you probably don't need that so just realize it's not always necessary but anyways here I'm going to have a div and I'm going to put this in curly braces because we're going to use a template string because we're going to put Flex between as our CSS class and here I'm going to do fixed I'm going to set this as top to zero with Z of 30 so it pops up above everything a full width and py of six so I use a lot of classes so essentially let's take a look on what's happened all right so I swapped to this if you see this this is the final build of our application so this is on mobile screens you can see there's a logo and you can see a menu icon this is for mobile screens but let's say we increase the width we can go back and we can see what's happening over here so we now have a bunch of menu items and it's kind of a line in a specific way so I have this Chrome extension called pesticide which allows you to see how the divs are essentially split so what you want to look at from here Let's ignore like this particular div over here because that represents the landing page but we want to look at the nav div over here which starts from over on this location and what you can see this is a very complex div layout is that we have this particular div and this is another div over here like this entire guy including home benefits our classes contact us sign become a member this is split into these two parts and the reason why we don't split this section with EVO gym home benefits our classes contact us versus sign and become the reason why we're not splitting it that way is because of this mobile responsive problem where we go over here we want to hide everything else so if we had this as two divs there's no way of hiding just this and that in a very convenient way so I what I did was split this with a flex between between these two guys so we're going to have a logo over here and we're gonna have the rest of the menu over here and inside this particular div we have two divs again with flex between so we have home benefits our class contact us that's its own div and then sign in become a member that's his own div and these are flexed between each other and then also inside of each of these divs we're doing Flex between so home benefits our classes contact us they're also using Flex between same with sign in and become a member so now if you take a look you might think this is very complex but this is way better than trying to do absolute positioning making sure everything's there whereas when you use a flex it make sure that everything's aligning where it should because it can cause chaos absolute positions can cause chaos when you're doing responsive design which is why I try to when I do these tutorials make you do these type of layouts with flex or grid because they're a lot easier to handle when we do responsive design so if I close this you can see that these are flexed between this one's very simple and now if I go back to the code if I see fixed top zero so basically a fix represents us positioning the nav bar at the top and we're also fixing that so meaning it'll always stay there as you scroll down that's why we have this fixed and we're also fixing it to the top so that's why we have top of zero and this is the Z index Z index is always kind of like tricky sometimes sometimes it doesn't act as you expect but in here we're doing a z index of 30 so that it pops up before everything else so that there's nothing above it that will override this being on top and we're also sending a width of full so it takes up the entire width no matter what and then py6 represents padding of white of six value in the up and down Direction so when we're doing Tailwind we have a padding of six up like above it and below it inside our menu so it's always going to have that padding above so this is everything that's explained so in the menu just apply the nav bar is probably one of the more aside from maybe the landing page the nav bar is probably the trickiest part of the application it's always the most tricky it has a lot of little things that are kind of annoying and kind of a headache to deal with to be honest so once we get the nav bar a lot of a lot of this should be pretty simple so let me actually turn this pesticide off and we're going to flip back to our current application with our navbar and inside here I'm going to have another div so we're essentially reconstructing what we just saw so I'm going to have quite a few divs within the other so this was our most parent div and then we're also going to have another div that represents like the top part or the left side versus the right side so here we're going to have an inner div we're going to say name and we're going to put something like Flex between actually we could just copy this I'm going to say MX of Auto width of five five six so over here what I am doing I just want to make sure not to confuse you guys this div right here is going to represent the outer div so it takes the the whole width whereas this inner div is going to represent the five sixth section which is a percentage this is essentially a percentage if you scroll over it it means 83 percent 83 percent of the width will represent this inner width over here and we're going to do Martin X Auto what that means is that it centers it in the middle position so that's why we have this particular child div so that we we can set a color at the top but we also have an inner div for our layout and after this we're going to set up a div that's going to represent the left side so I'm going to hit a class name of flex between so I'm just going to copy the first section of this I'm going to set this width of full and a gap of 16. so this is going to represent this particular inner div and we're going to be splitting this as well so inside here I'm going to have an image tag and we're going to say in alt for logo so this is for screen readers to represent what this image will represent and then I'm going to put the logo image URL that we imported so that's going to be the left side and we're also going to have the right side so this is going to be div and I'm going to say let's just call this right side so we'll so we kind of have a better understanding of what represents which so I'm going to say this is the left side and inside here I'm going to say class name and I'm going to give it another Flex between with a width of full so entire width and if you take a look what we just did it represents this entire div over here with home benefits our classic contact us sign in and then become a member so this is the entire div so we're going to have a div for the inner left side and a div for the inner right side so that's what this one represents so this will have all the links this one will have the sign in and become a member so over here we're going to have a div and we're going to call this class name and I'm going to say Flex between I'm going to give it a gap of 8 and text of small so by the way Gap represents like the space between each item is a very useful CSS property so you don't have to add margin right to the child elements so we can keep that and in here we're going to have all our links so here for now I'm just going to say a div well let's actually do a P tag for now and this is going to represent home benefits our classes and contact us so these are the links essentially we're going to be doing it very shortly so we're going to benefits our classes and contact us so we're just doing the layouts first and over here we're going to have a div as well we're going to say sign in and we're also going to have a button that says become a member so if we save that we're going to look at this and we're going to see we have what we need we have home benefits our classes it stays to the left side because it this takes up a lot of space and then sign in become a member actually we actually need to set that as Flex between as well so I'm going to copy this class name and we're going to add a gap of eight so this sign in become a member is like that so right now it's all clustered like this because this is like this is a non-mobile this is like a non-mobile screen but we're we we aren't or this is a Mobile screen and we aren't handling the mobile scenario just yet all right so now we have kind of the layout for this particular thing at least for the desktop we're actually going to change this so we're going to change this to actually like being a nav menu item and we're going to use react anchor link smooth scroll that we just use so we can be able to click on it so what we're going to do is we're going to go over here I'm going to go into our navbar folder I'm going to create a new file and I'm going to call this link.tsx and this is going to be each of these nav items and so I'm going to write tsrfce so we can start this with the link I'm gonna remove that from type react and over here inside our link or our div I'm going to call this anchor link like so and as you can see we have our intellisense going to automatically import grabbing it inside this we're going to have some kind of page so it's going to be either home benefits or classes but we're going to make it Dynamic so I'm going to say page like this so that will come from our props so when we pass in components we're going to have our page parameter over here that gets passed in from the link component and it'll go all the way in here so this is where we can talk about typescript so every time you create a component and it has some kind of props for that component you're going to have to identify what the type is so inside the type props that is specified over here we can say page it's going to be a string so the page is going to represent home benefits our classes contact us that's always going to be a string no matter what so we're not going to put like a number or some other kind of value in here so this needs to be a string so this can represent whatever value and so by the way in typescript there's a lot of confusion you're always going to use type or something called interface so you might see in other code bases you might see interface used interchangeably with type because they're very very similar I have a link in the description it's called types versus interfaces and it describes like those small technical detail of the differences between them but in all honesty they're very the same as long as you have a consistent code um like how like the standard that you use for a code base whether it's your boss telling you to do that or someone else saying that this you should use types or interfaces whenever possible as long as you have something consistent that's what matters now I know there's slight technical differences and some semantic issues but honestly I see it as more of a pinion based I'm not all cut up in like small standards for like trailing commas things like that I'm personally not a fan of those types of debates because it's kind of a waste of time to be quite honest as long as everyone's consistent and on the same page I think that's what matters so type versus interface they're both the same so since we have our snippet they automatically set type so we're just going to be using that so from here we're going to add a few things for anchor link so anchor link needs some href it needs an on click so we can figure out what to do when it gets clicked on as well as some classes so the way we want to set this up is we're going to say we want a lowercase version of what we pass so we want the text to be capitalized so home benefits our classes but we want to grab the smaller lowercase version of the text for our href so this is going to represent so for example in this case we want it to be home with the lower case even though we're going to be passing an uppercase home which it will be right here the reason why we have a lowercase is because we're going to set that as the ID so later on when we create let me turn off pesticide so let me create like uh our classes page when we click our classes this div essentially needs an ID of our classes and our classes will be lowercase something like this is the ID that we need to set so that's what this href is going to refer to so that's how it knows where to go and that's what's happening over here and that's why we need to set this as a lowercase value so what we're going to do is we're going to grab page.2 lowercase like so so we lower case the value we're also going to get rid of any space for example our classes has a space between but if we want to set the ID it needs to be our classes without any kind of space so we're going to do replace with a regex that's all fancy but all it's doing is going to replace anytime we have a space we're just going to remove it that's all we're doing so once we have this lowercase page we can then pass this in with the number it needs to have this uh I forgot the name of this but it's like a number symbol but inside here we're going to pass in lower case page like so so that is going to be the tag of which it knows where to go to on our on our page essentially and also in our class name we have this thing where it's when it's highlighted and you click on it you can see that it's like a different color so we're going to say if some kind of selected page we don't know the selected page yet but let's say some kind of selected page where this variable is not created yet is equal to the lowercase page we are going to be setting this as text actually let's put a double quote we're going to set text primary of 500. so we're going to have it a different color versus if we don't we're just going to keep it black and that's we keep it Black by not having some kind of um without some kind of class so by having no class this is by default black so we're just going to do that and actually I this curly braces should fall over here so we have basically a situation where we are having a class name and it goes all the way over here and we can just make sure everything works and then from here we're also going to have a few other classes I'm going to do Transition and we're going to set a duration of 500 and we're going to do hover of text primary colon text primary 300. so essentially what this is doing is when we hover over it there's like a small transition phase so it doesn't automatically become that color we can have that so that's what this hover selector is doing this is a pseudo element so anytime we hover over it we can add this class so it's this is the one really nice thing about Tailwind is that you can have these pseudo selectors and add a class immediately like this this is very convenient in comparison to other libraries one thing I like and so the selected page we have not identified it and we're going to be creating it soon but we're going to add it over here we're also going to have another one called set selected page so we have not created this yet but for now we're going to say selected page is going to be a string we're going to change that actually in just a short period but we're going to use a string for now so we don't have any issues and we're going to set set selected page is going to be a function so we're going to set this as a string as well and we're going to set this as void so I'll explain this very shortly but on click is going to set the selected page to be the lower case page value that we have oh sorry I made sure that needs to be capitalized like that so this I haven't talked about it yet but the selected page is going to represent a state so right now the state is going to be home when I click on this the state is going to be benefits and then this is going to be our classes so that's what this is doing whenever we click it we're going to change that state to be whatever we clicked on and as long as we know which selected page is currently that's what the current current color is going to be so that's what we're going to have over here with the selected page now let me save that and now I will Implement everything over here so I'm going to go over to these home values I'm going to change this I'm going to just highlight everything with command D so like hover over this and command D and you can erase everything over there I'm going to grab all the P Tags I'm going to say link like so and I'm going to use intellisense to import it and I'm going to do a closing tag for this so that's the component we just created and for each of these we're going to be adding page and we're going to say home for example we're going to do the same thing over here for benefits foreign sure we grab all this like that get rid of that save it we still need everything we need selected page so and let me actually format this feather I'm going to grab select the page as well I'm going to change this this I'm going to add alt so we have two I'm going to change this to set select the page like this and I'm going to do the same thing over here over here and over here so prettier is going to format but we're still going to have this particular error because selected page is not defined in this particular component so now this selected page is going to be using react so use State essentially so we're going to use that but it's not going to exist in the nav bar we want it to exist in the parent level component which is going to be the app so we're also going to go back to our link and we're just going to copy the typescript because we need to always pass in what we just have over here to make sure that we can use the same props because in typescript if you're passing this in and if this was a number for example and then this is a string when you pass it down it's going to give you error it's going to give you missing so you cannot find name and right now it's just saying select the page is not even existent so actually it's not going to show us the proper error but if we do selected page and set selected page over here and let's see if we save it type number is not assignable to type string so it's always going to tell you if you're going to have a right if the correct type or not so you're always going to have to make sure you're consistent with your types otherwise it'll warn you telling you you did it incorrectly so we identified selected page over here then we still need to go to navbar and we see that navbar doesn't have these values so we need to make sure we identify these guys as well so the way I'm going to do this I'm going to copy the link select the page set selected page go to app.tsx I'm going to paste it in over here and this is where we're actually going to Define selected page so I'm going to go up here right below I'm going to say const and say selected page set selected page so this is standard react I'm going to say use state like so so that basically Imports you state from react and I am going to pass in we're going to start with home like this so now once we have that we can see over here we have and if you click on benefits you're going to see that it doesn't work right now and the reason why it's not working is because ink or smooth scroll you need to identify the ID like I mentioned before href we did not create the ID of the component where we're trying to navigate to so we haven't created the r classes page for example if we try to click this we haven't created it so it's not going to the on click is not going to work because of that but once we take care of that everything should be working so that is typescript in a nutshell so most of the time when you're using typescript you're passing down the props and you're making that prop consistent as you go down and you pass those in so essentially anytime you identify a variable you want to make sure that you're passing in the correct type so there's another thing we can do over here is that select the page we can pass this and call this a string like so so what this is referring to is that any of this is going to be a string typescript has this thing called inferred types so in some cases it's able to find the type for you so it already knew it was a home home was a string and all the values that it was it knew it was a string by default but sometimes you want to be explicit and identify what type of type you're going to be using so sometimes you want to put put it like this so it's up to you if you want to do it some people like being explicit sometimes it's good it's just sometimes more work it's honestly up to you if you're just starting out I encourage you to do encourage you to be more explicit so you get more practice but here let me show you another thing about typescript over here so now when you do typescript it's always more it's better if you're more explicit it's more restrictive as possible that's generally the idea you can go so here we can say home benefits our classes contact us they're all strings but we're never going to have more options than home benefits are classes contact us so what you can do is in this case we're going to create something called an enum so let's say I'm going to go above here and I'm going to write I'm going to have something called enum selected page and the standard for any typescript you can just capitalize it versus this is non-capitalized that's generally the standard you have an enum called selected page and we're going to say home is going to be equal to home like this benefits there's going to be benefits with the lowercase we're going to do our classes so and it's going to be lowercase like this and we're going to do contact us with lowercase contact us so instead of this being home and it's going to be a string I mean we can make this an enum like that so now it's going to say huh we have an error why is this in an error this is home we have benefits or classes but that's because we need to set enums like this so we're going to do selected page and we're going to set this as home I'm going to save it so now this is not going to have an error over here because selected page.home it'll identify the type as part of what is required for this particular use state so enums are kind of special like most of typescript is what's called compile time so basically a lot of typescript does not exist when you actually have your application so when you save it and the server is running this is what's called runtime and a lot of typescript types like for example um let's say select the page string this doesn't actually exist this type this code right here doesn't exist in the actual build of the application it exists in the compile time so it exists before you build it so in the final code that you host on some website typescript types just simply doesn't exist your webpack or whatever bundler will handle all the building of it and it'll remove all the type because you don't really need that in the actual build so we can get a more efficient build so this typescript is more more so for your development purposes so you don't have any bugs this has no purpose in terms of actually in in terms of the code however enums is like one of the few exceptions in typescript where it does exist in the actual build because if you take a look here we're actually using it as part of our string so selected page is an enum that you can identify and use in the non-type script manner so here instead of the home string we're actually using the enum select the page.home over here but it also exists as a particular type so it's one of the very confusing things but once you get your head around it it makes a lot of sense and it's very convenient because now it's going to give you lots of errors and say huh set selected page is incorrect and why is that so if we go to our nav bar we're going to go over here we have our selected page and this should no longer be a string because we identified this as a particular enum so instead of the enum existing over here we're actually going to take this out we're going to create a new folder called shared and I'm going to call this new file types.tsx and the reason or sorry this should not be a TSX should we add that TS and the reason why we're doing this is because we're going to use this file or basically use this type in multiple files so I'm going to save that and I'm going to import actually let's do selected page from let's actually change that to at shared types like that so that we can use this across multiple pages so once we have that created we can import that over here say selected page and that will be imported as well but we're still going to get an error with the set selected page because this value is a string set select the page as a function where this value represents the selected page so we need to pass and select the page over here that is a correct type for this so now we know that select the page has to be this particular enum and then you can see that in our link we're still going to have that same error so I'm going to go over to selected page like so that's your types make sure we import that and we get our value like so so with that we have most of everything correct but we now have a new error what is this why is this showing up as an error so now if you take a look let's think about what page is showing us okay what what was page so if I go index page is going to be capitalized home benefits our classes contact us which is actually very different or it's it's different from these this is this type of type so we cannot use the same enum so what we're doing and I'm doing this on purpose is that we have a page we're passing in home benefits our classes and we're converting that string using lowercase and replace typescript does not know that you converted it and it does not know that we are essentially coming to the selected page values so even though we pass in home we know that this gets converted to a lowercase value so it is identical to this but typescript's not going to know that so what you can do is use the as keyword and we're going to call this selected page like so so now what this as keyword is doing is it forces this it's saying it tells typescript hey treat this as a select page enum value instead so now typescript is no longer going to say oh these don't match so now selected page is what is getting passed over here so there's going to be no particular error that's what this as keyword is you don't always want to use ask keyword for something when you shouldn't but in cases like this where you're converting it to something that you know is representative of a particular type you can use the as keyword for this type of scenario not something you use all the time but um it's good to know that sometimes you're you're going to run into scenarios in typescript where like oh I know the type is correct but you're going to have some issues typescript doesn't know certain things typescript is not omnipotent and knows everything so this is where you use this so with that we have our typescript going through and we already handled enums strings and passing in props and I would say this is this is a majority like maybe like 80 90 of typescript you're passing in things and you're going to make sure those are correctly typed if you don't have the correct type it's going to warn you so for example if you use this as a string or if you use this as a Boolean it's going to give you some warnings so if you for example do if lowercase page is equal to um true or some something like that it's going to give you a warning it says select the page as an enum so it's either home benefits our classes contact us it's never going to be a Boolean and it's going to tell you those things so that's why people like typescript he'll warn them sometimes in this case it's very simple you can see that it's a it's not a Boolean but in huge code bases where you're passing props everywhere and you have a lot of code it can be quite helpful so now that we have everything set up let's actually deal with responsive so when we want a certain breakpoint we want it to basically fold and become a menu icon at a certain width so if I increase the width to a certain point we're going to split this to what we see right now but if it's below that certain one we want it to actually look like this so it doesn't all get clustered so we actually need Tailwind provides Us Media queries but it is not enough for us to use so we're gonna have to create a custom media query hook so I'm going to create a new folder called hooks and inside this folder I'm going to create actually this should hooks folder should be in the source directory so I'm going to move it I'm going to create a new file called use media query.ts and inside this this is kind of spoilerplate code so I'm just going to copy this I'm going to leave a link to this and you can just copy this code but essentially what you can do is pass in a minimum width of string and that gives us a Boolean and I'll show you how we're going to be using this but you don't know you don't need to know how this works really because it's just kind of something you use so I'm going to close this and I'm going to leave a link in the description so you should go to that so after I've created the use media query I'm going to go over here I'm going to create const is above medium screens I'm going to say use media query so that's the hook that we just created I'm going to import that and inside here I'm going to pass in Min Dash width of 1060 pixel like so so this essentially will say it'll give us a hook that we can use to notify us and it'll give you some Boolean to say we are currently above or below this width so this is a very convenient hook so it'll kind of allow us to use a conditional to know when we can do something so basically we are going to go above over here onto the right side in this section like below the image right here I'm going to say is above medium screens and we can do a ternary operator so that we can have this this layout when we're above that those particular screen sizes otherwise we can just kind of create a little extra over here so that we have a different condition when it's not and actually I misplaced the location of it so this I believe should be placed inside of here and let's make sure we close that like so right here foreign place it over here like this make sure you close it like that okay so this is basically this first condition is going to represent when we're on the desktop whereas this one is going to represent when we're on mobile screens and when we're on mobile screens this actually should just be a button we don't really need anything too fancy and I'm going to say this is going to be a class name of rounded full so that means it's a circle rounded full represents border radius 100 which creates a circle from a div and we're going to create a background of secondary 500 which is more of a yellow color and we're going to give it a padding of two all around and I'm going to say on click and I'm going to have some kind of function that's going to toggle the menu open and close and right now I'm just going to create this right here set menu toggled we haven't identified it but I will do that after this and we're going to flip the is menu toggled like so and before I create the set is menu toggled functionality I'm going to pass in bars 3 icon so this is the hero icon that we saw a while back I'm going to give it a height of six width of 6 in text of white and then if I go up here I'm going to create const is menu toggled and set is menu toggled and this is just going to be a simple use state give it a Boolean like typescript and I'm going to save as default it should be false like so I'm going to save it so if I go to our app we can see that on the smaller screen we have this particular menu icon if we open it up we can see everything expanding and we see what we have before so on a certain size we have the menu perfect that's what the whole purpose of this above medium screen media query is used for otherwise we wouldn't be able to do something like this so the next thing we want to do is if I open this up right now we have sign and become a member this is not really doesn't really look like a button if you take a final build we have a button over here so we're going to be doing that and because we're going to be using this button in multiple places like this and if you go down over here we're going to be using this button multiple times we're going to create a shared function or shared component and we're going to have different styles for that so I'm going to select the button over here so I'm going to write action button and with action button we want to be able to use the set selected page because if we click this button sorry if you open this up if you click this button it'll take you down to the contact us page and that's kind of what we want to do so we're going to use another anchor link and we're going to be using set selected page as well so with that I'm going to go into my directory go to Shared folders I'm going to create a new file and we're going to call this action button dot TSX and in here I'm going to write uh t s r a f c e call this action button we're going to erase the import react from react and in here I'm going to just change this to anchor link like so and I'm going to close that and if you see here we are passing become a member inside action button so basically we're passing it into the children of this component and to do that we're going to pass it in the prop section we're going to say children and we're going to pass in children over here so that will represent what should be inside our action button to do that for typescript we're going to say children and we're going to say react Dot actually we didn't need to erase it before but we're going to do react.react node like so and we're also going to pass in set selected page because we passed it in and this should be another arrow function so we're going to say value and we're going to say selected page from the types like so I'm going to return a void so this will give us a button but we still need to pass in some different things into anchor link and so we are going to style this and we're going to do rounded MD so basically this is a rounded border radius of medium size so if I open up the Tailwind documentation I can do border radius and we can say rounded corners and it says rounded round and small rounded large so I have rounded medium so it looks like this so that's why you can use Tailwind documentation just close it now we know exactly what this is doing from here I'm going to do background secondary 500 so the yellow background color with a pixel padding of 10. maybe not pixel but padding in the X direction of 10 and a py of 2 with a hover of background primary 500. so when we hover over it we're going to give it a color of 500 primary and also I'm going to say if we hover over it we're going to keep the text to be white so this is the power of Tailwind having some of these selectors directly on the class name in a very convenient way you can just specify hover immediately and you'll be able to Target the class it's very convenient and makes it very fast to write the only downside with Tailwind is that if you have a lot of classes and you're targeting a lot of it you're gonna have a lot of classes and can be very hard when you're trying to go back to your code and you have like a thousand classes it's not going to be very fun to figure out and change the ones that you want so it's a little clustered in that kind of way the one downside of it so when it comes to like CSS Frameworks and components a lot of them have trade-offs that you're making anyways for on click we're going to set selected page so that we can navigate to the page that we want and we're going to navigate to contact us and like before I mentioned we're using an enum to write this instead of writing a string that says contact us we're going to take the enum and we're passing it in and typescript will know now that this is the only one that you can use it prevents a lot of bugs because you you're not writing a a string yourself manually and sometimes you might have a typo and that might cause problems all right and then the href for this one we can just directly write contact us like this or if you want to be more safe you can do this we can write and pass in selected selected page dot contact Plus because selected page contact us if I hit hold command and I click on this we go to this page and it'll give us a string of contact us so that prevents us from writing another book so in a way enums are very useful when you have like a set of strings that you want to choose from enums are very useful in those kind of scenarios so I'm going to save both of this we just haven't imported action button so I'm going to just delete the action button and you can click it like that and it'll automatically import we're going to save it and now let's check if we have what we need so we have become a member perfect everything works we don't have the on click yet because it's not going to work yet because we don't have that page but we can get to it so the next thing I want to build is going to be on mobile screens if you click this we should be able to see a mobile menu pop up so we can either home benefits our classes contact us basically the same thing except in a mobile format we should be able to close as well so we can open and close like that so that's the next thing we want to build so we haven't done that yet so under under one two three divs three closing divs so make sure you have this in the right location under three closing divs I'm gonna write a comment we're gonna say mobile menu modal link so and in here I'm gonna do is above medium screens and I'm going to say is menu toggled and here I wrote is many toggled because right now we want to make sure that this is below medium screens so right now we have a situation where below menu screens and when the menu is toggled so when this has been clicked we should be able to see the menu otherwise we don't want the menu to pop up so it's two conditionals over here so we need both of these guys to be true for the menu modal to pop up and then with that we're going to do a div for our menu model and since it is a modal we're going to have to add some specific classes so I'm going to give a position of fixed we're going to set this to the right side and align it to the bottom so it takes up the entire height then we're going to put a z40 so it pops up over everything including the original mobile menu because we still have this mobile menu we want this to pop up above over that and then we're going to give it a height of full again to give it a full height and I'm going to give it a width of 300 pixel which is a very nice number when it comes to modal for smaller screens and by the way if you want exact pixels sometimes you're going to have to use this bracket in Tailwind that's how you specify something exact whereas typically we have been using something like w-6 is just an arbitrary number that Tailwind has decided that works but if you want exact pixels we do 300 pixels something like that then I'm going to set a background of primary 100 so a light yellow type color I'm going to give it a drop shadow as well and we're going to say this is extra large so they have preset drop shadows and we're going to use one of those so with that that should give us our mobile base our basically our mobile structure and here we're going to have a close icon the close icon is the first thing that pops up over here if I open this close icon should be right there and I'm going to give it a div with a class name of flex justify Dash and with a padding of 12. so what this means is that we're setting this to be Flex so it takes up the entire width but we're passing it to the very end so if I open up Tailwind we can do Flex justify content and actually that's the incorrect one let me reopen it Flex justify so we're going to justify content and justify and represents it being on the end of the flex box so that's what that particular positioning is and then from there we're going to make this a button and I'm going to hit it on click and we're just going to take this guy over here so we're going to do exact same thing so basically if it's open it will close it if it's closed it's going to open but in this case this can only close it doesn't really matter we're going to say x mark icon so this is the X icon from Tailwind hero icons I'm going to set this as class name of height of 6 width of 6. text Gray of 400. so that will color our color our icon and also it seems like our button is not closed for some reason actually this all right and we're just going to save that now one thing I want to clear up I forgot to mention but what these units represent they're kind of arbitrary numbers that Tailwind decided so if you take a height we have a height of one two so basically they're essentially different Rems that we set so they have a specific height that they want you to set depending on the values and no not every value is available like for example 13 doesn't exist 15 doesn't exist 21 22 23. so you have to kind of go with the way they're set up otherwise you're gonna have to set an exact width like this or exact number like this it's recommended to use their values as much as possible because according to them it makes it look nice I mean if you have the eye for it you don't really need to have this specific thing but if you don't it might help out for you all right and then the next thing we're going to do is we're going to create the menu items so the menu items like this and we're gonna just go up over here and inside the div with our links we're just going to copy it and we're going to go down and we're going to paste it but we're also going to change a few things so let me save it so we have our alignment the class name should be a little bit different so I'm just going to erase everything I'm going to say a margin left and we want a margin left of 33 percent a precise value and I'm going to set a flex and then Flex column with a gap of 10 and a text of 2 XL so this is the size this is the gap between the items so now if you look at this Flex Flex column represents the direction of flex right now we're actually flexing it into the vertical Direction normally Flex is in the horizontal but we want to flex it in the vertical Direction and the reason why we want to do that so we can add a gap below them and we can position them and align them correctly it's a very convenient way sometimes if you want to do vertical alignment sometimes you just place the items on top of each other but other times you can use flex to align them a little bit differently so we're going to save that and we're actually going to look at our build and we can see this is already open because we've already clicked it so if I open close everything works as expected and let's double check everything works on the desktop screen if we go back we don't have the menu everything is good perfect so with that we're almost done with our Napper we're very close but we're not completely finished there's one last thing I want to show you is if on the final build if we scroll down we now have a nav bar so it doesn't if you just kept this very transparent it's just going to overlap and it's not going to look good so we want this bar to pop up over everything so we're gonna handle that now so to do that in our code we're going to go and close out our action button and we're going to go to our app and I'm going to write const is top of page set is top of page which so this is going to be a Boolean so we're going to use State and again typescript we're going to add Boolean over here to make sure we know and tell typescript that this is a Boolean 100 percent and inside here we're going to do a use effect from react make sure you import that and in here I'm going to create a function called handle scroll and that's going to be an arrow function like this I'm going to say if window dot scroll y so if you want to check if we're at the top of the window we can use window.scroll y to use and check if we're at that Top by saying window.scroll Y is equal to zero so that means you're at the top of the page if it is we're going to set the top of page to be true so we're going to make sure that we are configuring this to be true when we're at the top of the page and by default since we load onto page this is going to be true by default otherwise or actually not otherwise we're going to say set selected page to be selected page dot home so whenever we are at the top we want to select the page to be home and the reason why we want to do that is because that allows you to have this red colored text whenever we're at the top even if you scroll down the home should go back to the home the red color that's what we want it to do and then if window dot scroll y does not equal to zero we're going to set is top of page to be false so this is one that is by the way I know we could I could just do if and then else that's perfectly fine personally sometimes I just like to do the inverse because this is more explicit it's just easier to read sometimes but that's my preference that's really really up to you that's more of an opinion based so I wouldn't I would take that with the grain of salt so from here I'm going to do window dot add event listener and I'm going to say scroll I'm going to pass in handle scroll and the reason why we're doing that is because we need to add an event listener to the window so anytime we're handling window type objects we always want to add the event listener and as part of the return statement meaning this is when the component unmounts so you have a return statement this function is going to handle anytime we leave that or whenever the component basically disappears this is a function that we want to run and for this we want to do remove event listener so we're going to remove the scroll as well as the function of handle scroll so this will allow us to remove it when they leave the page otherwise you can have memory leaks and certain bugs that are not ideal so with that I need to pass this is top of page we're going to be using this inside our nav bar so under nav bar I'm going to say is top of page and I'm going to pass it in with that I'm going to copy this I'm going to go to navbar by hitting command click so we it takes us to the page and over here I'm going to write is top a page like so and in the type props I'm going to pass to Boolean like so so now we have the is top of page Boolean and the only thing we really need to do is we're going to create like a background when we're at the top of the page so now we have the Boolean that tells us when we're at the top of the page we can give it a different color basically different class based on that so here navbar background if it's at the top of the page it's going to be empty otherwise we're going to do a background of primary the respect spell that correctly primary 100 and we're going to do a drop shadow and we're just going to leave it to the default one because that one is good for this and I am going to pass it in to this div over here it's a nav bar background save it as you can see now we're at the top of the page we're going to have everything as needed so for at the top of the page and right now it's going to show I believe when we get to a point when we actually have more scrolling section this should not appear let me save this maybe that oh actually I was incorrect so here I just forgot to save it we're going to have it is top page this should be transparent when we actually scroll down we don't have any scroll room to do right now that's why we can't show the Red Bar but once we're able to scroll we're going to be able to see we have our nav bar background and with that everything with our nav bar is fine and complete like this is the most confusing and hardest part of the entire application so good job on getting through the nav bar it's always kind of tricky and with that our navbar is complete now the first thing we're going to handle is going to be this home page so on mobile screens we're going to see that we have the header and the text along with the image graphic over here right below now with this image graphic now if you take a look you can probably separate these images out into separate elements but ideally it'll be kind of a pain if you do that because if you you have to position everything kind of in the proper condition and unless you want specific interaction for some of these images it's better to just combine all of these images from whether it's your designer or if you are doing it you can combine all these images into one and all we have to worry about is the placing of this so in my case I just merged everything and we just have one basic image and so on actual desktop screens we're going to see that the image pops up over here on the right side and we have our text over here and then we also have join now learn more and we also have a background image over here so by the way this uh this text and this lighter thin text is basically Montserrat so it's one of the fonts that we imported but it's of a different size but I made this into an image because we only use this particular size of Montserrat on this particular part like no other place has that type of font size or font weight is what I'm referring to meaning this is Montserrat black this is monster at ultra thin the reason why I made this into an image is so that we don't import too many font sizes if you import too many font sizes it can slow down the performance of your website it's just more things to load so generally in this case since we're only doing it once I'm going to make this into an image so you're always kind of thinking about performance here and there so with that we're going to create the left side and we're going to create the right side as well and we're just going to do a flex box and align them top and bottom once we're on mobile screens and we're also going to have join now learn more these two buttons are just going to take you to the contact us page both of them so pretty simple and also the background image over here on Mobile screen is gone so with that let's get started so over here I'm going to create my home component and actually in our home component I want to pass in set selected page because we need to use that for the button for these these buttons so that we can navigate to different parts of the page that's why we need to pass that in and then I'm just going to import home from at scenes or at slash scenes slash home it's a component we have not created yet so we're going to be doing that so if I go back over here I'm going to go under scenes I'm going to create a new folder over here I'm going to call this home inside of this I'm going to write index.tsx I'm going to pass in TS rfce like we usually do and I'm going to call this home and for some reason it didn't get that in the props I'm going to pass in set selected page like we did and pass it in as our type I'm going to say select page at shared slash types I'm going to return a void I'm going to remove this react because we don't really need it so from here I'm going to import a number of items so I'm going to import use media query I'm going to import action button from the button that we created I'm going to import home page text from at slash assets slash home page text Dot PNG so this is an image that we have over here in the assets folder home page text so this is going to be the main graphic text over here and I'm going to copy this multiple times because we're going to import a number of different images so maybe like five of them this is going to be your home page graphic this is going to be sponsor red apple this is going to be close that to sponsor Forbes and sponsor Fortune and that should be good we're going to save that and over here I'm going to do const is above medium screens so like we did before I'm going to do use media query and I'm going to pass in Min Dash width like so 1060 pixel so make sure you have the parentheses and the syntax correct otherwise it's going to give you some bugs and then from here I'm going to change this div to section is more of a semantic it's going to represent this particular section of the website for each of those pages and here this is where I'm going to set the ID usually I don't use the ID I usually use class but for anchor link scroll we want to set the ID to home so we can navigate to this part of the section of the website based on this ID so this is where that comes into play and then we're going to set a class name we're going to set gap of 16 with the background of Gray 20. a padding bottom of 10 a padding top of 10. actually if that's the case we can just do py of 10 that represents both and we're going to do a media query of full height only on medium screens or above so that's what this represents this is a media query and we are only applying the full height when it's above medium screens so it's a particular class that we want to apply and then here I'm going to set a padding bottom of 0 4 medium screens and above all right and then from here I'm going to start with the image and Main header I'm going to have a div and inside here I'm gonna write main header and we're going to have another div that will wrap around the main header as well as we're going to have the image and that should have its own div as well all right and then inside over here we're going to have a headings like this and we're going to have a div inside I know there's going to be a lot of divs we're just going to make sure we have a lot of this layout properly set up and so what we're going to do we're going to handle this particular section right here this is the main header the headings is going to represent this section and then we're going to have a section called actions that'll represent the buttons over here so with this main div outside we're going to have another div inside that's going to represent a relative tag and I'll show you what I mean this is going to be a little crazy we're going to have lots of divs but I'll show you that every single one has a purpose and inside this image tag we're going to have an ALT of home page text and we're going to have a source of home page text as well if you take a look you refresh it you're going to see the text right here this is not the ideal solution or ideal location but we'll be handling that shortly so let's just get the layout first so we're just going to ignore this layout issue so the next thing we want to do let me move this and open it up I am going to go in below let's say we have the closing div over here after the second closing div we want to put a paragraph tag and inside this paragraph tag I'm going to write this text over here I'm just going to copy and paste it from my other screen here I'm going to have the text and you can just write whatever text you want but you can pause it and look at this text right here so we're going to have text right below so if we refresh it we're going to see that and then below this first closing div that we see here this is where we're going to put actions so this is where the buttons come into play so for the buttons we're going to have a div and we're also going to have action button so this is the action button we created earlier and we're going to pass in set selected page selected page like so should we close it and inside here I'm going to use join now and then below this we're going to have the learn more text so let me save it refresh it for some reason it is not refreshing when I save so let me restart my server all right and then anchor link I want to pass that in and import it using intellisense so make sure you imported through intellisense and I'm going to set class name I'm going to set text SM font of bold text of primary 500 with an underline and then when we hover over it we want the text to be secondary color so yellow color when we hover over it so I'm going to go to the next line and here I'm going to set on click I'm going to pass in set selected page and I'm going to pass in selected page dot contact us and as you can see with enums intellisense is going to tell us what options we have if you want to use that href and we can do spell that correctly we're going to do a template string like this do a number and then pass in selected page dot contact us and over here I'm just going to do a P tag because I want a P tag for this one I'm going to hit learn more and it should be updated there so right now we have our base layout we don't have everything set up just yet in terms of styling but we'll get we'll get there soon first I want to set up the image so we have everything aligned so I'm going to write a div actually inside the image we just we actually just need an image over here I'm going to say alt of home page graphic I'm going to give it a source of capital home page graphic and close it and we should see our image over here perfect in the last part of the layout that I want to create is going to be below the second closing tag over here so this just FYI if you follow this column over here it's going to be traced back to image and Main header that's what we're closing over here so now we can actually add the sponsors which is right below so if you take a look at the final build the sponsors are not gonna it's not going to exist on smaller screens but if you see on the bigger screens we're going to have this sponsor layout over here like so and we're going to do the same over here so I'm going to say is above medium screens and I'm going to set a div inside of here like so I'm going to have multiple divs inside and I'll show you what happens over there but inside here I'm going to have an image I'm going to say Alt is equal to Red Bull sponsor I'm going to say source is going to be sponsor Red Bull I'm going to close this I'm gonna copy the image tag for two other ones and I'm going to be changing each one of these this should be Forbes and I'm just going to capitalize this over here I'm going to copy Red Bull again I'm going to change this to Fortune I'm going to lower case this one over here so now if you take a look we don't see it yet but if you open the screen you're going to see our sponsors the layout is all kind of messed up but we will be fixing that right now so if I go back up let's handle this scenario so right here we want to move this we want more space in between we also want the image behind it on bigger screens and the way we do that is if we go to main header actually let's start with this part for the image and Main Hunter so the one thing we really need to do is we're going to do flexbox when it's on bigger screens so on bigger screens we want flexbox but on smaller screens we want them to be aligned like this so right now this is fine for mobile screens like this header right here and this image this is perfectly aligned but when it comes to bigger screen we want to do flexbox so they are next to each other instead we're also going to do MX Auto so to center it if needed and we're going to set a width of 5 6 if you remember that's a width of 83 percent whenever you do fractions it's a percentage and we're going to do items Center to make sure everything's aligned in the center sections and then we're going to justify Center as well to align both the header and the image in the middle and I'm going to set a height of five six only four bigger screens and that's because if you go over here oops didn't mean to do that if you go over here we have this section so this is a height of five six well this takes up probably like 15 percent so that's why we have this one as a particular height and then in the main header I'm going to set a class name and I'm going to set this as Z 10 with a margin top of 32. and we're going to set basis of 3 5. so what's happened is Z10 we just want to make sure it's in the front a little bit making sure a margin 10 or margin top of 32 so a lot of margin on the top of it so we don't have this issue where it's just all messed up and aligned incorrectly I haven't saved it yet and also a basis of three fifth so just for you guys to know basis is flex basis so when you use flexbox instead of doing like if you want something to be a certain width like this width percentage you can use the width percentage instead but the other option is to use flex bases Flex bases does the same thing as width but has some extra properties that's ideal for flex and it aligns things properly when you have responsive scenario so whenever you use flexbox try to default to using bases over with over here in the headings I'm going to add a class name and I'm going to set MD of negative margin top of 20. so this right here we're going to be setting the height so that it goes up a little bit we want to make sure this section goes up from where we originally are because we did a margin top of 32 but we also want to push this a little higher than before compared to everything else all right so inside here I want to show you guys something so when we go to the big page we want an evolved text image like this in the background but we want it to be relative to this logo or this image right here and the reason why we don't want to do absolute position we can do absolute position and say this is from the top 20 percent from the left of zero percent however if you do that you're going to have a lot of issues when you go to smaller screens even though we're kind of like hiding it we always want to place something that's overlapping with something relative to another image or another part of the page it'll make our lives so much easier and I assure you that this is the better way to do it and it's not that hard you're going to use before and after which can be a little bit annoying sometimes if you don't know how to use it but once you get the hang of it it's pretty simple so let's go back to our code or let's go back to our version and what I'm going to do over here since this is the home page text we want to set this to be relative you always want to set the relative display or a relative position on the parent element so this relative position refers to the parent div of this image and below that one this is where we're going to write our before classes so the first thing you want to add is an absolute so the parent should be relative but the child of that one where you are putting the image is going to be an absolutely positioned um element so that's how we can create an image relative to something else so we're going to do before negative top 20. so what that means for example the image that we're putting for on the before tag is going to be negative top negative 20. so basically this is negative 20 from the top so it's going to position it right above it and so let's actually see this so if I'm going to do before content evolve text so now if you remember that comes from over here and uh where is it fight no that was a tsconfig not Tailwind sorry sorry now the brain part so if I go over here this is the content we have an evolved text this is how you're putting an image into the before tag so we're going to put the content evolved text absolutely positioned like so as you can see it's a little off but as you can see it's right above the correct location so this is how you kind of use before to place something relative to another and it's very convenient it's one of the one thing you should know it's more of an advanced thing but once you have the general gist it's not too bad so before we're going to set a left of 20 so we position it a little to the left and we're also going to since this is a above the Evo gym text we want it behind it so we're going to do before and we're going to set Z to be negative one and this is how you put a negative one for Z and it does seem like it just disappeared and now as you can see the text kind of disappeared but we're also going to make sure that it only appears on the above medium screens so we're going to do MD like we did before but we're going to put it in front of before so sometimes you want to chain media queries with selectors or if you want to chain multiple selectors you can do something like this you just chain it with an extra colon so now if I go to a the medium screen now we can see our text coming up right behind this main image so that is essentially what we need for our before so now let's just to recap everything what's happening with the heading is we have a parent with a relative so this entire div is a relative relatively positioned div and then below this we have a child that's going to be absolute and that's where we put all our before tags including the image and we're positioning it relative to the main image that we want to place it behind and you can use before or after tags to do stuff like this and it's very nice that you have something where you can position something relative to it because absolute position can be a nightmare when you're dealing with responsive layouts so I highly recommend if you can just position something relative to another and it'll save you a lot of headache all right and then from here we're going to add some classes to this paragraph because we probably need some margins or we're going to say margin top of eight we're going to say text is going to be small and we're going to put a text of start on medium screens so if I look over here right now I think that might be fine yeah I don't think that really did anything so we just add the margin top of eight I don't think this does anything so I'm gonna get rid of it we'll see if it changes anything all right and then from here in the actions we're going to also add another other more stuff like margin so margin top of eight Flex items Center so we are setting this to be Flex so we can align these next to each other we're going to set a gap of eight an MD of justify start so when we're on bigger screens we can set this to be justify start actually this might be another thing where we can yeah we can delete it so anytime we have CS classes that aren't really do anything you can just get rid of it sometimes I have extra classes that I just added at some point that worked but later on and that ended up not being useful all right and then now we're going to handle our image so for our image we're gonna do we want to be able to Center the image when it's on bigger screens so we're just going to set this as class name we're going to have Flex we're going to say a basis of three-fifths so it'll try and take as much space as possible now we're going to do justify Center so we put it in the middle location and then I'm going to say Z of 10 just in case if you have the Evolve text above we want this image to be in front of it so right here you can see the Evolve text is above the image so I want it to not do that and then from here I'm going to hit enter so we don't have a super long class name line so right here I'm going to say MD so on bigger screens we're going to have a margin left of 40 to increase the gap between the items give it a margin top of 16 margin and then justify items to be at the end so we position it to the right side so it's a little bit of a a little bit of like playing around but basically I move this image to the furthest right I possibly could with some margin left as well as flexing it and putting it to the farthest to the right so it gives some more space between this and this which makes it look better all right and then from there the last thing we're going to handle is going to be the sponsors so the sponsors only exist when we are on Fuller screens so here I'm going to set the height of 150 pixel which is an exact value with a width of full and background the primary 100. I'm going to give it a padding in the top and bottom directions of 10. here I'm going to set a class name of MX Auto with a width of 5 6. 5 6 or 5 6 like that so if you take a look at this there is a bit of a gap from here left and right so we don't we have some space between so it's not hugging the edges and then right here I'm going to say class name and we're going to do Flex with the width of three-fifth items Center and I'm going to set justify between I'm going to do Gap of eight and with that we don't see the sponsor yet but if we go increase it we should be able to see our particular image and with that that's pretty much our home page fully complete so we have if you go full screen We have basically this layout and you have an image these are Flex between and then if you scroll to the mobile size they should be on top of each other with buttons over here with image and then we'll have sponsors on the bottom if we need on bigger screens responsive layouts are always kind of tricky so you always have to consider what's going to happen with this particular image when you're on bigger screens and when you go to smaller screens because sometimes you have tricky dimensions and the worst case scenario is when you're using absolute positions you are going to get massive headaches when you're dealing with certain screen sizes so sometimes if you absolutely position it's going to look nice maybe even on mobile screens maybe even on desktop screens but sometimes in between screens it can it just doesn't work so you're gonna have to have a lot of um you're going to have a lot of headaches when you do absolute positions but that's why having relative positions Sometimes using like that or using flexbox or grid those are very nice to use when you're dealing with responsive layouts I highly recommend you try to use flex and grid as much as you possibly can without resorting to Absolute position and also there's one thing I almost forgot but if we go back to the home page this is the completed application if I refresh the page you can see we have a little subtle animations that goes in from left to right let me refresh it one more time you can see that there's a little bit of a animation from this entire thing comes in first and a little bit of this with a little bit of delay after so this is a nice little animations that you can use with framer motion and it's super easy with framer motion it makes a very nice and convenient to do so let's actually import actually let me write motion and I'm going to use intellisense to import motion like that to do this I'm going to go to The Heading section so we're going to include the relative inside so right here you see where the headings is we're going to type motion.diff so now we converted the div from just a regular div to motions div and with motion div we can add some properties that is useful for animation so I'm going to say initial is going to be hidden so when we first start out so if you refresh this they are invisible it's a little quick but you won't be able to see it at the initial point and while in view we're going to switch it to something called visible and the way we were going to do this is this is the initial value this is the final value and these are just words that you semantically set to represent the initial State and this is the final state that's what these keywords mean and we set them with initial and while in view and we're going to set setting called viewport so basically we're going to do true to be once meaning we're only going to trigger this animation once so if I do if I see this animation and I come back to the top the animation only happens once that's that's what this represents we can set it to multiple if we wanted to so it re-triggers every time you see it but we're not going to do that we're going to set the amount of 0.5 for this first one headings it doesn't really matter about the amount because you immediately see it when you arrive on the page but if you're dealing with something like later on you want this you want to see like when it triggers the amount that you need to see for it to trigger so you see 50 of this dib and then it triggers whereas if you do one that means you have to see the entire div for it to trigger so sometimes you won't even see the animation until you have this entire like box for example in view in The View all right and then from here we're going to do a transition duration of 0.5 so this is how long the animation takes is pretty straightforward and then we're going to set variance and this is where we set the initial initial keyword and then the final keyword so hidden this is the starting point and we can set whatever setting we want the first thing we want to set is going to be opacity to be zero and a position of negative 50. so we're going to start from negative 50 of its position that it's supposed to be at so like it's going to start negative 50. and the final state is going to be visible and we're going to say give it the opacity of one and X of 0. so this is the initial condition except by this this is the final condition set by this and we are just changing variables that we wanted to we can change X we can change y things like that so if I refresh it you can see that this heading section popped up like so so I can increase the time so if I refresh it it's going to take much longer we can also change the position so if we start from negative 500 it's going to fly in I guess it doesn't even fly it um let's see you can change the position to 100 maybe that will that will work yeah so as you can see it starts further from the left but for us we're going to set it to 50. and you can change you can look at the frame remotion documentation for more settings and you can do a lot of fun things with it but this is essentially all you have to do and it's very convenient it's a little there's a lot of code that sometimes it just gets cluttered when you're looking at the component it just adds a lot more code but it is very convenient because you can apply this animation after you've written the code in a very simple so like just as you saw I just did motion Dot and that makes it very nice to use and so we also can do the same thing with actions and we're going to have nearly the same settings but we want to add a little bit of a delay so I'm going to go up I'm going to copy all of this and I'm going to go down I'm going to paste it below actually make sure you don't get rid of the double quotations so I'm going to have everything the same but instead we're going to add a property called delay 0.2 instead because actually let me let me take this out and demonstrate what's going to happen so everything comes in at the same time but usually a nice effect is to add a little bit of a delay so if I refresh this comes in this comes in so it's nice to have a little bit of a staggered animation is what they call it but gives it a little bit of a flow in effect to the animation a more fluid feel and with that pretty much our home page is pretty much done there's one last thing I want to address so let's say if we go open this up if I go down this red text goes to the next page depending on where we are at so it follows and tracks the correct scroll position so to do that we can actually use motion div to do it we can also go by based on a particular div and just have an event listener that will tell us to switch the selected page as we go down but we can use motion div to make this quite easy so I'm going to put this as the image and Main header I'm going to change this to motion dot div like so and I'm going to make sure I change the closing tag over here it's marked by the error red squiggly line and below this the only thing we actually need to do let me make sure I grab the correct position I'm going to write on viewport enter so this motion div allows us to determine when or we basically can trigger a function when we enter that viewport and to do this I'm just going to do set selected page like so I'm going to pass in selected page.home and that will allow us to have the the red text come back when we scroll back up so initially we start with the selected page on home if we go down to the benefits section it goes to that but if we go back to home it's going to switch it and that's what this on viewport enter will be doing we just don't have another page so I can't demonstrate that yet so once we get to that I'll show you so now let's go back to our app page and we are going to create our benefits page so I'm just going to copy this over and I'm going to change this to benefits and to the top I'm going to go over here I'm going to do import benefits from at scenes at slash scenes slash benefits we have not created this yet so it's going to give you an error obviously because this is not created that's why we have a white screen so we're going to do a new folder we're going to say benefits I'm going to pass in a file called index.tsx and inside here I'm going to write tsrfce or if RAF c e and I'm going to say this is benefits I'm going to save it okay and then from here I'm just going to get rid of the import react from react I'm actually going to import some icons so I'm going to do import home modern icon User Group icon academic cap icon so again these icons just for a quick refresher we can go to Hero icons go to this website and you can find whatever icon you want to look for so for example academic cap you can find the image and you can see what text or icon that you want to import you can choose solid you can do a mini all right so if we go back we're going to go over here I am going to pass in set selected page like we normally do and over here I'm going to have the prop for set selected page for the value of selected page so that's going to be the shared types I'm going to return an empty void so by the way void I don't think I've discussed this yet but this is a function but basically this represents what this function returns and when we deal with set selected any type of set of a use State function the return value is going to be avoid so there's no real type that it returns it doesn't even return anything so that's why this is just a void all right inside here we're going to just set this a section and again just to remember we're going to do ID of benefits so that react anchor link smooth scroll knows where to go when we click on that button and in here I'm going to just set the general class over here I'm going to set MX Auto with a min of height full so what that means is the reason why I'm setting this as a minimum height and that's to be full is because we wanted to take up the full height depending on their screen but that's just going to be the minimum amount so if it extends further so like in this case the height is higher it's going to fit the content size so if you're on a small screen it's going to at least at the bare minimum going to be a full height but at the biggest like if you have a taller screen it can expand beyond that depending on like how much the content space takes so that's kind of how I set this page up and we're also going to set a width of 5 6 so we have margins on the left and right and we're going to set padding in the top and bottom section of 20. so that will set up our section layout and now I want to go in between the sections and we're going to be writing our code that we need over here so so to start off I want to do the on viewport enter so what I'm going to do I'm going to grab motion actually I should just do motion like this it is not importing so instead I'm just going to write motion from framer motion like that I'm going to set motion.div and we are going to go to home and we're just going to copy what we just did before and we're just gonna paste it over here I'm going to change this to benefits so again this is just for the highlighting of where we are on the navigation okay so we're going to start with building let me make sure I have that correct so I'm going to have div like that we're going to start with this Heather section so on our page let's actually save it see if we have any errors and it seems like so if you have the anytime you see a white screen you can just do alt command I or alt control I and you can see what the error is so right now it was just not reloading I'm not exactly sure if white seems to sometimes not reload I don't exactly know what the reason is but anytime you don't know what's going on open up the console it might give you a clue on what's Happening so I'm going to just close that go over here it doesn't seem like we had an error we just needed to refresh it so I'm going to close this close our home and we are going to proceed with creating this part so this is going to be a div actually this is going to be a H1 tag so this is a header tag I'm going to say H1 we'll give it a class name basis three-fifth because we want it to take three-fifths of this space with a font of Montserrat so one of the fonts that we use with the text of three XL size and we're going to set this to be a bold and we're going to say more than just a gym but actually since we're going to be reusing this header text like here we're going to be using it over here over here so on and so forth we can actually extract this component out so here we're going to be making a reusable component we're going to call this H text TSX I'm going to do TS RAF c e with h text and I'm just gonna cut everything out over here and paste it within here and again like before we're going to have a children inside and we're going to be passing in children like so and in here we're going to do children it's going to be react.react node like so now we have a reusable H text component so if I go back over here I'm going to do H text and it's going to be able to use intellisense and we automatically imported it I can do that and we can pass in more than just a gym more if she needs to be capitalized so gym and it doesn't seem like we're getting anything actually let's refresh it yeah for some reason sometimes not exactly sure why but light doesn't seem to all the refresh at times so just refreshing the server will work all right so back to where we were at we have more than just a gym right here so the text is of good size then we're going to give it the paragraph tag and I'm not going to write this out but I copied and pasted this text you can just pause the screen and take a look right here so just copy this text if you want to but you can write whatever you want like that okay and then here I'm going to give it some class with a margin y of five so top and bottom we have a margin with text of SM I'm going to save it and we should be able to see what we need to and then also if you take a look this should on the full screen this should only take three-fifths of this space whereas this one's taking the entire width and also when you look at this on smaller screens we're having it's a little too close to it so I'm going to add some Martin on big screens talking to margin when we do on medium screens we're going to do a margin y of five with a margin or on medium screens we're going to also have a width of three fifths actually this should be like that it's not if I go that's a width of three-fifth we have a little more space at the top on smaller screens thank you okay and then after this okay so right here I'm going to add Heather comment so this is a header section and the next section I'm going to call the benefits section and the next thing we're creating is going to be this section where it's aligned vertically on small screens but when you go to bigger screens this should be left to right and we're going to have we're going to have an icon with the circle around it a header text some description and learn more that actually just takes us to the contact desk now in a real application you're going to take them to a different page but I want to keep this website scope a little smaller so this is just going to take us to contact us all right so I'm going to go back I'm going to look at this and we're going to be filling each part out so I'm going to have a div and what I want to do is on bigger screens I want to give it a flex so if you take a look at the final build on bigger screens we are going to have this flexed next to each other versus smaller screens this should be vertically aligned so I'm going to do MD Flex the items Center so we're centering it vertically and we're going to do justify between so they position each other with space and gaps so we're going to Gap of eight and a margin top of five so that will be our parent component of the benefits and below this we're going to have reusable components so typically if there's three elements you may or may not need to separate this out into a component but I want to get I want to show you guys something about typescript so I'm going to actually make this reusable so I'm going to create something called a benefit actually I'm going to map out something called benefits dot map and inside here actually this would be lowercase we're going to set this as benefit like so and we're going to have a component called benefit now I'm going to fill this out and I'm going to show you everything that's happening here so we want to use some kind of array that has all the information for example in the array we're going to have the icon we're also going to have the text for the title and then the text for the description and we're going to do that for each one of them so we're going to create an array of objects that will contain all this information so I'm going to go up I'm going to write cost const benefits and I'm going to set an array with an object and it's going to have an icon and that's going to represent home modern icon with a class name of H six width of 6 and then I'm going to make sure I do a closing tag like so and then put a comma I'm going to do title I'm going to use state of the art facilities and description the description is just going to be random text you can put whatever you want this is the text that I'm putting so I'm going to save it like that so now I'm going to repeat this two more times I'm going to change this to User Group showing no space and I'm going to say hundreds of diverse classes I'm gonna paste this over here and then over here I'm going to do academic cap and then the right expert and pro trainers I'm going to paste this over here into the description so now we have our information as well so for typescript we can make this more explicit and have a specific type so we can set this and the way we set this particular type and tell typescript that this is an array of objects we can do something like array of object like so and that will tell typescript that this is benefits is this particular type with an array however when you have an object majority of the time you should not just specify an object that is not defined you can actually set an object type and you can set icon should be um react react node blah blah blah so you want to make sure you have icon title description things like that specified but actually we're going to create something called benefit type and the reason why I do benefit type as a name is because benefits already taken by this component this is or it's going to be taken by another component so this is the name and we're going to create the shared types in this file over here so we're going to be creating the benefits structure in this shared file so I'm going to do export interface benefit type I'm going to do icon is going to be jsx dot element that's the type of the icon I'm going to do title of string and description of string so this is going to represent the object that's going to be in the array and we're going to be doing the same thing over here I'm going to say benefit type and we can oops we can use that intellisense to import it I'm going to erase this so now we are telling typescript that this is an array with a benefit type of object it's almost always preferred to make sure all your objects are typed and then very tricky situations that can help you use intellisense and it can also help you debug a lot of scenarios where you're not sure what the object type is but the typescript will tell you what's happening you can always use command click to go and see what's happening with that you can go to the page or you can just hover over it and you should be able to see it okay and then if you go down over here now this part's optional because now now typescript knows what benefit represents but you can also type this over here we can say benefit type like that so now anytime we use benefit over here typescript is going to know that it's going to have this particular object and sometimes you want to be explicit and there might be tricky scenarios that were it does benefit so we're going to try it and then here I'm going to give it a key of benefit title because anytime you're looping through an array you always want react to node that has a unique key and benefit title it's not going to be we're not going to be using that key anywhere else so we're going to set the icon to be benefit icon and again this is a component we haven't created yet so we're going to be creating that shortly so I'm going to do benefit dot title description and I'm going to be setting that to be benefit Dot and as you can see we have intellisense now knows that we know whichever property exists so you can make sure you don't have any bugs using that if I for example do the script and I accidentally spell this incorrectly like this it's going to tell you that doesn't exist did you mean description so this is why typescript can be very helpful we're going to do set selected page as well and we're going to pass this in because we are going to have a button that goes to the bottom so that's what learn more is going to be using so with this I'm going to create a new file in the benefits folder call it benefit.tsx and here I'm going to do TS rfce and we're going to have the benefit component so inside this benefit component we're going to have a number of items so we're going to start with a div and we're going to have some styling over here and we're going to be styling this entire box out so I'm going to start with the class name and it's going to be margin top of 5 with a rounded border radius with rounded MD order two that's two we're going to do border gray 100 with the pixel or not a pixel um padding in the X direction of five padding y direction of 16. and then I'm going to Center the text as well I'm going to save that and on the next line I'm going to write a div and we're going to be aligning a few things so we're going to say class name margin bottom of four with flex and justify Center and inside this what I'm creating right now is going to be this Circle I'm going to have a div like so with class name and it's going to be rounded full so that means it makes a circle we're going to give it a border of two a border of gray 100 background primary 100 like so and a padding of four and I'm going to pass in icon and I know I haven't passed the props in yet so let's actually do that so I'm going to do icon which is one of those title description set selected page and we're going to fill this out in the type props like we normally do so I'm going to set this icon to be jsx dot element I'm going to set the title to be string description should be string as well set selected page should be a value set to selected page and we're going to be importing that this should be avoid as well I'm going to remove this react anchor link and actually I'm going to import anchor link as well like so because we're going to be using that okay and then below this particular div on line 18. I'm going to do H4 with the class name of font bold and this should be a title so that's just going to represent the title over here and below this I'm going to have a paragraph tag with the description and we just want a small margin of Y in the of three and I'm going to do anchor link so and we're going to have the same learn more text that you would see on the landing page so we're just going to go to our home page and we're just going to go over and we're going to see the learn more and we can just copy this essentially we're just going to replace the anchor link and that should I believe should be pretty good and right now if we go to our build we're going to see an empty screen and that's because if you go back to the index page benefit has not been imported yet so I'm just gonna erase the T add the T and then you can see that we have our thing so now we come back and we can see the benefits so if I go grease here we have it all flexed out properly and everything looks pretty good to me so now if you refresh it you can see there's no animation but if I go to the final build we're going to see an animation of here we're also going to see the benefits come in staggered one at a time so there's a way to do this without adding motion div to every single one we want to be able to stagger sequentially and so there's a way to do that using child variance and so the way we're going to start with is going up on here I'm going to write const container because this represents the parent I'm going to set this as hidden and I'm going to pass this as visible should be transition and we're going to use a property called stagger children so this will stagger all the children below this container so all the immediate divs like the child descendants we're going to be staggering them with a 0.2 second delay so the way we do that is we go to the benefits and we're gonna convert this to a motion.tiv and we're going to add the other properties that we normally do so we're going to do initial and we're going to set hidden as the initial while in View and we're going to set this as visible viewport is equal to Once true amount should be 0.5 like we normally do and then here we're going to do variance instead I'm going to pass the container in here but we're still not done yet we need to go to the benefit component and here we're going to import motion as well so I'm going to do motion import that and let me put some space so right here I'm going to add motion.div and I'm going to do variance I'm going to pass in something called child variant which we have not created and we will do this right above so I'm going to do const child variant is equal to Hidden with an opacity of zero we're going to have a small scale change so it's going to be 0.9 at the beginning and below it I'm going to do visible and we're going to do opacity of 1. and we're going to set that scale to be one like so so with that let me just see refresh it and as you can see we have a staggered animation pretty neat we have a motion.div with parent uh parent variant that sets the container and then you have the child variance that sets the motion animations for the immediate child so let me close everything so I don't have this header text animation so let's do that so to do that it's pretty simple so I'm going to just change in the header of our benefits component I'm going to change this to motion.div and I'm just going to go to our original home and we're going to just copy something like this over to our benefits page so this is essentially the same properties we don't need to make it super fancy it's up to you if you want to do like more fancy animations you can look up the documentation if you want to do those but a lot of it's just experimentation but here I'm just going to get rid of the delay so now we can see we have this animation popping up and then animation comes in below this for the benefits cool now we're still not done with the benefits page we still have this graphic we have this text we also have these little decorations as well behind this so now this is what I mean by relative this is why having this as relative is much better than absolute positioning so this image right here for example this is positioned relative to this title text so it's top and then left now if you go to mobile screens it's going to move over here because it's relative to this however if you were to use absolute position let's say you were putting this maybe 50 or 60 percent from the left side or 30 or 40 from the right side if you're positioning it through that direction what's going to happen is if you go to smaller screen it's going to be positioned on top of this image or it's just going to be above or below it's going to be kind of weird so having a relative position is very important sometimes so you don't have nightmares with responsive otherwise you're going to have to manually say oh at this type of screen we're going to position this in a certain position for absolute so I can tell you it gets to be a huge headache when you have a lot of those elements so it's best to see if you can do relative or Flex if you possibly can sometimes you cannot get away with it but a lot of times you can find ways so it'll save you a lot of headache from doing so so here I'm just gonna close this a little bit so we can actually implement it so below our benefits section I believe we have a closing tag right here so below the first one below the first one we're going to have a section called graphics and description and I call this closing div I'm going to have a section called graphic and this is where our image will be located then we're going to have a description and we're going to have a div for this one and inside this foreign we're going to have a section where we have the button as well some button and then we're going to have a title we're going to have the title like this and then we're also going to have a description like this so to start off I'm going to have a div over here I'm gonna have a div over here I'm gonna say class name relative so this description we're going to start by putting this we're going to start with that so inside here if you remember like last time we're going to do a before tag over here so I'm going to do class name before I'm going to set this to be absolute and position it negative top negative top negative 20 and before we are going to do left negative left sorry negative 20 we're going to do before of Z of negative one and before with content abstract waves so that's the Tailwind content that we set up before so now this is going to give us that image behind relative to the text we will create right here and then inside of here I'm going to have a div I'm going to write H text that we created earlier and I'm going to do Millions of happy members getting I'm going to put a little bit of a space like this that's how you force the space and we're going to do span class name of text of primary 500. and we're going to do fit so that's how you can pass in a span inside our H text that we created we'll have millions of happy members getting fit text inside here so let's take a look there we have it it's a little position off but we'll be fixing that shortly because we're going to have an image above this all right and then next thing is going to be the description over here so I'm going to just take the div this we're actually going to have two P tags one that represents here and another one that represents here the reason why I split is just so we have more control and ability to add more margins so I'm going to have two P tags and inside here I'm just gonna copy and paste it again it's up to you you can pause it and just like write that in same with over here or you can just go to like my repo and just copy and paste it if you like so going to this I'm going to have a class name of margin y of five or m y of five I'm going to do the same thing for the second one except this one's just going to be margin bottom of 5. and so we'll have proper space so the space between this text is as expected and then we're also going to do the button below so we're going to do div and by the way this button also has this image Associated relative to it so the image is relative to the join now I know you guys might be getting sick of all the before tags but it's pretty nice once you get the hang of it so we're going to do class name I'm going to set this to relative margin top of 16. inside here this is where we're going to have our before Tags I'm going to set this as class name for absolute I'm going to set this to be from the bottom instead of negative 20. and before we're going to set a right of 40. and with the before of Z negative one so we have it positioned behind everything and we're going to do a content of sparkles and inside here the button is going to be using action button because we can reuse that once again and passing in set selected page set selected page as well and inside here I'm going to say join now so I'm going to save it see our current build and we have our image cool so now we want to deal with the image so if we go back up we can go to the graphics section in the graphics section I'm going to have a class name of MX Auto with an ALT of benefits page graphic and we do MX Auto by the way because we want we just want to Center the image in this section and we're going to do benefits page graphic like so it seems like I did not import that benefits page yeah I definitely did not import it so I'm going to do import benefits page graphic from at slash assets slash benefit page graphic.png and save that so if I go down to the image we have our image already and then right here with the graphic in the description we're going to have to do flexbox for this so I'm going to do class name I'm going to set margin top of 16 . so some space on the top oh by the way you can you can already see the image over here the problem is we don't have Flex on bigger screens so that's what I'm going to fix I'm going to vertically align it do it Justified between when we are flexing we're going to do a gap of 20. and above medium screens I'm going to set margin top of 28. and Flex on larger screens so if I open this up we are going to see we have a margin over here or not margin we have a flex with them aligned left and right and this has some margin as well and this is centered in the left side perfect and with that we're pretty close to finishing our description section but we want to just add animation so to do that I'm going to go over here this actual class name I don't think you really need relative I don't know if I showed you on screen I might have cut that off for some reason um just we can add a motion dot div over here so motion.div and we can use what we had before with other properties like this not not the benefit section but in the header section we can copy all the properties over here and we're going to be reusing that and again feel free to change this as to whatever you guys want so in this case all I want is gonna I want this to start from the right side this time I'm going to pass that in and we're also going to do the same thing over here with the description section so right here surrounding the description I'm going to change this to motion div I'm going to pass all the properties we have and give this a delay of 0.2 so it kind of staggers a little bit because if I refresh we have that and this actually should be coming from the right and there you go we have our benefits page all set up nice little animations going so so the next page we're going to be building is going to be our classes page so to do that I'm going to close this I'm going to go to the app page and I'm going to create our classes component with set selected page I'm going to close this I'm going to create an import as well import our classes from at slash scenes slash our classes and this should actually be capitalized we're gonna save it then we're going to create a new folder and we're going to call it our classes inside here I'm going to create a file called index.tsx I'm going to do TS or afce and we're going to call this R classes like this from here I'm gonna pass and set selected page we're going to pass it over here as well set selected page you're going to pass in value with selected page like this and make sure you import it and we're going to do void like this I'm going to get rid of react and here I'm going to import a number of images so I'm going to import image one from at slash assets slash image one dot PNG like so I'm going to copy this paste it six times grab that as two three four five and six all right and then from here I'm gonna go down change this to section and in here with the class name I'm going to pass in the width of full with the background primary of a hundred I'm padding in the y direction of 40. and I'm going to give this an ID of our classes both lowercase and no space and inside here like before I'm going to do motion dot div actually we need to I don't know why um the intellisense doesn't grab the motion from framer motion but we're going to have motion over here we're going to have a div close it and we're gonna do on viewport Port enter and we're going to pass and set selected page with selected page dot R classes and this needs to be lowercase a like so and from here I'm going to get this out of the way to get the animation coming in so I'm going to go down over here I'm going to do motion dot div I'm going to close it I'm going to pass in some classes like MX Auto with a width of 5. six and I'm going to go back to app go to home I'm going to grab all these properties and this should be pretty much identical so we can just save it and we'll have our own animations I'm going to create a div over here I'm going to pass in h text like so I'm going to pass in our classes I'm going to pass in a paragraph tag after that copy this over here go to our paragraph tag I'm going to say class name with p y of 5. and I'm going to say class name with MD width of three fifth like so and I'm going to save it and now let's double check everything's working if we go down and see our benefits and we see our classes so we're still missing some margins but we'll be taking taking care of that So Below this motion div this is where we're going to add a side scroller so if you take a look at this there's a way to do side scrolling I'm going to leave a link in the description on different ways to do side scrolling but the main idea is that you want to do overflow of Y hidden and then overflow X Auto so left and right has basically a certain width and you can make it that the smaller lower container has a smaller width than the outer container so that we have something that overflows and I'll show you what that means it's a little weird to look at or think about but it's pretty simple in practice so we're going to give it a margin of 10 on the top and we're going to give it a height of 353 pixel now this is a height that I decided looked good so it's not some kind of a specific number that's just something I experimented with and here I'm going to do overflow of X I'm going to set this as Auto and I'm going to do overflow of Y I'm going to set this as hidden as well inside here I'm going to give it a UL tag so we're giving a list of items and I'm going to say class name give it a width of 28 000 pixels so this is the longer width this is how we get overflow happening child container has a bigger width than the actually so we have a child container that has a very large width while the parent container is just entirely full and here we're going to say white space no wrap so we don't have any white space left over so we're just going to have a bunch of images aligned next to each other but if you take a look we have something that comes over the text or the image when you hover over it so we're not just going to have an image we're also going to have different text and we're going to use before tags to implement this so like before I'm going to create an array of objects and I want to show you one last thing about typescript that we can show you it's a pretty small thing but it's very convenient so I'm going to create a class like this and now actually this should be lowercase classes like that we're going to have an item we're going to be using the index so we're going to go up to the top I'm going to grab and create a variable called classes and then create an array of objects so the objects is going to consist of name we're going to say weight training classes with a description and this is just going to be random oh didn't mean to click that I'm just gonna this is gonna be random text so I'm just gonna copy it and paste it over here so now for every single one of these I'm going to have the same description so I'm just going to copy I just copied this because it doesn't really matter so we're going to do image and I'm going to set this to image of one actually I'm going to copy this entire object I'm going to paste it multiple times like so and it seems like I don't have a comma at the end so make sure you add these commas and there is one two three four five six so perfect so I'm going to change this to 2 3 4 5. 6. I'm going to change this one to training classes this one's going to be Fitness classes this one's going to be Adventure classes this one's going to be Ab Core classes and we're going to have yoga classes like that I'm going to save it so what I want to demonstrate is here we can just do an array and we're going to create a type called class type that we have not created but instead I'm going to just grab this line I'm going to delete it I'm going to go and maybe just delete this one as well so what happens in this scenario maybe sometimes you don't want a description for some cases and you want to make it optional so fortunately there is a way to do that that's pretty simple and we can go into our types and we're going to be creating another interface we're going to call this class type and I'm going to do name with the string description there's a string and then image is also going to be a string so with that we have our class type but how do you deal with the scenario let me actually import that first how do you deal with the scenario where you don't have a description for some of this data that's pretty simple you can just add a question mark over here so when you add a question mark it means this is optional so it means it could just be null it just might not exist but we can add it if we would like to so it's it's pretty important to have something like this because sometimes you have a react component but you don't want to always pass in things and this is one of those scenarios where this kind of helps so you want to make sure that you set the proper optional params as needed and typescript allows you to add that and over here I'm going to add Class Type as well and over here I'm going to have a key and the key needs to be a unique value so if I do item.name it's possible that it gets overlapped with something so we want to just this is a neat way to make it truly unique so you're gonna suffix the item name with an index so that will almost always never overlap with anything else and over here I'm going to set the item.name the description and we're going to set item.description and as you can see this description is going to need to be optional because some items do not have a description over here I'm going to set the image and this is going to be item.image as well and we are going to create this class component so I'm going to import class from dot slash class like this and we are going to create the class components over here I'm going to do TS r a f c e and we have our class component and in this one I can remove the react I'm going to pass in name String description it's going to be optional we're gonna have a string image is also going to be a string and over here I can do name description and image and occasionally if you want you can even have default properties you can say some description so if there's nothing else we can even set an optional parameter like that makes it for very convenient so I'm just actually going to get rid of it we don't need a description if we don't need to and over here since we are in a list element I'm going to do Li for semantics and I'm going to set this as class name this is going to be a relative positioned MX of 5 inline of block let's actually get rid of this I'm going to set a height of 380 pixel with a width of 450 pixel foreign so again I'm setting the position as relative so this is the parent component and you can kind of guess what I'll do with the inner components where I'll set overlay I'll set an overlay I'll create an overlay with an absolute position inside here I'm going to give it a parent or paragraph tag and I'm going to give it a name and then the description will be right beneath it and I'm going to set an image of alt image 1 source of image actually this should instead we can set this as image as a template string I think that would make it work it's going to save that so right now this is relative but we want this to be overlaid on top of the image so the way to do that we're going to create classes for this guy and I'm actually going to create a variable called overlay Styles because there's going to be a lot of styles we need to add so I'm going to do overlay styles I'm going to give it a template string the reason why I'm doing a template streak now that regular string is because this is going to take up multiple lines first thing I want to do is giving you the padding of five I'm going to give it a position of absolute this needs to be Z 30 so it's on top of it then we're going to do Flex to make sure that we are flexed in the right position and we're going to position the name and description properly and then from here I'm going to set the height let's make this on a new line a height of 380 pixel width of 450 pixel and I'm going to do this Flex of column so we're going in the vertical direction we're going to align this top and bottom to make it easier I'm going to make sure everything's centered both vertically and horizontally using justify Center go on the next line and in here I'm going to do white space normal because white space normal no wrap that was on the parent class if I look over here this causes issues with text and text when it wrap onto the next line if you don't have this then we're going to do background primary of 500 then we're going to Center the text and then I'm going to give it a white text with an opacity of zero when we are not hovered over then I'm going to use animation of transition with a duration of 500 and we're going to give it an opacity of 90 when you hover all right and that's pretty much it so I know this was quite a bit quite a lot of styles it's just something you just look at this and you realize one thing at a time basically we have the padding we have Flex making sure everything's aligned vertically then we have white space making sure it doesn't um and make sure that it wraps properly then we have a lot of things that Center it with the height of the identical size of the image then we have the colors then we need to color the text and then we have animations for when we hover versus when it's not so opacity is zero when we not hover capacity of 90 when we do hover so it's a lot of things but a lot of it just makes sense when you're when you do it yourself it'll make a lot more sense and in here let's save it let's refresh it and our error goes away if you go up it seems like we do have some issues with the height though yeah we do seem to have some issues so let's actually address that and it seemed like it didn't refresh so if I just refreshed it everything seemed to everything seems to be working now so now we have a horizontal scroll some of them do not have any descriptions and we have what we expect the only thing we're missing is actually some of the styling for our name so I'm going to add class name I'm going to call this text of 2XL I'm going to give this one a class name of margin top 5. so now this text is bigger this is smaller and we have a margin in between so there you go that's our classes page so make sure if you're curious about the horizontal scroll check out the link in the description all right and so the last page is going to be this contact us page and this contact this page is going to be it's going to have name it's going to be an email with the message and we should be able to submit now the submit will be able to be sent to your email so if you see my portfolio app this will be very very similar so but if you haven't done it we're going to be using react hook form for a form library and form submit so that we can send the form message to your email all for free so let's get to it so I'm going to close out of these tabs and I'm going to create another component I'm going to call this contact us I'm going to do set selected page set selected page like so I'm going to close that I'm going to import select it or sorry contact us from at slash scenes and contact us will be the folder I'm going to save that and I'm going to go to scenes create a new folder call this contact us and inside this folder I'm going to call this index.tsx and I will do tsrfce call this contact us like so and I'm going to save it remove import react from react so one thing I'm going to do is we didn't install react hook form so I'm going to close out of this and I'm going to paste in actually not paste in to npmi react hook Dash form so while I install it I'm going to open up react hook Forum docs and before like I mentioned react hook form is a very nice form when you deal with things like Tailwind because Tailwind you use basic HTML CSS tags and HTML and react hook form is very good with using basic input for example if you use inputs like this reactic form is very ideal for situations like this whereas if you're using something like material UI you have to use some controller and that makes it a lot more complicated there's more abstraction I really don't like it when you use material UI with react hook form it's better you use formic with material UI and react hook form is very nice for basic HTML semantics so anyways with that being said let's get to our form so I'm going to close this out I'm going to actually run our environment and we have our page and we just need to create our contact us so I'm going to close this and actually let's look at the final build just so we can see what we need to build so over here I'm going to change this to set selected page like so and I'm going to pass that in over here with a value of selected page imported from shared types I'm going to give it a return to void as well I'm also going to import motion just get out get that out of the way and we're also going to import use form and it seems like it didn't grab it from react hook form like that for the intellisense so get rid of that I'm going to add one graphic subcontact uh page graphic from at slash assets slash contact us page graphic dot PNG and with that I'm going to save it over here and I'm going to replace this with the section just like usual and I'm going to give this an ID of contact us okay so I'm going to take care of the low hanging fruit first basically I'm going to do all the layout stuff and the things that are easy so I'm going to do MX of Auto with a width of 5 6. so there's basically gutters on the page we're going to give it a Pat Uh padding top of 24 and the padding bottom of 32. and here I'm going to give it a motion dot div and we are going to set on viewport enter I'm going to pass and set selected page selected page dot contact us so again this is for the nav bar highlighting the correct nav item when we're on the correct page so if you remember it'll take us in a highlight on the correct page so here contact us this is what that's doing just as a reminder the first thing we're going to take care of is going to be the header and I'm going to just for this one I'm just going to go straight and write motion.div because it's going to be very similar to what we have done before so I'm just going to do I'm going to pass in the class name do MD width of three fifth like that and I'm going to go back to home once again to copy this because we're going to use the same animation like so so I can save it and inside this header I'm going to do h text make sure you use intellisense to import it and I'm going to give it a span of join now and I'm going to do class name of text primary 500. so that will deal with the red color over here and we're going to do two get in shape and I'm going to do one last thing I'm going to do the paragraph tag give it a class name of margin y of five and just copy this over here save it so you guys can see what this is about so now if I take a look at my build you can see we have everything all set for a Heather so now here is where we're gonna do we're going to handle our forms so I'm going to do form and image over here so inside this I'm going to do a div I'm going to pass in class name give it some margin up top justify between gap of eight and when it's big we're going to do Flex so on smaller screens we're not doing flex but on bigger screens we're going to have this flexed out and spread between so I know I'm going through a lot of these classes fine but once you get the hang of it this is pretty much the same process that you normally do so it's not any different than anything we have done before so here I'm going to do motion.div because we're going to add more animation and give it a class name of margin top of 10 basis of 3 5th give it a margin top on bigger screens I'm going to go up copy this these values paste it over here but I'm going to change a few things instead of the X Direction I'm going to do the Y Direction and get rid of the negative so we start from the top and it's going to go downwards so aside from that everything else is essentially the same so our form so if you take the final build that's the transition we are looking for so we haven't created out any inputs in this so we're not going to see the animation yet so let's get working on that so we're going to have a form inside here so to use react hook form it's quite simple so we're just going to use a form HTML element we're going to set this as Target of blank so that when someone clicks submit we don't we go to a new page and here we're going to set on submit and we're going to pass it the function of on submit and we'll be creating this on submit function right now so if I go up I will need to create this function and this is going to need to be async and I'll show you why and this e value this is one of those rare cases we're going to use the any keyword for typescript and the reason why we use the any is because we're not exactly sure sometimes the E can be different things over here I'm not exactly sure what it is but in some cases the any keyword is used for situations where it's ambiguous you're not exactly sure what's going to happen maybe you have something that has multiple types it's best not to waste too much time trying to get extremely strict at typing that's my person I know some people will knock me out for that but sometimes it's just not worth the time wasting several hours just to get a type correct I don't think that's worth if you're wasting so much time trying to figure it out and sometimes it happens because you just don't know what's going on it's better you just have it set to any and then later on if you do have time then you can come back and you can add it then you might know you have a better idea but here when we on submit we're just going to wait for the trigger so the trigger will be coming from use form so let's actually create that so in on inside our use form hook that comes from react hook form there are some things that there are some elements or some variables that come from it that we can use so we're going to use register trigger form State and we're going to structure out errors from form state so trigger basically allows us to validate our form if needed and if it is not valid we want to make sure that we don't go to a new page or though we don't refresh it because a default submit form when you hit the submit button it'll refresh the page or it will go to a new page but we don't want that to happen we just want the errors to show so that's why we're kind of doing this and Trigger is basically an asynchronous function so these other ones we're going to be using so if I go down back to the form we can have a method and we're going to call this post there is going to be an action and I'll show you the action that we need to send and we're going to be using form submit so form submit has there's a link description below but it's very simple all you have to do and last time I added this I added my link and you a lot of you guys copied it so you guys sent an email to my email but basically you just want to do action https colon colon or slash form submit.co slash your email not my email your email add your email first and what it's going to do I've already done it and I'm not going to do it again I'm just going to copy the same URL I had last time because it'll send an email to you but you need to send it to your current email your email that you want it to be sent to and the first time you submit in the form it's going to send it to that email but the problem with that is you don't want your email to be exposed for spammers and bothers so what you do is when you get that email from form submit they will ask you if you want to have a Anonymous URL email and once they give you that that's what you place over here in this section I know it's a little small that's what you need to place in this direction so this is the anonymous URL that I got from my email so don't put this don't copy this put this as your email so by doing that it automatically wires your email to be where the form submissions will go to and it's very simple this is completely free and you don't have to do anything aside from that and make sure we're going to be setting up the inputs as well so over here I'm going to do input I'm going to make sure I close it like so and I'm going to give it some classes give it a width of full rounded so border so we're going to have rounded borders give it a background of primary 300 PX of 5 p y of 3 placeholder of white text actually placeholder should be no dash like so and you know what since all of these will have the same styling I'm just going to copy this I'm going to cut it out go to the top over here and I'm just going to write const input styles put it in the template string like so make sure I get rid of the double quotations and we can just use input styles for our class names so I'm going to do input size like that I'm going to do type of text a placeholder of capital name and this is where react hook form does its work so you're going to use a register function so basically react hook form is registering your input by passing in the name so this basic input is going to be saved into the name name property inside react hook form then from here you can pass in other parameters and you can check the documentation for all the possibilities and we can say this is required true so if you don't have required true people can leave it empty and it'll still go through otherwise if you have this as true it's going to not pass when they validate and we're going to give it a max length of 100 make sure they don't give you an extremely long input and then from here we're going to add Air Conditional so one thing very nice about reactive form is you can set all of this up and it's very easy to understand and easy to write so we're going to have an error condition so the way you handle errors is that you grab the errors value that we just structured from react hook form and we grab the name since we registered as as a name so it's going to check if there is an error then we can show this error validation or error text so the way that we do that we're going to set this as margin top of one text of primary 500 and I'm going to say errors .name.type is going to be required and we're going to say this field is required like so but we also need to have an error check for max length so by doing that we can just say type if it is equal to max length so this type corresponds to whatever you pass in here we can check if that that type of error occurs so we're going to say max length is a hundred character so by doing that we now have both error validations for both of these and it's all quite simple and it's all nicely put in one section you can see everything that's happening with the input so if you ever need to change it it's all displayed over here and it's pretty simple to handle so I'm going to copy everything that I had and paste it so I'm gonna sorry I'm gonna copy this over one more time and paste it down over here and we're just going to change it as needed so the placeholder should be email the register should be should change this these two as email same with this and for email we can do required true and right here you can write this long pattern I'm just going to write it for you it's quite long this is going to check if it's an email but if you don't fully understand you can just copy it from stack Overflow it doesn't really it just depends on what your like if you're building this for a real application you're just gonna this is going to depend on the requirements plus minus plus at a through Z 0 through 9 dot dash and we're going to do plus slash Dot a through z closing two comma closing brackets slash dollar sign question mark I okay yeah I don't know what's going on over here like that let me just I have it written down over here I just want to make sure I've written it down correctly yep that is correct so that should register our email and right here we're just going to change this to be pattern and we're going to say invalid email address and then finally I'm going to copy the first one one more time because this is more similar to the first one move this over here this should be message this one should be message as well and highlight the dot name that should change to be message like that in the max length for this one should be 2000 instead so the only thing I want to change over here this is going to be 2000 characters like so [Music] all right so now let's take a break and actually see we have everything like that we don't have our submit so we can't check our validation so what we need to do is we're going to add the button so below this message I'm going to add a button and this should be a type of submit and we are going to give this a lot of classes so I'm going to give it margin top of five rounded LG background of secondary 500. PX 20 py of three let me check then we want a transition with a duration of 500 a hover of text and white and we need to add the text of submit as you can see we have we have our submit name email message the only thing kind of missing for some reason our margins is not working so if I go back up let's look at our overlay styles it seems like I didn't add margin top of five and that looks pretty good now now also the message should be taller so if I go down the message input actually should be a text area and text area can include rows of four Columns of 50. I'm going to get rid of type of text and give it a placeholder of message actually we already had the blade silver so I'm gonna get rid of that so now it's looking pretty good so if I hit submit it's going to give us validation checks so now if I hit submit when this is good no invalid if I try this where this is not an email it's going to say invalid email address I'm gonna have that otherwise if I do give it a proper email it's going to submit it's going to take you to this page this form needs Activation so we've sent you an email containing an activate form link so basically it's sending sending a form to your email where you need to activate it and that's where you can add your Anonymous email so if you want more details it's pretty self-explanatory I would just say follow the instructions so we're going to keep going because I don't want to focus on that that is not the primary part of this the last thing I want is going to be this graphic over here if I go on this we can see that the Evolve text only happens on bigger screens whereas if you go on smaller screens The Vault text disappears and we just have an image under this so another responsive layout nothing too fancy So Below the form and below the motion div right below the closing form I'm going to have a motion dot div and this will be for our image as well so I'm going to hit class name and I'm going to set this as relative again we're going to be doing the before tag with the Evolve text in the back and if you want the challenge you can try this yourself but we're going to do basis of two-fifths so that is was it forty percent how yeah 40 percent and on bigger screens we're going to do margin top of zero and in this motion div I'm going to go up I'm going to just copy everything we have over here so we don't need anything quite different but we're going to add a delay for this one so we have a nice staggered animation which always makes it look nice and we're going to have a div inside here and we're going to have an image this particular div is where we're going to have the content graphic before so class name and we are going to do what we've kind of did before with MD before content evolve text like so so only when it's on bigger screens we are going to use it before selector we're going to give it a width a full we're going to make it absolute positioned and we're going to position it from the bottom of negative 20. and over here I'm going to do right of negative 10. I'm going to do Z of negative 1. so again a lot of class names but one of those things where we place it behind something it is not too bad and here I'm going to give this image a class name with the full and that's all we're going to add for this one we're going to give it an ALT of contact us page graphic and a source of contact us page graphic so I'm going to save it like so so now let's check our build refresh it we can see our image coming in and then on bigger screens let's refresh it we have it all coming in perfect the only thing I don't like it doesn't seem to be aligned correctly they should be on the same height so if I look at this this should be on the same height so let's fix that so to fix that issue we're just going to change this to margin bottom instead of margin top so if that happens we can now refresh it we can go over here everything is aligned we just have a margin bot of 5 in between them and by the way if you're curious about form submit you can go to your email right here I might as well show you guys we have action required activate form submit on this page so when you do that you have form submit over here they're going to give you a random like string so make sure you replace that and you can hit activate form so where I had the action you can just replace that and your form submit should be good to go finally the last thing I want to cover is going to be this footer which is pretty simple so if I open this up you're just going to have three items aligned with each other with flex so if I go here and then we're just going to align it vertically when it's small enough so I'm going to close this index out I'm going to go to our app create a footer like so go up here I'm going to import further from at slash scenes slash footer like so so this is this is a typical you know layout situation and you should always try to strive to do it with flex blocks once you get good with it chances are you're not going to have too many problems so here I'm going to have a footer folder I'm going to create this to be index.tsx and I'm going to call this TS RAF c e I'm going to create a footer and I'll get this pretty quickly [Music] if you need um if you need layout practice I challenge you to try and do this on your own it's not too bad but it's a basic concept so here I'm going to import logo from at slash assets logo dot PNG and erase that and in here I'm going to change this to footer and close it like that give it a class name BG primary of 100 py of 16. inside this I'm going to give it a div or the class name and actually I will have our page open while we do this I'm going to do justify content with MX of Auto with a width of five six gap of 16 and flex when we're on bigger screens inside here I'm going to have a div I'm going to create three divs actually so this represents each of the three sections and this class name is going to be margin top of 16 basis of one half for that section and margin top of zero inside here I'm going to give it an image with alt of logo source of logo like so give it a P tag and I'm going to just copy and paste the text that I have so you can see right here doesn't really matter basically three lines of text makes it look nice and then in here you're going to have a class name of my five like so and below this I'm going to have a p with a copyright tag like this and we're going to have the first section I'm going to refresh it we can see we have the first layout already so again this is flex so this is going to take one half when it's you know on this but right now there's nothing and this is why Flex basis is nice just FYI basis allows us to take the entire width if there's nothing else to compete with it so if there's nothing else it's going to take the entire width that's why bass is very nice to use it automatically knows how to do it and then from here inside this div we're going to do class name I'm going to set this margin top of 16 basis of 1 4 MD Mt 0. thank you H4 like this pass in links give it a class name a font Bolt in here I'm going to do p with class name with margin top five and I'm just going to do I'm just going to write some random text that I already had and I'm going to paste it over here because this is going to be the same at gravida ID at TM and finally I'm going to have the final text or final paragraph tag the bottom oolam corporate vivamas and this last one is quite identical so I'm just going to copy and paste it over here we're just not going to have the same thing this is H4 we're going to say actually I just want to get rid of one let's see contact us like that I'm just going to write random text attempt is that just matters resists followed pet you guess like that and this one is doesn't require any class and we're just going to say 333 -425 -6825 if you want to reach a random person's number you can call that I'm going to save it refresh it and we get everything that we need [Music] perfect everything is working as expected let's actually check on full screens yep this is expanding as needed maybe the basis is a little bit incorrect it seems let me double check if I go over here increase this one seems to take less so let's actually fix that seems like the issue was Vite it did not restart so this was not getting aligned properly but this is one-fourth one-fourth this is one half so now we have everything that looks pretty good if you go smaller screens these should be aligned on top of each other and with that we basically have our entire website basically set up we have the main page and then we also have responsive design we have all of these we have the form submit all the validation so the next thing on our agenda will be to deploy our app so the first thing we want to do is create a new GitHub repository so make sure you go to GitHub if you don't have an account sign up and we're going to create a new repository so I'm going to select the owner I'm going to create a repository name I'm going to call this gym typescript like so make it public we're going to create a repository and once we have that we're going to be set up with this page we're going to follow most of these instructions but we're not going to deal with readme we're just going to init commit and we're going to remote add so I'm going to copy this line right here I'm going to go back to my code base open up my terminal make sure that you have a git ignore file with node modules installed right should come with it so it shouldn't be a problem but just in case and here we're going to do get a knit and then git add dot so it adds everything I'm going to write git commit Dash M save first commit and then I'm going to paste what I copied before and then I'm going to do git push origin master and with that everything should be pushing up to GitHub once it's fully pushed I'm going to go back to this page I'm going to refresh it and now we should be able to see our repo and we're going to make sure that we do not have the node module file so everything is pretty good so from here we're going to go to Cloud flare pages so cloudflare pages is similar to vers cell if you're familiar with it basically it allows you to run static hosts just like for cell all for free using a repo so I'm going to hit sign up okay once you've created your account you're going to verify your email and do all of that good stuff so from here I'm going to hit on pages connect to git now I'm going to click that I'm going to connect GitHub I'm going to click on my account and I'm going to do only select repository I'm going to choose my application and then do install and authorize should take us to the cloud for Pages deploy a site from your account and we have our account already selected and our repo I'm just going to click on that hit begin setup we're going to use the master production and here we're going to run the npm Run build command so if you take a look over here you can go to package.json npm run build is what we want the package to run and we want the output directory to be and the output directory is going to be dis-t root directory environment variables we don't need any environment variables so we can just save and deploy and let's just wait for this to finish so in my case I actually ran into an error because of the version I'm using I'm getting some weird error that says experimental warning esm module loaders experimental and I looked this up this is due to having a different node version so the nerd version that I'm using is version 14.8 18.1 so what I'm going to do is you need to configure the environment variable over here and we need to set node version 14.18.1 so I ran into an issue I'm trying to run the environment variable so if you need to add the environment variable you might get another error because you already tried deploying it so if that happens you can do edit version add a note version over here we can save it we can go back to deployments and right here since it's status of fail error we can do retry deployment like I just did and let's just wait for that and after you have done that you can now see that we have completed every little step everything is checked and now I can go to our pages over here and we can see our entire website in full awesome and with that we have our entire application fully complete fully responsive and working and deployed on different website now we also completed the nav bar with tricky layouts we've dealt with responsive issues that may arise and we have a configuration where we have this background that pops up above it we've also covered this image and the home page and its tricky layouts as well as images that are supposed to behind other things and then we have join now learn more we have the benefits page as well as our classes with the horizontal side scroller and then the contact us page where we do we use react hook form with validation and we have a submit that takes that information and sends it to our email all completely free as well as the footer where we deal with another layout concern and then we also used typescript and I introduced you basic typescript on how to do default typescript items as well as typescript enums I've taken care of arrays and objects and understanding how you can do explicit typing as well as talking about inferred type and here in this tutorial I covered a lot taught you the basics of typescript as well as some more advanced topics of typescript I've shown you how you can go about it now I hope this gives you a good understanding of typescript and how to build an application with it please like comment and subscribe if you like this content and I will see you next time

Channel: EdRoh

Views: 79,244

Keywords: EdRoh

Id: I2NNxr3WPDo

Length: 243min 49sec (14629 seconds)

Published: Wed Dec 21 2022